Wikizone - Benutzerbeiträge [de]

PrivacyWire - ProcessWire Modul

2022-04-25T15:13:31Z

134.3.74.15: /* Cookie Options anzeigen */

Modul zum Anzeigen eines Cookie Banners und zum Blockieren von Skripten, Externen Medien etc. Das Modul passt das HTML an
== Links ==
https://processwire.com/modules/privacy-wire/
https://processwire.com/talk/topic/23118-privacywire-cookie-management-async-external-asset-loading/

== Quickstart Cookie Consent für ProcessWire ==
* Modul installieren (PrivacyWire)
* Labels übersetzen
* Benötigte Ketegorien auswählen
** Zuordnung der Kategorien funktioniert über data-category Attribut.
* Skripte anpassen z.B.
** Normale Skripte: type="text/plain" data-type="text/javascript" data-category="marketing"
** Externe Skripte: data-src="..."
Beispiele:
<script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"> </script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script>

<pre>

<script async type="text/plain" data-type="text/javascript" data-category="marketing" data-src="https://www.googletagmanager.com/gtag/js?id=G-DQPX4V13MY"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-DQPX4V13MY');
</script>
</pre>

== Cookie Options anzeigen ==
<pre>
[[privacywire-choose-cookies]] - Mit Textformatter

<a href="#" class="privacywire-show-options">Show Cookie Options</a> - als Link
<button class="privacywire-show-options">Show Cookie Options</button> - als Button
</pre>

== CSS ==
<syntaxhighlight lang="css">
.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{
background-color: #009999 !important;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
color: #fff !important;
}
</syntaxhighlight>

== Video Embed Opt-In==
Im VideoEmbed Plugin kann man die Kategorie auswählen (z.B. external Media)

PrivacyWire - ProcessWire Modul

2022-04-25T12:09:42Z

134.3.74.15: /* Quickstart Cookie Consent für ProcessWire */

Modul zum Anzeigen eines Cookie Banners und zum Blockieren von Skripten, Externen Medien etc. Das Modul passt das HTML an
== Links ==
https://processwire.com/modules/privacy-wire/
https://processwire.com/talk/topic/23118-privacywire-cookie-management-async-external-asset-loading/

== Quickstart Cookie Consent für ProcessWire ==
* Modul installieren (PrivacyWire)
* Labels übersetzen
* Benötigte Ketegorien auswählen
** Zuordnung der Kategorien funktioniert über data-category Attribut.
* Skripte anpassen z.B.
** Normale Skripte: type="text/plain" data-type="text/javascript" data-category="marketing"
** Externe Skripte: data-src="..."
Beispiele:
<script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"> </script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script>

<pre>

<script async type="text/plain" data-type="text/javascript" data-category="marketing" data-src="https://www.googletagmanager.com/gtag/js?id=G-DQPX4V13MY"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-DQPX4V13MY');
</script>
</pre>

== Cookie Options anzeigen ==
<pre>
[[privacywire-choose-cookies]] - Mit Textformatter

<a href="#" class="privacywire-show-options">Show Cookie Options</a>
<button class="privacywire-show-options">Show Cookie Options</button>
</pre>

== CSS ==
<syntaxhighlight lang="css">
.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{
background-color: #009999 !important;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
color: #fff !important;
}
</syntaxhighlight>

== Video Embed Opt-In==
Im VideoEmbed Plugin kann man die Kategorie auswählen (z.B. external Media)

PrivacyWire - ProcessWire Modul

2022-04-25T12:09:23Z

134.3.74.15: /* Quickstart Cookie Consent für ProcessWire */

Modul zum Anzeigen eines Cookie Banners und zum Blockieren von Skripten, Externen Medien etc. Das Modul passt das HTML an
== Links ==
https://processwire.com/modules/privacy-wire/
https://processwire.com/talk/topic/23118-privacywire-cookie-management-async-external-asset-loading/

== Quickstart Cookie Consent für ProcessWire ==
* Modul installieren (PrivacyWire)
* Labels übersetzen
* Benötigte Ketegorien auswählen
** Zuordnung der Kategorien funktioniert über data-category Attribut.
* Skripte anpassen z.B.
** Normale Skripte: type="text/plain" data-type="text/javascript" data-category="marketing"
** Externe Skripte: data-src="..."
Beispiele:
<script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"> </script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script>


<script async type="text/plain" data-type="text/javascript" data-category="marketing" data-src="https://www.googletagmanager.com/gtag/js?id=G-DQPX4V13MY"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-DQPX4V13MY');
</script>

== Cookie Options anzeigen ==
<pre>
[[privacywire-choose-cookies]] - Mit Textformatter

<a href="#" class="privacywire-show-options">Show Cookie Options</a>
<button class="privacywire-show-options">Show Cookie Options</button>
</pre>

== CSS ==
<syntaxhighlight lang="css">
.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{
background-color: #009999 !important;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
color: #fff !important;
}
</syntaxhighlight>

== Video Embed Opt-In==
Im VideoEmbed Plugin kann man die Kategorie auswählen (z.B. external Media)

PrivacyWire - ProcessWire Modul

2022-04-25T11:37:07Z

134.3.74.15: /* Quickstart Cookie Consent für ProcessWire */

Modul zum Anzeigen eines Cookie Banners und zum Blockieren von Skripten, Externen Medien etc. Das Modul passt das HTML an
== Links ==
https://processwire.com/modules/privacy-wire/
https://processwire.com/talk/topic/23118-privacywire-cookie-management-async-external-asset-loading/

== Quickstart Cookie Consent für ProcessWire ==
* Modul installieren (PrivacyWire)
* Labels übersetzen
* Benötigte Ketegorien auswählen
** Zuordnung der Kategorien funktioniert über data-category Attribut.
* Skripte anpassen z.B.
** Normale Skripte: type="text/plain" data-type="text/javascript" data-category="marketing"
** Externe Skripte: data-src="..."
Beispiele:
<script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"> </script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script>

== Cookie Options anzeigen ==
<pre>
[[privacywire-choose-cookies]] - Mit Textformatter

<a href="#" class="privacywire-show-options">Show Cookie Options</a>
<button class="privacywire-show-options">Show Cookie Options</button>
</pre>

== CSS ==
<syntaxhighlight lang="css">
.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{
background-color: #009999 !important;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
color: #fff !important;
}
</syntaxhighlight>

== Video Embed Opt-In==
Im VideoEmbed Plugin kann man die Kategorie auswählen (z.B. external Media)

ProcessWire - CookieConsent

2022-04-25T11:35:03Z

134.3.74.15: Die Seite wurde neu angelegt: „ PrivacyWire - ProcessWire Modul“

[[PrivacyWire - ProcessWire Modul]]

PrivacyWire - ProcessWire Modul

2022-04-25T11:34:41Z

134.3.74.15:

Modul zum Anzeigen eines Cookie Banners und zum Blockieren von Skripten, Externen Medien etc. Das Modul passt das HTML an
== Links ==
https://processwire.com/modules/privacy-wire/
https://processwire.com/talk/topic/23118-privacywire-cookie-management-async-external-asset-loading/

== Quickstart Cookie Consent für ProcessWire ==
* Modul installieren
* Labels übersetzen
* Benötigte Ketegorien auswählen
** Zuordnung der Kategorien funktioniert über data-category Attribut.
* Skripte anpassen z.B.
** Normale Skripte: type="text/plain" data-type="text/javascript" data-category="marketing"
** Externe Skripte: data-src="..."
Beispiele:
<script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script>
<script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"> </script>
<script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script>

== Cookie Options anzeigen ==
<pre>
[[privacywire-choose-cookies]] - Mit Textformatter

<a href="#" class="privacywire-show-options">Show Cookie Options</a>
<button class="privacywire-show-options">Show Cookie Options</button>
</pre>

== CSS ==
<syntaxhighlight lang="css">
.pricacywire,
.privacywire-banner,
.privacywire-options,
.privacywire-message{
background-color: #009999 !important;
}
.pricacywire a,
.privacywire-banner a,
.privacywire-options a{
color: #fff !important;
}
</syntaxhighlight>

== Video Embed Opt-In==
Im VideoEmbed Plugin kann man die Kategorie auswählen (z.B. external Media)

Page Loader - Beispiele

2022-04-24T09:05:20Z

134.3.74.15: /* Beispiel 1 jquery mini-modernizr */

https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets

== Beispiel 1 mit no-js Check ==
Der Loader berücksichtigt das no-js Tag im <html> und wird nicht angezeigt wenn kein JavaScript vorhanden ist.
1. Add a div just after <body> tag.

'''Direkt nach <body>'''
<syntaxhighlight lang="html5">
<div class="loader-icon"></div>
</syntaxhighlight>

2. CSS
<syntaxhighlight lang="css">
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.loader-icon {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff;
}
</syntaxhighlight>

3. Mini Modernizr
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Feature_Detection#Mini_Modernizer_.28JS.2C_Touch.29

4. Loader Script (jQuery)Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.
<syntaxhighlight lang="javascript">
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".loader-icon").fadeOut("slow");;
});
</syntaxhighlight>

== Beispiel 2 ==
(Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links.

HTML - direkt hinter body Tag (Beispiel aus ProcessWire)
<syntaxhighlight lang="html5">

<div class="loader-container" id="page-loader">
<div class="loading-wrapper loading-wrapper-hide">
<div class="loader-animation" id="loader-animation">
<svg class="svg-loader" width=100 height=100>
<circle cx=50 cy=50 r=25 />
</svg>
</div>

<div class="loader-name" id="loader-name">
<img src="<?php echo $config->urls->templates?>img/logo-negative.png" alt="">
</div>

</div>
</div>

</syntaxhighlight>
CSS
<syntaxhighlight lang="css">
/* ==========================================================
! Page Loader
========================================================== */
#page-loader {
display: none;
visibility: hidden;
width: 100%;
height: 100%;
color: #ffffff;
opacity: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
font-family: 'Gilroy-Light', sans-serif;
}
@media (min-width: 768px) {
#page-loader {
display: block;
visibility: visible;
}
}
#page-loader:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #333333;
z-index: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#page-loader:after {
content: '';
display: block;
position: fixed;
z-index: 1;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #333333;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.loader-out {
opacity: 0;
}
.loader-out:before {
transform: translateX(-600px);
-moz-transform: translateX(-600px);
-webkit-transform: translateX(-600px);
opacity: 0;
}
.loader-out:after {
transform: translateX(600px);
-moz-transform: translateX(600px);
-webkit-transform: translateX(600px);
opacity: 0;
}
.loading-wrapper {
width: 250px;
position: fixed;
top: 50%;
margin-top: -130px;
left: 50%;
margin-left: -125px;
opacity: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
z-index: 9;
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.loading-wrapper-hide {
opacity: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
transform: translateY(-20px);
-moz-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
.tp-loader {
z-index: 10000;
position: relative;
}
.loader-name {
color: #ffffff;
opacity: 0.8;
text-align: center;
letter-spacing: 0px;
padding-left: 2px;
padding-right: 2px;
font-weight: bold;
margin-top: 45px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
margin-bottom: 35px;
}
.loader-name img {
max-width: 230px;
}
.loader-job {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
font-weight: 200;
margin-top: 5px;
color: #ffffff;
font-size: 13px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.loader-left {
-webkit-transform: translateX(-40px);
-moz-transform: translateX(-40px);
-o-transform: translateX(-40px);
transform: translateX(-40px);
opacity: 0;
}
.loader-right {
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
}
.loader-up {
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
opacity: 0!important;
}
.loader-down {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
opacity: 0;
}
.loader-hide {
opacity: 0;
}
.loader {
display: inline-block;
text-align: center;
margin: 0 auto;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
.loader-animation {
text-align: center;
}
.svg-loader {
margin: 0px auto;
margin-bottom: -30px;
display: block;
-webkit-animation: svg-rotate 4000ms linear infinite;
animation: svg-rotate 4000ms linear infinite;
}
.svg-loader circle {
fill: transparent;
stroke: #ffffff;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 0, 301.59289;
-webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
}
@-webkit-keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@-webkit-keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@-webkit-keyframes stroke-color {
from {
stroke: #ffffff;
}
}
@keyframes stroke-color {
from {
stroke: #ffffff;
}
}

</syntaxhighlight>
JavaScript
<syntaxhighlight lang="javascript">
//Begin - Window Load
$(window).load(function(){

//Page Loader
setTimeout(function(){
$('#loader-name').addClass('loader-up');
$('#loader-job').addClass('loader-up');
$('#loader-animation').addClass('loader-up');
return false;
}, 500);
setTimeout(function(){
$('#page-loader').addClass('loader-out');
return false;
}, 1100);
$('#page-loader').delay(1600).fadeOut(10);

});
</syntaxhighlight>

Page Loader - Beispiele

2022-04-24T09:03:00Z

134.3.74.15: /* Beispiel 1 jquery mini-modernizr */

https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets

== Beispiel 1 jquery mini-modernizr==

1. Add a div just after <body> tag.

'''Direkt nach <body>'''
<syntaxhighlight lang="html5">
<div class="pl-icon"></div>
</syntaxhighlight>

2. CSS
<syntaxhighlight lang="css">
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pl-icon {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff;
}
</syntaxhighlight>

3. Mini Modernizr
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Feature_Detection#Mini_Modernizer_.28JS.2C_Touch.29

4. Loader Script (jQuery)Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.
<syntaxhighlight lang="javascript">
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".pl-icon").fadeOut("slow");;
});
</syntaxhighlight>

== Beispiel 2 ==
(Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links.

HTML - direkt hinter body Tag (Beispiel aus ProcessWire)
<syntaxhighlight lang="html5">

<div class="loader-container" id="page-loader">
<div class="loading-wrapper loading-wrapper-hide">
<div class="loader-animation" id="loader-animation">
<svg class="svg-loader" width=100 height=100>
<circle cx=50 cy=50 r=25 />
</svg>
</div>

<div class="loader-name" id="loader-name">
<img src="<?php echo $config->urls->templates?>img/logo-negative.png" alt="">
</div>

</div>
</div>

</syntaxhighlight>
CSS
<syntaxhighlight lang="css">
/* ==========================================================
! Page Loader
========================================================== */
#page-loader {
display: none;
visibility: hidden;
width: 100%;
height: 100%;
color: #ffffff;
opacity: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
font-family: 'Gilroy-Light', sans-serif;
}
@media (min-width: 768px) {
#page-loader {
display: block;
visibility: visible;
}
}
#page-loader:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #333333;
z-index: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#page-loader:after {
content: '';
display: block;
position: fixed;
z-index: 1;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #333333;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.loader-out {
opacity: 0;
}
.loader-out:before {
transform: translateX(-600px);
-moz-transform: translateX(-600px);
-webkit-transform: translateX(-600px);
opacity: 0;
}
.loader-out:after {
transform: translateX(600px);
-moz-transform: translateX(600px);
-webkit-transform: translateX(600px);
opacity: 0;
}
.loading-wrapper {
width: 250px;
position: fixed;
top: 50%;
margin-top: -130px;
left: 50%;
margin-left: -125px;
opacity: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
z-index: 9;
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.loading-wrapper-hide {
opacity: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
transform: translateY(-20px);
-moz-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
.tp-loader {
z-index: 10000;
position: relative;
}
.loader-name {
color: #ffffff;
opacity: 0.8;
text-align: center;
letter-spacing: 0px;
padding-left: 2px;
padding-right: 2px;
font-weight: bold;
margin-top: 45px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
margin-bottom: 35px;
}
.loader-name img {
max-width: 230px;
}
.loader-job {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
font-weight: 200;
margin-top: 5px;
color: #ffffff;
font-size: 13px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.loader-left {
-webkit-transform: translateX(-40px);
-moz-transform: translateX(-40px);
-o-transform: translateX(-40px);
transform: translateX(-40px);
opacity: 0;
}
.loader-right {
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
}
.loader-up {
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
opacity: 0!important;
}
.loader-down {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
opacity: 0;
}
.loader-hide {
opacity: 0;
}
.loader {
display: inline-block;
text-align: center;
margin: 0 auto;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
.loader-animation {
text-align: center;
}
.svg-loader {
margin: 0px auto;
margin-bottom: -30px;
display: block;
-webkit-animation: svg-rotate 4000ms linear infinite;
animation: svg-rotate 4000ms linear infinite;
}
.svg-loader circle {
fill: transparent;
stroke: #ffffff;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 0, 301.59289;
-webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
}
@-webkit-keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@-webkit-keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@-webkit-keyframes stroke-color {
from {
stroke: #ffffff;
}
}
@keyframes stroke-color {
from {
stroke: #ffffff;
}
}

</syntaxhighlight>
JavaScript
<syntaxhighlight lang="javascript">
//Begin - Window Load
$(window).load(function(){

//Page Loader
setTimeout(function(){
$('#loader-name').addClass('loader-up');
$('#loader-job').addClass('loader-up');
$('#loader-animation').addClass('loader-up');
return false;
}, 500);
setTimeout(function(){
$('#page-loader').addClass('loader-out');
return false;
}, 1100);
$('#page-loader').delay(1600).fadeOut(10);

});
</syntaxhighlight>

Page Loader - Beispiele

2022-04-24T09:01:49Z

134.3.74.15: /* Beispiel 1 jquery mini-modernizr */

https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets

== Beispiel 1 jquery mini-modernizr==

1. Add a div just after <body> tag.

'''Direkt nach <body>'''
<div class="pl-icon"></div>

2. CSS
<syntaxhighlight lang="css">
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pl-icon {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff;
}
</syntaxhighlight>

3. Mini Modernizr
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Feature_Detection#Mini_Modernizer_.28JS.2C_Touch.29

4. Loader Script (jQuery)Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.
<syntaxhighlight lang="javascript">
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".pl-icon").fadeOut("slow");;
});
</syntaxhighlight>

== Beispiel 2 ==
(Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links.

HTML - direkt hinter body Tag (Beispiel aus ProcessWire)
<syntaxhighlight lang="html5">

<div class="loader-container" id="page-loader">
<div class="loading-wrapper loading-wrapper-hide">
<div class="loader-animation" id="loader-animation">
<svg class="svg-loader" width=100 height=100>
<circle cx=50 cy=50 r=25 />
</svg>
</div>

<div class="loader-name" id="loader-name">
<img src="<?php echo $config->urls->templates?>img/logo-negative.png" alt="">
</div>

</div>
</div>

</syntaxhighlight>
CSS
<syntaxhighlight lang="css">
/* ==========================================================
! Page Loader
========================================================== */
#page-loader {
display: none;
visibility: hidden;
width: 100%;
height: 100%;
color: #ffffff;
opacity: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
font-family: 'Gilroy-Light', sans-serif;
}
@media (min-width: 768px) {
#page-loader {
display: block;
visibility: visible;
}
}
#page-loader:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #333333;
z-index: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#page-loader:after {
content: '';
display: block;
position: fixed;
z-index: 1;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #333333;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.loader-out {
opacity: 0;
}
.loader-out:before {
transform: translateX(-600px);
-moz-transform: translateX(-600px);
-webkit-transform: translateX(-600px);
opacity: 0;
}
.loader-out:after {
transform: translateX(600px);
-moz-transform: translateX(600px);
-webkit-transform: translateX(600px);
opacity: 0;
}
.loading-wrapper {
width: 250px;
position: fixed;
top: 50%;
margin-top: -130px;
left: 50%;
margin-left: -125px;
opacity: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
z-index: 9;
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.loading-wrapper-hide {
opacity: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
transform: translateY(-20px);
-moz-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
.tp-loader {
z-index: 10000;
position: relative;
}
.loader-name {
color: #ffffff;
opacity: 0.8;
text-align: center;
letter-spacing: 0px;
padding-left: 2px;
padding-right: 2px;
font-weight: bold;
margin-top: 45px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
margin-bottom: 35px;
}
.loader-name img {
max-width: 230px;
}
.loader-job {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
font-weight: 200;
margin-top: 5px;
color: #ffffff;
font-size: 13px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.loader-left {
-webkit-transform: translateX(-40px);
-moz-transform: translateX(-40px);
-o-transform: translateX(-40px);
transform: translateX(-40px);
opacity: 0;
}
.loader-right {
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
}
.loader-up {
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
opacity: 0!important;
}
.loader-down {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
opacity: 0;
}
.loader-hide {
opacity: 0;
}
.loader {
display: inline-block;
text-align: center;
margin: 0 auto;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
.loader-animation {
text-align: center;
}
.svg-loader {
margin: 0px auto;
margin-bottom: -30px;
display: block;
-webkit-animation: svg-rotate 4000ms linear infinite;
animation: svg-rotate 4000ms linear infinite;
}
.svg-loader circle {
fill: transparent;
stroke: #ffffff;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 0, 301.59289;
-webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
}
@-webkit-keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@-webkit-keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@-webkit-keyframes stroke-color {
from {
stroke: #ffffff;
}
}
@keyframes stroke-color {
from {
stroke: #ffffff;
}
}

</syntaxhighlight>
JavaScript
<syntaxhighlight lang="javascript">
//Begin - Window Load
$(window).load(function(){

//Page Loader
setTimeout(function(){
$('#loader-name').addClass('loader-up');
$('#loader-job').addClass('loader-up');
$('#loader-animation').addClass('loader-up');
return false;
}, 500);
setTimeout(function(){
$('#page-loader').addClass('loader-out');
return false;
}, 1100);
$('#page-loader').delay(1600).fadeOut(10);

});
</syntaxhighlight>

Page Loader - Beispiele

2022-04-24T09:01:25Z

134.3.74.15:

https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets

== Beispiel 1 jquery mini-modernizr==

1. Add a div just after <body> tag.

'''Direkt nach <body>'''
<div class="pl-icon"></div>

2. CSS
<syntaxhighlight lang="css">
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pl-icon {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff;
}

3. Mini Modernizr
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Feature_Detection#Mini_Modernizer_.28JS.2C_Touch.29

4. Loader Script (jQuery)Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.
<syntaxhighlight lang="javascript">
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".pl-icon").fadeOut("slow");;
});
</syntaxhighlight>

== Beispiel 2 ==
(Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links.

HTML - direkt hinter body Tag (Beispiel aus ProcessWire)
<syntaxhighlight lang="html5">

<div class="loader-container" id="page-loader">
<div class="loading-wrapper loading-wrapper-hide">
<div class="loader-animation" id="loader-animation">
<svg class="svg-loader" width=100 height=100>
<circle cx=50 cy=50 r=25 />
</svg>
</div>

<div class="loader-name" id="loader-name">
<img src="<?php echo $config->urls->templates?>img/logo-negative.png" alt="">
</div>

</div>
</div>

</syntaxhighlight>
CSS
<syntaxhighlight lang="css">
/* ==========================================================
! Page Loader
========================================================== */
#page-loader {
display: none;
visibility: hidden;
width: 100%;
height: 100%;
color: #ffffff;
opacity: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
font-family: 'Gilroy-Light', sans-serif;
}
@media (min-width: 768px) {
#page-loader {
display: block;
visibility: visible;
}
}
#page-loader:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #333333;
z-index: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#page-loader:after {
content: '';
display: block;
position: fixed;
z-index: 1;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #333333;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.loader-out {
opacity: 0;
}
.loader-out:before {
transform: translateX(-600px);
-moz-transform: translateX(-600px);
-webkit-transform: translateX(-600px);
opacity: 0;
}
.loader-out:after {
transform: translateX(600px);
-moz-transform: translateX(600px);
-webkit-transform: translateX(600px);
opacity: 0;
}
.loading-wrapper {
width: 250px;
position: fixed;
top: 50%;
margin-top: -130px;
left: 50%;
margin-left: -125px;
opacity: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
z-index: 9;
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.loading-wrapper-hide {
opacity: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
transform: translateY(-20px);
-moz-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
.tp-loader {
z-index: 10000;
position: relative;
}
.loader-name {
color: #ffffff;
opacity: 0.8;
text-align: center;
letter-spacing: 0px;
padding-left: 2px;
padding-right: 2px;
font-weight: bold;
margin-top: 45px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
margin-bottom: 35px;
}
.loader-name img {
max-width: 230px;
}
.loader-job {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
font-weight: 200;
margin-top: 5px;
color: #ffffff;
font-size: 13px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.loader-left {
-webkit-transform: translateX(-40px);
-moz-transform: translateX(-40px);
-o-transform: translateX(-40px);
transform: translateX(-40px);
opacity: 0;
}
.loader-right {
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
}
.loader-up {
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
opacity: 0!important;
}
.loader-down {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
opacity: 0;
}
.loader-hide {
opacity: 0;
}
.loader {
display: inline-block;
text-align: center;
margin: 0 auto;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
.loader-animation {
text-align: center;
}
.svg-loader {
margin: 0px auto;
margin-bottom: -30px;
display: block;
-webkit-animation: svg-rotate 4000ms linear infinite;
animation: svg-rotate 4000ms linear infinite;
}
.svg-loader circle {
fill: transparent;
stroke: #ffffff;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 0, 301.59289;
-webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
}
@-webkit-keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@-webkit-keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@-webkit-keyframes stroke-color {
from {
stroke: #ffffff;
}
}
@keyframes stroke-color {
from {
stroke: #ffffff;
}
}

</syntaxhighlight>
JavaScript
<syntaxhighlight lang="javascript">
//Begin - Window Load
$(window).load(function(){

//Page Loader
setTimeout(function(){
$('#loader-name').addClass('loader-up');
$('#loader-job').addClass('loader-up');
$('#loader-animation').addClass('loader-up');
return false;
}, 500);
setTimeout(function(){
$('#page-loader').addClass('loader-out');
return false;
}, 1100);
$('#page-loader').delay(1600).fadeOut(10);

});
</syntaxhighlight>

JavaScript - Feature Detection

2022-04-24T08:48:02Z

134.3.74.15: /* SVG */

https://kulturbanause.de/blog/feature-detection-ohne-modernizr/#comments
https://gist.github.com/tomblanchard/11290882#file-mini-modernizr-html

Moderne Websites setzen fast ausnahmslos das Konzept »Feature Detection« ein, um in Erfahrung zu bringen, welche Techniken oder Funktionen von einem Browser unterstützt werden. Dazu wird i.d.R. die Feature Detection-Library Modernizr eingesetzt. Bei vielen Projekten halte ich Modernizr jedoch für überdimensioniert, da man häufig nur prüfen möchte ob JavaScript aktiviert ist, ob der Anwender einen Touch-Screen benutzt und ob SVGs eingesetzt werden können. In diesem Beitrag möchte ich daher einige JavaScript-Snippets archivieren, mit denen ihr die notwendigen Infos in Erfahrung bringen könnt ohne dafür die ganze Modernizr-Bibliothek laden zu müssen. In Zukunft werden in diesem Zusammenhang die Feature Queries von CSS sicher auch sehr interessant. (Quelle: Kulturbanause s.o.)

== Snippets ==
=== Mini Modernizer (JS, Touch) ===
JavaScript überprüfen, Touchscreen überprüfen.

'''Ersetzt folgende Klassen auf dem <html> Element:'''

no-js => js
no-touch => touch

<syntaxhighlight lang="javascript">
<script>
!function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document);
</script>
</syntaxhighlight>

=== SVG ===
Quelle: Kulturbanause s.o.
==== Testen ob svg unterstützt wird ====
Prüfen ob SVG unterstützt wird

Um herauszufinden, ob SVG unterstützt wird, reicht folgender Code aus. Auch in diesem Fall fügen wir die Klasse .svg bzw. .no-svg in den <html>-Tag ein.
<syntaxhighlight lang="javascript">
// Prüfe ob SVGs dargestellt werden können
if(!document.createElement('svg').getAttributeNS){
$('html').addClass('no-svg');
} else {
$('html').addClass('svg');
}
</syntaxhighlight>

==== .svg mit .png ersetzen ====
Die Dateiendung *.svg in <img>-Tags durch *.png ersetzen, sofern der Browser keine SVGs darstellen kann.

<syntaxhighlight lang="javascript">
// Prüfe ob SVGs dargestellt werden können
if(!document.createElement('svg').getAttributeNS){
$('html').addClass('no-svg');

// Schreibe im HTML-Markup die Dateiendung *.svg auf *.png um.
$('img[src$="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
} else {
$('html').addClass('svg');
}
</syntaxhighlight>

JavaScript - Feature Detection

2022-04-24T08:45:43Z

134.3.74.15: /* Mini Modernizer */

https://kulturbanause.de/blog/feature-detection-ohne-modernizr/#comments
https://gist.github.com/tomblanchard/11290882#file-mini-modernizr-html

Moderne Websites setzen fast ausnahmslos das Konzept »Feature Detection« ein, um in Erfahrung zu bringen, welche Techniken oder Funktionen von einem Browser unterstützt werden. Dazu wird i.d.R. die Feature Detection-Library Modernizr eingesetzt. Bei vielen Projekten halte ich Modernizr jedoch für überdimensioniert, da man häufig nur prüfen möchte ob JavaScript aktiviert ist, ob der Anwender einen Touch-Screen benutzt und ob SVGs eingesetzt werden können. In diesem Beitrag möchte ich daher einige JavaScript-Snippets archivieren, mit denen ihr die notwendigen Infos in Erfahrung bringen könnt ohne dafür die ganze Modernizr-Bibliothek laden zu müssen. In Zukunft werden in diesem Zusammenhang die Feature Queries von CSS sicher auch sehr interessant. (Quelle: Kulturbanause s.o.)

== Snippets ==
=== Mini Modernizer (JS, Touch) ===
JavaScript überprüfen, Touchscreen überprüfen.

'''Ersetzt folgende Klassen auf dem <html> Element:'''

no-js => js
no-touch => touch

<syntaxhighlight lang="javascript">
<script>
!function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document);
</script>
</syntaxhighlight>

=== SVG ===
Quelle: Kulturbanause s.o.

Die Dateiendung *.svg in <img>-Tags durch *.png ersetzen, sofern der Browser keine SVGs darstellen kann.

<syntaxhighlight lang="javascript">
// Prüfe ob SVGs dargestellt werden können
if(!document.createElement('svg').getAttributeNS){
$('html').addClass('no-svg');

// Schreibe im HTML-Markup die Dateiendung *.svg auf *.png um.
$('img[src$="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
} else {
$('html').addClass('svg');
}
</syntaxhighlight>

JavaScript - Feature Detection

2022-04-24T08:42:06Z

134.3.74.15: Die Seite wurde neu angelegt: „ https://kulturbanause.de/blog/feature-detection-ohne-modernizr/#comments https://gist.github.com/tomblanchard/11290882#file-mini-modernizr-html Moderne Webs…“

JavaScript - Snippets

2022-04-24T08:36:00Z

134.3.74.15: /* Must Know */

== Links ==
Siehe auch

[[JavaScript - Plugins]]
[[JavaScripts - Basics]]
[[JavaScript - DOM Manipulation]]
[[jQuery - Snippets]]
[[Browser Fallbacks]]
https://wiki.stephanschlegel.de/index.php?title=JQuery_vs_Vanilla_JavaScript

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== Arrays ==
=== Elemente hinzufügen / entfernen ===
Gegeben ist ein Array items in der Art
[{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]

<syntaxhighlight lang="javascript">
// add to end of array
this.friends.push(newFriend)

// add to start of array
this.friends.unshift(newFriend)

// delete item from array via id - v1 -> override complete array
deleteItem(id){
this.items = this.items.filter( item => item.id !== sarchId)
// filter( filterFunction ) uses filterFunction for every item in items.
// If filterFunction returns true the item is kept. item.id !== id returns true for every
// item which has NOT the id
}

// v2 - change array
deleteItem(id){
const itemIndex = this.items.findIndex(item => item.id === id)
this.items.splice(resIndex, 1);
}
</syntaxhighlight>

=== Finden und Suchen ===
<syntaxhighlight lang="javascript">
// find in array and change prop
const identifiedItem = this.items.find(
(item) => item.id === searchId // the same as function(friend){return friend.id...}
)
// filter(callback) - callback is executed on every array (array item) first item match is returned
identifiedItem.isFavourite = !identifiedItem.isFavourite
// identifiedItem is a proxy connected to the original items array.
// thus why we can modify identifiedItems and items will be altered too
</syntaxhighlight>

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]

=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - Numbers ==
const x = '1'
const y = +x // y is a number now
const y = x.parseInt()

== Viewport / Offset / Scrolling ==
=== Element sichtbar im Viewport ===
==== Kommt in den Viewport mit Self-Destroy ====
Wird nur einmal ausgeführt
<syntaxhighlight lang="javascript">
document.body.onscroll = function() {
if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
document.body.onscroll = "";
alert("The tag just came into view");
}
}
</syntaxhighlight>

==== Komplett im Viewport ====
<syntaxhighlight lang="javascript">
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)

);
}

const box = document.querySelector('.box');
const message = document.querySelector('#message');

document.addEventListener('scroll', function () {
const messageText = isInViewport(box) ?
'The box is visible in the viewport' :
'The box is not visible in the viewport';

message.textContent = messageText;

}, {
passive: true
});
</syntaxhighlight>

==== Teil im Viewport ====
<syntaxhighlight lang="javascript">
/**
* checks if any part of the element is in viewport
*/
function isInViewport(el){
h = el.height();
hVp = $(window).height();
posY = el.offset().top - $(window).scrollTop();
dh = posY+h;
// dh < 0 -> oben raus
// posY > hVp -> unten raus
if ( dh < 0 || posY > hVp ) return false;
else return true;
}
</syntaxhighlight>
==== Funktion mit GSAP ScrollTrigger starten ===
Counter Beispiel
<syntaxhighlight lang="javascript">
function count(){
$('.counter').each(function() {
var $this = $(this), countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 5000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});

}

ScrollTrigger.create({
trigger: '#counterTrigger',
onEnter: ()=>{
console.log('count')
count()
},

});
</syntaxhighlight>

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== Links ==
[[JavaScript - Tricks mit Links]]

== JavaScript - Verschiedenes ==
=== Enter 2 Tabs ===
JQuery

Wenn der User in einem Formular die Eingabetaste drückt wird in vielen Browsxern das Formular abgesendet. Stattdessen, kann man den Tastendruck in einen Tab verwandeln, dann kommt der User stattdessen ins nächste Eingabefeld. In diesem Beispiel wird der Cursor zu Beginn gleich ins erste Feld gesetzt (eingesetzt bei Mietlager XL Rechner).
<syntaxhighlight lang="javascript">
// enter2tab for textboxes
$(document).ready(function() {
$('input:text:first').focus();
$('input:text').bind('keydown', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
var nextIndex = $('input:text').index(this) + 1;
var maxIndex = $('input:text').length;
if (nextIndex < maxIndex) {
$('input:text:eq(' + nextIndex+')').focus();
}
}
});
});
</syntaxhighlight>

=== JavaScript Animation ===
Siehe [[Animation im Web]]

=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml

=== Scrolling ===
==== Smooth Scroll & Sticky - Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});

</syntaxhighlight>

CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
</syntaxhighlight>

==== Smooth Scroll für Anchor Tags oder toTop Links ====
https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link
noch ein Beispiel (Vanilla)
https://perishablepress.com/vanilla-javascript-scroll-anchor/

===== Beispiel ab 2018 =====
Nutzt das CSS Verhalten (kann man auch direkt als CSS nutzen. Manchmal funktioniert es (Stand 2020) nicht ganz sauber. Safari und Edge funktionieren nicht mit dem CSS Behaviour
<pre>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</pre>

For older browser support, you can use this jQuery technique:
<pre>
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();

$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</pre>
And here's the fiddle: http://jsfiddle.net/9SDLw/

If your target element does not have an ID, and you're linking to it by its name, use this:
<pre>
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);

return false;
});
</pre>

===== Beispiel 1 (jQuery) =====
<pre>
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

===== Beispiel 2 (jQuery) mit Offset =====
statt
.top
einfach
.top-100
http://1stwebmagazine.com/jquery-scroll-to-anchor-point

==== Smooth Scrolling mit Vanilla JS ====
[[JavaScript - Smooth Scrolling]]

===== Beispiel 3 Materialize Pushpin ToTop =====
jQuery Plugin enthalten in MaterializeCSS http://materializecss.com/pushpin.html

Kann für ToTop Navigation oder Fixed Navigations etc. eingesetzt werden. Liegt im Verzeichnis js/pushpin geht aber nicht ohne weiteres Standalone

<syntaxhighlight lang="javascript">
//PUSHPIN TOTOP
$( document ).ready(function(){
$('.totop').pushpin({
top: 500,// distance where pin becomes fixed (class)- default 0
bottom: 'infinity', // distance when pin stops being fixed - default infinity
offset: 24 // style="top:[offset]""" - default 0
})
});

//You can remove pushpin and pushpin classes
$('.tabs-wrapper .row').pushpin('remove');
</syntaxhighlight>
CSS

<syntaxhighlight lang="css">
/* Class for when element is above threshold */
.pin-top {
position: relative;
}
/* Class for when element is below threshold*/
.pin-bottom {
position: relative;
}
/* Class for when element is pinned */
.pinned {
position: fixed !important;
right: 24px;
bottom: 24px;
z-index: 9;
}
/* Only necessary for window height sized blocks. */
html, body, .block {
height: 100%;
}
</syntaxhighlight>

===== Beispiel Markup für ToTop Navigation =====
<syntaxhighlight lang="html5">
<body>
<a class="anchor" name="top"></a>
...

<div class="totop" style="display:none;"><a href="top"><i class="fa fa-angle-double-up fa-2x"></i></a></div>
<script type="text/javascript">
$(document).ready(function() {
$('.totop').hide();
$(window).scroll(function(){
var value = 200; // Toplink beim vertikalen scrollen ab einem Wert von XXX 'px' anzeigen
var scrolling = $(window).scrollTop();
if (scrolling > value) {
$('.totop').fadeIn();
} else {
$('.totop').fadeOut();
}
});
$('.totop').click(function(){
$('html, body').animate({scrollTop:'0px'}, 400);
return false;
});
});
</script>
</syntaxhighlight>

=== Toggle ===
<syntaxhighlight lang="javascript">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
oder registrieren

element.addEventListener('click', myFunctionReference , false);

function toggleNavigation() {
var x = document.getElementById("#mobileNavigationPanel");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</syntaxhighlight>

=== Zwischenablage (Clipboard) modifizieren ===
https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
Mit dem Copy Event kann man die Zwischenablage modifizieren wenn der User etwas hineinkopiert. Z.B. könnte das ein Copyright Hinweis sein, den man anhängt.

==== Beispiel - Uppercase ====
<syntaxhighlight lang="html5">

<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const source = document.querySelector('div.source');

source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
event.preventDefault();
});

</syntaxhighlight>

==== Beispiel - Copyright Hinweis hinzufügen ====
<syntaxhighlight lang="html5">
<div class="box source" contenteditable="true">Kopiere Text aus dieser Box...</div>
<div class="box target" contenteditable="true">...in diese Box!</div>

<script>
const source = document.querySelector('div.source');
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
copyDate = dd + '.' + mm + '.' + yyyy;
copyHint = '\nQuelle: ' + window.location.href + ' (Zugriff am: ' + copyDate + ')'; //href, hostname or pathname is possible
source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString() + copyHint);
event.preventDefault();
});
</script>
</syntaxhighlight>

== Must Know - Wichtige JavaScript Snippets und Konzepte ==
=== Seite geladen? ===
https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
window.onload = function () {
console.log('Dokument geladen');
function init();
function machwas();
}
</syntaxhighlight>

=== Seite und Bilder geladen ===
<syntaxhighlight lang="javascript">
window.addEventListener('load', function () {
alert("It's loaded!")
})
</syntaxhighlight>

https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
let img = new Image;

img.onload = function() {
console.log ("Bild geladen");
elem.appendChild (img);
}
img.src = "little-snail.png"; // erst nach dem Event Listener!
</syntaxhighlight>

=== Seite verlassen ===
https://www.mediaevent.de/javascript/onload.html

=== Feature Detection ===
Herausfinden was ein Browser unterstützt und darauf reagieren.
[[JavaScript - Feature Detection]]

Page Loader - Beispiele

2022-04-24T07:58:56Z

134.3.74.15:

https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets
https://wiki.stephanschlegel.de/index.php?title=JavaScript_-_Snippets
== Beispiel 1 ==
(Gyn Gap 2017) Mit SVG Zirkel, CSS Animation, Stilisiertes Logo und Vorhang rechts links.

HTML - direkt hinter body Tag (Beispiel aus ProcessWire)
<syntaxhighlight lang="html5">

<div class="loader-container" id="page-loader">
<div class="loading-wrapper loading-wrapper-hide">
<div class="loader-animation" id="loader-animation">
<svg class="svg-loader" width=100 height=100>
<circle cx=50 cy=50 r=25 />
</svg>
</div>

<div class="loader-name" id="loader-name">
<img src="<?php echo $config->urls->templates?>img/logo-negative.png" alt="">
</div>

</div>
</div>

</syntaxhighlight>
CSS
<syntaxhighlight lang="css">
/* ==========================================================
! Page Loader
========================================================== */
#page-loader {
display: none;
visibility: hidden;
width: 100%;
height: 100%;
color: #ffffff;
opacity: 1;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
font-family: 'Gilroy-Light', sans-serif;
}
@media (min-width: 768px) {
#page-loader {
display: block;
visibility: visible;
}
}
#page-loader:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #333333;
z-index: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
#page-loader:after {
content: '';
display: block;
position: fixed;
z-index: 1;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: #333333;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.loader-out {
opacity: 0;
}
.loader-out:before {
transform: translateX(-600px);
-moz-transform: translateX(-600px);
-webkit-transform: translateX(-600px);
opacity: 0;
}
.loader-out:after {
transform: translateX(600px);
-moz-transform: translateX(600px);
-webkit-transform: translateX(600px);
opacity: 0;
}
.loading-wrapper {
width: 250px;
position: fixed;
top: 50%;
margin-top: -130px;
left: 50%;
margin-left: -125px;
opacity: 1;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
z-index: 9;
transform: translateY(0px);
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.loading-wrapper-hide {
opacity: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
transform: translateY(-20px);
-moz-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
.tp-loader {
z-index: 10000;
position: relative;
}
.loader-name {
color: #ffffff;
opacity: 0.8;
text-align: center;
letter-spacing: 0px;
padding-left: 2px;
padding-right: 2px;
font-weight: bold;
margin-top: 45px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
margin-bottom: 35px;
}
.loader-name img {
max-width: 230px;
}
.loader-job {
border: 1px solid #ffffff;
padding: 5px;
text-align: center;
font-weight: 200;
margin-top: 5px;
color: #ffffff;
font-size: 13px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.loader-left {
-webkit-transform: translateX(-40px);
-moz-transform: translateX(-40px);
-o-transform: translateX(-40px);
transform: translateX(-40px);
opacity: 0;
}
.loader-right {
-webkit-transform: translateX(40px);
-moz-transform: translateX(40px);
-o-transform: translateX(40px);
transform: translateX(40px);
opacity: 0;
}
.loader-up {
-webkit-transform: translateY(-80px);
-moz-transform: translateY(-80px);
-o-transform: translateY(-80px);
transform: translateY(-80px);
opacity: 0!important;
}
.loader-down {
-webkit-transform: translateY(80px);
-moz-transform: translateY(80px);
-o-transform: translateY(80px);
transform: translateY(80px);
opacity: 0;
}
.loader-hide {
opacity: 0;
}
.loader {
display: inline-block;
text-align: center;
margin: 0 auto;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
.loader-animation {
text-align: center;
}
.svg-loader {
margin: 0px auto;
margin-bottom: -30px;
display: block;
-webkit-animation: svg-rotate 4000ms linear infinite;
animation: svg-rotate 4000ms linear infinite;
}
.svg-loader circle {
fill: transparent;
stroke: #ffffff;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 0, 301.59289;
-webkit-animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
animation: stroke-dash 2000ms linear infinite, stroke-width 2000ms linear infinite, stroke-color 8000ms steps(4) infinite;
}
@-webkit-keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes svg-rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@keyframes stroke-width {
0%,
100% {
stroke-width: 0;
}
45%,
55% {
stroke-width: 2;
}
50% {
stroke-width: 4;
}
}
@-webkit-keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@keyframes stroke-dash {
0% {
stroke-dasharray: 0, 301.59289;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 301.59289, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 301.59289, 301.59289;
stroke-dashoffset: -301.59289;
}
}
@-webkit-keyframes stroke-color {
from {
stroke: #ffffff;
}
}
@keyframes stroke-color {
from {
stroke: #ffffff;
}
}

</syntaxhighlight>
JavaScript
<syntaxhighlight lang="javascript">
//Begin - Window Load
$(window).load(function(){

//Page Loader
setTimeout(function(){
$('#loader-name').addClass('loader-up');
$('#loader-job').addClass('loader-up');
$('#loader-animation').addClass('loader-up');
return false;
}, 500);
setTimeout(function(){
$('#page-loader').addClass('loader-out');
return false;
}, 1100);
$('#page-loader').delay(1600).fadeOut(10);

});
</syntaxhighlight>

JavaScript - Snippets

2022-04-24T07:54:01Z

134.3.74.15: /* Seite und Bilder geladen */

== Links ==
Siehe auch

[[JavaScript - Plugins]]
[[JavaScripts - Basics]]
[[JavaScript - DOM Manipulation]]
[[jQuery - Snippets]]
[[Browser Fallbacks]]
https://wiki.stephanschlegel.de/index.php?title=JQuery_vs_Vanilla_JavaScript

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== Arrays ==
=== Elemente hinzufügen / entfernen ===
Gegeben ist ein Array items in der Art
[{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]

<syntaxhighlight lang="javascript">
// add to end of array
this.friends.push(newFriend)

// add to start of array
this.friends.unshift(newFriend)

// delete item from array via id - v1 -> override complete array
deleteItem(id){
this.items = this.items.filter( item => item.id !== sarchId)
// filter( filterFunction ) uses filterFunction for every item in items.
// If filterFunction returns true the item is kept. item.id !== id returns true for every
// item which has NOT the id
}

// v2 - change array
deleteItem(id){
const itemIndex = this.items.findIndex(item => item.id === id)
this.items.splice(resIndex, 1);
}
</syntaxhighlight>

=== Finden und Suchen ===
<syntaxhighlight lang="javascript">
// find in array and change prop
const identifiedItem = this.items.find(
(item) => item.id === searchId // the same as function(friend){return friend.id...}
)
// filter(callback) - callback is executed on every array (array item) first item match is returned
identifiedItem.isFavourite = !identifiedItem.isFavourite
// identifiedItem is a proxy connected to the original items array.
// thus why we can modify identifiedItems and items will be altered too
</syntaxhighlight>

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]

=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - Numbers ==
const x = '1'
const y = +x // y is a number now
const y = x.parseInt()

== Viewport / Offset / Scrolling ==
=== Element sichtbar im Viewport ===
==== Kommt in den Viewport mit Self-Destroy ====
Wird nur einmal ausgeführt
<syntaxhighlight lang="javascript">
document.body.onscroll = function() {
if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
document.body.onscroll = "";
alert("The tag just came into view");
}
}
</syntaxhighlight>

==== Komplett im Viewport ====
<syntaxhighlight lang="javascript">
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)

);
}

const box = document.querySelector('.box');
const message = document.querySelector('#message');

document.addEventListener('scroll', function () {
const messageText = isInViewport(box) ?
'The box is visible in the viewport' :
'The box is not visible in the viewport';

message.textContent = messageText;

}, {
passive: true
});
</syntaxhighlight>

==== Teil im Viewport ====
<syntaxhighlight lang="javascript">
/**
* checks if any part of the element is in viewport
*/
function isInViewport(el){
h = el.height();
hVp = $(window).height();
posY = el.offset().top - $(window).scrollTop();
dh = posY+h;
// dh < 0 -> oben raus
// posY > hVp -> unten raus
if ( dh < 0 || posY > hVp ) return false;
else return true;
}
</syntaxhighlight>
==== Funktion mit GSAP ScrollTrigger starten ===
Counter Beispiel
<syntaxhighlight lang="javascript">
function count(){
$('.counter').each(function() {
var $this = $(this), countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 5000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});

}

ScrollTrigger.create({
trigger: '#counterTrigger',
onEnter: ()=>{
console.log('count')
count()
},

});
</syntaxhighlight>

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== Links ==
[[JavaScript - Tricks mit Links]]

== JavaScript - Verschiedenes ==
=== Enter 2 Tabs ===
JQuery

Wenn der User in einem Formular die Eingabetaste drückt wird in vielen Browsxern das Formular abgesendet. Stattdessen, kann man den Tastendruck in einen Tab verwandeln, dann kommt der User stattdessen ins nächste Eingabefeld. In diesem Beispiel wird der Cursor zu Beginn gleich ins erste Feld gesetzt (eingesetzt bei Mietlager XL Rechner).
<syntaxhighlight lang="javascript">
// enter2tab for textboxes
$(document).ready(function() {
$('input:text:first').focus();
$('input:text').bind('keydown', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
var nextIndex = $('input:text').index(this) + 1;
var maxIndex = $('input:text').length;
if (nextIndex < maxIndex) {
$('input:text:eq(' + nextIndex+')').focus();
}
}
});
});
</syntaxhighlight>

=== JavaScript Animation ===
Siehe [[Animation im Web]]

=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml

=== Scrolling ===
==== Smooth Scroll & Sticky - Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});

</syntaxhighlight>

CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
</syntaxhighlight>

==== Smooth Scroll für Anchor Tags oder toTop Links ====
https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link
noch ein Beispiel (Vanilla)
https://perishablepress.com/vanilla-javascript-scroll-anchor/

===== Beispiel ab 2018 =====
Nutzt das CSS Verhalten (kann man auch direkt als CSS nutzen. Manchmal funktioniert es (Stand 2020) nicht ganz sauber. Safari und Edge funktionieren nicht mit dem CSS Behaviour
<pre>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</pre>

For older browser support, you can use this jQuery technique:
<pre>
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();

$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</pre>
And here's the fiddle: http://jsfiddle.net/9SDLw/

If your target element does not have an ID, and you're linking to it by its name, use this:
<pre>
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);

return false;
});
</pre>

===== Beispiel 1 (jQuery) =====
<pre>
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

===== Beispiel 2 (jQuery) mit Offset =====
statt
.top
einfach
.top-100
http://1stwebmagazine.com/jquery-scroll-to-anchor-point

==== Smooth Scrolling mit Vanilla JS ====
[[JavaScript - Smooth Scrolling]]

===== Beispiel 3 Materialize Pushpin ToTop =====
jQuery Plugin enthalten in MaterializeCSS http://materializecss.com/pushpin.html

Kann für ToTop Navigation oder Fixed Navigations etc. eingesetzt werden. Liegt im Verzeichnis js/pushpin geht aber nicht ohne weiteres Standalone

<syntaxhighlight lang="javascript">
//PUSHPIN TOTOP
$( document ).ready(function(){
$('.totop').pushpin({
top: 500,// distance where pin becomes fixed (class)- default 0
bottom: 'infinity', // distance when pin stops being fixed - default infinity
offset: 24 // style="top:[offset]""" - default 0
})
});

//You can remove pushpin and pushpin classes
$('.tabs-wrapper .row').pushpin('remove');
</syntaxhighlight>
CSS

<syntaxhighlight lang="css">
/* Class for when element is above threshold */
.pin-top {
position: relative;
}
/* Class for when element is below threshold*/
.pin-bottom {
position: relative;
}
/* Class for when element is pinned */
.pinned {
position: fixed !important;
right: 24px;
bottom: 24px;
z-index: 9;
}
/* Only necessary for window height sized blocks. */
html, body, .block {
height: 100%;
}
</syntaxhighlight>

===== Beispiel Markup für ToTop Navigation =====
<syntaxhighlight lang="html5">
<body>
<a class="anchor" name="top"></a>
...

<div class="totop" style="display:none;"><a href="top"><i class="fa fa-angle-double-up fa-2x"></i></a></div>
<script type="text/javascript">
$(document).ready(function() {
$('.totop').hide();
$(window).scroll(function(){
var value = 200; // Toplink beim vertikalen scrollen ab einem Wert von XXX 'px' anzeigen
var scrolling = $(window).scrollTop();
if (scrolling > value) {
$('.totop').fadeIn();
} else {
$('.totop').fadeOut();
}
});
$('.totop').click(function(){
$('html, body').animate({scrollTop:'0px'}, 400);
return false;
});
});
</script>
</syntaxhighlight>

=== Toggle ===
<syntaxhighlight lang="javascript">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
oder registrieren

element.addEventListener('click', myFunctionReference , false);

function toggleNavigation() {
var x = document.getElementById("#mobileNavigationPanel");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</syntaxhighlight>

=== Zwischenablage (Clipboard) modifizieren ===
https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
Mit dem Copy Event kann man die Zwischenablage modifizieren wenn der User etwas hineinkopiert. Z.B. könnte das ein Copyright Hinweis sein, den man anhängt.

==== Beispiel - Uppercase ====
<syntaxhighlight lang="html5">

<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const source = document.querySelector('div.source');

source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
event.preventDefault();
});

</syntaxhighlight>

==== Beispiel - Copyright Hinweis hinzufügen ====
<syntaxhighlight lang="html5">
<div class="box source" contenteditable="true">Kopiere Text aus dieser Box...</div>
<div class="box target" contenteditable="true">...in diese Box!</div>

<script>
const source = document.querySelector('div.source');
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
copyDate = dd + '.' + mm + '.' + yyyy;
copyHint = '\nQuelle: ' + window.location.href + ' (Zugriff am: ' + copyDate + ')'; //href, hostname or pathname is possible
source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString() + copyHint);
event.preventDefault();
});
</script>
</syntaxhighlight>

== Must Know ==
=== Seite geladen? ===
https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
window.onload = function () {
console.log('Dokument geladen');
function init();
function machwas();
}
</syntaxhighlight>

=== Seite und Bilder geladen ===
<syntaxhighlight lang="javascript">
window.addEventListener('load', function () {
alert("It's loaded!")
})
</syntaxhighlight>

https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
let img = new Image;

img.onload = function() {
console.log ("Bild geladen");
elem.appendChild (img);
}
img.src = "little-snail.png"; // erst nach dem Event Listener!
</syntaxhighlight>

=== Seite verlassen ===
https://www.mediaevent.de/javascript/onload.html

JavaScript - Snippets

2022-04-24T07:48:21Z

134.3.74.15: /* Links */

== Links ==
Siehe auch

[[JavaScript - Plugins]]
[[JavaScripts - Basics]]
[[JavaScript - DOM Manipulation]]
[[jQuery - Snippets]]
[[Browser Fallbacks]]
https://wiki.stephanschlegel.de/index.php?title=JQuery_vs_Vanilla_JavaScript

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== Arrays ==
=== Elemente hinzufügen / entfernen ===
Gegeben ist ein Array items in der Art
[{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]

<syntaxhighlight lang="javascript">
// add to end of array
this.friends.push(newFriend)

// add to start of array
this.friends.unshift(newFriend)

// delete item from array via id - v1 -> override complete array
deleteItem(id){
this.items = this.items.filter( item => item.id !== sarchId)
// filter( filterFunction ) uses filterFunction for every item in items.
// If filterFunction returns true the item is kept. item.id !== id returns true for every
// item which has NOT the id
}

// v2 - change array
deleteItem(id){
const itemIndex = this.items.findIndex(item => item.id === id)
this.items.splice(resIndex, 1);
}
</syntaxhighlight>

=== Finden und Suchen ===
<syntaxhighlight lang="javascript">
// find in array and change prop
const identifiedItem = this.items.find(
(item) => item.id === searchId // the same as function(friend){return friend.id...}
)
// filter(callback) - callback is executed on every array (array item) first item match is returned
identifiedItem.isFavourite = !identifiedItem.isFavourite
// identifiedItem is a proxy connected to the original items array.
// thus why we can modify identifiedItems and items will be altered too
</syntaxhighlight>

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]

=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - Numbers ==
const x = '1'
const y = +x // y is a number now
const y = x.parseInt()

== Viewport / Offset / Scrolling ==
=== Element sichtbar im Viewport ===
==== Kommt in den Viewport mit Self-Destroy ====
Wird nur einmal ausgeführt
<syntaxhighlight lang="javascript">
document.body.onscroll = function() {
if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
document.body.onscroll = "";
alert("The tag just came into view");
}
}
</syntaxhighlight>

==== Komplett im Viewport ====
<syntaxhighlight lang="javascript">
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)

);
}

const box = document.querySelector('.box');
const message = document.querySelector('#message');

document.addEventListener('scroll', function () {
const messageText = isInViewport(box) ?
'The box is visible in the viewport' :
'The box is not visible in the viewport';

message.textContent = messageText;

}, {
passive: true
});
</syntaxhighlight>

==== Teil im Viewport ====
<syntaxhighlight lang="javascript">
/**
* checks if any part of the element is in viewport
*/
function isInViewport(el){
h = el.height();
hVp = $(window).height();
posY = el.offset().top - $(window).scrollTop();
dh = posY+h;
// dh < 0 -> oben raus
// posY > hVp -> unten raus
if ( dh < 0 || posY > hVp ) return false;
else return true;
}
</syntaxhighlight>
==== Funktion mit GSAP ScrollTrigger starten ===
Counter Beispiel
<syntaxhighlight lang="javascript">
function count(){
$('.counter').each(function() {
var $this = $(this), countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 5000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});

}

ScrollTrigger.create({
trigger: '#counterTrigger',
onEnter: ()=>{
console.log('count')
count()
},

});
</syntaxhighlight>

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== Links ==
[[JavaScript - Tricks mit Links]]

== JavaScript - Verschiedenes ==
=== Enter 2 Tabs ===
JQuery

Wenn der User in einem Formular die Eingabetaste drückt wird in vielen Browsxern das Formular abgesendet. Stattdessen, kann man den Tastendruck in einen Tab verwandeln, dann kommt der User stattdessen ins nächste Eingabefeld. In diesem Beispiel wird der Cursor zu Beginn gleich ins erste Feld gesetzt (eingesetzt bei Mietlager XL Rechner).
<syntaxhighlight lang="javascript">
// enter2tab for textboxes
$(document).ready(function() {
$('input:text:first').focus();
$('input:text').bind('keydown', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
var nextIndex = $('input:text').index(this) + 1;
var maxIndex = $('input:text').length;
if (nextIndex < maxIndex) {
$('input:text:eq(' + nextIndex+')').focus();
}
}
});
});
</syntaxhighlight>

=== JavaScript Animation ===
Siehe [[Animation im Web]]

=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml

=== Scrolling ===
==== Smooth Scroll & Sticky - Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});

</syntaxhighlight>

CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
</syntaxhighlight>

==== Smooth Scroll für Anchor Tags oder toTop Links ====
https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link
noch ein Beispiel (Vanilla)
https://perishablepress.com/vanilla-javascript-scroll-anchor/

===== Beispiel ab 2018 =====
Nutzt das CSS Verhalten (kann man auch direkt als CSS nutzen. Manchmal funktioniert es (Stand 2020) nicht ganz sauber. Safari und Edge funktionieren nicht mit dem CSS Behaviour
<pre>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</pre>

For older browser support, you can use this jQuery technique:
<pre>
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();

$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</pre>
And here's the fiddle: http://jsfiddle.net/9SDLw/

If your target element does not have an ID, and you're linking to it by its name, use this:
<pre>
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);

return false;
});
</pre>

===== Beispiel 1 (jQuery) =====
<pre>
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

===== Beispiel 2 (jQuery) mit Offset =====
statt
.top
einfach
.top-100
http://1stwebmagazine.com/jquery-scroll-to-anchor-point

==== Smooth Scrolling mit Vanilla JS ====
[[JavaScript - Smooth Scrolling]]

===== Beispiel 3 Materialize Pushpin ToTop =====
jQuery Plugin enthalten in MaterializeCSS http://materializecss.com/pushpin.html

Kann für ToTop Navigation oder Fixed Navigations etc. eingesetzt werden. Liegt im Verzeichnis js/pushpin geht aber nicht ohne weiteres Standalone

<syntaxhighlight lang="javascript">
//PUSHPIN TOTOP
$( document ).ready(function(){
$('.totop').pushpin({
top: 500,// distance where pin becomes fixed (class)- default 0
bottom: 'infinity', // distance when pin stops being fixed - default infinity
offset: 24 // style="top:[offset]""" - default 0
})
});

//You can remove pushpin and pushpin classes
$('.tabs-wrapper .row').pushpin('remove');
</syntaxhighlight>
CSS

<syntaxhighlight lang="css">
/* Class for when element is above threshold */
.pin-top {
position: relative;
}
/* Class for when element is below threshold*/
.pin-bottom {
position: relative;
}
/* Class for when element is pinned */
.pinned {
position: fixed !important;
right: 24px;
bottom: 24px;
z-index: 9;
}
/* Only necessary for window height sized blocks. */
html, body, .block {
height: 100%;
}
</syntaxhighlight>

===== Beispiel Markup für ToTop Navigation =====
<syntaxhighlight lang="html5">
<body>
<a class="anchor" name="top"></a>
...

<div class="totop" style="display:none;"><a href="top"><i class="fa fa-angle-double-up fa-2x"></i></a></div>
<script type="text/javascript">
$(document).ready(function() {
$('.totop').hide();
$(window).scroll(function(){
var value = 200; // Toplink beim vertikalen scrollen ab einem Wert von XXX 'px' anzeigen
var scrolling = $(window).scrollTop();
if (scrolling > value) {
$('.totop').fadeIn();
} else {
$('.totop').fadeOut();
}
});
$('.totop').click(function(){
$('html, body').animate({scrollTop:'0px'}, 400);
return false;
});
});
</script>
</syntaxhighlight>

=== Toggle ===
<syntaxhighlight lang="javascript">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
oder registrieren

element.addEventListener('click', myFunctionReference , false);

function toggleNavigation() {
var x = document.getElementById("#mobileNavigationPanel");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</syntaxhighlight>

=== Zwischenablage (Clipboard) modifizieren ===
https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
Mit dem Copy Event kann man die Zwischenablage modifizieren wenn der User etwas hineinkopiert. Z.B. könnte das ein Copyright Hinweis sein, den man anhängt.

==== Beispiel - Uppercase ====
<syntaxhighlight lang="html5">

<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const source = document.querySelector('div.source');

source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
event.preventDefault();
});

</syntaxhighlight>

==== Beispiel - Copyright Hinweis hinzufügen ====
<syntaxhighlight lang="html5">
<div class="box source" contenteditable="true">Kopiere Text aus dieser Box...</div>
<div class="box target" contenteditable="true">...in diese Box!</div>

<script>
const source = document.querySelector('div.source');
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
copyDate = dd + '.' + mm + '.' + yyyy;
copyHint = '\nQuelle: ' + window.location.href + ' (Zugriff am: ' + copyDate + ')'; //href, hostname or pathname is possible
source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString() + copyHint);
event.preventDefault();
});
</script>
</syntaxhighlight>

== Must Know ==
=== Seite geladen? ===
https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
window.onload = function () {
console.log('Dokument geladen');
function init();
function machwas();
}
</syntaxhighlight>

=== Seite und Bilder geladen ===
https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
let img = new Image;

img.onload = function() {
console.log ("Bild geladen");
elem.appendChild (img);
}
img.src = "little-snail.png"; // erst nach dem Event Listener!
</syntaxhighlight>

=== Seite verlassen ===
https://www.mediaevent.de/javascript/onload.html

JavaScript - Snippets

2022-04-22T11:29:54Z

134.3.74.15: /* Element sichtbar im Viewport */

== Links ==
Siehe auch

[[JavaScript - Plugins]]
[[JavaScripts - Basics]]
[[JavaScript - DOM Manipulation]]
[[jQuery - Snippets]]
[[Browser Fallbacks]]

== Sonderzeichen in Alert-Meldungen ==

Oft sieht man im Web sehr hässliche alert-Meldungen , in denen die Umlaute nicht korrekt dargestellt sind. Das liegt auch daran, dass unterschiedliche Betriebssystem Zeichen unterschiedlich kodieren. Damit so etwas möglichst vermieden wird, sollte man solche Meldungen mit alert(unescape("...")) anzeigen.

Beispiel:
alert(unescape("So was d%E4mliches%21"));

Zeichen so verschlüsseln:
\ \\
" \"
' \'
Zeilenumbruch \n
Wagenrücklauf \r
(Den Unterschied zum Zeilenumbruch habe ich auch noch nicht begriffen.)
Tabulator \t

Zeichen so:
Ä %C4
Ö %D6
Ü %DC
ä %E4
ö %F6
ü %FC
ß %DF
€ %u20AC
$ %24
% %25

Generier Tool:
http://www.salesianer.de/util/alert-umlaute.html

== Teil einer Seite drucken ==
Old School JavaScript, sollte sich aber relativ einfach auf jQuery übertragen lassen.

Quelle: http://www.webstool.de/de/tipps_down_druck3.html Zugriff: 10/2011

Mit einem einfachen JavaScript lässt sich mit relativ wenig Aufwand eine druckerfreundliche Version einer Webseite bei Bedarf erzeugen.

Das JavaScript wird nachstehend vorgestellt:

<pre>
function ausgabe()
{
var ref = document.getElementById("auswahl");
var ausgabe;
// nächste Zeile öffnet ein Fenster der Größe 800 x 600 Pixel
ausgabe=window.open("#","fenster","width=800,height=600,resizable=yes,menubar=yes,left=50,top=50");
ausgabe.document.open();
ausgabe.document.write('<html>\n<head>\n<title>Druckversion</title>\n');
ausgabe.document.write('<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\n');
// in der nächsten Zeile an das eigene Stylesheet anpassen
ausgabe.document.write('<link rel="stylesheet" href="../css/design1.css">\n</head>\n');
ausgabe.document.write('<body>\n<h1 align="center">© web s tool - Partner für Ihren Internetauftritt</h1>\n');
ausgabe.document.write('<div>\n');
// Ausgabe aller Inhalte mit der id = auswahl
while (ref!=null)
{
ausgabe.document.write(ref.innerHTML + '\n');
ref = ref.nextSibling;
}
ausgabe.document.write('</div>\n<p align="center"><a href="javascript:window.print()">drucken</a></p>\n</body>\n</html>\n');
ausgabe.document.close();
ausgabe.focus();
}
</pre>
Die externe Einbindung des JavaScripts erfolgt dabei z.B. im head-Bereich der Webseite über

<script language="JavaScript" src="../scripts/ausgabe4print.js"></script> .

Von entscheidender Bedeutung ist, dass auf der Seite das auszuwählende Objekt mit der id = "auswahl" (bitte bei Bedarf anpassen) versehen ist. Das auszuwählende Objekt kann dabei eine Tabelle oder ein div-Container sein.

Der Aufruf erfolgt z.B. durch den Link <a href="javascript:ausgabe();"> Druckversion</a>

== Fehler Behandlung ==
=== Prüfen ob ein Element existiert (normales JavaScript)===
<pre>
function isElement(obj) {
try {
//Using W3 DOM2 (works for FF, Opera and Chrom)
return obj instanceof HTMLElement;
}
catch(e){
return (typeof obj==="object") &&
(obj.nodeType===1) && (typeof obj.style === "object") &&
(typeof obj.ownerDocument ==="object");
}
}
</pre>

=== Prüfen ob ein Element in einem Objekt-Literal existiert und nicht null ist ===
<pre>
var data = {
"key1" : val,
"key2" : val,
"key3" : val
}
</pre>

<pre>
if( "key2" in data && data.key2 != null){
...
}
</pre>

== Eingaben Validieren ==
=== Handynummer validieren (normales JavaScript) ===
<pre>
function phone_is_valid(nr){
var reg2 = /^([0-9]{4,6})+\/([0-9]{6,11})$/;
return reg2.test(nr);
}
</pre>

=== Datum validieren (normales JavaScript) ===
<pre>
function date_is_valid(myDate){
var isValid = false;
var today = new Date();
if (!myDate) return false;
myDate=myDate.toString();
arrDate=myDate.split(".");
if (arrDate.length!=3) return false;
arrDate[0]=parseInt(arrDate[0],10);
arrDate[1]=parseInt(arrDate[1],10)-1;
if (arrDate[2].length==2) arrDate[2]="20"+arrDate[2]
var kontrolldatum=new Date(arrDate[2],arrDate[1],arrDate[0]);
// Datum gültig ?
if (kontrolldatum.getDate()==arrDate[0] && kontrolldatum.getMonth()==arrDate[1] && kontrolldatum.getFullYear()==arrDate[2])
{
// in der Zukunft
if (kontrolldatum.getTime()-today.getTime()+(24*60*60*1000) > 0)
return true;
}
return false;
}
</pre>
== Maus ==
[[JavaScript - Maus]]
== Timer ==
Quelle: http://blog.agrafix.net/2011/10/javascript-timers-mit-jquery/

Benötigte Funktionen sind window.setTimeout und window.setInterval
<pre>
// funktion verzögert aufrufen
function machWas() {
alert('alert() mit 1000ms verzögerung!');
}
window.setTimeout(machWas, 1000);

// funktion alle X Millisekunden aufruden
function machWasOft() {
alert('alle 1000ms ein alert()');
}

window.setInterval(machWasOft, 1000);
</pre>

Doch was ist, wenn ich jetzt einen solchen Timer ändern oder abbrechen möchte? Das ist eigentlich auch nicht schwer – die Funktionen setTimeout/setInterval geben ein Objekt zurück über das sie sich wieder beenden lassen.

<pre>
var x = 0;
function machWasAbbrechbarOft() {
x += 1;
if (x > 200) {
window.clearInterval(running); // beende das "Interval" nach 201 Ausführungen
}
}
var running = window.setInterval(machWasAbbrechbarOft, 1000);

</pre>

=== Timer mit jQuery ===
Für größere Projekte gibt es ein komfortableres jQuery Plugin

Mit diesem Plugin geht das “Interval” setzen dann wie folgt:

<pre>
$(document).everyTime(1000, "machWasOftAbbrechbar", function(i) { // alle 1000ms
alert('Hallo ich bin der ' + i + 'te Aufruf!'); // machWasOftAbbrechbar, hier die funktion die aufgerufen werden soll
}, 200); // 200 mal ausführen
Der zweite Parameter, machWasOftAbbrechbar, stellt hierbei ein sogenanntes “label” dar, über das man den gestarten Timer dann wieder abbrechen kann:

$(document).stopTime("machWasOftAbbrechbar"); // stoppe machWasOftAbbrechbar
</pre>

Viel mehr gibt’s eigentlich nicht dazu zu sagen – die Dokumentation dazu findet man, genau wie das Plugin selbst, unter http://plugins.jquery.com/project/timers.

== Arrays ==
=== Elemente hinzufügen / entfernen ===
Gegeben ist ein Array items in der Art
[{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]

<syntaxhighlight lang="javascript">
// add to end of array
this.friends.push(newFriend)

// add to start of array
this.friends.unshift(newFriend)

// delete item from array via id - v1 -> override complete array
deleteItem(id){
this.items = this.items.filter( item => item.id !== sarchId)
// filter( filterFunction ) uses filterFunction for every item in items.
// If filterFunction returns true the item is kept. item.id !== id returns true for every
// item which has NOT the id
}

// v2 - change array
deleteItem(id){
const itemIndex = this.items.findIndex(item => item.id === id)
this.items.splice(resIndex, 1);
}
</syntaxhighlight>

=== Finden und Suchen ===
<syntaxhighlight lang="javascript">
// find in array and change prop
const identifiedItem = this.items.find(
(item) => item.id === searchId // the same as function(friend){return friend.id...}
)
// filter(callback) - callback is executed on every array (array item) first item match is returned
identifiedItem.isFavourite = !identifiedItem.isFavourite
// identifiedItem is a proxy connected to the original items array.
// thus why we can modify identifiedItems and items will be altered too
</syntaxhighlight>

== JavaScript - Objekte ==
[[JavaScript - Objektorientierte Programmierung]]

=== Objekte löschen ===
for (prop in allOverlays) { if (allOverlays.hasOwnProperty(prop)) { delete allOverlays[prop]; } } //ie 6 gc problems
//allOverlays = {};

== JavaScript - Strings ==
[[JavaScript - Strings]]

== JavaScript - Numbers ==
const x = '1'
const y = +x // y is a number now
const y = x.parseInt()

== Viewport / Offset / Scrolling ==
=== Element sichtbar im Viewport ===
==== Kommt in den Viewport mit Self-Destroy ====
Wird nur einmal ausgeführt
<syntaxhighlight lang="javascript">
document.body.onscroll = function() {
if (document.getElementById("viewElement").getBoundingClientRect().bottom <= window.innerHeight) {
document.body.onscroll = "";
alert("The tag just came into view");
}
}
</syntaxhighlight>

==== Komplett im Viewport ====
<syntaxhighlight lang="javascript">
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)

);
}

const box = document.querySelector('.box');
const message = document.querySelector('#message');

document.addEventListener('scroll', function () {
const messageText = isInViewport(box) ?
'The box is visible in the viewport' :
'The box is not visible in the viewport';

message.textContent = messageText;

}, {
passive: true
});
</syntaxhighlight>

==== Teil im Viewport ====
<syntaxhighlight lang="javascript">
/**
* checks if any part of the element is in viewport
*/
function isInViewport(el){
h = el.height();
hVp = $(window).height();
posY = el.offset().top - $(window).scrollTop();
dh = posY+h;
// dh < 0 -> oben raus
// posY > hVp -> unten raus
if ( dh < 0 || posY > hVp ) return false;
else return true;
}
</syntaxhighlight>
==== Funktion mit GSAP ScrollTrigger starten ===
Counter Beispiel
<syntaxhighlight lang="javascript">
function count(){
$('.counter').each(function() {
var $this = $(this), countTo = $this.attr('data-count');
$({ countNum: $this.text()}).animate({
countNum: countTo
},
{
duration: 5000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});

}

ScrollTrigger.create({
trigger: '#counterTrigger',
onEnter: ()=>{
console.log('count')
count()
},

});
</syntaxhighlight>

== JavaScript - HTML5 Audio ==
[[JavaScript - HTML5 Audio]]

== Links ==
[[JavaScript - Tricks mit Links]]

== JavaScript - Verschiedenes ==
=== Enter 2 Tabs ===
JQuery

Wenn der User in einem Formular die Eingabetaste drückt wird in vielen Browsxern das Formular abgesendet. Stattdessen, kann man den Tastendruck in einen Tab verwandeln, dann kommt der User stattdessen ins nächste Eingabefeld. In diesem Beispiel wird der Cursor zu Beginn gleich ins erste Feld gesetzt (eingesetzt bei Mietlager XL Rechner).
<syntaxhighlight lang="javascript">
// enter2tab for textboxes
$(document).ready(function() {
$('input:text:first').focus();
$('input:text').bind('keydown', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
var nextIndex = $('input:text').index(this) + 1;
var maxIndex = $('input:text').length;
if (nextIndex < maxIndex) {
$('input:text:eq(' + nextIndex+')').focus();
}
}
});
});
</syntaxhighlight>

=== JavaScript Animation ===
Siehe [[Animation im Web]]

=== Sortieren ===
http://www.javascriptkit.com/javatutors/arraysort.shtml

=== Scrolling ===
==== Smooth Scroll & Sticky - Fixed Navbar ====
jQuery
<syntaxhighlight lang="javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});

</syntaxhighlight>

CSS - wichtig vor allem fixed.
<syntaxhighlight lang="css">
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
</syntaxhighlight>

==== Smooth Scroll für Anchor Tags oder toTop Links ====
https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link
noch ein Beispiel (Vanilla)
https://perishablepress.com/vanilla-javascript-scroll-anchor/

===== Beispiel ab 2018 =====
Nutzt das CSS Verhalten (kann man auch direkt als CSS nutzen. Manchmal funktioniert es (Stand 2020) nicht ganz sauber. Safari und Edge funktionieren nicht mit dem CSS Behaviour
<pre>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</pre>

For older browser support, you can use this jQuery technique:
<pre>
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();

$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
</pre>
And here's the fiddle: http://jsfiddle.net/9SDLw/

If your target element does not have an ID, and you're linking to it by its name, use this:
<pre>
$('a[href^="#"]').click(function () {
$('html, body').animate({
scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
}, 500);

return false;
});
</pre>

===== Beispiel 1 (jQuery) =====
<pre>
$('a[href*=#]:not([href=#])').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) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
</pre>

===== Beispiel 2 (jQuery) mit Offset =====
statt
.top
einfach
.top-100
http://1stwebmagazine.com/jquery-scroll-to-anchor-point

==== Smooth Scrolling mit Vanilla JS ====
[[JavaScript - Smooth Scrolling]]

===== Beispiel 3 Materialize Pushpin ToTop =====
jQuery Plugin enthalten in MaterializeCSS http://materializecss.com/pushpin.html

Kann für ToTop Navigation oder Fixed Navigations etc. eingesetzt werden. Liegt im Verzeichnis js/pushpin geht aber nicht ohne weiteres Standalone

<syntaxhighlight lang="javascript">
//PUSHPIN TOTOP
$( document ).ready(function(){
$('.totop').pushpin({
top: 500,// distance where pin becomes fixed (class)- default 0
bottom: 'infinity', // distance when pin stops being fixed - default infinity
offset: 24 // style="top:[offset]""" - default 0
})
});

//You can remove pushpin and pushpin classes
$('.tabs-wrapper .row').pushpin('remove');
</syntaxhighlight>
CSS

<syntaxhighlight lang="css">
/* Class for when element is above threshold */
.pin-top {
position: relative;
}
/* Class for when element is below threshold*/
.pin-bottom {
position: relative;
}
/* Class for when element is pinned */
.pinned {
position: fixed !important;
right: 24px;
bottom: 24px;
z-index: 9;
}
/* Only necessary for window height sized blocks. */
html, body, .block {
height: 100%;
}
</syntaxhighlight>

===== Beispiel Markup für ToTop Navigation =====
<syntaxhighlight lang="html5">
<body>
<a class="anchor" name="top"></a>
...

<div class="totop" style="display:none;"><a href="top"><i class="fa fa-angle-double-up fa-2x"></i></a></div>
<script type="text/javascript">
$(document).ready(function() {
$('.totop').hide();
$(window).scroll(function(){
var value = 200; // Toplink beim vertikalen scrollen ab einem Wert von XXX 'px' anzeigen
var scrolling = $(window).scrollTop();
if (scrolling > value) {
$('.totop').fadeIn();
} else {
$('.totop').fadeOut();
}
});
$('.totop').click(function(){
$('html, body').animate({scrollTop:'0px'}, 400);
return false;
});
});
</script>
</syntaxhighlight>

=== Toggle ===
<syntaxhighlight lang="javascript">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
oder registrieren

element.addEventListener('click', myFunctionReference , false);

function toggleNavigation() {
var x = document.getElementById("#mobileNavigationPanel");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</syntaxhighlight>

=== Zwischenablage (Clipboard) modifizieren ===
https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event
Mit dem Copy Event kann man die Zwischenablage modifizieren wenn der User etwas hineinkopiert. Z.B. könnte das ein Copyright Hinweis sein, den man anhängt.

==== Beispiel - Uppercase ====
<syntaxhighlight lang="html5">

<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const source = document.querySelector('div.source');

source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
event.preventDefault();
});

</syntaxhighlight>

==== Beispiel - Copyright Hinweis hinzufügen ====
<syntaxhighlight lang="html5">
<div class="box source" contenteditable="true">Kopiere Text aus dieser Box...</div>
<div class="box target" contenteditable="true">...in diese Box!</div>

<script>
const source = document.querySelector('div.source');
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
copyDate = dd + '.' + mm + '.' + yyyy;
copyHint = '\nQuelle: ' + window.location.href + ' (Zugriff am: ' + copyDate + ')'; //href, hostname or pathname is possible
source.addEventListener('copy', (event) => {
const selection = document.getSelection();
event.clipboardData.setData('text/plain', selection.toString() + copyHint);
event.preventDefault();
});
</script>
</syntaxhighlight>

== Must Know ==
=== Seite geladen? ===
https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
window.onload = function () {
console.log('Dokument geladen');
function init();
function machwas();
}
</syntaxhighlight>

=== Seite und Bilder geladen ===
https://www.mediaevent.de/javascript/onload.html
<syntaxhighlight lang="javascript">
let img = new Image;

img.onload = function() {
console.log ("Bild geladen");
elem.appendChild (img);
}
img.src = "little-snail.png"; // erst nach dem Event Listener!
</syntaxhighlight>

=== Seite verlassen ===
https://www.mediaevent.de/javascript/onload.html

Mit JavaScript Get Parameter aus der URL auslesen

2022-04-21T10:47:22Z

134.3.74.15:

<pre>
function getUrlVars()
/* get GET Vars from URl */
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</pre>
For example, if you have the URL:

http://www.example.com/?me=myValue&name2=SomeOtherValue
This code will return:
{
"me" : "myValue",
"name2" : "SomeOtherValue"
}
and you can do:

var me = getUrlVars()["me"];
var name2 = getUrlVars()["name2"];

Nützlich auch hier:

if (typeof variable === 'undefined') {
// variable is undefined
}

Facebook 3D Foto mit Blender

2022-04-15T19:32:19Z

134.3.74.15: Die Seite wurde neu angelegt: „Facebook 3D Fotos bestehen aus einem Bildlayer und einem Depth Layer. Man benötigt also 2 Bilder: bildname.png bildname_depth.png Beim Depth-Layer steht sch…“

Facebook 3D Fotos bestehen aus einem Bildlayer und einem Depth Layer. Man benötigt also 2 Bilder:
bildname.png
bildname_depth.png
Beim Depth-Layer steht schwarz für den Hintergrund und weiß für den Vordergrund. Neuere Handys können oft selbst einen Depth Layer mithilfe eines LIDAR Sensors erzeugen. In der 3D Software gibt es verschiedene Möglichkeiten solch einen Layer zu erzeugen.

== Depth Layer in Blender erstellen ==
=== Methode 1 Depth Output ===
View Layer Properties > Passes "Z" anhaken
Compositor Window > Use Nodes
Compositor Backdrop (zeigt im Hintergrund den Render an)
Compositor Auto Render (wird ohne F12 gerendert - in manchen Setups muss trotzdem selbst gerendert werden)
Composition Setup wie unten.

GSAP - ScrollTrigger

2022-04-09T15:16:02Z

134.3.74.15:

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)
https://greensock.com/docs/v3/Plugins/ScrollTrigger Mit Demos
https://css-tricks.com/tips-for-writing-animation-code-efficiently/
https://greensock.com/forums/topic/31761-add-scrolltrigger-timeline-into-matchmedia-functions/#comment-158780

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Quickstart ==
Eine gute Methode vorzugehen:
* Timeline-Animation ohne ScrollTrigger bauen
* ScrollTrigger Konfiguration in die Timeline einbauen.

== MatchMedia ==
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

* Timeline Animation erstellen
* ScrollTrigger Konfiguration in Timeline aufsetzen
* MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

=== MatchMedia aufsetzen ===
Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

<syntaxhighlight lang="javascript">
ScrollTrigger.matchMedia({
"(minWidth: 800px)": function(){
// all animations for 800px and up go here
},
"(maxWidth: 799px)": function(){
// all animations for smaller screens than 799px go here
},
"all": function(){
// animations valid for all viewport sizes go here
}
});
</syntaxhighlight>

== start, end, trigger, endTrigger ==
Legt fest welches Element und welcher Teil des Elements eine Aktion auslöst.

Standard:
Start wenn Decke von Trigger Element erreicht unteren Viewport
Ende wenn Boden von Trigger Decke von Viewport erreicht (+ 1px)
start: top bottom
end: bottom top

Default
start:

== Toggle Actions ==
toggleActions legen Fest was mit der Animation passiert, wenn Start oder Endpunkte erreicht werden. Daher hängen sie auch eng mit start und stop zusammen.
onEnter, onLeave, onEnterBack, and onLeaveBack

EREIGNISSE
onEnter -> Startpunkt des Elements erreicht Startppunkt => Beginn es Durchgangs
onLeave -> Enpunkt des Elements hinter Endposition => Durchgang komplett
onEnterBack -> Endpunkt des Elements zurück vor Endposition
onLeaveBack -> Startpunkt des Elements zurück vor Startposition

JEDES EREIGNIS KANN ETWAS AUSLÖSEN:
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
toggleActions: play none none none //default

So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

=== Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles() ===
Manchmal kommt es vor, dass eine '''Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt"'''. Wenn man dieses Verhalten nicht möchte und lieber den '''Zustand beim Laden der Seite herstellen''' möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.
ScrollTrigger.saveStyles('.myElement, .myOtherElement);

== Beispiele Tipps etc. ==
=== Horizontal Scroll ===
https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:
https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010
https://greensock.com/forums/topic/25544-horizontal-scroll-trigger-tablet-mobile/

== Probleme beheben ==
=== Sprünge ===
https://greensock.com/st-mistakes/#to-issues
Wichtig zu wissen: ScrollTrigger speichert die Startwerte für eine Animation wenn der Trigger erzeugt wird. Dadurch können Sprünge entstehen, wenn mehrere Trigger auf eine Eigenschaft angewendet werden, das Objekt sich aber zum Startpunkt bereits verändert hat.

Lösungen
- immediateRender Eigenschaft
- fromTo statt to nutzen
- Ein ScrollTrigger für mehrere Animationen (Timeline)

=== Abhängigkeiten vom Viewport ===
Wenn Objekte sich relativ zum Viewport ausrichten muss man darauf achten, dass sich die Werte bei einer Veränderung des Browsers anpassen. Das funktioniert mit Funktionen statt statischen Werten:
end: `+=${elem.offsetHeight}` // won't be updated on refresh
end: () => `+=${elem.offsetHeight}` // will be updated

=== Overlaping Issued / Überlappungen vermeiden ===
https://www.youtube.com/watch?v=SVjndrQ6v9I
Zwei Wege entweder

Toggle Actions (die Regel)
play complete reverse reset
// wird zu

oder

preventOverlaps / fastScrollEnd

GSAP - ScrollTrigger

2022-04-09T14:55:41Z

134.3.74.15:

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)
https://greensock.com/docs/v3/Plugins/ScrollTrigger Mit Demos
https://css-tricks.com/tips-for-writing-animation-code-efficiently/

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Quickstart ==
Eine gute Methode vorzugehen:
* Timeline-Animation ohne ScrollTrigger bauen
* ScrollTrigger Konfiguration in die Timeline einbauen.

== MatchMedia ==
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

* Timeline Animation erstellen
* ScrollTrigger Konfiguration in Timeline aufsetzen
* MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

=== MatchMedia aufsetzen ===
Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

<syntaxhighlight lang="javascript">
ScrollTrigger.matchMedia({
"(minWidth: 800px)": function(){
// all animations for 800px and up go here
},
"(maxWidth: 799px)": function(){
// all animations for smaller screens than 799px go here
},
"all": function(){
// animations valid for all viewport sizes go here
}
});
</syntaxhighlight>

== start, end, trigger, endTrigger ==
Legt fest welches Element und welcher Teil des Elements eine Aktion auslöst.

Standard:
Start wenn Decke von Trigger Element erreicht unteren Viewport
Ende wenn Boden von Trigger Decke von Viewport erreicht (+ 1px)
start: top bottom
end: bottom top

Default
start:

== Toggle Actions ==
toggleActions legen Fest was mit der Animation passiert, wenn Start oder Endpunkte erreicht werden. Daher hängen sie auch eng mit start und stop zusammen.
onEnter, onLeave, onEnterBack, and onLeaveBack

EREIGNISSE
onEnter -> Startpunkt des Elements erreicht Startppunkt => Beginn es Durchgangs
onLeave -> Enpunkt des Elements hinter Endposition => Durchgang komplett
onEnterBack -> Endpunkt des Elements zurück vor Endposition
onLeaveBack -> Startpunkt des Elements zurück vor Startposition

JEDES EREIGNIS KANN ETWAS AUSLÖSEN:
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
toggleActions: play none none none //default

So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

=== Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles() ===
Manchmal kommt es vor, dass eine '''Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt"'''. Wenn man dieses Verhalten nicht möchte und lieber den '''Zustand beim Laden der Seite herstellen''' möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.
ScrollTrigger.saveStyles('.myElement, .myOtherElement);

== Beispiele Tipps etc. ==
=== Horizontal Scroll ===
https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:
https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010
https://greensock.com/forums/topic/25544-horizontal-scroll-trigger-tablet-mobile/

== Probleme beheben ==
=== Sprünge ===
https://greensock.com/st-mistakes/#to-issues
Wichtig zu wissen: ScrollTrigger speichert die Startwerte für eine Animation wenn der Trigger erzeugt wird. Dadurch können Sprünge entstehen, wenn mehrere Trigger auf eine Eigenschaft angewendet werden, das Objekt sich aber zum Startpunkt bereits verändert hat.

Lösungen
- immediateRender Eigenschaft
- fromTo statt to nutzen
- Ein ScrollTrigger für mehrere Animationen (Timeline)

=== Abhängigkeiten vom Viewport ===
Wenn Objekte sich relativ zum Viewport ausrichten muss man darauf achten, dass sich die Werte bei einer Veränderung des Browsers anpassen. Das funktioniert mit Funktionen statt statischen Werten:
end: `+=${elem.offsetHeight}` // won't be updated on refresh
end: () => `+=${elem.offsetHeight}` // will be updated

=== Overlaping Issued / Überlappungen vermeiden ===
https://www.youtube.com/watch?v=SVjndrQ6v9I
Zwei Wege entweder

Toggle Actions (die Regel)
play complete reverse reset
// wird zu

oder

preventOverlaps / fastScrollEnd

GSAP - ScrollTrigger

2022-04-09T14:55:16Z

134.3.74.15: /* Toggle Actions */

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)
https://greensock.com/docs/v3/Plugins/ScrollTrigger Mit Demos

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Quickstart ==
Eine gute Methode vorzugehen:
* Timeline-Animation ohne ScrollTrigger bauen
* ScrollTrigger Konfiguration in die Timeline einbauen.

== MatchMedia ==
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

* Timeline Animation erstellen
* ScrollTrigger Konfiguration in Timeline aufsetzen
* MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

=== MatchMedia aufsetzen ===
Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

<syntaxhighlight lang="javascript">
ScrollTrigger.matchMedia({
"(minWidth: 800px)": function(){
// all animations for 800px and up go here
},
"(maxWidth: 799px)": function(){
// all animations for smaller screens than 799px go here
},
"all": function(){
// animations valid for all viewport sizes go here
}
});
</syntaxhighlight>

== start, end, trigger, endTrigger ==
Legt fest welches Element und welcher Teil des Elements eine Aktion auslöst.

Standard:
Start wenn Decke von Trigger Element erreicht unteren Viewport
Ende wenn Boden von Trigger Decke von Viewport erreicht (+ 1px)
start: top bottom
end: bottom top

Default
start:

== Toggle Actions ==
toggleActions legen Fest was mit der Animation passiert, wenn Start oder Endpunkte erreicht werden. Daher hängen sie auch eng mit start und stop zusammen.
onEnter, onLeave, onEnterBack, and onLeaveBack

EREIGNISSE
onEnter -> Startpunkt des Elements erreicht Startppunkt => Beginn es Durchgangs
onLeave -> Enpunkt des Elements hinter Endposition => Durchgang komplett
onEnterBack -> Endpunkt des Elements zurück vor Endposition
onLeaveBack -> Startpunkt des Elements zurück vor Startposition

JEDES EREIGNIS KANN ETWAS AUSLÖSEN:
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
toggleActions: play none none none //default

So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

=== Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles() ===
Manchmal kommt es vor, dass eine '''Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt"'''. Wenn man dieses Verhalten nicht möchte und lieber den '''Zustand beim Laden der Seite herstellen''' möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.
ScrollTrigger.saveStyles('.myElement, .myOtherElement);

== Beispiele Tipps etc. ==
=== Horizontal Scroll ===
https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:
https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010
https://greensock.com/forums/topic/25544-horizontal-scroll-trigger-tablet-mobile/

== Probleme beheben ==
=== Sprünge ===
https://greensock.com/st-mistakes/#to-issues
Wichtig zu wissen: ScrollTrigger speichert die Startwerte für eine Animation wenn der Trigger erzeugt wird. Dadurch können Sprünge entstehen, wenn mehrere Trigger auf eine Eigenschaft angewendet werden, das Objekt sich aber zum Startpunkt bereits verändert hat.

Lösungen
- immediateRender Eigenschaft
- fromTo statt to nutzen
- Ein ScrollTrigger für mehrere Animationen (Timeline)

=== Abhängigkeiten vom Viewport ===
Wenn Objekte sich relativ zum Viewport ausrichten muss man darauf achten, dass sich die Werte bei einer Veränderung des Browsers anpassen. Das funktioniert mit Funktionen statt statischen Werten:
end: `+=${elem.offsetHeight}` // won't be updated on refresh
end: () => `+=${elem.offsetHeight}` // will be updated

=== Overlaping Issued / Überlappungen vermeiden ===
https://www.youtube.com/watch?v=SVjndrQ6v9I
Zwei Wege entweder

Toggle Actions (die Regel)
play complete reverse reset
// wird zu

oder

preventOverlaps / fastScrollEnd

GSAP - ScrollTrigger

2022-04-09T13:20:41Z

134.3.74.15:

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)
https://greensock.com/docs/v3/Plugins/ScrollTrigger Mit Demos

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Quickstart ==
Eine gute Methode vorzugehen:
* Timeline-Animation ohne ScrollTrigger bauen
* ScrollTrigger Konfiguration in die Timeline einbauen.

== MatchMedia ==
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

* Timeline Animation erstellen
* ScrollTrigger Konfiguration in Timeline aufsetzen
* MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

=== MatchMedia aufsetzen ===
Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

<syntaxhighlight lang="javascript">
ScrollTrigger.matchMedia({
"(minWidth: 800px)": function(){
// all animations for 800px and up go here
},
"(maxWidth: 799px)": function(){
// all animations for smaller screens than 799px go here
},
"all": function(){
// animations valid for all viewport sizes go here
}
});
</syntaxhighlight>

== Toggle Actions ==
toggleActions
onEnter, onLeave, onEnterBack, and onLeaveBack

EREIGNISSE
onEnter -> Startpunkt des Elements erreicht Startppunkt => Beginn es Durchgangs
onLeave -> Enpunkt des Elements hinter Endposition => Durchgang komplett
onEnterBack -> Endpunkt des Elements zurück vor Endposition
onLeaveBack -> Startpunkt des Elements zurück vor Startposition

JEDES EREIGNIS KANN ETWAS AUSLÖSEN:
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
toggleActions: play none none none //default

So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

=== Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles() ===
Manchmal kommt es vor, dass eine '''Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt"'''. Wenn man dieses Verhalten nicht möchte und lieber den '''Zustand beim Laden der Seite herstellen''' möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.
ScrollTrigger.saveStyles('.myElement, .myOtherElement);

== Beispiele Tipps etc. ==
=== Horizontal Scroll ===
https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:
https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010
https://greensock.com/forums/topic/25544-horizontal-scroll-trigger-tablet-mobile/

== Probleme beheben ==
=== Sprünge ===
https://greensock.com/st-mistakes/#to-issues
Wichtig zu wissen: ScrollTrigger speichert die Startwerte für eine Animation wenn der Trigger erzeugt wird. Dadurch können Sprünge entstehen, wenn mehrere Trigger auf eine Eigenschaft angewendet werden, das Objekt sich aber zum Startpunkt bereits verändert hat.

Lösungen
- immediateRender Eigenschaft
- fromTo statt to nutzen
- Ein ScrollTrigger für mehrere Animationen (Timeline)

=== Abhängigkeiten vom Viewport ===
Wenn Objekte sich relativ zum Viewport ausrichten muss man darauf achten, dass sich die Werte bei einer Veränderung des Browsers anpassen. Das funktioniert mit Funktionen statt statischen Werten:
end: `+=${elem.offsetHeight}` // won't be updated on refresh
end: () => `+=${elem.offsetHeight}` // will be updated

=== Overlaping Issued / Überlappungen vermeiden ===
https://www.youtube.com/watch?v=SVjndrQ6v9I
Zwei Wege entweder

Toggle Actions (die Regel)
play complete reverse reset
// wird zu

oder

preventOverlaps / fastScrollEnd

GSAP - ScrollTrigger

2022-04-09T13:19:20Z

134.3.74.15: /* Toggle Actions */

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Quickstart ==
Eine gute Methode vorzugehen:
* Timeline-Animation ohne ScrollTrigger bauen
* ScrollTrigger Konfiguration in die Timeline einbauen.

== MatchMedia ==
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

* Timeline Animation erstellen
* ScrollTrigger Konfiguration in Timeline aufsetzen
* MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

=== MatchMedia aufsetzen ===
Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

<syntaxhighlight lang="javascript">
ScrollTrigger.matchMedia({
"(minWidth: 800px)": function(){
// all animations for 800px and up go here
},
"(maxWidth: 799px)": function(){
// all animations for smaller screens than 799px go here
},
"all": function(){
// animations valid for all viewport sizes go here
}
});
</syntaxhighlight>

== Toggle Actions ==
toggleActions
onEnter, onLeave, onEnterBack, and onLeaveBack

EREIGNISSE
onEnter -> Startpunkt des Elements erreicht Startppunkt => Beginn es Durchgangs
onLeave -> Enpunkt des Elements hinter Endposition => Durchgang komplett
onEnterBack -> Endpunkt des Elements zurück vor Endposition
onLeaveBack -> Startpunkt des Elements zurück vor Startposition

JEDES EREIGNIS KANN ETWAS AUSLÖSEN:
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
play none none none //default

So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

=== Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles() ===
Manchmal kommt es vor, dass eine '''Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt"'''. Wenn man dieses Verhalten nicht möchte und lieber den '''Zustand beim Laden der Seite herstellen''' möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.
ScrollTrigger.saveStyles('.myElement, .myOtherElement);

== Beispiele Tipps etc. ==
=== Horizontal Scroll ===
https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:
https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010
https://greensock.com/forums/topic/25544-horizontal-scroll-trigger-tablet-mobile/

== Probleme beheben ==
=== Sprünge ===
https://greensock.com/st-mistakes/#to-issues
Wichtig zu wissen: ScrollTrigger speichert die Startwerte für eine Animation wenn der Trigger erzeugt wird. Dadurch können Sprünge entstehen, wenn mehrere Trigger auf eine Eigenschaft angewendet werden, das Objekt sich aber zum Startpunkt bereits verändert hat.

Lösungen
- immediateRender Eigenschaft
- fromTo statt to nutzen
- Ein ScrollTrigger für mehrere Animationen (Timeline)

=== Abhängigkeiten vom Viewport ===
Wenn Objekte sich relativ zum Viewport ausrichten muss man darauf achten, dass sich die Werte bei einer Veränderung des Browsers anpassen. Das funktioniert mit Funktionen statt statischen Werten:
end: `+=${elem.offsetHeight}` // won't be updated on refresh
end: () => `+=${elem.offsetHeight}` // will be updated

=== Overlaping Issued / Überlappungen vermeiden ===
https://www.youtube.com/watch?v=SVjndrQ6v9I
Zwei Wege entweder

Toggle Actions (die Regel)
play complete reverse reset
// wird zu

oder

preventOverlaps / fastScrollEnd

GSAP - ScrollTrigger

2022-04-09T04:23:31Z

134.3.74.15: /* Probleme beheben */

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Quickstart ==
Eine gute Methode vorzugehen:
* Timeline-Animation ohne ScrollTrigger bauen
* ScrollTrigger Konfiguration in die Timeline einbauen.

== MatchMedia ==
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

* Timeline Animation erstellen
* ScrollTrigger Konfiguration in Timeline aufsetzen
* MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

=== MatchMedia aufsetzen ===
Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

<syntaxhighlight lang="javascript">
ScrollTrigger.matchMedia({
"(minWidth: 800px)": function(){
// all animations for 800px and up go here
},
"(maxWidth: 799px)": function(){
// all animations for smaller screens than 799px go here
},
"all": function(){
// animations valid for all viewport sizes go here
}
});
</syntaxhighlight>

== Toggle Actions ==
toggleActions

onEnter, onLeave, onEnterBack, and onLeaveBack
default is play none none none
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
onEnter -> "normales betreten" von vorne
onLeave -> nach komplettem Durchgang nach unten
onEnterBack -> Eintritt von hinten
onLeaveBack -> zurück bis Vor den Anfang

So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

=== Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles() ===
Manchmal kommt es vor, dass eine '''Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt"'''. Wenn man dieses Verhalten nicht möchte und lieber den '''Zustand beim Laden der Seite herstellen''' möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.
ScrollTrigger.saveStyles('.myElement, .myOtherElement);

== Beispiele Tipps etc. ==
=== Horizontal Scroll ===
https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:
https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010
https://greensock.com/forums/topic/25544-horizontal-scroll-trigger-tablet-mobile/

== Probleme beheben ==
=== Sprünge ===
https://greensock.com/st-mistakes/#to-issues
Wichtig zu wissen: ScrollTrigger speichert die Startwerte für eine Animation wenn der Trigger erzeugt wird. Dadurch können Sprünge entstehen, wenn mehrere Trigger auf eine Eigenschaft angewendet werden, das Objekt sich aber zum Startpunkt bereits verändert hat.

Lösungen
- immediateRender Eigenschaft
- fromTo statt to nutzen
- Ein ScrollTrigger für mehrere Animationen (Timeline)

=== Abhängigkeiten vom Viewport ===
Wenn Objekte sich relativ zum Viewport ausrichten muss man darauf achten, dass sich die Werte bei einer Veränderung des Browsers anpassen. Das funktioniert mit Funktionen statt statischen Werten:
end: `+=${elem.offsetHeight}` // won't be updated on refresh
end: () => `+=${elem.offsetHeight}` // will be updated

=== Overlaping Issued / Überlappungen vermeiden ===
https://www.youtube.com/watch?v=SVjndrQ6v9I
Zwei Wege entweder

Toggle Actions (die Regel)
play complete reverse reset
// wird zu

oder

preventOverlaps / fastScrollEnd

GSAP - ScrollTrigger

2022-04-08T13:21:03Z

134.3.74.15:

Update: Die beste Möglichkeit Scrolling mit Animationen zu verbinden ist mit dem neuen (2020) ScrollTrigger Plugin.
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Quickstart ==
Eine gute Methode vorzugehen:
* Timeline-Animation ohne ScrollTrigger bauen
* ScrollTrigger Konfiguration in die Timeline einbauen.

== MatchMedia ==
Mit MatchMedia kann man unterschiedliche ScrollTrigger für unterschiedliche Bildschirme nutzen.
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
MatchMedia verwaltet bei Resize Events auch die Timelines, killt diese wenn nötig oder erzeugt neue. Das erleichtert unglaublich viel Arbeit.

Vorgehen

* Timeline Animation erstellen
* ScrollTrigger Konfiguration in Timeline aufsetzen
* MatchMedia erstellen und Timeline Animation einsetzen.

Ähnlich wie bei MediaQueries umschließt MatchMedia die Animation. Genauer gesagt man übergibt in der MatchMedia Funktion alles was in diesem Query ausgeführt werden soll. MatchMedia überwacht aber auch Veränderungen und setzt alle Animationen zurück, wenn der Query nicht mehr passt. Timelines etc. werden also wieder gekillt und der Urzustand wieder hergestellt.

=== MatchMedia aufsetzen ===
Im Konfigurationsobjekt von MatchMedia übergeben wir als Schlüssel der das MediaQuery enthält. Als Wert übergeben wie eine Funktion. In dieser Funktion werden alle Timelines / Animationen gesetzt die für das Query gelten.

<syntaxhighlight lang="javascript">
ScrollTrigger.matchMedia({
"(minWidth: 800px)": function(){
// all animations for 800px and up go here
},
"(maxWidth: 799px)": function(){
// all animations for smaller screens than 799px go here
},
"all": function(){
// animations valid for all viewport sizes go here
}
});
</syntaxhighlight>

== Toggle Actions ==
toggleActions

onEnter, onLeave, onEnterBack, and onLeaveBack
default is play none none none
"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
onEnter -> "normales betreten" von vorne
onLeave -> nach komplettem Durchgang nach unten
onEnterBack -> Eintritt von hinten
onLeaveBack -> zurück bis Vor den Anfang

So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

=== Probleme mit Inline Styles und mediaQuery beheben - ScrollTrigger.saveStyles() ===
Manchmal kommt es vor, dass eine '''Animation einen Inline Style setzt, der ein mediaQuery in CSS "überschreibt"'''. Wenn man dieses Verhalten nicht möchte und lieber den '''Zustand beim Laden der Seite herstellen''' möchte kann man die Funktion saveStyles nutzen. Mit saveStyles kann man vor der Animation den Zustand von DOM-Objekten speichern. GSAP setzt diese dann wieder zurück wenn der MatchMedia Zweig nicht mehr zutrifft.
ScrollTrigger.saveStyles('.myElement, .myOtherElement);

== Beispiele Tipps etc. ==
=== Horizontal Scroll ===
https://codepen.io/GreenSock/pen/896549f0a83297debd9111fe9b205a97

Mit Tablet Swipe:
https://greensock.com/forums/topic/28016-horizontal-scroll-with-draggable-syncing-the-two/?tab=comments#comment-138080
https://codepen.io/GreenSock/pen/ZELQqeJ?editors=0010
https://greensock.com/forums/topic/25544-horizontal-scroll-trigger-tablet-mobile/

== Probleme beheben ==
=== Overlaping Issued / Überlappungen vermeiden ===
https://www.youtube.com/watch?v=SVjndrQ6v9I
Zwei Wege entweder

Toggle Actions (die Regel)
play complete reverse reset
// wird zu

oder

preventOverlaps / fastScrollEnd

GSAP - Timelines

2022-04-08T12:25:29Z

134.3.74.15:

https://greensock.com/docs/v3/GSAP/gsap.timeline()
https://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/
== Master Timeline ==
Gutes Vorgehen für flexiblen Einsatz:

Celli, I read you question a little differently. it seems you are already using a modular approach, it's just that you are doing

<syntaxhighlight lang="javascript">
var first = new TImelineLite();
var second = new TimelineLite();
var third = new TimelineLite();

master.add(first);
master.add(second);
master.add(third);
</syntaxhighlight>

and want to know why its better to do

<syntaxhighlight lang="javascript">
function getFirst() {
var tl = new TimelineLite();
tl.to(...)
return tl;
}

function getSecond() {
var tl = new TimelineLite();
tl.to(...)
return tl;
}

function getThird() {
var tl = new TimelineLite();
tl.to(...)
return tl;
}

master.add(getFirst());
master.add(getSecond());
master.add(getThird());
</syntaxhighlight>

The end result of both techniques is going to be identical and both offer a modular approach. However, wrapping your timelines in a function has two advantages which may not be applicable all the time, but its nice to have them:)

1: By using functions to create your timelines, you can create them "on-demand" only when needed. In the context of a large game or application the function-wrapped way means you don't have to create 500 timelines in advance, you can just call the proper function when you need a timeline.

2: You can create the same timeline multiple times and add each unique copy of the timeline to the same or any parent timeline. Although it isn't always necessary, it is very easy to use the function-wrapped technique to do
<syntaxhighlight lang="javascript">
master.add(getFirst());
master.add(getFirst());
master.add(getFirst());
master.add(getSecond());
master.add(getSecond());
</syntaxhighlight>

When it comes to doing elaborate, dynamic scene changes (based on user interaction) it makes things incredibly flexible.

Imagine your app has a variety of scenes, and each scene has its own timeline for animating in and out.

You could do something like:
<syntaxhighlight lang="javascript">
navTimeline.add(scene1Out());
navTimeline.add(scene3In(), "-=1");
</syntaxhighlight>

which would trigger the timeline that the scene3In() function generates 1 second before the scene1Out animation ends.

and then maybe later the user wants to go back to scene1

<syntaxhighlight lang="javascript">
navTimeline.add(scene3Out());
navTimeline.add(scene1In(), "-=1");
</syntaxhighlight>

The end result of this technique is that you can generate your transition timelines whenever you need them, as many times as you need them, and glue them together in any number of ways.

<syntaxhighlight lang="javascript">
function carMove(){
var tl = new TimelineMax();
tl.to("#car", 2, {x:"+=200"})
/* more tweens go here */
return tl;
}

function wheelsRotate(){
var tl = new TimelineMax();
tl.to("#wheels", 2, {rotation:"+=360"})
/* more tweens go here */
return tl;
}

masterTL
.add( carMove())
.add( wheelsRotate());
</syntaxhighlight>

GSAP - Timelines

2022-04-08T12:19:26Z

134.3.74.15: /* Master Timeline */

https://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/
== Master Timeline ==
Gutes Vorgehen für flexiblen Einsatz:

Celli, I read you question a little differently. it seems you are already using a modular approach, it's just that you are doing

<syntaxhighlight lang="javascript">
var first = new TImelineLite();
var second = new TimelineLite();
var third = new TimelineLite();

master.add(first);
master.add(second);
master.add(third);
</syntaxhighlight>

and want to know why its better to do

<syntaxhighlight lang="javascript">
function getFirst() {
var tl = new TimelineLite();
tl.to(...)
return tl;
}

function getSecond() {
var tl = new TimelineLite();
tl.to(...)
return tl;
}

function getThird() {
var tl = new TimelineLite();
tl.to(...)
return tl;
}

master.add(getFirst());
master.add(getSecond());
master.add(getThird());
</syntaxhighlight>

The end result of both techniques is going to be identical and both offer a modular approach. However, wrapping your timelines in a function has two advantages which may not be applicable all the time, but its nice to have them:)

1: By using functions to create your timelines, you can create them "on-demand" only when needed. In the context of a large game or application the function-wrapped way means you don't have to create 500 timelines in advance, you can just call the proper function when you need a timeline.

2: You can create the same timeline multiple times and add each unique copy of the timeline to the same or any parent timeline. Although it isn't always necessary, it is very easy to use the function-wrapped technique to do
<syntaxhighlight lang="javascript">
master.add(getFirst());
master.add(getFirst());
master.add(getFirst());
master.add(getSecond());
master.add(getSecond());
</syntaxhighlight>

When it comes to doing elaborate, dynamic scene changes (based on user interaction) it makes things incredibly flexible.

Imagine your app has a variety of scenes, and each scene has its own timeline for animating in and out.

You could do something like:
<syntaxhighlight lang="javascript">
navTimeline.add(scene1Out());
navTimeline.add(scene3In(), "-=1");
</syntaxhighlight>

which would trigger the timeline that the scene3In() function generates 1 second before the scene1Out animation ends.

and then maybe later the user wants to go back to scene1

<syntaxhighlight lang="javascript">
navTimeline.add(scene3Out());
navTimeline.add(scene1In(), "-=1");
</syntaxhighlight>

The end result of this technique is that you can generate your transition timelines whenever you need them, as many times as you need them, and glue them together in any number of ways.

<syntaxhighlight lang="javascript">
function carMove(){
var tl = new TimelineMax();
tl.to("#car", 2, {x:"+=200"})
/* more tweens go here */
return tl;
}

function wheelsRotate(){
var tl = new TimelineMax();
tl.to("#wheels", 2, {rotation:"+=360"})
/* more tweens go here */
return tl;
}

masterTL
.add( carMove())
.add( wheelsRotate());
</syntaxhighlight>

GSAP - Timelines

2022-04-08T12:13:44Z

134.3.74.15: Die Seite wurde neu angelegt: „ https://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/ == Master Timeline == Gutes Vorgehen für flexiblen Einsatz: <syntaxhighlig…“

https://greensock.com/forums/topic/12643-master-timeline-and-the-use-of-functions/
== Master Timeline ==
Gutes Vorgehen für flexiblen Einsatz:
<syntaxhighlight lang="javascript">
function carMove(){
var tl = new TimelineMax();
tl.to("#car", 2, {x:"+=200"})
/* more tweens go here */
return tl;
}

function wheelsRotate(){
var tl = new TimelineMax();
tl.to("#wheels", 2, {rotation:"+=360"})
/* more tweens go here */
return tl;
}

masterTL
.add( carMove())
.add( wheelsRotate());
</syntaxhighlight>

GSAP

2022-04-08T12:11:57Z

134.3.74.15: /* Links */

== Greensock Animation Plattform ==
GSAP ist eine Sammlung von JavaScripten zur Animation. Es ist im Moment der quasi Standard wenn es um JavaScript Manipulation von CSS Eigenschaften geht.

GSAP ist in der Basisversion frei. Mit einem kostenpflichtigen Account bekommt man zusätzliche Plugins.

GSAP übernimmt einem Arbeit ab, da es recht gut mit verschiedenen Browsern und Plattformen umgehen kann und außerdem performant arbeitet.

== Links ==
[[GSAP - Timelines]]
https://greensock.com
https://greensock.com/install
[[GSAP - Snippets]]
https://tympanus.net/codrops/2019/11/14/the-new-features-of-gsap-3/
https://greensock.com/scrollmagic - obsolet mit ScrollTrigger
https://css-tricks.com/writing-smarter-animation-code/ // *****
https://css-tricks.com/tips-for-writing-animation-code-efficiently/ // *****
[[GSAP - Plugins]]

== Beispiele ==
[[GSAP - Infinite Textbanner]]

== Quickstart ==
Einbinden
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="js/main.js"></script>
Einfache Animationen
<syntaxhighlight lang="javascript">
gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});
</syntaxhighlight>
Ease In Out
https://greensock.com/docs/v3/Eases
gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});

== Umstieg von v2 auf v3 / Codesnippets ==
https://greensock.com/3-release-notes
Vieles wurde vereinfacht. Die meisten alten Funktionen funktionieren weiterhin. Neue Projekte sollte man in der neuen Syntax realisieren. Es kamen viele nützliche Dinge hinzu.

=== Vereinheitlichung der Objekte ===
* Keine Unterscheidung mehr zwischen TweenMax und TweenMax Lite, Timeline... Es gibt '''nur noch ein gsap Objekt'''.
* Duration ist jetzt im Eigenschaften Objekt.
//OLD - duration was 2nd parameter
TweenMax.to(".class", 1, {x:100});
//NEW - duration is now a property of the vars object
gsap.to(".class", {duration:1, x:100});
* Ease ist einfacher
<syntaxhighlight lang="javascript">
//OLD ==> NEW
Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
Elastic.easeIn ==> "elastic.in"
Elastic.easeInOut ==> "elastic.inOut"
Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

//and the other configurable eases are much easier!:
SteppedEase.config(5) ==> "steps(5)"
SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
RoughEase.ease.config({points:40}) ==> "rough(40)"
ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"
</syntaxhighlight>
=== Vererbung von Timeline Eigenschaften ===
<syntaxhighlight lang="javascript">
gsap.timeline({defaults:{ease:"back", duration:2}})
.to(".class-1", {x:100}) //inherits the ease and duration from the parent timeline!
.to(".class-2", {y:200}) //this one too
</syntaxhighlight>

=== Staggering als Eigenschaft ===
'''Staggering''' in den Properties. Früher mußte man stagger Funktionen nutzen (staggerTo()...)
<syntaxhighlight lang="javascript">
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: {
amount:2,
from:"center",
grid:"auto",
onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
}
});
</syntaxhighlight>

=== Keyframes ===
Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.
<syntaxhighlight lang="javascript">
gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
{x:100, duration:1},
{y:200, duration:1, delay:0.5}, //create a 0.5 second gap
{rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighligh>

=== Neue Timeline Control Features ===
Standardmäßig startet ein Tween nachdem der vorige beendet ist. möchte man ihn gleichzeitig starten musste man früher mit Labels arbeiten, oder die Dauer wissen und ihn vorziehen. Jetzt geht das einfacher. '''Man kann eine nachfolgende Animation relativ zum Endpunkt ODER zum Startpunkt der vorigen positionieren.'''
* "<" references the most recently-added animation's START time
* ">" references the most recently-added animation's END time

<syntaxhighlight lang="javascript">
var tl = gsap.timeline();
tl.to(...)
.to(..., "") //starts immediately after the previous tween's end time (sequenced)
.to(..., ">-0.5") //overlaps with the previous tween by 0.5 seconds (because the number is negative)
</syntaxhighlight>

=== Globale Timeline kontrollieren ===
gsap.globalTimeline.timeScale(0.1); //slow everything down
gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls()

=== Sinnvollere Aliase ===
* Sinnvollere Aliase für CSS-Eigenschaften: x -> translateX, y -> translateY, rotate -> rotation
Geschickte Shortcuts für Rotation:
rotation:"270_short" //animates in the shortest direction!
rotation:"270_cw" //animates clockwise
rotation:"270_ccw" //animates counter-clockwise
Einheiten für x und y Transformationen möglich:
gsap.to(".class", {
x:"50vw", //units! (default is px)
y:"5em"
});
=== Sonstiges ===
* '''MotionPathPlugin''' ersetzt BezierPlugin. Hat zusätzlich einen '''Editor''' (nur Club Members)
* Neue '''random''' Funktion
* '''getProperty''' Funktion mit Konvertierung von Einheiten
* Es lassen sich "'''effects'''" definieren, die man dann als Animation / Timeline wieder verwenden kann. Auch Parameter kann man nutzen.
* Man kann jetzt width und height von DOM Objekten animieren die mit "'''auto'''" definiert sind.
* Snap Plugin - bietet mehrere Möglichkeiten auf bestimmte Werte zu runden (in Array, in der Nähe...)
* Zahlreiche nützliche Utility Funktionen

ProcessWire - Multilanguage Website

2022-04-06T14:34:33Z

134.3.74.15: /* Seiten nur in einer Sprache verfügbar */

Mehrsprachige Websites mit ProcessWire / Andere Default Sprache

== Links ==
* https://processwire.com/docs/multi-language-support/
* https://processwire.com/talk/topic/5518-multi-language-site/
* http://processwire.com/api/multi-language-support/multi-language-urls/
* https://processwire.com/talk/topic/9322-change-default-language-for-homepage/ (Modul Solution, mehr zur Anschauung)

== Einleitung ==
Es gibt mehrere Bereiche an die man denken muss. Einmal geht es um die Eingabe im Backend, die Ausgabe im Frontend, die Sprachnavigation auf der Website und die Templates:
* Wie übersetze ich Text in meinen '''Templates''' ? Siehe unten i18n
* Wie übersetze ich '''Inhalte''' im Backend ? Dafür ist das Modul Language Support Fields zuständig
* Wie sollen meine URLs aussehen ? Prinzipiell kann man jedem User unterschiedliche Sprachen auch ohne andere Domain liefern (über seine Session) aber i.d.R wollen wir die URL anzupassen.
** ''domain.de/en/meineSeite'' oder ''domain.de/myPage''
** Um '''Seitennamen''' zu übersetzen oder ein Domainkürzel in der URL voranzustellen benötige ich das Modul '''Language Support Page Names'''

== Welche Module benötige ich ==
Da es einige Module in diesem Zusammenhang gibt hier eine Übersicht. Man findet Sie am besten unter
Modules > Core > Language

* '''Languages Support''' - ProcessWire multi-language support. Basis Modul bracht man für alle Beispiele unten. Reicht aus, wenn man nur die Standard-Sprache ändern will. '''Hinweis:''' In der aktuellen PW3 Version schlägt einem ProcessWire nach Installation des Language Support Moduls gleich die Ergänzenden Module (s.u.) vor und man kann den Installationsprozess ziemlich fix erledigen.
* '''Languages Support - Fields''' Required to use multi-language fields. Basis für mehrsprachige Felder im Backend.
* '''Languages Support - Page Names''' (LanguageSupportPageNames) Required to use multi-language page names. Braucht man nur wenn '''alle Seiten in allen Sprachen unterschiedliche Namen''' bekommen sollen.
* '''Languages Support - Tabs''' Organizes multi-language fields into tabs for a cleaner easier to use interface.
Für mehrsprachige Seiten benötigen wir im Frontend i.d.R. folgende Module:
* '''Language Support Fields''' - Sind Felder, die im Backend für jede Sprache eine eigene Eingabe bieten.
* '''Language Support Page Names''' benötigt man, damit man für die Sprachen eigene URLs angeben kann. Z.B. bei Home in Englisch /en/ usw.
* '''FieldtypePageTitleLanguage''' benötigt man wenn man alle Seitenamen anpassen will (seite1_de seite1_fr ...) Für einen reinen Sprachpfad (/de/Seite) braucht man das nicht.

== Einsprachige Seite aber Deutsch als Default Sprache ==
Wenn nur die Standardsprache verändern möchte, aber keine Mehrsprachige Seite benötigt brauchen wir nur das Modul '''Language Support'''
* Enable languages support -> '''Core Module "Language Support" aktivieren'''. -> Sprachen stehen num im Backend Setup zur Verfügung
* '''Titel der Default Sprache''' anpassen (z.B. Deutsch (default) )
* Language Pack in der default Sprache installieren -> Dies ist ab jetzt die Default Sprache. Nicht vergessen auch den '''lang Tag im Header''' zu setzen, damit der Browser die Sprache richtig erkennt.

== Sprachpakete installieren ==
https://processwire.com/modules/category/language-pack/
* Sprache auswählen und dort komplettes zip hochladen.
* Informell (DU) leider im Moment nicht vorhanden

== Basis-Module für Mehrsprachigkeit im Backend ==
Für mehrsprachige Seiten benötigen wir i.d.R. folgende Module:
* '''Language Support Fields''' für die Backend Übersetzungen und '''Language Support Page Names''' für die URLs.
* '''FieldtypePageTitleLanguage''' benötigt man wenn man alle Seitenamen anpassen will (seite1_de seite1_fr ...) Für einen reinen Sprachpfad (/de/Seite) braucht man das nicht.
* Für weitere Sprachen entsprechend hinzufügen.
Vorgehen:
* Language Packs installieren: drop in the none english language pack (for admin backend) into the default language, (e.g. german langpack)
* As a nice sideeffect every new user in your system gets the native language per default without have it to select from the list.

== Templates für Multilanguage vorbereiten (i18n) ==
https://processwire.com/docs/multi-language-support/code-i18n/
https://processwire.com/blog/posts/functional-fields/
=== Functional fields ===
In PW3 kamen die functional Fields hinzu. Mit diesen kann man statischen Text dynamisch im Page Editor ansprechen. D.h. das Functional Field findet Texte im Template und macht sie automatisch editierbar im Page Editor. Das Ganze funktioniert auch Mehrsprachig.
[[ProcessWire - Functional Fields]]
https://processwire.com/blog/posts/functional-fields/
Beispiele für die Ausgabe von
<pre>
__text('your text');
__textarea('your text');
__richtext('<p>your text</p>');
__text('Subscribe Now', 'subscribe') // define a identifier for this text snippet...
__text('subscribe') // ..reuse it this way
$pages->get('/')->mytext->subscribe // reuse from another template
__text('Subscribe Now', 'subscribe', 'Submit button'); // Label for page editor
__text('Subscribe Now', 'subscribe', 'label=Submit button, notes=Test'); // or use a pw selector
__text('Subscribe Now', 'name=subscribe, label=Submit button, notes=Test'); // equivalent to upper

</pre>

=== Standard Multilanguage nach i18n ===

$out = $this->_("Live long and prosper"); // syntax within a class
$out = __("Live long and prosper!"); // syntax outside of a class

Dann im Backend unter der Sprache "Find files to translate" und die Template Datei auswählen.

=== Variablen in i18n ===
$out = sprintf(__("Created %d pages."), $count);
$out = sprintf(__('Your city is %1$s, and your zip code is %2$s.'), $city, $zipcode);

=== Plural in Multilanguage Files===
Hierzu gibt es die _n() Funktion
$out = sprintf(_n("Created %d page.", "Created %d pages.", $count), $count);
=== Unterschiedliche Übersetzungen bei gleichem Wortlaut ===
Manchmal muss der Begriff in anderen Sprachen unterschiedlich übersetzt werden, obwohl er in der Default Sprache gleich lautet:
<pre>
$label = _x('Comment', 'noun'); // or $this->_x('Comment', 'noun') in a class
...
// some other place in the code
echo _x('Comment', 'column name');
</pre>

=== Kommentare für den Übersetzer und User ===
$date = __('g:i:s a'); // Date string in PHP date() format
echo __("Welcome Guest"); // Headline for guest user // Keep it short (2-3 words)
=== Regeln ===
* Eine Zeile ein Paar Anführungszeichen
* Nur eine Übersetzungsfunktion pro Zeile

== Language Switcher ==
<pre>
// remember what language is set to
$savedLanguage = $user->language;

foreach($languages as $language) {

// if user is already viewing the page in this language, skip it
if($language->id == $savedLanguage->id) continue;

// if this page isn't viewable (active) for the language, skip it
if(!$page->viewable($language)) continue;

// set the user's language, so that the $page->url and any other
// fields we access from it will be reflective of the $language
$user->language = $language;

// output a link to this page in the other language
echo "<li><a href='$page->url'>$language->title: $page->title</a></li>";
}
// restore the original language setting
$user->language = $savedLanguage;
</pre>

== Seiten nur in einer Sprache verfügbar ==
What If I want to create/publish a page only in DE language, and that page should not be available in the default language?
Default language is required. But you could always add your own checkbox field to the page as a toggle to disable it. Your head.inc or _init.php or whatever your common initialization file is could check:

if($page->disable_default_language && $user->language->isDefault()) throw new Wire404Exception();
You'd also have to consider it with navigation generation, perhaps skipping over pages that have the toggle set while in the default language, or adding it to your selectors when querying pages.

Edit: you could also just choose to not use the default language at all.

if($user->language->isDefault()) $user->language = $languages->get("en-us"); // or whatever you want your default to be

== Language Alternate Fields ==
Eine Möglichkeit alle Felder (auch Bilder) in verschiedenen Sprachen zu nutzen.
https://processwire.com/docs/multi-language-support/multi-language-fields/#language-alternate-fields

== Probleme lösen ==
=== Feldtyp nicht als Multilanguagefeld vorhanden - Language Alternate Field ===
Manche Felder (z.B. AssistedUrl) gibt es nur einsprachig. ProcessWire bietet aber mit den '''Language Alternate Fields''' eine Möglichkeit solche Felder mehrsprachig zu nutzen. Dazu braucht man kein Modul. Es ist eine Basis Funktionalität.

Dazu legt man für jede zusätzliche Sprache ein weiteres Feld mit dem selben Namen + der Namenserweiterung _sprachname an. Beispielsweise kann man für ein Feld Namens link ein weiteres Feld Namens '''link_en''' anlegen. Dann nutzt ProcessWire automatisch für die Sprache mit dem Namen '''en'''

== Beispiele ==

=== Multilanguage Page allgemeines Vorgehen ===

==== 1. Module ====
* s.o. alle benötigten installieren

==== 2. Backend ====
* Default Sprache festlegen
** Wenn nicht Englisch Sprachpaket installieren
** Wenn der Titel der Sprache auch der Identifier für den html Tag sein soll muss er ''de, en, fi''... lauten
* Weitere Sprachen hinzufügen. Für Englisch benötigt man kein Sprachpaket. Als Name am besten den offiziellen Code (de, en...) vergeben.
* Die Homepage entscheidet über den Pfad. Wenn Englisch z.B. unter www.meineSeite.com/en/seitenname/ erreichbar sein soll, dann muss für Englisch unter '''Einstellung > Namen en''' eingetragen werden.
* Alle Felder die Übersetzt werden sollen auf Multilanguage Felder umstellen

==== 3. Templates ====
Das '''lang Attribut''' sollte zur Sprache passen. Mit der _x Funktion kann PW beliebige Strings in Templates übersetzten. PW findet diese automatisch.
_main.php (oder header..)
<html lang="<?php echo _x('en', 'HTML language code'); ?>">
Im '''Backend''' muss man zunächst für Englisch den '''Sprachindex aufbauen''' ('''Spracheinstellungen Verwaltung > Sprachen > Englisch''')

Dann kann man nun in den '''Spracheinstellungen Verwaltung > Sprachen > meineSprache''' das Label ''HTML language code'' suchen und mit dem passenden lang tag ersetzen.

Das Funktioniert auch mit beliebigen anderen Werten die man im Template hartkodiert hat.

Man kann auch den Language Title verwenden wenn dieser entsprechend vergeben wurde (en, de,...) . '''Nachteil:''' Dann kann man aber den Titel nicht mehr frei verändern wenn man ihn auch als Bezeichnung für den Language Switcher nutezn möchte.
<html lang="<?= $user->language->title ?>">

Dies hat bei mir nicht funktioniert:
<pre>
<? $lang = $pages->get(1)->getLanguageValue($user->language, 'name'); ?>
<html lang="<?php echo $lang ?>">
</pre>
Hier wird einfach der Name der Sprache die der Benutzer im Moment hat (Session) ausgegeben. Der Name der Sprache sollte im Backend entsprechend der Norm gewählt sein. (de, it, fi...). Problem war das man den Namen der default Sprache nicht vergeben kann.

==== 4. Language Switcher ====
'''Text Navigation''' z.B. so:
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

?>
<ul id="nav-lang" class="nav nav-h">
<?php
foreach($languages as $language){
if(!$page->viewable($language)) continue; // is page viewable in this language?
if($language->id == $user->language->id) {
echo "<li class='current'>";
} else {
echo "<li>";
}
$url = $page->localUrl($language);
$hreflang = $pages->get('/')->getLanguageValue($language, 'name');
echo '<a hreflang="'.$hreflang.'" href="'.$url.'" style="text-transform:uppercase;">'.$language->title.'</a></li>';
echo "</li>";
}
?>
</ul>
</syntaxhighlight>

'''Textnavigation mit first/last etc. Klassen'''

<syntaxhighlight lang="php">
<?php namespace ProcessWire;

?>
<ul id="nav-lang" class="nav nav-h">
<?php
$n = $languages->count();
$i = 0;

$separator = '<span class="separator">|</span>';
foreach($languages as $language){
$liClass = array();
if(!$page->viewable($language)) continue; // is page viewable in this language?
$i++;
if( $i == 1 ) $liClass[] = "first";
if( $i == $n ) $liClass[] = "last";
if($language->id == $user->language->id) $liClass[] = 'current';
echo '<li class="'.implode(' ',$liClass).'">';
$url = $page->localUrl($language);
$hreflang = $pages->get('/')->getLanguageValue($language, 'name');
echo '<a hreflang="'.$hreflang.'" href="'.$url.'" style="text-transform:uppercase;">'.$language->title.'</a></li>';
if( $i < $n ) echo $separator;
echo "</li>";
}
?>
</ul>
</syntaxhighlight>

'''Flaggennavi''' z.B. so :
<syntaxhighlight lang="php">
<?php namespace ProcessWire;

?>
<ul id="nav-lang" class="">
<?php
foreach($languages as $language){
if(!$page->viewable($language)) continue; // is page viewable in this language?
if($language->id == $user->language->id) {

echo '<li class="current" style="opacity:0.5;">';
} else {
echo '<li>';
}
$flag = urls()->templates.'assets/flag-'.$language->name.'.png';
$url = $page->localUrl($language);
$hreflang = $pages->get('/')->getLanguageValue($language, 'name');
echo '<a hreflang="'.$hreflang.'" href="'.$url.'"><img class="flag" src="'.$flag.'" style="width: 100px;"></a></li>';
echo '</li>';
}
?>
</ul>
</syntaxhighlight>

=== Prantner ===
Hauptnavigation mit Flaggen:

language-switcher.inc
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$imgMarkup = "";
$out = "";
foreach($languages as $language) {
if(!$page->viewable($language)) continue; // is page viewable in this language?
$url = $page->localUrl($language);
$hreflang = $homepage->getLanguageValue($language, 'name');
$imgUrl = $config->urls->templates.'assets/flags/'.$language->name.'_sq.png';
$imgMarkup = "<img src=\"$imgUrl\" title=\"$language->title\" alt=\"$language->title\" class=\"circle z-depth-1\">";
if($language->id == $user->language->id) {
$out .= "<span class=\"lang-button current\">";
} else {
$out .= "<span class=\"lang-button\">";
}
$out .= "<a hreflang=\"$hreflang\" href=\"$url\">$imgMarkup</a></span>";
}
$out = '<div id="nav-lang">'.$out.'</div>';
echo $out;
?>
</syntaxhighlight>

language-switcher-mobile.inc
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
?>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<?php
foreach($languages as $language) {
if(!$page->viewable($language)) continue; // is page viewable in this language?
if($language->id == $user->language->id) {
echo "<li class='current'>";
} else {
echo "<li>";
}
$url = $page->localUrl($language);
$hreflang = $homepage->getLanguageValue($language, 'name');
echo "<a hreflang='$hreflang' href='$url'>$language->title</a></li>";
}
?>
</ul>
</syntaxhighlight>

== Language Snippets ==
=== URL der Sprache ===
getLanguageValue($language->id, 'url');
$page->localHttpUrl($language->id);
$page->localUrl($language->id);

ProcessWire - Job Template

2022-04-04T08:14:42Z

134.3.74.15: /* Funktionalität */

== Beispiel Setting für Jobs mit strukturierten Daten ==
Beispiel von SPPS

=== Job Template ===

==== Felder ====
<pre>
{
"job_addresscountry": {
"id": 191,
"name": "job_addresscountry",
"label": "Land",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addresslocality": {
"id": 188,
"name": "job_addresslocality",
"label": "Ort",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addressregion": {
"id": 189,
"name": "job_addressregion",
"label": "Job Region",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_basesalary_maxvalue": {
"id": 185,
"name": "job_basesalary_maxvalue",
"label": "job_basesalary_maxvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"collapsed": 0,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_minvalue": {
"id": 184,
"name": "job_basesalary_minvalue",
"label": "job_basesalary_minvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"collapsed": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_unittext": {
"id": 186,
"name": "job_basesalary_unittext",
"label": "Bezahlung pro",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"columnWidth": 33,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=MONTH|Monat\n2=YEAR|Jahr\n3=HOUR|Stunde\n4=WEEK|Woche\n5=DAY|Tag"
}
},
"job_dateposted": {
"id": 179,
"name": "job_dateposted",
"label": "Job Datum",
"flags": 0,
"type": "FieldtypeDatetime",
"collapsed": 0,
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"notes": "Datum des Postings",
"defaultToday": 1,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": ""
},
"job_description": {
"id": 181,
"name": "job_description",
"label": "job_description",
"flags": 0,
"type": "FieldtypeTextareaLanguage",
"inputfieldClass": "InputfieldCKEditor",
"contentType": 1,
"minlength": 0,
"maxlength": 0,
"showCount": 0,
"rows": 5,
"textformatters": [
"TextformatterHannaCode"
],
"htmlOptions": [
2,
4,
16
],
"langBlankInherit": 0,
"collapsed": 0,
"toolbar": "Format, Styles, -, Bold, Italic, -, RemoveFormat\nNumberedList, BulletedList, -, Blockquote\nPWLink, Unlink, Anchor\nPWImage, Table, HorizontalRule, SpecialChar\nPasteText, PasteFromWord\nScayt, -, Sourcedialog\nJustifyCenter, JustifyLeft, JustifyRight",
"inlineMode": 0,
"useACF": 1,
"usePurifier": 1,
"formatTags": "p;h1;h2;h3;h4;h5;h6;pre;address",
"contentsCss": "/site/templates/modules/InputfieldCKEditor/contents.css",
"stylesSet": "customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js",
"extraPlugins": [
"pwimage",
"pwlink",
"sourcedialog"
],
"removePlugins": "image,magicline",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"imageFields": "",
"toggles": "",
"extraAllowedContent": "",
"contentsInlineCss": "",
"customOptions": "",
"plugin_sourcedialog": ""
},
"job_employmenttype": {
"id": 192,
"name": "job_employmenttype",
"label": "Art der Anstellung",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=FULL_TIME|Vollzeit\n2=PART_TIME|Teilzeit\n3=CONTRACTOR|Vertrag\n4=TEMPORARY|Zeitarbeit\n5=INTERN|Internship (Trainee etc.)\n6=VOLUNTEER|Volontariat\n7=PER_DIEM|Per diem\n8=OTHER|Andere"
}
},
"job_link": {
"id": 178,
"name": "job_link",
"label": "Link zum Jobangebot",
"flags": 0,
"type": "FieldtypeURL",
"textformatters": [
"TextformatterEntities"
],
"noRelative": 0,
"allowIDN": 0,
"allowQuotes": 0,
"addRoot": 0,
"collapsed": 0,
"minlength": 0,
"maxlength": 1024,
"showCount": 0,
"size": 0,
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"placeholder": "",
"pattern": ""
},
"job_logo": {
"id": 183,
"name": "job_logo",
"label": "Logo",
"flags": 0,
"type": "FieldtypeImage",
"fileSchema": 270,
"textformatters": [
"TextformatterEntities"
],
"extensions": "gif jpg jpeg png",
"maxFiles": 0,
"outputFormat": 2,
"descriptionRows": 1,
"useTags": 0,
"gridMode": "grid",
"focusMode": "on",
"resizeServer": 0,
"clientQuality": 90,
"maxReject": "",
"dimensionsByAspectRatio": "",
"defaultValuePage": "",
"inputfieldClass": "InputfieldImage",
"notes": "optional",
"collapsed": 0,
"outputString": "",
"noLang": "",
"entityEncode": "",
"tagsList": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"unzip": "",
"overwrite": "",
"maxWidth": "",
"maxHeight": "",
"maxSize": "",
"minWidth": "",
"minHeight": "",
"aspect_ratios": ""
},
"job_organizationname": {
"id": 193,
"name": "job_organizationname",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=intensiv|SPPS Karlsruhe Intensiv\n2=karlsruhe|SPPS Karlsruhe\n3=rastatt|SPPS Ötigheim/Rastatt\n4=pforzheim|SPPS Pforzheim\n5=rheinhausen|SPPS Rheinhausen-Oberhausen\n6=tagespflege|Tagespflege Etje"
}
},
"job_organizationname_old": {
"id": 182,
"name": "job_organizationname_old",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeText",
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"textformatters": "",
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_postalcode": {
"id": 190,
"name": "job_postalcode",
"label": "PLZ",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_streetaddress": {
"id": 187,
"name": "job_streetaddress",
"label": "Adresse",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_validthrough": {
"id": 180,
"name": "job_validthrough",
"label": "Gültig bis",
"flags": 0,
"type": "FieldtypeDatetime",
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"collapsed": 0,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": "",
"defaultToday": ""
}
}
</pre>
Options für:

'''job_basesalary_unittext'''
<pre>
1=MONTH|Monat
2=YEAR|Jahr
3=HOUR|Stunde
4=WEEK|Woche
5=DAY|Tag
</pre>

'''job_employmenttype'''
<pre>
1=FULL_TIME|Vollzeit
2=PART_TIME|Teilzeit
3=CONTRACTOR|Vertrag
4=TEMPORARY|Zeitarbeit
5=INTERN|Internship (Trainee etc.)
6=VOLUNTEER|Volontariat
7=PER_DIEM|Per diem
8=OTHER|Andere
</pre>

'''job_organizationname'''
<pre>
kann genutzt werden wenn man mehrere Organisationen hat
</pre>

'''Job Fieldset Page'''

Das Feld fasst die anderen Felder in eines zusammen. So kann man sie einfacher handeln.
<pre>
{
"job": {
"id": 177,
"name": "job",
"label": "Job",
"flags": 0,
"type": "FieldtypeFieldsetPage",
"notes": "Daten für ein Jobposting",
"icon": "wrench",
"template_id": 0,
"parent_id": 0,
"repeaterLoading": 2,
"repeaterMaxItems": 1,
"repeaterMinItems": 1,
"collapsed": 0,
"repeaterFields": [
"job_dateposted",
"job_validthrough",
"job_organizationname",
"job_description",
"job_basesalary_minvalue",
"job_basesalary_maxvalue",
"job_basesalary_unittext",
"job_streetaddress",
"job_postalcode",
"job_addresslocality",
"job_addressregion",
"job_addresscountry",
"job_employmenttype",
"job_link",
"job_logo"
],
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"fieldContexts": {
"job_dateposted": {
"icon": "calendar",
"notes": "Datum des Postings. Wenn leer wird das Erstelldatum dieser Seite verwendet."
},
"job_validthrough": {
"icon": "calendar",
"notes": "Empfohlen. Unbefristet für manche Berufsgruppen erlaubt (z.B. Bedienungen)"
},
"job_organizationname": [],
"job_description": [],
"job_basesalary_minvalue": [],
"job_basesalary_maxvalue": [],
"job_basesalary_unittext": [],
"job_streetaddress": [],
"job_postalcode": [],
"job_addresslocality": [],
"job_addressregion": [],
"job_addresscountry": [],
"job_employmenttype": [],
"job_link": {
"notes": "Wenn leer wird diese Seite genutzt."
},
"job_logo": []
}
}
}
</pre>

==== Templates Import ====
Import Daten (Zulässige Kind/Elternseiten von Hand nachtragen)
<pre>
{
"job": {
"id": 53,
"name": "job",
"fieldgroups_id": "job",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": 1,
"noParents": "",
"childTemplates": [],
"parentTemplates": [
"jobs"
],
"allowPageNum": 0,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-user-circle-o title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebot",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"job"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"job": []
}
},
"jobs": {
"id": 55,
"name": "jobs",
"fieldgroups_id": "jobs",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": "",
"noParents": -1,
"childTemplates": [
"job"
],
"parentTemplates": [],
"allowPageNum": 1,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-users title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebote",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"images",
"files",
"menu"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"images": [],
"files": [],
"menu": []
}
}
}
</pre>

=== Template Jobs ===
Todo besser als Layout-Block
<syntaxhighlight lang="php">
// JOBLIST
$joblist = '';
$jobs = pages('template=job,sort=-published');
foreach ($jobs as $item) {
$joblist .= '<li class="joblist-item"><a href="'.$item->url.'">'.$item->title.' ('.$item->job->job_organizationname->title.')</a></div>';
}
$joblist = '<ul class="joblist">'.$joblist.'</ul>';
</syntaxhighlight>
=== Template Job ===
Benötigt im Admin Bereich nur das job Feld. In diesem sind alle anderen benötigten Felder bereits enthalten.

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
include_once('includes/SchemaHelper.php');
$sh = new SchemaHelper;
$jsonld = $sh->jsonldJobPosting($page);

// BEWERBUNGSFORMULAR WENN GESÜNSCHT
$contact = $forms->render('bewerbung');

ob_start();
?>

<div class="container">
<div id="apply">
<h1><?=$page->title?></h1>
<div class="job-description">
<?=$page->job->job_description?>
</div>
<div class="">Arbeitgeber</div>
<?=$page->job->job_organizationname->title?><br>
<?=$page->link?>
</div>
<div class="font-heavy">Arbeitsort</div>
<?=$page->job->job_streetaddress?><br>
<?=$page->job->job_postalcode?> <?=$page->job->job_addresslocality?>
</div>
<?php if ($page->job->job_basesalary_minvalue && $page->job->job_basesalary_maxvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ - <?=$page->job->job_basesalary_maxvalue?>€ <?=$page->job->job_basesalary_unittext->title?></div>
<?php elseif($page->job->job_basesalary_minvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ <?=$page->unit->title?></div>
<?php endif ?>
<div class="font-heavy pt-20">Art der Anstellung</div>
<div class="pb-30"><?=$page->job->job_employmenttype->title?></div>
</div>

<div id="apply-form" class="">
<h2>Bewerbung</h2>
<div><?= $contact ?></div>
</div>

<?=$jsonld?>
</div>
<?php

$content = ob_get_clean();
</syntaxhighlight>

=== Bewerbungsformular ===
<pre>
{
"required": false,
"columnWidth": 0,
"roles": {
"form-submit": [
"guest"
],
"form-list": [],
"form-edit": [],
"form-delete": [],
"entries-list": [],
"entries-edit": [],
"entries-delete": [],
"entries-page": [],
"entries-resend": []
},
"flags": 256,
"pluginActions": [],
"framework": "Uikit3",
"allowPreset": 0,
"skipSessionKey": 0,
"useCookies": 0,
"partialEntryDays": 14,
"spamEntryDays": 7,
"submitText": "Absenden",
"successMessage": "Vielen Dank - Ihre Bewerbung wurde versendet.",
"errorMessage": "Ein Fehler ist aufgetreten. Bitte überprüfen Sie Ihre Eingaben.",
"mobilePx": 0,
"frBasic_noLoad": [],
"frBasic_cssURL": "/site/modules/FormBuilder/frameworks/basic/main.css",
"frBasic_itemContent": [
"description",
"out",
"error",
"notes"
],
"spamFlags": 0,
"listFields": [],
"entryDays": 0,
"emailSubject": "Bewerbungsformular auf salus-klinik.de",
"responderSubject": "Auto-Response",
"saveFlags": 35,
"spamWords": [],
"honeypot": "name_1",
"emailTo": "post@stephanschlegel.de",
"frUikit3_noLoad": [
"framework",
"jquery",
"jqueryui"
],
"frUikit3_ukURL": "/site/modules/FormBuilder/frameworks/uikit3/",
"frUikit3_css": "uikit.min.css",
"frUikit3_horizontal": "0",
"frUikit3_inlineErrorBelow": "1",
"frUikit3_horizHeaderWidth": 30,
"frUikit3_buttonType": "primary",
"children": {
"name_1": {
"type": "Text",
"label": "Name",
"required": false,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"name_2": {
"type": "Text",
"label": "Name",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"e_mail": {
"type": "Email",
"label": "E-Mail",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 250,
"showCount": "0",
"size": 0
},
"telefon": {
"type": "Text",
"label": "Telefon",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"bewerbungsunterlagen": {
"type": "FormBuilderFile",
"label": "Bewerbungsunterlagen",
"notes": "Maximal 3 Dateien á 5MB",
"required": false,
"columnWidth": 0,
"collapsed": "0",
"extensions": "pdf doc docx xls xlsx gif jpg jpeg png",
"maxFiles": 3,
"maxFileSize": 5242880
}
}
}
</pre>
=== Layout Block - Job-Liste ===
Beispiel Salus
<syntaxhighlight lang="php">
<?php namespace ProcessWire;
$sectionClasses = array($page->_type);
$containerClasses = array('ani section');
if($page->bg && $page->bg->value) {
$colorClassBorder = $page->bg->value;
$colorClassContent = $page->bg->value;
}
else {
$colorClassBorder = 'bc1';
$colorClassContent = 'bc1';
}

$out = '';
$jobsMarkup = '';
$jobsAccordion = new Box;
$jobs = pages('template=job,sort=-published');
foreach ($jobs as $item) {

$jobsMarkup .= '
<li class="bc1 joblist-item">
<a class="uk-accordion-title uk-padding-small" href="#">
'.$item->title.'
</a>
<div class="uk-accordion-content uk-padding-small nmt npt">
<p><strong>'.$item->job->job_organizationname->title.'</strong></p>
<p><strong>Arbeitsort:</strong> '.$item->job->job_addresslocality.'<br>
<strong>Art der Anstellung: </strong>'.$item->job->job_employmenttype->title.'</p>
<p><a class="uk-button uk-button-primary" href="'.$item->url.'">Zur Stellenbeschreibung</a></p>
</div>
</li>
';
}

$jobsAccordion->addClasses('accordion uk-accordion nmb');
$jobsAccordion->addAttributes('uk-accordion=""'); // i.e. active:0
$out .= $jobsAccordion->wrap($jobsMarkup,'ul');

// RANDSPALTE?
$out = '
<div class="uk-grid uk-grid-collapse uk-grid-match" uk-grid>
<div class="uk-visible@m uk-width-1-5 '.$colorClassBorder.'">
<div class="uk-padding-small">
</div>
</div>

<div class="uk-width-expand@m">
<div class="uk-padding npt npb npr">
'.renderHeadline($page).'
'. $out .'
</div>
</div>
</div>
';
//$out = renderContainer($page,$out,$containerClasses);
$out = renderSection($page,$out,$sectionClasses,array('skipDefaultClasses'=>false));
return $out;

</syntaxhighlight>
=== Funktionalität ===
==== SchemaHelper ====
Für Erzeugung der Strukturierten Daten

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
/**
* SchemaHelper
* Class for structured data
* V1.0
*/
// @todo outsource some of the nessecary types (i.e. place) in backend use
// fieldgroups for that maybe s.th. like $place = getFg('schema_place')
class SchemaHelper{
// Load the requested schema from the schemas directory and register the class
public function jsonldJobPosting ($p) {
$jsonld = array();
$sanitizer = wire('sanitizer');
//set unset fields (for not mandatory fields)
$p->job->job_validthrough = $p->job->job_validthrough ? : ''; // todo test

$jsonld["@context"] = "http://schema.org/";
$jsonld["@type"] = "JobPosting";
if($p->job->job_link) $jsonld["url"] = $p->job->job_link;
else $jsonld["url"] = $sanitizer->url($p->httpUrl);
$jsonld["datePosted"] = !empty($p->job->job_dateposted) ? date('Y-m-d', $p->job->getUnformatted('job_dateposted') ) : date('Y-m-d', strtotime($p->created));
$jsonld["validThrough"] = date('Y-m-d', $p->job->getUnformatted('job_validthrough') );
$jsonld["description"] = $sanitizer->textarea($p->job->job_description);
$jsonld['hiringOrganization'] = array(
"@type" => "Organization",
"name" => $sanitizer->text($p->job->job_organizationname->title),
"sameAs" => $sanitizer->url($p->job->job_link)
);
if($p->job->link2)$jsonld['hiringOrganization']['logo'] = $p->job->link2;
$jsonld['title'] = $sanitizer->text($p->title);

if($p->job->job_basesalary_minvalue && $p->job->job_basesalary_maxvalue && $p->job->job_basesalary_unittext){
$jsonld['baseSalary'] = array(
"@type" => "MonetaryAmount",
"currency" => "EUR",
"value" => array(
"@type" => "QuantitativeValue",
"minValue" => $sanitizer->float($p->job->job_basesalary_minvalue),
"maxValue" => $sanitizer->float($p->job->job_basesalary_maxvalue),
"unitText" => $sanitizer->text($p->job->job_basesalary_unittext->value)
)
);
}else if($p->job->job_basesalary_minvalue && $p->job->job_basesalary_unittext){
$jsonld['baseSalary'] = array(
"@type" => "MonetaryAmount",
"currency" => "EUR",
"value" => array(
"@type" => "QuantitativeValue",
"value" => $sanitizer->float($p->job->job_basesalary_minvalue),
"unitText" => $sanitizer->text($p->job->job_basesalary_unittext->value)
)
);
}
$jsonld['jobLocation'] = array(
"@type" => "Place",
"address" => array(
"@type" => "PostalAddress",
"streetAddress" => $sanitizer->text($p->job->job_streetaddress),
"addressLocality" => $sanitizer->text($p->job->job_addresslocality),
"addressRegion" => $sanitizer->text($p->job->job_addressregion),
"postalCode" => $sanitizer->text($p->job->job_postalcode),
"addressCountry" => $sanitizer->text($p->job->job_addresscountry),
)
);
// recommended properties

if($c = count($p->job->job_employmenttype)){
$types = array();
foreach($p->job->job_employmenttype as $type){
$types[] = $sanitizer->text($type->value);
}
//var_dump($c);
if($c > 1) $jsonld['employmentType'] = $types;
else $jsonld['employmentType'] = $types[0];
}

//$out .= '<script type="application/ld+json">' . json_encode($jsonld) . '</script>';
$out = '<script type="application/ld+json">' . json_encode($jsonld,JSON_PRETTY_PRINT) . '</script>';

return $out;
}

}

</syntaxhighlight>

ProcessWire - Job Template

2022-04-04T08:01:04Z

134.3.74.15: /* SchemaHelper */

== Beispiel Setting für Jobs mit strukturierten Daten ==
Beispiel von SPPS

=== Job Template ===

==== Felder ====
<pre>
{
"job_addresscountry": {
"id": 191,
"name": "job_addresscountry",
"label": "Land",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addresslocality": {
"id": 188,
"name": "job_addresslocality",
"label": "Ort",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addressregion": {
"id": 189,
"name": "job_addressregion",
"label": "Job Region",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_basesalary_maxvalue": {
"id": 185,
"name": "job_basesalary_maxvalue",
"label": "job_basesalary_maxvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"collapsed": 0,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_minvalue": {
"id": 184,
"name": "job_basesalary_minvalue",
"label": "job_basesalary_minvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"collapsed": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_unittext": {
"id": 186,
"name": "job_basesalary_unittext",
"label": "Bezahlung pro",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"columnWidth": 33,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=MONTH|Monat\n2=YEAR|Jahr\n3=HOUR|Stunde\n4=WEEK|Woche\n5=DAY|Tag"
}
},
"job_dateposted": {
"id": 179,
"name": "job_dateposted",
"label": "Job Datum",
"flags": 0,
"type": "FieldtypeDatetime",
"collapsed": 0,
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"notes": "Datum des Postings",
"defaultToday": 1,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": ""
},
"job_description": {
"id": 181,
"name": "job_description",
"label": "job_description",
"flags": 0,
"type": "FieldtypeTextareaLanguage",
"inputfieldClass": "InputfieldCKEditor",
"contentType": 1,
"minlength": 0,
"maxlength": 0,
"showCount": 0,
"rows": 5,
"textformatters": [
"TextformatterHannaCode"
],
"htmlOptions": [
2,
4,
16
],
"langBlankInherit": 0,
"collapsed": 0,
"toolbar": "Format, Styles, -, Bold, Italic, -, RemoveFormat\nNumberedList, BulletedList, -, Blockquote\nPWLink, Unlink, Anchor\nPWImage, Table, HorizontalRule, SpecialChar\nPasteText, PasteFromWord\nScayt, -, Sourcedialog\nJustifyCenter, JustifyLeft, JustifyRight",
"inlineMode": 0,
"useACF": 1,
"usePurifier": 1,
"formatTags": "p;h1;h2;h3;h4;h5;h6;pre;address",
"contentsCss": "/site/templates/modules/InputfieldCKEditor/contents.css",
"stylesSet": "customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js",
"extraPlugins": [
"pwimage",
"pwlink",
"sourcedialog"
],
"removePlugins": "image,magicline",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"imageFields": "",
"toggles": "",
"extraAllowedContent": "",
"contentsInlineCss": "",
"customOptions": "",
"plugin_sourcedialog": ""
},
"job_employmenttype": {
"id": 192,
"name": "job_employmenttype",
"label": "Art der Anstellung",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=FULL_TIME|Vollzeit\n2=PART_TIME|Teilzeit\n3=CONTRACTOR|Vertrag\n4=TEMPORARY|Zeitarbeit\n5=INTERN|Internship (Trainee etc.)\n6=VOLUNTEER|Volontariat\n7=PER_DIEM|Per diem\n8=OTHER|Andere"
}
},
"job_link": {
"id": 178,
"name": "job_link",
"label": "Link zum Jobangebot",
"flags": 0,
"type": "FieldtypeURL",
"textformatters": [
"TextformatterEntities"
],
"noRelative": 0,
"allowIDN": 0,
"allowQuotes": 0,
"addRoot": 0,
"collapsed": 0,
"minlength": 0,
"maxlength": 1024,
"showCount": 0,
"size": 0,
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"placeholder": "",
"pattern": ""
},
"job_logo": {
"id": 183,
"name": "job_logo",
"label": "Logo",
"flags": 0,
"type": "FieldtypeImage",
"fileSchema": 270,
"textformatters": [
"TextformatterEntities"
],
"extensions": "gif jpg jpeg png",
"maxFiles": 0,
"outputFormat": 2,
"descriptionRows": 1,
"useTags": 0,
"gridMode": "grid",
"focusMode": "on",
"resizeServer": 0,
"clientQuality": 90,
"maxReject": "",
"dimensionsByAspectRatio": "",
"defaultValuePage": "",
"inputfieldClass": "InputfieldImage",
"notes": "optional",
"collapsed": 0,
"outputString": "",
"noLang": "",
"entityEncode": "",
"tagsList": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"unzip": "",
"overwrite": "",
"maxWidth": "",
"maxHeight": "",
"maxSize": "",
"minWidth": "",
"minHeight": "",
"aspect_ratios": ""
},
"job_organizationname": {
"id": 193,
"name": "job_organizationname",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=intensiv|SPPS Karlsruhe Intensiv\n2=karlsruhe|SPPS Karlsruhe\n3=rastatt|SPPS Ötigheim/Rastatt\n4=pforzheim|SPPS Pforzheim\n5=rheinhausen|SPPS Rheinhausen-Oberhausen\n6=tagespflege|Tagespflege Etje"
}
},
"job_organizationname_old": {
"id": 182,
"name": "job_organizationname_old",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeText",
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"textformatters": "",
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_postalcode": {
"id": 190,
"name": "job_postalcode",
"label": "PLZ",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_streetaddress": {
"id": 187,
"name": "job_streetaddress",
"label": "Adresse",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_validthrough": {
"id": 180,
"name": "job_validthrough",
"label": "Gültig bis",
"flags": 0,
"type": "FieldtypeDatetime",
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"collapsed": 0,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": "",
"defaultToday": ""
}
}
</pre>
Options für:

'''job_basesalary_unittext'''
<pre>
1=MONTH|Monat
2=YEAR|Jahr
3=HOUR|Stunde
4=WEEK|Woche
5=DAY|Tag
</pre>

'''job_employmenttype'''
<pre>
1=FULL_TIME|Vollzeit
2=PART_TIME|Teilzeit
3=CONTRACTOR|Vertrag
4=TEMPORARY|Zeitarbeit
5=INTERN|Internship (Trainee etc.)
6=VOLUNTEER|Volontariat
7=PER_DIEM|Per diem
8=OTHER|Andere
</pre>

'''job_organizationname'''
<pre>
kann genutzt werden wenn man mehrere Organisationen hat
</pre>

'''Job Fieldset Page'''

Das Feld fasst die anderen Felder in eines zusammen. So kann man sie einfacher handeln.
<pre>
{
"job": {
"id": 177,
"name": "job",
"label": "Job",
"flags": 0,
"type": "FieldtypeFieldsetPage",
"notes": "Daten für ein Jobposting",
"icon": "wrench",
"template_id": 0,
"parent_id": 0,
"repeaterLoading": 2,
"repeaterMaxItems": 1,
"repeaterMinItems": 1,
"collapsed": 0,
"repeaterFields": [
"job_dateposted",
"job_validthrough",
"job_organizationname",
"job_description",
"job_basesalary_minvalue",
"job_basesalary_maxvalue",
"job_basesalary_unittext",
"job_streetaddress",
"job_postalcode",
"job_addresslocality",
"job_addressregion",
"job_addresscountry",
"job_employmenttype",
"job_link",
"job_logo"
],
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"fieldContexts": {
"job_dateposted": {
"icon": "calendar",
"notes": "Datum des Postings. Wenn leer wird das Erstelldatum dieser Seite verwendet."
},
"job_validthrough": {
"icon": "calendar",
"notes": "Empfohlen. Unbefristet für manche Berufsgruppen erlaubt (z.B. Bedienungen)"
},
"job_organizationname": [],
"job_description": [],
"job_basesalary_minvalue": [],
"job_basesalary_maxvalue": [],
"job_basesalary_unittext": [],
"job_streetaddress": [],
"job_postalcode": [],
"job_addresslocality": [],
"job_addressregion": [],
"job_addresscountry": [],
"job_employmenttype": [],
"job_link": {
"notes": "Wenn leer wird diese Seite genutzt."
},
"job_logo": []
}
}
}
</pre>

==== Templates Import ====
Import Daten (Zulässige Kind/Elternseiten von Hand nachtragen)
<pre>
{
"job": {
"id": 53,
"name": "job",
"fieldgroups_id": "job",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": 1,
"noParents": "",
"childTemplates": [],
"parentTemplates": [
"jobs"
],
"allowPageNum": 0,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-user-circle-o title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebot",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"job"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"job": []
}
},
"jobs": {
"id": 55,
"name": "jobs",
"fieldgroups_id": "jobs",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": "",
"noParents": -1,
"childTemplates": [
"job"
],
"parentTemplates": [],
"allowPageNum": 1,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-users title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebote",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"images",
"files",
"menu"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"images": [],
"files": [],
"menu": []
}
}
}
</pre>

=== Template Jobs ===
Todo besser als Layout-Block
<syntaxhighlight lang="php">
// JOBLIST
$joblist = '';
$jobs = pages('template=job,sort=-published');
foreach ($jobs as $item) {
$joblist .= '<li class="joblist-item"><a href="'.$item->url.'">'.$item->title.' ('.$item->job->job_organizationname->title.')</a></div>';
}
$joblist = '<ul class="joblist">'.$joblist.'</ul>';
</syntaxhighlight>
=== Template Job ===
Benötigt im Admin Bereich nur das job Feld. In diesem sind alle anderen benötigten Felder bereits enthalten.

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
include_once('includes/SchemaHelper.php');
$sh = new SchemaHelper;
$jsonld = $sh->jsonldJobPosting($page);

// BEWERBUNGSFORMULAR WENN GESÜNSCHT
$contact = $forms->render('bewerbung');

ob_start();
?>

<div class="container">
<div id="apply">
<h1><?=$page->title?></h1>
<div class="job-description">
<?=$page->job->job_description?>
</div>
<div class="">Arbeitgeber</div>
<?=$page->job->job_organizationname->title?><br>
<?=$page->link?>
</div>
<div class="font-heavy">Arbeitsort</div>
<?=$page->job->job_streetaddress?><br>
<?=$page->job->job_postalcode?> <?=$page->job->job_addresslocality?>
</div>
<?php if ($page->job->job_basesalary_minvalue && $page->job->job_basesalary_maxvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ - <?=$page->job->job_basesalary_maxvalue?>€ <?=$page->job->job_basesalary_unittext->title?></div>
<?php elseif($page->job->job_basesalary_minvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ <?=$page->unit->title?></div>
<?php endif ?>
<div class="font-heavy pt-20">Art der Anstellung</div>
<div class="pb-30"><?=$page->job->job_employmenttype->title?></div>
</div>

<div id="apply-form" class="">
<h2>Bewerbung</h2>
<div><?= $contact ?></div>
</div>

<?=$jsonld?>
</div>
<?php

$content = ob_get_clean();
</syntaxhighlight>

=== Bewerbungsformular ===
<pre>
{
"required": false,
"columnWidth": 0,
"roles": {
"form-submit": [
"guest"
],
"form-list": [],
"form-edit": [],
"form-delete": [],
"entries-list": [],
"entries-edit": [],
"entries-delete": [],
"entries-page": [],
"entries-resend": []
},
"flags": 256,
"pluginActions": [],
"framework": "Uikit3",
"allowPreset": 0,
"skipSessionKey": 0,
"useCookies": 0,
"partialEntryDays": 14,
"spamEntryDays": 7,
"submitText": "Absenden",
"successMessage": "Vielen Dank - Ihre Bewerbung wurde versendet.",
"errorMessage": "Ein Fehler ist aufgetreten. Bitte überprüfen Sie Ihre Eingaben.",
"mobilePx": 0,
"frBasic_noLoad": [],
"frBasic_cssURL": "/site/modules/FormBuilder/frameworks/basic/main.css",
"frBasic_itemContent": [
"description",
"out",
"error",
"notes"
],
"spamFlags": 0,
"listFields": [],
"entryDays": 0,
"emailSubject": "Bewerbungsformular auf salus-klinik.de",
"responderSubject": "Auto-Response",
"saveFlags": 35,
"spamWords": [],
"honeypot": "name_1",
"emailTo": "post@stephanschlegel.de",
"frUikit3_noLoad": [
"framework",
"jquery",
"jqueryui"
],
"frUikit3_ukURL": "/site/modules/FormBuilder/frameworks/uikit3/",
"frUikit3_css": "uikit.min.css",
"frUikit3_horizontal": "0",
"frUikit3_inlineErrorBelow": "1",
"frUikit3_horizHeaderWidth": 30,
"frUikit3_buttonType": "primary",
"children": {
"name_1": {
"type": "Text",
"label": "Name",
"required": false,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"name_2": {
"type": "Text",
"label": "Name",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"e_mail": {
"type": "Email",
"label": "E-Mail",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 250,
"showCount": "0",
"size": 0
},
"telefon": {
"type": "Text",
"label": "Telefon",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"bewerbungsunterlagen": {
"type": "FormBuilderFile",
"label": "Bewerbungsunterlagen",
"notes": "Maximal 3 Dateien á 5MB",
"required": false,
"columnWidth": 0,
"collapsed": "0",
"extensions": "pdf doc docx xls xlsx gif jpg jpeg png",
"maxFiles": 3,
"maxFileSize": 5242880
}
}
}
</pre>
=== Funktionalität ===
==== SchemaHelper ====
Für Erzeugung der Strukturierten Daten

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
/**
* SchemaHelper
* Class for structured data
* V1.0
*/
// @todo outsource some of the nessecary types (i.e. place) in backend use
// fieldgroups for that maybe s.th. like $place = getFg('schema_place')
class SchemaHelper{
// Load the requested schema from the schemas directory and register the class
public function jsonldJobPosting ($p) {
$jsonld = array();
$sanitizer = wire('sanitizer');
//set unset fields (for not mandatory fields)
$p->job->job_validthrough = $p->job->job_validthrough ? : ''; // todo test

$jsonld["@context"] = "http://schema.org/";
$jsonld["@type"] = "JobPosting";
if($p->job->job_link) $jsonld["url"] = $p->job->job_link;
else $jsonld["url"] = $sanitizer->url($p->httpUrl);
$jsonld["datePosted"] = !empty($p->job->job_dateposted) ? date('Y-m-d', $p->job->getUnformatted('job_dateposted') ) : date('Y-m-d', strtotime($p->created));
$jsonld["validThrough"] = date('Y-m-d', $p->job->getUnformatted('job_validthrough') );
$jsonld["description"] = $sanitizer->textarea($p->job->job_description);
$jsonld['hiringOrganization'] = array(
"@type" => "Organization",
"name" => $sanitizer->text($p->job->job_organizationname->title),
"sameAs" => $sanitizer->url($p->job->job_link)
);
if($p->job->link2)$jsonld['hiringOrganization']['logo'] = $p->job->link2;
$jsonld['title'] = $sanitizer->text($p->title);

if($p->job->job_basesalary_minvalue && $p->job->job_basesalary_maxvalue && $p->job->job_basesalary_unittext){
$jsonld['baseSalary'] = array(
"@type" => "MonetaryAmount",
"currency" => "EUR",
"value" => array(
"@type" => "QuantitativeValue",
"minValue" => $sanitizer->float($p->job->job_basesalary_minvalue),
"maxValue" => $sanitizer->float($p->job->job_basesalary_maxvalue),
"unitText" => $sanitizer->text($p->job->job_basesalary_unittext->value)
)
);
}else if($p->job->job_basesalary_minvalue && $p->job->job_basesalary_unittext){
$jsonld['baseSalary'] = array(
"@type" => "MonetaryAmount",
"currency" => "EUR",
"value" => array(
"@type" => "QuantitativeValue",
"value" => $sanitizer->float($p->job->job_basesalary_minvalue),
"unitText" => $sanitizer->text($p->job->job_basesalary_unittext->value)
)
);
}
$jsonld['jobLocation'] = array(
"@type" => "Place",
"address" => array(
"@type" => "PostalAddress",
"streetAddress" => $sanitizer->text($p->job->job_streetaddress),
"addressLocality" => $sanitizer->text($p->job->job_addresslocality),
"addressRegion" => $sanitizer->text($p->job->job_addressregion),
"postalCode" => $sanitizer->text($p->job->job_postalcode),
"addressCountry" => $sanitizer->text($p->job->job_addresscountry),
)
);
// recommended properties

if($c = count($p->job->job_employmenttype)){
$types = array();
foreach($p->job->job_employmenttype as $type){
$types[] = $sanitizer->text($type->value);
}
//var_dump($c);
if($c > 1) $jsonld['employmentType'] = $types;
else $jsonld['employmentType'] = $types[0];
}

//$out .= '<script type="application/ld+json">' . json_encode($jsonld) . '</script>';
$out = '<script type="application/ld+json">' . json_encode($jsonld,JSON_PRETTY_PRINT) . '</script>';

return $out;
}

}

</syntaxhighlight>

ProcessWire - Job Template

2022-04-04T07:52:36Z

134.3.74.15: /* Funktionalität */

== Beispiel Setting für Jobs mit strukturierten Daten ==
Beispiel von SPPS

=== Job Template ===

==== Felder ====
<pre>
{
"job_addresscountry": {
"id": 191,
"name": "job_addresscountry",
"label": "Land",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addresslocality": {
"id": 188,
"name": "job_addresslocality",
"label": "Ort",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addressregion": {
"id": 189,
"name": "job_addressregion",
"label": "Job Region",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_basesalary_maxvalue": {
"id": 185,
"name": "job_basesalary_maxvalue",
"label": "job_basesalary_maxvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"collapsed": 0,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_minvalue": {
"id": 184,
"name": "job_basesalary_minvalue",
"label": "job_basesalary_minvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"collapsed": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_unittext": {
"id": 186,
"name": "job_basesalary_unittext",
"label": "Bezahlung pro",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"columnWidth": 33,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=MONTH|Monat\n2=YEAR|Jahr\n3=HOUR|Stunde\n4=WEEK|Woche\n5=DAY|Tag"
}
},
"job_dateposted": {
"id": 179,
"name": "job_dateposted",
"label": "Job Datum",
"flags": 0,
"type": "FieldtypeDatetime",
"collapsed": 0,
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"notes": "Datum des Postings",
"defaultToday": 1,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": ""
},
"job_description": {
"id": 181,
"name": "job_description",
"label": "job_description",
"flags": 0,
"type": "FieldtypeTextareaLanguage",
"inputfieldClass": "InputfieldCKEditor",
"contentType": 1,
"minlength": 0,
"maxlength": 0,
"showCount": 0,
"rows": 5,
"textformatters": [
"TextformatterHannaCode"
],
"htmlOptions": [
2,
4,
16
],
"langBlankInherit": 0,
"collapsed": 0,
"toolbar": "Format, Styles, -, Bold, Italic, -, RemoveFormat\nNumberedList, BulletedList, -, Blockquote\nPWLink, Unlink, Anchor\nPWImage, Table, HorizontalRule, SpecialChar\nPasteText, PasteFromWord\nScayt, -, Sourcedialog\nJustifyCenter, JustifyLeft, JustifyRight",
"inlineMode": 0,
"useACF": 1,
"usePurifier": 1,
"formatTags": "p;h1;h2;h3;h4;h5;h6;pre;address",
"contentsCss": "/site/templates/modules/InputfieldCKEditor/contents.css",
"stylesSet": "customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js",
"extraPlugins": [
"pwimage",
"pwlink",
"sourcedialog"
],
"removePlugins": "image,magicline",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"imageFields": "",
"toggles": "",
"extraAllowedContent": "",
"contentsInlineCss": "",
"customOptions": "",
"plugin_sourcedialog": ""
},
"job_employmenttype": {
"id": 192,
"name": "job_employmenttype",
"label": "Art der Anstellung",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=FULL_TIME|Vollzeit\n2=PART_TIME|Teilzeit\n3=CONTRACTOR|Vertrag\n4=TEMPORARY|Zeitarbeit\n5=INTERN|Internship (Trainee etc.)\n6=VOLUNTEER|Volontariat\n7=PER_DIEM|Per diem\n8=OTHER|Andere"
}
},
"job_link": {
"id": 178,
"name": "job_link",
"label": "Link zum Jobangebot",
"flags": 0,
"type": "FieldtypeURL",
"textformatters": [
"TextformatterEntities"
],
"noRelative": 0,
"allowIDN": 0,
"allowQuotes": 0,
"addRoot": 0,
"collapsed": 0,
"minlength": 0,
"maxlength": 1024,
"showCount": 0,
"size": 0,
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"placeholder": "",
"pattern": ""
},
"job_logo": {
"id": 183,
"name": "job_logo",
"label": "Logo",
"flags": 0,
"type": "FieldtypeImage",
"fileSchema": 270,
"textformatters": [
"TextformatterEntities"
],
"extensions": "gif jpg jpeg png",
"maxFiles": 0,
"outputFormat": 2,
"descriptionRows": 1,
"useTags": 0,
"gridMode": "grid",
"focusMode": "on",
"resizeServer": 0,
"clientQuality": 90,
"maxReject": "",
"dimensionsByAspectRatio": "",
"defaultValuePage": "",
"inputfieldClass": "InputfieldImage",
"notes": "optional",
"collapsed": 0,
"outputString": "",
"noLang": "",
"entityEncode": "",
"tagsList": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"unzip": "",
"overwrite": "",
"maxWidth": "",
"maxHeight": "",
"maxSize": "",
"minWidth": "",
"minHeight": "",
"aspect_ratios": ""
},
"job_organizationname": {
"id": 193,
"name": "job_organizationname",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=intensiv|SPPS Karlsruhe Intensiv\n2=karlsruhe|SPPS Karlsruhe\n3=rastatt|SPPS Ötigheim/Rastatt\n4=pforzheim|SPPS Pforzheim\n5=rheinhausen|SPPS Rheinhausen-Oberhausen\n6=tagespflege|Tagespflege Etje"
}
},
"job_organizationname_old": {
"id": 182,
"name": "job_organizationname_old",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeText",
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"textformatters": "",
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_postalcode": {
"id": 190,
"name": "job_postalcode",
"label": "PLZ",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_streetaddress": {
"id": 187,
"name": "job_streetaddress",
"label": "Adresse",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_validthrough": {
"id": 180,
"name": "job_validthrough",
"label": "Gültig bis",
"flags": 0,
"type": "FieldtypeDatetime",
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"collapsed": 0,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": "",
"defaultToday": ""
}
}
</pre>
Options für:

'''job_basesalary_unittext'''
<pre>
1=MONTH|Monat
2=YEAR|Jahr
3=HOUR|Stunde
4=WEEK|Woche
5=DAY|Tag
</pre>

'''job_employmenttype'''
<pre>
1=FULL_TIME|Vollzeit
2=PART_TIME|Teilzeit
3=CONTRACTOR|Vertrag
4=TEMPORARY|Zeitarbeit
5=INTERN|Internship (Trainee etc.)
6=VOLUNTEER|Volontariat
7=PER_DIEM|Per diem
8=OTHER|Andere
</pre>

'''job_organizationname'''
<pre>
kann genutzt werden wenn man mehrere Organisationen hat
</pre>

'''Job Fieldset Page'''

Das Feld fasst die anderen Felder in eines zusammen. So kann man sie einfacher handeln.
<pre>
{
"job": {
"id": 177,
"name": "job",
"label": "Job",
"flags": 0,
"type": "FieldtypeFieldsetPage",
"notes": "Daten für ein Jobposting",
"icon": "wrench",
"template_id": 0,
"parent_id": 0,
"repeaterLoading": 2,
"repeaterMaxItems": 1,
"repeaterMinItems": 1,
"collapsed": 0,
"repeaterFields": [
"job_dateposted",
"job_validthrough",
"job_organizationname",
"job_description",
"job_basesalary_minvalue",
"job_basesalary_maxvalue",
"job_basesalary_unittext",
"job_streetaddress",
"job_postalcode",
"job_addresslocality",
"job_addressregion",
"job_addresscountry",
"job_employmenttype",
"job_link",
"job_logo"
],
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"fieldContexts": {
"job_dateposted": {
"icon": "calendar",
"notes": "Datum des Postings. Wenn leer wird das Erstelldatum dieser Seite verwendet."
},
"job_validthrough": {
"icon": "calendar",
"notes": "Empfohlen. Unbefristet für manche Berufsgruppen erlaubt (z.B. Bedienungen)"
},
"job_organizationname": [],
"job_description": [],
"job_basesalary_minvalue": [],
"job_basesalary_maxvalue": [],
"job_basesalary_unittext": [],
"job_streetaddress": [],
"job_postalcode": [],
"job_addresslocality": [],
"job_addressregion": [],
"job_addresscountry": [],
"job_employmenttype": [],
"job_link": {
"notes": "Wenn leer wird diese Seite genutzt."
},
"job_logo": []
}
}
}
</pre>

==== Templates Import ====
Import Daten (Zulässige Kind/Elternseiten von Hand nachtragen)
<pre>
{
"job": {
"id": 53,
"name": "job",
"fieldgroups_id": "job",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": 1,
"noParents": "",
"childTemplates": [],
"parentTemplates": [
"jobs"
],
"allowPageNum": 0,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-user-circle-o title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebot",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"job"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"job": []
}
},
"jobs": {
"id": 55,
"name": "jobs",
"fieldgroups_id": "jobs",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": "",
"noParents": -1,
"childTemplates": [
"job"
],
"parentTemplates": [],
"allowPageNum": 1,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-users title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebote",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"images",
"files",
"menu"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"images": [],
"files": [],
"menu": []
}
}
}
</pre>

=== Template Jobs ===
Todo besser als Layout-Block
<syntaxhighlight lang="php">
// JOBLIST
$joblist = '';
$jobs = pages('template=job,sort=-published');
foreach ($jobs as $item) {
$joblist .= '<li class="joblist-item"><a href="'.$item->url.'">'.$item->title.' ('.$item->job->job_organizationname->title.')</a></div>';
}
$joblist = '<ul class="joblist">'.$joblist.'</ul>';
</syntaxhighlight>
=== Template Job ===
Benötigt im Admin Bereich nur das job Feld. In diesem sind alle anderen benötigten Felder bereits enthalten.

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
include_once('includes/SchemaHelper.php');
$sh = new SchemaHelper;
$jsonld = $sh->jsonldJobPosting($page);

// BEWERBUNGSFORMULAR WENN GESÜNSCHT
$contact = $forms->render('bewerbung');

ob_start();
?>

<div class="container">
<div id="apply">
<h1><?=$page->title?></h1>
<div class="job-description">
<?=$page->job->job_description?>
</div>
<div class="">Arbeitgeber</div>
<?=$page->job->job_organizationname->title?><br>
<?=$page->link?>
</div>
<div class="font-heavy">Arbeitsort</div>
<?=$page->job->job_streetaddress?><br>
<?=$page->job->job_postalcode?> <?=$page->job->job_addresslocality?>
</div>
<?php if ($page->job->job_basesalary_minvalue && $page->job->job_basesalary_maxvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ - <?=$page->job->job_basesalary_maxvalue?>€ <?=$page->job->job_basesalary_unittext->title?></div>
<?php elseif($page->job->job_basesalary_minvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ <?=$page->unit->title?></div>
<?php endif ?>
<div class="font-heavy pt-20">Art der Anstellung</div>
<div class="pb-30"><?=$page->job->job_employmenttype->title?></div>
</div>

<div id="apply-form" class="">
<h2>Bewerbung</h2>
<div><?= $contact ?></div>
</div>

<?=$jsonld?>
</div>
<?php

$content = ob_get_clean();
</syntaxhighlight>

=== Bewerbungsformular ===
<pre>
{
"required": false,
"columnWidth": 0,
"roles": {
"form-submit": [
"guest"
],
"form-list": [],
"form-edit": [],
"form-delete": [],
"entries-list": [],
"entries-edit": [],
"entries-delete": [],
"entries-page": [],
"entries-resend": []
},
"flags": 256,
"pluginActions": [],
"framework": "Uikit3",
"allowPreset": 0,
"skipSessionKey": 0,
"useCookies": 0,
"partialEntryDays": 14,
"spamEntryDays": 7,
"submitText": "Absenden",
"successMessage": "Vielen Dank - Ihre Bewerbung wurde versendet.",
"errorMessage": "Ein Fehler ist aufgetreten. Bitte überprüfen Sie Ihre Eingaben.",
"mobilePx": 0,
"frBasic_noLoad": [],
"frBasic_cssURL": "/site/modules/FormBuilder/frameworks/basic/main.css",
"frBasic_itemContent": [
"description",
"out",
"error",
"notes"
],
"spamFlags": 0,
"listFields": [],
"entryDays": 0,
"emailSubject": "Bewerbungsformular auf salus-klinik.de",
"responderSubject": "Auto-Response",
"saveFlags": 35,
"spamWords": [],
"honeypot": "name_1",
"emailTo": "post@stephanschlegel.de",
"frUikit3_noLoad": [
"framework",
"jquery",
"jqueryui"
],
"frUikit3_ukURL": "/site/modules/FormBuilder/frameworks/uikit3/",
"frUikit3_css": "uikit.min.css",
"frUikit3_horizontal": "0",
"frUikit3_inlineErrorBelow": "1",
"frUikit3_horizHeaderWidth": 30,
"frUikit3_buttonType": "primary",
"children": {
"name_1": {
"type": "Text",
"label": "Name",
"required": false,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"name_2": {
"type": "Text",
"label": "Name",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"e_mail": {
"type": "Email",
"label": "E-Mail",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 250,
"showCount": "0",
"size": 0
},
"telefon": {
"type": "Text",
"label": "Telefon",
"required": 1,
"columnWidth": 0,
"collapsed": "0",
"minlength": 0,
"maxlength": 2048,
"showCount": "0",
"size": 0
},
"bewerbungsunterlagen": {
"type": "FormBuilderFile",
"label": "Bewerbungsunterlagen",
"notes": "Maximal 3 Dateien á 5MB",
"required": false,
"columnWidth": 0,
"collapsed": "0",
"extensions": "pdf doc docx xls xlsx gif jpg jpeg png",
"maxFiles": 3,
"maxFileSize": 5242880
}
}
}
</pre>
=== Funktionalität ===
==== SchemaHelper ====
Für Erzeugung der Strukturierten Daten

<syntaxhighlight lang="php">

</syntaxhighlight>

ProcessWire - Job Template

2022-04-04T07:04:28Z

134.3.74.15: /* Templates Import */

== Beispiel Setting für Jobs mit strukturierten Daten ==
Beispiel von SPPS

=== Job Template ===

==== Felder ====
<pre>
{
"job_addresscountry": {
"id": 191,
"name": "job_addresscountry",
"label": "Land",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addresslocality": {
"id": 188,
"name": "job_addresslocality",
"label": "Ort",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addressregion": {
"id": 189,
"name": "job_addressregion",
"label": "Job Region",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_basesalary_maxvalue": {
"id": 185,
"name": "job_basesalary_maxvalue",
"label": "job_basesalary_maxvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"collapsed": 0,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_minvalue": {
"id": 184,
"name": "job_basesalary_minvalue",
"label": "job_basesalary_minvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"collapsed": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_unittext": {
"id": 186,
"name": "job_basesalary_unittext",
"label": "Bezahlung pro",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"columnWidth": 33,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=MONTH|Monat\n2=YEAR|Jahr\n3=HOUR|Stunde\n4=WEEK|Woche\n5=DAY|Tag"
}
},
"job_dateposted": {
"id": 179,
"name": "job_dateposted",
"label": "Job Datum",
"flags": 0,
"type": "FieldtypeDatetime",
"collapsed": 0,
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"notes": "Datum des Postings",
"defaultToday": 1,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": ""
},
"job_description": {
"id": 181,
"name": "job_description",
"label": "job_description",
"flags": 0,
"type": "FieldtypeTextareaLanguage",
"inputfieldClass": "InputfieldCKEditor",
"contentType": 1,
"minlength": 0,
"maxlength": 0,
"showCount": 0,
"rows": 5,
"textformatters": [
"TextformatterHannaCode"
],
"htmlOptions": [
2,
4,
16
],
"langBlankInherit": 0,
"collapsed": 0,
"toolbar": "Format, Styles, -, Bold, Italic, -, RemoveFormat\nNumberedList, BulletedList, -, Blockquote\nPWLink, Unlink, Anchor\nPWImage, Table, HorizontalRule, SpecialChar\nPasteText, PasteFromWord\nScayt, -, Sourcedialog\nJustifyCenter, JustifyLeft, JustifyRight",
"inlineMode": 0,
"useACF": 1,
"usePurifier": 1,
"formatTags": "p;h1;h2;h3;h4;h5;h6;pre;address",
"contentsCss": "/site/templates/modules/InputfieldCKEditor/contents.css",
"stylesSet": "customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js",
"extraPlugins": [
"pwimage",
"pwlink",
"sourcedialog"
],
"removePlugins": "image,magicline",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"imageFields": "",
"toggles": "",
"extraAllowedContent": "",
"contentsInlineCss": "",
"customOptions": "",
"plugin_sourcedialog": ""
},
"job_employmenttype": {
"id": 192,
"name": "job_employmenttype",
"label": "Art der Anstellung",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=FULL_TIME|Vollzeit\n2=PART_TIME|Teilzeit\n3=CONTRACTOR|Vertrag\n4=TEMPORARY|Zeitarbeit\n5=INTERN|Internship (Trainee etc.)\n6=VOLUNTEER|Volontariat\n7=PER_DIEM|Per diem\n8=OTHER|Andere"
}
},
"job_link": {
"id": 178,
"name": "job_link",
"label": "Link zum Jobangebot",
"flags": 0,
"type": "FieldtypeURL",
"textformatters": [
"TextformatterEntities"
],
"noRelative": 0,
"allowIDN": 0,
"allowQuotes": 0,
"addRoot": 0,
"collapsed": 0,
"minlength": 0,
"maxlength": 1024,
"showCount": 0,
"size": 0,
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"placeholder": "",
"pattern": ""
},
"job_logo": {
"id": 183,
"name": "job_logo",
"label": "Logo",
"flags": 0,
"type": "FieldtypeImage",
"fileSchema": 270,
"textformatters": [
"TextformatterEntities"
],
"extensions": "gif jpg jpeg png",
"maxFiles": 0,
"outputFormat": 2,
"descriptionRows": 1,
"useTags": 0,
"gridMode": "grid",
"focusMode": "on",
"resizeServer": 0,
"clientQuality": 90,
"maxReject": "",
"dimensionsByAspectRatio": "",
"defaultValuePage": "",
"inputfieldClass": "InputfieldImage",
"notes": "optional",
"collapsed": 0,
"outputString": "",
"noLang": "",
"entityEncode": "",
"tagsList": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"unzip": "",
"overwrite": "",
"maxWidth": "",
"maxHeight": "",
"maxSize": "",
"minWidth": "",
"minHeight": "",
"aspect_ratios": ""
},
"job_organizationname": {
"id": 193,
"name": "job_organizationname",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=intensiv|SPPS Karlsruhe Intensiv\n2=karlsruhe|SPPS Karlsruhe\n3=rastatt|SPPS Ötigheim/Rastatt\n4=pforzheim|SPPS Pforzheim\n5=rheinhausen|SPPS Rheinhausen-Oberhausen\n6=tagespflege|Tagespflege Etje"
}
},
"job_organizationname_old": {
"id": 182,
"name": "job_organizationname_old",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeText",
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"textformatters": "",
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_postalcode": {
"id": 190,
"name": "job_postalcode",
"label": "PLZ",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_streetaddress": {
"id": 187,
"name": "job_streetaddress",
"label": "Adresse",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_validthrough": {
"id": 180,
"name": "job_validthrough",
"label": "Gültig bis",
"flags": 0,
"type": "FieldtypeDatetime",
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"collapsed": 0,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": "",
"defaultToday": ""
}
}
</pre>
Options für:

'''job_basesalary_unittext'''
<pre>
1=MONTH|Monat
2=YEAR|Jahr
3=HOUR|Stunde
4=WEEK|Woche
5=DAY|Tag
</pre>

'''job_employmenttype'''
<pre>
1=FULL_TIME|Vollzeit
2=PART_TIME|Teilzeit
3=CONTRACTOR|Vertrag
4=TEMPORARY|Zeitarbeit
5=INTERN|Internship (Trainee etc.)
6=VOLUNTEER|Volontariat
7=PER_DIEM|Per diem
8=OTHER|Andere
</pre>

'''job_organizationname'''
<pre>
kann genutzt werden wenn man mehrere Organisationen hat
</pre>

'''Job Fieldset Page'''

Das Feld fasst die anderen Felder in eines zusammen. So kann man sie einfacher handeln.
<pre>
{
"job": {
"id": 177,
"name": "job",
"label": "Job",
"flags": 0,
"type": "FieldtypeFieldsetPage",
"notes": "Daten für ein Jobposting",
"icon": "wrench",
"template_id": 0,
"parent_id": 0,
"repeaterLoading": 2,
"repeaterMaxItems": 1,
"repeaterMinItems": 1,
"collapsed": 0,
"repeaterFields": [
"job_dateposted",
"job_validthrough",
"job_organizationname",
"job_description",
"job_basesalary_minvalue",
"job_basesalary_maxvalue",
"job_basesalary_unittext",
"job_streetaddress",
"job_postalcode",
"job_addresslocality",
"job_addressregion",
"job_addresscountry",
"job_employmenttype",
"job_link",
"job_logo"
],
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"fieldContexts": {
"job_dateposted": {
"icon": "calendar",
"notes": "Datum des Postings. Wenn leer wird das Erstelldatum dieser Seite verwendet."
},
"job_validthrough": {
"icon": "calendar",
"notes": "Empfohlen. Unbefristet für manche Berufsgruppen erlaubt (z.B. Bedienungen)"
},
"job_organizationname": [],
"job_description": [],
"job_basesalary_minvalue": [],
"job_basesalary_maxvalue": [],
"job_basesalary_unittext": [],
"job_streetaddress": [],
"job_postalcode": [],
"job_addresslocality": [],
"job_addressregion": [],
"job_addresscountry": [],
"job_employmenttype": [],
"job_link": {
"notes": "Wenn leer wird diese Seite genutzt."
},
"job_logo": []
}
}
}
</pre>

==== Templates Import ====
Import Daten (Zulässige Kind/Elternseiten von Hand nachtragen)
<pre>
{
"job": {
"id": 53,
"name": "job",
"fieldgroups_id": "job",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": 1,
"noParents": "",
"childTemplates": [],
"parentTemplates": [
"jobs"
],
"allowPageNum": 0,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-user-circle-o title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebot",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"job"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"job": []
}
},
"jobs": {
"id": 55,
"name": "jobs",
"fieldgroups_id": "jobs",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": "",
"noParents": -1,
"childTemplates": [
"job"
],
"parentTemplates": [],
"allowPageNum": 1,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-users title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebote",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"images",
"files",
"menu"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"images": [],
"files": [],
"menu": []
}
}
}
</pre>

=== Template Jobs ===
Todo besser als Layout-Block
<syntaxhighlight lang="php">
// JOBLIST
$joblist = '';
$jobs = pages('template=job,sort=-published');
foreach ($jobs as $item) {
$joblist .= '<li class="joblist-item"><a href="'.$item->url.'">'.$item->title.' ('.$item->job->job_organizationname->title.')</a></div>';
}
$joblist = '<ul class="joblist">'.$joblist.'</ul>';
</syntaxhighlight>
=== Template Job ===
Benötigt im Admin Bereich nur das job Feld. In diesem sind alle anderen benötigten Felder bereits enthalten.

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
include_once('includes/SchemaHelper.php');
$sh = new SchemaHelper;
$jsonld = $sh->jsonldJobPosting($page);

// BEWERBUNGSFORMULAR WENN GESÜNSCHT
$contact = $forms->render('bewerbung');

ob_start();
?>

<div class="container">
<div id="apply">
<h1><?=$page->title?></h1>
<div class="job-description">
<?=$page->job->job_description?>
</div>
<div class="">Arbeitgeber</div>
<?=$page->job->job_organizationname->title?><br>
<?=$page->link?>
</div>
<div class="font-heavy">Arbeitsort</div>
<?=$page->job->job_streetaddress?><br>
<?=$page->job->job_postalcode?> <?=$page->job->job_addresslocality?>
</div>
<?php if ($page->job->job_basesalary_minvalue && $page->job->job_basesalary_maxvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ - <?=$page->job->job_basesalary_maxvalue?>€ <?=$page->job->job_basesalary_unittext->title?></div>
<?php elseif($page->job->job_basesalary_minvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ <?=$page->unit->title?></div>
<?php endif ?>
<div class="font-heavy pt-20">Art der Anstellung</div>
<div class="pb-30"><?=$page->job->job_employmenttype->title?></div>
</div>

<div id="apply-form" class="">
<h2>Bewerbung</h2>
<div><?= $contact ?></div>
</div>

<?=$jsonld?>
</div>
<?php

$content = ob_get_clean();
</syntaxhighlight>

=== Funktionalität ===
==== SchemaHelper ====
Für Erzeugung der Strukturierten Daten

<syntaxhighlight lang="php">

</syntaxhighlight>

ProcessWire - Job Template

2022-04-04T07:02:13Z

134.3.74.15: /* Templates */

== Beispiel Setting für Jobs mit strukturierten Daten ==
Beispiel von SPPS

=== Job Template ===

==== Felder ====
<pre>
{
"job_addresscountry": {
"id": 191,
"name": "job_addresscountry",
"label": "Land",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addresslocality": {
"id": 188,
"name": "job_addresslocality",
"label": "Ort",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addressregion": {
"id": 189,
"name": "job_addressregion",
"label": "Job Region",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_basesalary_maxvalue": {
"id": 185,
"name": "job_basesalary_maxvalue",
"label": "job_basesalary_maxvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"collapsed": 0,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_minvalue": {
"id": 184,
"name": "job_basesalary_minvalue",
"label": "job_basesalary_minvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"collapsed": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_unittext": {
"id": 186,
"name": "job_basesalary_unittext",
"label": "Bezahlung pro",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"columnWidth": 33,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=MONTH|Monat\n2=YEAR|Jahr\n3=HOUR|Stunde\n4=WEEK|Woche\n5=DAY|Tag"
}
},
"job_dateposted": {
"id": 179,
"name": "job_dateposted",
"label": "Job Datum",
"flags": 0,
"type": "FieldtypeDatetime",
"collapsed": 0,
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"notes": "Datum des Postings",
"defaultToday": 1,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": ""
},
"job_description": {
"id": 181,
"name": "job_description",
"label": "job_description",
"flags": 0,
"type": "FieldtypeTextareaLanguage",
"inputfieldClass": "InputfieldCKEditor",
"contentType": 1,
"minlength": 0,
"maxlength": 0,
"showCount": 0,
"rows": 5,
"textformatters": [
"TextformatterHannaCode"
],
"htmlOptions": [
2,
4,
16
],
"langBlankInherit": 0,
"collapsed": 0,
"toolbar": "Format, Styles, -, Bold, Italic, -, RemoveFormat\nNumberedList, BulletedList, -, Blockquote\nPWLink, Unlink, Anchor\nPWImage, Table, HorizontalRule, SpecialChar\nPasteText, PasteFromWord\nScayt, -, Sourcedialog\nJustifyCenter, JustifyLeft, JustifyRight",
"inlineMode": 0,
"useACF": 1,
"usePurifier": 1,
"formatTags": "p;h1;h2;h3;h4;h5;h6;pre;address",
"contentsCss": "/site/templates/modules/InputfieldCKEditor/contents.css",
"stylesSet": "customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js",
"extraPlugins": [
"pwimage",
"pwlink",
"sourcedialog"
],
"removePlugins": "image,magicline",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"imageFields": "",
"toggles": "",
"extraAllowedContent": "",
"contentsInlineCss": "",
"customOptions": "",
"plugin_sourcedialog": ""
},
"job_employmenttype": {
"id": 192,
"name": "job_employmenttype",
"label": "Art der Anstellung",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=FULL_TIME|Vollzeit\n2=PART_TIME|Teilzeit\n3=CONTRACTOR|Vertrag\n4=TEMPORARY|Zeitarbeit\n5=INTERN|Internship (Trainee etc.)\n6=VOLUNTEER|Volontariat\n7=PER_DIEM|Per diem\n8=OTHER|Andere"
}
},
"job_link": {
"id": 178,
"name": "job_link",
"label": "Link zum Jobangebot",
"flags": 0,
"type": "FieldtypeURL",
"textformatters": [
"TextformatterEntities"
],
"noRelative": 0,
"allowIDN": 0,
"allowQuotes": 0,
"addRoot": 0,
"collapsed": 0,
"minlength": 0,
"maxlength": 1024,
"showCount": 0,
"size": 0,
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"placeholder": "",
"pattern": ""
},
"job_logo": {
"id": 183,
"name": "job_logo",
"label": "Logo",
"flags": 0,
"type": "FieldtypeImage",
"fileSchema": 270,
"textformatters": [
"TextformatterEntities"
],
"extensions": "gif jpg jpeg png",
"maxFiles": 0,
"outputFormat": 2,
"descriptionRows": 1,
"useTags": 0,
"gridMode": "grid",
"focusMode": "on",
"resizeServer": 0,
"clientQuality": 90,
"maxReject": "",
"dimensionsByAspectRatio": "",
"defaultValuePage": "",
"inputfieldClass": "InputfieldImage",
"notes": "optional",
"collapsed": 0,
"outputString": "",
"noLang": "",
"entityEncode": "",
"tagsList": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"unzip": "",
"overwrite": "",
"maxWidth": "",
"maxHeight": "",
"maxSize": "",
"minWidth": "",
"minHeight": "",
"aspect_ratios": ""
},
"job_organizationname": {
"id": 193,
"name": "job_organizationname",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=intensiv|SPPS Karlsruhe Intensiv\n2=karlsruhe|SPPS Karlsruhe\n3=rastatt|SPPS Ötigheim/Rastatt\n4=pforzheim|SPPS Pforzheim\n5=rheinhausen|SPPS Rheinhausen-Oberhausen\n6=tagespflege|Tagespflege Etje"
}
},
"job_organizationname_old": {
"id": 182,
"name": "job_organizationname_old",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeText",
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"textformatters": "",
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_postalcode": {
"id": 190,
"name": "job_postalcode",
"label": "PLZ",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_streetaddress": {
"id": 187,
"name": "job_streetaddress",
"label": "Adresse",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_validthrough": {
"id": 180,
"name": "job_validthrough",
"label": "Gültig bis",
"flags": 0,
"type": "FieldtypeDatetime",
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"collapsed": 0,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": "",
"defaultToday": ""
}
}
</pre>
Options für:

'''job_basesalary_unittext'''
<pre>
1=MONTH|Monat
2=YEAR|Jahr
3=HOUR|Stunde
4=WEEK|Woche
5=DAY|Tag
</pre>

'''job_employmenttype'''
<pre>
1=FULL_TIME|Vollzeit
2=PART_TIME|Teilzeit
3=CONTRACTOR|Vertrag
4=TEMPORARY|Zeitarbeit
5=INTERN|Internship (Trainee etc.)
6=VOLUNTEER|Volontariat
7=PER_DIEM|Per diem
8=OTHER|Andere
</pre>

'''job_organizationname'''
<pre>
kann genutzt werden wenn man mehrere Organisationen hat
</pre>

'''Job Fieldset Page'''

Das Feld fasst die anderen Felder in eines zusammen. So kann man sie einfacher handeln.
<pre>
{
"job": {
"id": 177,
"name": "job",
"label": "Job",
"flags": 0,
"type": "FieldtypeFieldsetPage",
"notes": "Daten für ein Jobposting",
"icon": "wrench",
"template_id": 0,
"parent_id": 0,
"repeaterLoading": 2,
"repeaterMaxItems": 1,
"repeaterMinItems": 1,
"collapsed": 0,
"repeaterFields": [
"job_dateposted",
"job_validthrough",
"job_organizationname",
"job_description",
"job_basesalary_minvalue",
"job_basesalary_maxvalue",
"job_basesalary_unittext",
"job_streetaddress",
"job_postalcode",
"job_addresslocality",
"job_addressregion",
"job_addresscountry",
"job_employmenttype",
"job_link",
"job_logo"
],
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"fieldContexts": {
"job_dateposted": {
"icon": "calendar",
"notes": "Datum des Postings. Wenn leer wird das Erstelldatum dieser Seite verwendet."
},
"job_validthrough": {
"icon": "calendar",
"notes": "Empfohlen. Unbefristet für manche Berufsgruppen erlaubt (z.B. Bedienungen)"
},
"job_organizationname": [],
"job_description": [],
"job_basesalary_minvalue": [],
"job_basesalary_maxvalue": [],
"job_basesalary_unittext": [],
"job_streetaddress": [],
"job_postalcode": [],
"job_addresslocality": [],
"job_addressregion": [],
"job_addresscountry": [],
"job_employmenttype": [],
"job_link": {
"notes": "Wenn leer wird diese Seite genutzt."
},
"job_logo": []
}
}
}
</pre>

==== Templates Import ====
Import Daten
<pre>
{
"job": {
"id": 53,
"name": "job",
"fieldgroups_id": "job",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": 1,
"noParents": "",
"childTemplates": [],
"parentTemplates": [
"jobs"
],
"allowPageNum": 0,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-user-circle-o title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebot",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"job"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"job": []
}
},
"jobs": {
"id": 55,
"name": "jobs",
"fieldgroups_id": "jobs",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": "",
"noParents": -1,
"childTemplates": [
"job"
],
"parentTemplates": [],
"allowPageNum": 1,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-users title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebote",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"images",
"files",
"menu"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"images": [],
"files": [],
"menu": []
}
}
}
</pre>

=== Template Jobs ===
Todo besser als Layout-Block
<syntaxhighlight lang="php">
// JOBLIST
$joblist = '';
$jobs = pages('template=job,sort=-published');
foreach ($jobs as $item) {
$joblist .= '<li class="joblist-item"><a href="'.$item->url.'">'.$item->title.' ('.$item->job->job_organizationname->title.')</a></div>';
}
$joblist = '<ul class="joblist">'.$joblist.'</ul>';
</syntaxhighlight>
=== Template Job ===
Benötigt im Admin Bereich nur das job Feld. In diesem sind alle anderen benötigten Felder bereits enthalten.

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
include_once('includes/SchemaHelper.php');
$sh = new SchemaHelper;
$jsonld = $sh->jsonldJobPosting($page);

// BEWERBUNGSFORMULAR WENN GESÜNSCHT
$contact = $forms->render('bewerbung');

ob_start();
?>

<div class="container">
<div id="apply">
<h1><?=$page->title?></h1>
<div class="job-description">
<?=$page->job->job_description?>
</div>
<div class="">Arbeitgeber</div>
<?=$page->job->job_organizationname->title?><br>
<?=$page->link?>
</div>
<div class="font-heavy">Arbeitsort</div>
<?=$page->job->job_streetaddress?><br>
<?=$page->job->job_postalcode?> <?=$page->job->job_addresslocality?>
</div>
<?php if ($page->job->job_basesalary_minvalue && $page->job->job_basesalary_maxvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ - <?=$page->job->job_basesalary_maxvalue?>€ <?=$page->job->job_basesalary_unittext->title?></div>
<?php elseif($page->job->job_basesalary_minvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ <?=$page->unit->title?></div>
<?php endif ?>
<div class="font-heavy pt-20">Art der Anstellung</div>
<div class="pb-30"><?=$page->job->job_employmenttype->title?></div>
</div>

<div id="apply-form" class="">
<h2>Bewerbung</h2>
<div><?= $contact ?></div>
</div>

<?=$jsonld?>
</div>
<?php

$content = ob_get_clean();
</syntaxhighlight>

=== Funktionalität ===
==== SchemaHelper ====
Für Erzeugung der Strukturierten Daten

<syntaxhighlight lang="php">

</syntaxhighlight>

ProcessWire - Job Template

2022-04-04T07:01:58Z

134.3.74.15: /* Templates */

== Beispiel Setting für Jobs mit strukturierten Daten ==
Beispiel von SPPS

=== Job Template ===

==== Felder ====
<pre>
{
"job_addresscountry": {
"id": 191,
"name": "job_addresscountry",
"label": "Land",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addresslocality": {
"id": 188,
"name": "job_addresslocality",
"label": "Ort",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addressregion": {
"id": 189,
"name": "job_addressregion",
"label": "Job Region",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_basesalary_maxvalue": {
"id": 185,
"name": "job_basesalary_maxvalue",
"label": "job_basesalary_maxvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"collapsed": 0,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_minvalue": {
"id": 184,
"name": "job_basesalary_minvalue",
"label": "job_basesalary_minvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"collapsed": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_unittext": {
"id": 186,
"name": "job_basesalary_unittext",
"label": "Bezahlung pro",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"columnWidth": 33,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=MONTH|Monat\n2=YEAR|Jahr\n3=HOUR|Stunde\n4=WEEK|Woche\n5=DAY|Tag"
}
},
"job_dateposted": {
"id": 179,
"name": "job_dateposted",
"label": "Job Datum",
"flags": 0,
"type": "FieldtypeDatetime",
"collapsed": 0,
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"notes": "Datum des Postings",
"defaultToday": 1,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": ""
},
"job_description": {
"id": 181,
"name": "job_description",
"label": "job_description",
"flags": 0,
"type": "FieldtypeTextareaLanguage",
"inputfieldClass": "InputfieldCKEditor",
"contentType": 1,
"minlength": 0,
"maxlength": 0,
"showCount": 0,
"rows": 5,
"textformatters": [
"TextformatterHannaCode"
],
"htmlOptions": [
2,
4,
16
],
"langBlankInherit": 0,
"collapsed": 0,
"toolbar": "Format, Styles, -, Bold, Italic, -, RemoveFormat\nNumberedList, BulletedList, -, Blockquote\nPWLink, Unlink, Anchor\nPWImage, Table, HorizontalRule, SpecialChar\nPasteText, PasteFromWord\nScayt, -, Sourcedialog\nJustifyCenter, JustifyLeft, JustifyRight",
"inlineMode": 0,
"useACF": 1,
"usePurifier": 1,
"formatTags": "p;h1;h2;h3;h4;h5;h6;pre;address",
"contentsCss": "/site/templates/modules/InputfieldCKEditor/contents.css",
"stylesSet": "customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js",
"extraPlugins": [
"pwimage",
"pwlink",
"sourcedialog"
],
"removePlugins": "image,magicline",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"imageFields": "",
"toggles": "",
"extraAllowedContent": "",
"contentsInlineCss": "",
"customOptions": "",
"plugin_sourcedialog": ""
},
"job_employmenttype": {
"id": 192,
"name": "job_employmenttype",
"label": "Art der Anstellung",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=FULL_TIME|Vollzeit\n2=PART_TIME|Teilzeit\n3=CONTRACTOR|Vertrag\n4=TEMPORARY|Zeitarbeit\n5=INTERN|Internship (Trainee etc.)\n6=VOLUNTEER|Volontariat\n7=PER_DIEM|Per diem\n8=OTHER|Andere"
}
},
"job_link": {
"id": 178,
"name": "job_link",
"label": "Link zum Jobangebot",
"flags": 0,
"type": "FieldtypeURL",
"textformatters": [
"TextformatterEntities"
],
"noRelative": 0,
"allowIDN": 0,
"allowQuotes": 0,
"addRoot": 0,
"collapsed": 0,
"minlength": 0,
"maxlength": 1024,
"showCount": 0,
"size": 0,
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"placeholder": "",
"pattern": ""
},
"job_logo": {
"id": 183,
"name": "job_logo",
"label": "Logo",
"flags": 0,
"type": "FieldtypeImage",
"fileSchema": 270,
"textformatters": [
"TextformatterEntities"
],
"extensions": "gif jpg jpeg png",
"maxFiles": 0,
"outputFormat": 2,
"descriptionRows": 1,
"useTags": 0,
"gridMode": "grid",
"focusMode": "on",
"resizeServer": 0,
"clientQuality": 90,
"maxReject": "",
"dimensionsByAspectRatio": "",
"defaultValuePage": "",
"inputfieldClass": "InputfieldImage",
"notes": "optional",
"collapsed": 0,
"outputString": "",
"noLang": "",
"entityEncode": "",
"tagsList": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"unzip": "",
"overwrite": "",
"maxWidth": "",
"maxHeight": "",
"maxSize": "",
"minWidth": "",
"minHeight": "",
"aspect_ratios": ""
},
"job_organizationname": {
"id": 193,
"name": "job_organizationname",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=intensiv|SPPS Karlsruhe Intensiv\n2=karlsruhe|SPPS Karlsruhe\n3=rastatt|SPPS Ötigheim/Rastatt\n4=pforzheim|SPPS Pforzheim\n5=rheinhausen|SPPS Rheinhausen-Oberhausen\n6=tagespflege|Tagespflege Etje"
}
},
"job_organizationname_old": {
"id": 182,
"name": "job_organizationname_old",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeText",
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"textformatters": "",
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_postalcode": {
"id": 190,
"name": "job_postalcode",
"label": "PLZ",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_streetaddress": {
"id": 187,
"name": "job_streetaddress",
"label": "Adresse",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_validthrough": {
"id": 180,
"name": "job_validthrough",
"label": "Gültig bis",
"flags": 0,
"type": "FieldtypeDatetime",
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"collapsed": 0,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": "",
"defaultToday": ""
}
}
</pre>
Options für:

'''job_basesalary_unittext'''
<pre>
1=MONTH|Monat
2=YEAR|Jahr
3=HOUR|Stunde
4=WEEK|Woche
5=DAY|Tag
</pre>

'''job_employmenttype'''
<pre>
1=FULL_TIME|Vollzeit
2=PART_TIME|Teilzeit
3=CONTRACTOR|Vertrag
4=TEMPORARY|Zeitarbeit
5=INTERN|Internship (Trainee etc.)
6=VOLUNTEER|Volontariat
7=PER_DIEM|Per diem
8=OTHER|Andere
</pre>

'''job_organizationname'''
<pre>
kann genutzt werden wenn man mehrere Organisationen hat
</pre>

'''Job Fieldset Page'''

Das Feld fasst die anderen Felder in eines zusammen. So kann man sie einfacher handeln.
<pre>
{
"job": {
"id": 177,
"name": "job",
"label": "Job",
"flags": 0,
"type": "FieldtypeFieldsetPage",
"notes": "Daten für ein Jobposting",
"icon": "wrench",
"template_id": 0,
"parent_id": 0,
"repeaterLoading": 2,
"repeaterMaxItems": 1,
"repeaterMinItems": 1,
"collapsed": 0,
"repeaterFields": [
"job_dateposted",
"job_validthrough",
"job_organizationname",
"job_description",
"job_basesalary_minvalue",
"job_basesalary_maxvalue",
"job_basesalary_unittext",
"job_streetaddress",
"job_postalcode",
"job_addresslocality",
"job_addressregion",
"job_addresscountry",
"job_employmenttype",
"job_link",
"job_logo"
],
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"fieldContexts": {
"job_dateposted": {
"icon": "calendar",
"notes": "Datum des Postings. Wenn leer wird das Erstelldatum dieser Seite verwendet."
},
"job_validthrough": {
"icon": "calendar",
"notes": "Empfohlen. Unbefristet für manche Berufsgruppen erlaubt (z.B. Bedienungen)"
},
"job_organizationname": [],
"job_description": [],
"job_basesalary_minvalue": [],
"job_basesalary_maxvalue": [],
"job_basesalary_unittext": [],
"job_streetaddress": [],
"job_postalcode": [],
"job_addresslocality": [],
"job_addressregion": [],
"job_addresscountry": [],
"job_employmenttype": [],
"job_link": {
"notes": "Wenn leer wird diese Seite genutzt."
},
"job_logo": []
}
}
}
</pre>

==== Templates ====
Import Daten
<pre>
{
"job": {
"id": 53,
"name": "job",
"fieldgroups_id": "job",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": 1,
"noParents": "",
"childTemplates": [],
"parentTemplates": [
"jobs"
],
"allowPageNum": 0,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-user-circle-o title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebot",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"job"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"job": []
}
},
"jobs": {
"id": 55,
"name": "jobs",
"fieldgroups_id": "jobs",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": "",
"noParents": -1,
"childTemplates": [
"job"
],
"parentTemplates": [],
"allowPageNum": 1,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-users title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebote",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"images",
"files",
"menu"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"images": [],
"files": [],
"menu": []
}
}
}
</pre>

=== Template Jobs ===
Todo besser als Layout-Block
<syntaxhighlight lang="php">
// JOBLIST
$joblist = '';
$jobs = pages('template=job,sort=-published');
foreach ($jobs as $item) {
$joblist .= '<li class="joblist-item"><a href="'.$item->url.'">'.$item->title.' ('.$item->job->job_organizationname->title.')</a></div>';
}
$joblist = '<ul class="joblist">'.$joblist.'</ul>';
</syntaxhighlight>
=== Template Job ===
Benötigt im Admin Bereich nur das job Feld. In diesem sind alle anderen benötigten Felder bereits enthalten.

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
include_once('includes/SchemaHelper.php');
$sh = new SchemaHelper;
$jsonld = $sh->jsonldJobPosting($page);

// BEWERBUNGSFORMULAR WENN GESÜNSCHT
$contact = $forms->render('bewerbung');

ob_start();
?>

<div class="container">
<div id="apply">
<h1><?=$page->title?></h1>
<div class="job-description">
<?=$page->job->job_description?>
</div>
<div class="">Arbeitgeber</div>
<?=$page->job->job_organizationname->title?><br>
<?=$page->link?>
</div>
<div class="font-heavy">Arbeitsort</div>
<?=$page->job->job_streetaddress?><br>
<?=$page->job->job_postalcode?> <?=$page->job->job_addresslocality?>
</div>
<?php if ($page->job->job_basesalary_minvalue && $page->job->job_basesalary_maxvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ - <?=$page->job->job_basesalary_maxvalue?>€ <?=$page->job->job_basesalary_unittext->title?></div>
<?php elseif($page->job->job_basesalary_minvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ <?=$page->unit->title?></div>
<?php endif ?>
<div class="font-heavy pt-20">Art der Anstellung</div>
<div class="pb-30"><?=$page->job->job_employmenttype->title?></div>
</div>

<div id="apply-form" class="">
<h2>Bewerbung</h2>
<div><?= $contact ?></div>
</div>

<?=$jsonld?>
</div>
<?php

$content = ob_get_clean();
</syntaxhighlight>

=== Funktionalität ===
==== SchemaHelper ====
Für Erzeugung der Strukturierten Daten

<syntaxhighlight lang="php">

</syntaxhighlight>

ProcessWire - Job Template

2022-04-04T07:00:57Z

134.3.74.15: /* Job Template */

== Beispiel Setting für Jobs mit strukturierten Daten ==
Beispiel von SPPS

=== Job Template ===

==== Felder ====
<pre>
{
"job_addresscountry": {
"id": 191,
"name": "job_addresscountry",
"label": "Land",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addresslocality": {
"id": 188,
"name": "job_addresslocality",
"label": "Ort",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_addressregion": {
"id": 189,
"name": "job_addressregion",
"label": "Job Region",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_basesalary_maxvalue": {
"id": 185,
"name": "job_basesalary_maxvalue",
"label": "job_basesalary_maxvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"collapsed": 0,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_minvalue": {
"id": 184,
"name": "job_basesalary_minvalue",
"label": "job_basesalary_minvalue",
"flags": 0,
"type": "FieldtypeInteger",
"zeroNotEmpty": 0,
"collapsed": 0,
"columnWidth": 33,
"inputType": "text",
"size": 10,
"defaultValue": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"min": "",
"max": ""
},
"job_basesalary_unittext": {
"id": 186,
"name": "job_basesalary_unittext",
"label": "Bezahlung pro",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"columnWidth": 33,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=MONTH|Monat\n2=YEAR|Jahr\n3=HOUR|Stunde\n4=WEEK|Woche\n5=DAY|Tag"
}
},
"job_dateposted": {
"id": 179,
"name": "job_dateposted",
"label": "Job Datum",
"flags": 0,
"type": "FieldtypeDatetime",
"collapsed": 0,
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"notes": "Datum des Postings",
"defaultToday": 1,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": ""
},
"job_description": {
"id": 181,
"name": "job_description",
"label": "job_description",
"flags": 0,
"type": "FieldtypeTextareaLanguage",
"inputfieldClass": "InputfieldCKEditor",
"contentType": 1,
"minlength": 0,
"maxlength": 0,
"showCount": 0,
"rows": 5,
"textformatters": [
"TextformatterHannaCode"
],
"htmlOptions": [
2,
4,
16
],
"langBlankInherit": 0,
"collapsed": 0,
"toolbar": "Format, Styles, -, Bold, Italic, -, RemoveFormat\nNumberedList, BulletedList, -, Blockquote\nPWLink, Unlink, Anchor\nPWImage, Table, HorizontalRule, SpecialChar\nPasteText, PasteFromWord\nScayt, -, Sourcedialog\nJustifyCenter, JustifyLeft, JustifyRight",
"inlineMode": 0,
"useACF": 1,
"usePurifier": 1,
"formatTags": "p;h1;h2;h3;h4;h5;h6;pre;address",
"contentsCss": "/site/templates/modules/InputfieldCKEditor/contents.css",
"stylesSet": "customstyles:/site/templates/modules/InputfieldCKEditor/mystyles.js",
"extraPlugins": [
"pwimage",
"pwlink",
"sourcedialog"
],
"removePlugins": "image,magicline",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"imageFields": "",
"toggles": "",
"extraAllowedContent": "",
"contentsInlineCss": "",
"customOptions": "",
"plugin_sourcedialog": ""
},
"job_employmenttype": {
"id": 192,
"name": "job_employmenttype",
"label": "Art der Anstellung",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=FULL_TIME|Vollzeit\n2=PART_TIME|Teilzeit\n3=CONTRACTOR|Vertrag\n4=TEMPORARY|Zeitarbeit\n5=INTERN|Internship (Trainee etc.)\n6=VOLUNTEER|Volontariat\n7=PER_DIEM|Per diem\n8=OTHER|Andere"
}
},
"job_link": {
"id": 178,
"name": "job_link",
"label": "Link zum Jobangebot",
"flags": 0,
"type": "FieldtypeURL",
"textformatters": [
"TextformatterEntities"
],
"noRelative": 0,
"allowIDN": 0,
"allowQuotes": 0,
"addRoot": 0,
"collapsed": 0,
"minlength": 0,
"maxlength": 1024,
"showCount": 0,
"size": 0,
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"placeholder": "",
"pattern": ""
},
"job_logo": {
"id": 183,
"name": "job_logo",
"label": "Logo",
"flags": 0,
"type": "FieldtypeImage",
"fileSchema": 270,
"textformatters": [
"TextformatterEntities"
],
"extensions": "gif jpg jpeg png",
"maxFiles": 0,
"outputFormat": 2,
"descriptionRows": 1,
"useTags": 0,
"gridMode": "grid",
"focusMode": "on",
"resizeServer": 0,
"clientQuality": 90,
"maxReject": "",
"dimensionsByAspectRatio": "",
"defaultValuePage": "",
"inputfieldClass": "InputfieldImage",
"notes": "optional",
"collapsed": 0,
"outputString": "",
"noLang": "",
"entityEncode": "",
"tagsList": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"unzip": "",
"overwrite": "",
"maxWidth": "",
"maxHeight": "",
"maxSize": "",
"minWidth": "",
"minHeight": "",
"aspect_ratios": ""
},
"job_organizationname": {
"id": 193,
"name": "job_organizationname",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeOptions",
"inputfieldClass": "InputfieldSelect",
"collapsed": 0,
"initValue": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"defaultValue": "",
"export_options": {
"default": "1=intensiv|SPPS Karlsruhe Intensiv\n2=karlsruhe|SPPS Karlsruhe\n3=rastatt|SPPS Ötigheim/Rastatt\n4=pforzheim|SPPS Pforzheim\n5=rheinhausen|SPPS Rheinhausen-Oberhausen\n6=tagespflege|Tagespflege Etje"
}
},
"job_organizationname_old": {
"id": 182,
"name": "job_organizationname_old",
"label": "Name der Organisation",
"flags": 0,
"type": "FieldtypeText",
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"textformatters": "",
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_postalcode": {
"id": 190,
"name": "job_postalcode",
"label": "PLZ",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"collapsed": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_streetaddress": {
"id": 187,
"name": "job_streetaddress",
"label": "Adresse",
"flags": 0,
"type": "FieldtypeText",
"textformatters": [
"TextformatterEntities"
],
"collapsed": 0,
"minlength": 0,
"maxlength": 2048,
"showCount": 0,
"size": 0,
"inputfieldClass": "",
"showIf": "",
"themeInputSize": "",
"themeInputWidth": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"themeBlank": "",
"columnWidth": 100,
"required": "",
"requiredAttr": "",
"requiredIf": "",
"stripTags": "",
"placeholder": "",
"pattern": ""
},
"job_validthrough": {
"id": 180,
"name": "job_validthrough",
"label": "Gültig bis",
"flags": 0,
"type": "FieldtypeDatetime",
"inputType": "text",
"htmlType": "date",
"dateSelectFormat": "yMd",
"yearFrom": 1922,
"yearTo": 2042,
"yearLock": 0,
"datepicker": 3,
"timeInputSelect": 0,
"dateInputFormat": "Y-m-d",
"size": 25,
"columnWidth": 25,
"collapsed": 0,
"dateOutputFormat": "",
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"required": "",
"requiredAttr": "",
"requiredIf": "",
"dateMin": "",
"dateMax": "",
"timeStep": "",
"timeMin": "",
"timeMax": "",
"timeInputFormat": "",
"placeholder": "",
"yearRange": "",
"defaultToday": ""
}
}
</pre>
Options für:

'''job_basesalary_unittext'''
<pre>
1=MONTH|Monat
2=YEAR|Jahr
3=HOUR|Stunde
4=WEEK|Woche
5=DAY|Tag
</pre>

'''job_employmenttype'''
<pre>
1=FULL_TIME|Vollzeit
2=PART_TIME|Teilzeit
3=CONTRACTOR|Vertrag
4=TEMPORARY|Zeitarbeit
5=INTERN|Internship (Trainee etc.)
6=VOLUNTEER|Volontariat
7=PER_DIEM|Per diem
8=OTHER|Andere
</pre>

'''job_organizationname'''
<pre>
kann genutzt werden wenn man mehrere Organisationen hat
</pre>

'''Job Fieldset Page'''

Das Feld fasst die anderen Felder in eines zusammen. So kann man sie einfacher handeln.
<pre>
{
"job": {
"id": 177,
"name": "job",
"label": "Job",
"flags": 0,
"type": "FieldtypeFieldsetPage",
"notes": "Daten für ein Jobposting",
"icon": "wrench",
"template_id": 0,
"parent_id": 0,
"repeaterLoading": 2,
"repeaterMaxItems": 1,
"repeaterMinItems": 1,
"collapsed": 0,
"repeaterFields": [
"job_dateposted",
"job_validthrough",
"job_organizationname",
"job_description",
"job_basesalary_minvalue",
"job_basesalary_maxvalue",
"job_basesalary_unittext",
"job_streetaddress",
"job_postalcode",
"job_addresslocality",
"job_addressregion",
"job_addresscountry",
"job_employmenttype",
"job_link",
"job_logo"
],
"showIf": "",
"themeOffset": "",
"themeBorder": "",
"themeColor": "",
"columnWidth": 100,
"required": "",
"requiredIf": "",
"fieldContexts": {
"job_dateposted": {
"icon": "calendar",
"notes": "Datum des Postings. Wenn leer wird das Erstelldatum dieser Seite verwendet."
},
"job_validthrough": {
"icon": "calendar",
"notes": "Empfohlen. Unbefristet für manche Berufsgruppen erlaubt (z.B. Bedienungen)"
},
"job_organizationname": [],
"job_description": [],
"job_basesalary_minvalue": [],
"job_basesalary_maxvalue": [],
"job_basesalary_unittext": [],
"job_streetaddress": [],
"job_postalcode": [],
"job_addresslocality": [],
"job_addressregion": [],
"job_addresscountry": [],
"job_employmenttype": [],
"job_link": {
"notes": "Wenn leer wird diese Seite genutzt."
},
"job_logo": []
}
}
}
</pre>

==== Templates ====
<pre>
{
"job": {
"id": 53,
"name": "job",
"fieldgroups_id": "job",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": 1,
"noParents": "",
"childTemplates": [],
"parentTemplates": [
"jobs"
],
"allowPageNum": 0,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-user-circle-o title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebot",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"job"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"job": []
}
},
"jobs": {
"id": 55,
"name": "jobs",
"fieldgroups_id": "jobs",
"flags": 0,
"cache_time": 0,
"useRoles": 1,
"editRoles": [],
"addRoles": [],
"createRoles": [],
"rolesPermissions": [],
"noInherit": 0,
"childrenTemplatesID": 0,
"sortfield": "",
"noChildren": "",
"noParents": -1,
"childTemplates": [
"job"
],
"parentTemplates": [],
"allowPageNum": 1,
"allowChangeUser": 0,
"redirectLogin": 0,
"urlSegments": 0,
"https": 0,
"slashUrls": 1,
"slashPageNum": 0,
"slashUrlSegments": 0,
"altFilename": "",
"guestSearchable": 0,
"pageClass": "",
"childNameFormat": "",
"pageLabelField": "fa-users title",
"noGlobal": 0,
"noMove": 0,
"noTrash": 0,
"noSettings": 0,
"noChangeTemplate": 0,
"noShortcut": 0,
"noUnpublish": 0,
"noLang": 0,
"compile": 3,
"nameContentTab": 0,
"noCacheGetVars": "",
"noCachePostVars": "",
"useCacheForUsers": 0,
"cacheExpire": 0,
"cacheExpirePages": [],
"cacheExpireSelector": "",
"label": "Stellenangebote",
"tags": "",
"titleNames": 0,
"noPrependTemplateFile": 0,
"noAppendTemplateFile": 0,
"prependFile": "",
"appendFile": "",
"pagefileSecure": 0,
"tabContent": "",
"tabChildren": "",
"nameLabel": "",
"contentType": "",
"errorAction": 0,
"connectedFieldID": null,
"ns": "ProcessWire",
"_exportMode": true,
"roles": [
"guest"
],
"fieldgroupFields": [
"title",
"layout_blocks",
"images",
"files",
"menu"
],
"fieldgroupContexts": {
"title": [],
"layout_blocks": [],
"images": [],
"files": [],
"menu": []
}
}
}
</pre>

=== Template Jobs ===
Todo besser als Layout-Block
<syntaxhighlight lang="php">
// JOBLIST
$joblist = '';
$jobs = pages('template=job,sort=-published');
foreach ($jobs as $item) {
$joblist .= '<li class="joblist-item"><a href="'.$item->url.'">'.$item->title.' ('.$item->job->job_organizationname->title.')</a></div>';
}
$joblist = '<ul class="joblist">'.$joblist.'</ul>';
</syntaxhighlight>
=== Template Job ===
Benötigt im Admin Bereich nur das job Feld. In diesem sind alle anderen benötigten Felder bereits enthalten.

<syntaxhighlight lang="php">
<?php namespace ProcessWire;
include_once('includes/SchemaHelper.php');
$sh = new SchemaHelper;
$jsonld = $sh->jsonldJobPosting($page);

// BEWERBUNGSFORMULAR WENN GESÜNSCHT
$contact = $forms->render('bewerbung');

ob_start();
?>

<div class="container">
<div id="apply">
<h1><?=$page->title?></h1>
<div class="job-description">
<?=$page->job->job_description?>
</div>
<div class="">Arbeitgeber</div>
<?=$page->job->job_organizationname->title?><br>
<?=$page->link?>
</div>
<div class="font-heavy">Arbeitsort</div>
<?=$page->job->job_streetaddress?><br>
<?=$page->job->job_postalcode?> <?=$page->job->job_addresslocality?>
</div>
<?php if ($page->job->job_basesalary_minvalue && $page->job->job_basesalary_maxvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ - <?=$page->job->job_basesalary_maxvalue?>€ <?=$page->job->job_basesalary_unittext->title?></div>
<?php elseif($page->job->job_basesalary_minvalue && $page->job->job_basesalary_unittext): ?>
<div class="font-heavy">Vergütung</div>
<div><?=$page->job->job_basesalary_minvalue?>€ <?=$page->unit->title?></div>
<?php endif ?>
<div class="font-heavy pt-20">Art der Anstellung</div>
<div class="pb-30"><?=$page->job->job_employmenttype->title?></div>
</div>

<div id="apply-form" class="">
<h2>Bewerbung</h2>
<div><?= $contact ?></div>
</div>

<?=$jsonld?>
</div>
<?php

$content = ob_get_clean();
</syntaxhighlight>

=== Funktionalität ===
==== SchemaHelper ====
Für Erzeugung der Strukturierten Daten

<syntaxhighlight lang="php">

</syntaxhighlight>

Webeditoren und Tools

2022-04-01T17:52:00Z

134.3.74.15: Die Seite wurde neu angelegt: „== Online Editoren == === Webflow === webflow https://www.udesly.com/ zum Exportieren von Webflow Projekten“

== Online Editoren ==

=== Webflow ===
webflow
https://www.udesly.com/ zum Exportieren von Webflow Projekten

Webdesign

2022-04-01T17:50:49Z

134.3.74.15:

siehe auch Gestaltung

[[Webeditoren und Tools]]

== Richtlinien für Printgrafiker: ==

* keine automatische Silbentrennung
* Farben als Webwerte
* Möglichst keine absoluten Schriftgrößen
* Wenn fixes Layout: gerne Pixelangaben für Spaltenbreiten und Abstände (margins, paddings) siehe Erklärung.
* Textfluss
** Für jede Art von Grundlayout benötigt man ein neues Template.
** CMS oder Hand-Made

=== weitere Hinweise ===

Animation im Web

2022-04-01T17:49:36Z

134.3.74.15: /* GSAP & ScrollMagic */

== Quickstart ==
In früheren Zeiten war die Standardantwort für "bewegte" Webseiten ganz einfach Flash. Heutzutage gibt es viele Lösungen um Animationen auf eine Webseite zu bringen. Dieser Artikel soll eine kleine Übersicht bringen.

Stichworte: Anime.js, GSAP, CSS Transform, CSS Keyframes, Snap, Waypoints, Lottie, ScrollMagic

== Links ==
Siehe auch in den Sections
[[Scroll-Snap]]
[[Anime.js]]
http://imakewebthings.com/waypoints/guides/getting-started/

== Überblick ==
=== GSAP & ScrollMagic ===
ScrollMagic ist obsolet es gibt bei GSAP ein eigenes Plugin - ScrollTrigger
[[GSAP]]
Gehört zu den Standardlösungen. GSAP - Greensock Animation Plattform bietet JavaScript Tools für Timeline-basierte Animationen. Ergänzend kann ScrollMagic die Steuerung der Timelines basierend auf der Skrollposition der Webseite steuern.

Vorteil:
* Alle DOM Elemente können animiert werden. Nicht nur in der Bewegung sondern auch in der Farbe, Sichtbarkeit...
* Gute Performance
* Mit ScrollMagic einfaches Steuern beim Scrolling inklusive einfaches Pinning (fixieren während der Animation)
Nachteil:
* Skriptlastig, wobei es nicht so komplex ist wie bei anderen Lösungen.

=== Vector + AfterFX + Bodymovin + Lottie ===
https://www.youtube.com/watch?v=i6qfQ8QDOfs&feature=emb_rel_end
Ein weiterer vielversprechender Workflow.
* Vektordateien erstellen
* In AfterFX importieren. Hier gibt es mehrere Möglichkeiten. Illustrator Dateine kann man direkt importieren, für Sketch gibt es ein Importtool, das auch die Layer mitnimmt. More to check out...
* Animation in AfterFX erstellen
* Mit dem AfterFX Bodymovin Plugin exportierst du die Animation als JSON File.
* Lottie kann die erstellt Datei rendern. Die Lottie Library gibt es für den Browser, aber auch für iOS und Android - dort werden die Dateien Nativ gerendert.
* Lottie Animationen können auch mit GSAP gesteuert werden.
https://greensock.com/forums/topic/18343-timelinemax-scrollmagic-lottie-web-bodymoving-is-it-possible-is-it-necessary/
https://www.youtube.com/watch?time_continue=308&v=HeY9qGUT3zQ&feature=emb_logo

Vorteil:
* Einfache Erstellung mit AfterFX
* Natives Rendern in Apps möglich -> gute Performance
Nachteil:
* Keine DOM Elemente
* Player nicht so frei positionierbar.

=== Only CSS ===
[[CSS Transitions]]
[[CSS Animation]]
CSS3 stellt einfache Möglichkeiten zur Verfügung Elemente (auch SVG Pfade) zu animieren.
Vorteil:
* Ohne JavaScript
* Für einfache Animationen einfach zu realisieren
* Performant wenn Properties verwendet werden, die der Browser nativ rechnen kann (z.B. alle transform Eigenschaften)
Nachteil:
* Komplexe Animationen umständlich

[[JQuery - Animation]]

== Animation mit CSS only ==
[[CSS Transitions]]
[[CSS Animation]]

== Animation mit JavaScript,CSS SVG und Canvas ==
=== Cooler Triangles Tiles Effekt ===
http://codepen.io/mistic100/pen/JobPLK (2016-12)

<syntaxhighlight lang="html5">
<div id="tiles"></div>
<p>Enhancement of my original <a href="http://codepen.io/mistic100/pen/GFHkm">Colorful Tiles</a> with truly random animation.</p>
<p>At the end of each cycle (49 steps) a new Perlin noise map is generated.</p>
</syntaxhighlight>

<syntaxhighlight lang="css">
body { background:#111; }
#tiles { margin:0 auto; }
p { max-width:680px; margin:10px auto; color:white; font:16px "Calibri", sans-serif; }
a { color:#3E7289; }
</syntaxhighlight>

<syntaxhighlight lang="javascript">
(function(){
if (!SVG.supported) {
alert('SVG not supported !');
return;
}

// parameters
var size = { x: 680, y: 400, tile: 40 },
speed = 50,
tile_nb = { x: Math.ceil(size.x/size.tile)+1, y: Math.ceil(size.y/size.tile)+1 },
colors = ["#ED1156", "#ED194E", "#ED2247", "#ED2B3F", "#EE3438", "#EE3D31", "#EE4529", "#EF4E22", "#EF571A", "#EF6013", "#F0690C", "#E8720E", "#E17B10", "#D98512", "#D28E14", "#CB9816", "#C3A118", "#BCAA1A", "#B4B41C", "#ADBD1E", "#A6C721", "#96C62F", "#87C53E", "#78C44D", "#69C35C", "#5AC26B", "#4AC17A", "#3BC089", "#2CBF98", "#1DBEA7", "#0EBDB6", "#0EBAB0", "#0EB8AA", "#0EB5A4", "#0EB39E", "#0EB098", "#0EAE92", "#0EAB8C", "#0EA986", "#0EA680", "#0EA47B", "#269376", "#3F8372", "#58736E", "#71626A", "#895266", "#A24262", "#BB315E", "#D4215A"],
objects = [],
values = [],
nb_colors = colors.length;

// function to generate simplex noise map
function generateValues(add) {
var values = [], foo,
simplex = new SimplexNoise();

for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
foo = Math.round((simplex.noise(c/10, l/10)+1) / 2 * nb_colors) + add;
values.push(foo, foo+1, foo+2, foo+3);
}
}

return values;
}

// init canvas
var container = document.getElementById('tiles');
container.style.width = size.x+'px';
container.style.height = size.y+'px';

var paper = SVG(container).size(size.x, size.y),
pos, cmd,
counter = 0;

// draw tiles
for (var l=0; l<tile_nb.y; l++) {
for (var c=0; c<tile_nb.x; c++) {
pos = { x: c*size.tile, y: l*size.tile };

// tile 1
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile) +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 2
cmd = (pos.x+size.tile) +','+ (pos.y+size.tile) +' '+ pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 3
cmd = pos.x +','+ pos.y +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
// tile 4
cmd = pos.x +','+ (pos.y+size.tile) +' '+ (pos.x+size.tile/2) +','+ (pos.y+size.tile/2) +' '+ (pos.x-size.tile/2) +','+ (pos.y+size.tile/2);
objects.push(paper.polygon(cmd, true));
}
}

// cycle colors
values[0] = generateValues(0);
values[1] = generateValues(nb_colors);

setInterval(function() {
var idx;
for (var i=0, l=objects.length; i<l; i++) {
idx = Math.round((values[1][i]-values[0][i]) * counter/(nb_colors-1) + values[0][i]);
if (idx >= nb_colors) idx = idx%nb_colors;
objects[i].fill(colors[idx]);
}

counter++;
if (counter == nb_colors) {
counter = 1;
values[0] = values[1].map(function(v) { return v-nb_colors; });
values[1] = generateValues(nb_colors);
}
}, speed);

// bug in svg.js
var temp = document.getElementById('SvgjsSvg1002');
temp.parentNode.removeChild(temp);
}());
</syntaxhighlight>

GSAP - ScrollTrigger

2022-03-31T07:22:53Z

134.3.74.15: /* Toggle Actions */

GSAP - Snippets

2022-03-31T04:21:59Z

134.3.74.15: /* Keyframes */

== Links ==
[[GSAP]]
https://greensock.com/cheatsheet/
https://greensock.com/get-started
https://codepen.io/GreenSock/
https://css-tricks.com/writing-smarter-animation-code/ *****
https://greensock.com/forums/topic/17401-multiple-timelinemax-oncomplete-function-help/
Cool Stuff
https://greensock.com/forums/topic/18128-svg-stroke-dasharray-quick-tip/
Read On
https://greensock.com/forums/topic/22793-how-to-work-with-new-labels-object-in-gsap-3/

== Einfache Animationen ==

gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});

=== Ease In Out ===

https://greensock.com/docs/v3/Eases
gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});

Ease Möglichkeiten

//OLD ==> NEW
Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
Elastic.easeIn ==> "elastic.in"
Elastic.easeInOut ==> "elastic.inOut"
Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

//and the other configurable eases are much easier!:
SteppedEase.config(5) ==> "steps(5)"
SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
RoughEase.ease.config({points:40}) ==> "rough(40)"
ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"

== Staggering ==
<syntaxhighlight lang="javascript">
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: {
amount:2,
from:"center",
grid:"auto",
onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
}
});
</syntaxhighlight>

== Positioning ==
=== Relative position/timing prefix ===
Relative “>” and “<” position prefix
This feature helps with positioning animations in a timeline. It puts a tween relative to the previous tween’s start or end time and removes the need to add labels through your code.

gsap.method('selector',{}, "<" ) //Inserts a tween at the start of the previous tween

gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous

=== Centering ===
<syntaxhighlight lang="javascript">
gsap.set(".content", {
position: "absolute",
top: "50%",
left: "50%",
xPercent: -50,
yPercent: -50
});
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// Center the content on page load
gsap.set('.content', {xPercent: -50});

// ...
// Some time later animate the width
.to('.content', {
width: '100vw',
duration: 2,
}, "<")
</syntaxhighlight>

== Keyframes ==

Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit. Aber Keyframes bieten noch einiges mehr:
https://greensock.com/understanding-keyframes/
<syntaxhighlight lang="javascript">
gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
{x:100, duration:1},
{y:200, duration:1, delay:0.5}, //create a 0.5 second gap
{rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighlight>

== Timelines ==
=== Reset Timeline ===
If you want to set the values to the original position set in the animation you can move the the playhead's position before you kill it:

tl.pause(0).kill(true);
ScrollTrigger.getById("trigger1").kill(true); // you have to do a extra kill for ScrollTrigger if used

If you want to remove all inline styles you can use clearProps:

tl.kill(true);
ScrollTrigger.getById("trigger1").kill(true);
gsap.set("#element", {clearProps: true});

=== Globale Timeline kontrollieren (timeScale)===
<pre>
gsap.globalTimeline.timeScale(0.1); //slow everything down
gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls()
</pre>

== Rotation ==
=== Richtung der Rotation ===
rotation:"270_short" //animates in the shortest direction!
rotation:"270_cw" //animates clockwise
rotation:"270_ccw" //animates counter-clockwise

== Scroll To ==
<syntaxhighlight lang="javascript">
document.querySelector("button").addEventListener("click", function() {
gsap.to(window, { duration: 0.75, scrollTo: ".target" });
});
</syntaxhighlight>

== GSAP Scroll Trigger ==
Update: Die beste Möglichkeit ist mit dem neuen ScrollTrigger Plugin.
[[GSAP - ScrollTrigger]]
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Good Practice and Time Savers ==
=== Timeline schneller abspielen ===
tl.timeScale(3).repeat(2);
=== Bestimmten Teil abspielen ===
tl.play("myLabel");
wobei die Labels so definiert werden:
.addLabel("out3");
oder
.to("#myElement",{duration:1, rotation:90}, "in3");

=== Schleifen ===
Geeignet für gleiche Animation auf mehreren Elementen hintereinander. Dabei übergeben wir in einer Schleife ein DOM Element und erstellen in einer anonymen Funktion den Tween.
<syntaxhighlight lang="javascript">
$(".fade-in").each(function(){
var tween = gsap.from($(this), {duration: 0.5, scale: 0.7, y: '+=30', ease: Linear.easeNone });
// possible with ScrollMagic
var scene = new ScrollMagic.Scene({
triggerElement: this,
})
.setTween(tween);
});
</syntaxhighlight>

=== Default Werte ===
<syntaxhighlight lang="javascript">
gsap.timeline({defaults:{ease:"power2.out", duration:5}})
.to(".selector1", {x:200})
.to(".selector2", {y:500})
</syntaxhighlight>
=== Nesting Timelines ===

=== Functions to create timelines ===

== Responsive Animations & Media Queries==
https://greensock.com/forums/topic/18719-how-to-manage-gsap-animation-in-mobile-device/
https://greensock.com/forums/topic/18280-truly-responsive-animations/
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

== Plugins ==
=== MotionPathPlugin ===
[[GSAP - MotionPathPlugin]]
=== SVGMorph ===
gsap.to("#circle", {duration: 1, morphSVG:"#hippo"});

== ScrollTrigger ==
[[GSAP - ScrollTrigger]]

https://codepen.io/noeldelgado/pen/BaogqYy
<syntaxhighlight lang="javascript">
// Array erstellen um Animation auf viele Elemente anzuwenden
var panels = gsap.utils.toArray(".panel");
let container = document.querySelector('.scroll-container')

tl = gsap.timeline();
tl.to(panels, { //each panel
xPercent: -100 * (panels.length -1), // move complete width i.e. -500%
scrollTrigger: {
trigger: ".scroll-container",
pin: true,
markers: true,
end: () => "+=" + document.querySelector(".scroll-container").offsetWidth,
}
});

// ODER

panels.forEach((panel, i) => {
gsap.to(panel, {
//...
}
})
</syntaxhighlight>

== Helpers ==
=== gsap loader ===
<syntaxhighlight lang="javascript">
gsap.registerPlugin(ScrollTrigger);

const images = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');
const updateProgress = (instance) =>
loader.textContent = `${Math.round(instance.progressedCount * 100 / images.length)}%`;

const showDemo = () => {
document.body.style.overflow = 'auto';
document.scrollingElement.scrollTo(0, 0);
gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });
// do some cool stuff
gsap.utils.toArray('section').forEach((section, index) => {
const w = section.querySelector('.wrapper');
const [x, xEnd] = (index % 2) ? ['100%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];
gsap.fromTo(w, { x }, {
x: xEnd,
scrollTrigger: {
trigger: section,
scrub: 0.5
}
});
});
}
// check how much is loaded
imagesLoaded(images).on('progress', updateProgress).on('always', showDemo);
</syntaxhighlight>

GSAP - Snippets

2022-03-31T04:06:43Z

134.3.74.15: /* Relative position prefix */

== Links ==
[[GSAP]]
https://greensock.com/cheatsheet/
https://greensock.com/get-started
https://codepen.io/GreenSock/
https://css-tricks.com/writing-smarter-animation-code/ *****
https://greensock.com/forums/topic/17401-multiple-timelinemax-oncomplete-function-help/
Cool Stuff
https://greensock.com/forums/topic/18128-svg-stroke-dasharray-quick-tip/
Read On
https://greensock.com/forums/topic/22793-how-to-work-with-new-labels-object-in-gsap-3/

== Einfache Animationen ==

gsap.to(".logo", {duration: 2, x: 300}); // Dies nennt sich eine Timeline. 300px nach rechts bewegen in 2s mit Standardwerten (ease out...)
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8"}); // CSS Eigenschaften die normal ein - haben, werden als Camelcase geschrieben.
// Eigenschaften mit Zeichen in Anführungsstrichen. Fast alles lässt sich Animieren.
gsap.to(".logo", {duration: 2, x: 300, backgroundColor: "#c2c4c8", borderRadius: "50%", border: "4px solid white"});

=== Ease In Out ===

https://greensock.com/docs/v3/Eases
gsap.to(".logo", {duration: 1, x:300, ease: "power2.inOut"});

Ease Möglichkeiten

//OLD ==> NEW
Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor
Elastic.easeIn ==> "elastic.in"
Elastic.easeInOut ==> "elastic.inOut"
Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)"

//and the other configurable eases are much easier!:
SteppedEase.config(5) ==> "steps(5)"
SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)"
RoughEase.ease.config({points:40}) ==> "rough(40)"
ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)"

== Staggering ==
<syntaxhighlight lang="javascript">
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: 0.5 //simple stagger of 0.5 seconds
});

//or get advanced:
gsap.to(".class", {
x:"+=100",
duration:1,
stagger: {
amount:2,
from:"center",
grid:"auto",
onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween
}
});
</syntaxhighlight>

== Positioning ==
=== Relative position/timing prefix ===
Relative “>” and “<” position prefix
This feature helps with positioning animations in a timeline. It puts a tween relative to the previous tween’s start or end time and removes the need to add labels through your code.

gsap.method('selector',{}, "<" ) //Inserts a tween at the start of the previous tween

gsap.method('selector',{}, ">" ) //Inserts a tween at the end of the previous

=== Centering ===
<syntaxhighlight lang="javascript">
gsap.set(".content", {
position: "absolute",
top: "50%",
left: "50%",
xPercent: -50,
yPercent: -50
});
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// Center the content on page load
gsap.set('.content', {xPercent: -50});

// ...
// Some time later animate the width
.to('.content', {
width: '100vw',
duration: 2,
}, "<")
</syntaxhighlight>

== Keyframes ==

Anstatt mehrerer Tweens kann man auch mehrere TweenProperties als keyframes kombinieren und hat weniger Tipparbeit.
<syntaxhighlight lang="javascript">
gsap.to(".class", {keyframes: [ //<-- an array of keyframes!
{x:100, duration:1},
{y:200, duration:1, delay:0.5}, //create a 0.5 second gap
{rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds
]});
</syntaxhighlight>

== Timelines ==
=== Reset Timeline ===
If you want to set the values to the original position set in the animation you can move the the playhead's position before you kill it:

tl.pause(0).kill(true);
ScrollTrigger.getById("trigger1").kill(true); // you have to do a extra kill for ScrollTrigger if used

If you want to remove all inline styles you can use clearProps:

tl.kill(true);
ScrollTrigger.getById("trigger1").kill(true);
gsap.set("#element", {clearProps: true});

=== Globale Timeline kontrollieren (timeScale)===
<pre>
gsap.globalTimeline.timeScale(0.1); //slow everything down
gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls()
</pre>

== Rotation ==
=== Richtung der Rotation ===
rotation:"270_short" //animates in the shortest direction!
rotation:"270_cw" //animates clockwise
rotation:"270_ccw" //animates counter-clockwise

== Scroll To ==
<syntaxhighlight lang="javascript">
document.querySelector("button").addEventListener("click", function() {
gsap.to(window, { duration: 0.75, scrollTo: ".target" });
});
</syntaxhighlight>

== GSAP Scroll Trigger ==
Update: Die beste Möglichkeit ist mit dem neuen ScrollTrigger Plugin.
[[GSAP - ScrollTrigger]]
https://www.youtube.com/watch?v=X7IBa7vZjmo Intro mit Beispielen
https://greensock.com/scrolltrigger Main Page
https://greensock.com/docs/v3/Plugins/ScrollTrigger Documentation
https://greensock.com/st-mistakes/ Häufige Fehler (auch mit each Schleifen)

Obsolet: https://codepen.io/osublake/pen/a633d0c9e6e2b951496d7f1eb4fd8fb6 (ohne ScrollMagic)

== Good Practice and Time Savers ==
=== Timeline schneller abspielen ===
tl.timeScale(3).repeat(2);
=== Bestimmten Teil abspielen ===
tl.play("myLabel");
wobei die Labels so definiert werden:
.addLabel("out3");
oder
.to("#myElement",{duration:1, rotation:90}, "in3");

=== Schleifen ===
Geeignet für gleiche Animation auf mehreren Elementen hintereinander. Dabei übergeben wir in einer Schleife ein DOM Element und erstellen in einer anonymen Funktion den Tween.
<syntaxhighlight lang="javascript">
$(".fade-in").each(function(){
var tween = gsap.from($(this), {duration: 0.5, scale: 0.7, y: '+=30', ease: Linear.easeNone });
// possible with ScrollMagic
var scene = new ScrollMagic.Scene({
triggerElement: this,
})
.setTween(tween);
});
</syntaxhighlight>

=== Default Werte ===
<syntaxhighlight lang="javascript">
gsap.timeline({defaults:{ease:"power2.out", duration:5}})
.to(".selector1", {x:200})
.to(".selector2", {y:500})
</syntaxhighlight>
=== Nesting Timelines ===

=== Functions to create timelines ===

== Responsive Animations & Media Queries==
https://greensock.com/forums/topic/18719-how-to-manage-gsap-animation-in-mobile-device/
https://greensock.com/forums/topic/18280-truly-responsive-animations/
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

== Plugins ==
=== MotionPathPlugin ===
[[GSAP - MotionPathPlugin]]
=== SVGMorph ===
gsap.to("#circle", {duration: 1, morphSVG:"#hippo"});

== ScrollTrigger ==
[[GSAP - ScrollTrigger]]

https://codepen.io/noeldelgado/pen/BaogqYy
<syntaxhighlight lang="javascript">
// Array erstellen um Animation auf viele Elemente anzuwenden
var panels = gsap.utils.toArray(".panel");
let container = document.querySelector('.scroll-container')

tl = gsap.timeline();
tl.to(panels, { //each panel
xPercent: -100 * (panels.length -1), // move complete width i.e. -500%
scrollTrigger: {
trigger: ".scroll-container",
pin: true,
markers: true,
end: () => "+=" + document.querySelector(".scroll-container").offsetWidth,
}
});

// ODER

panels.forEach((panel, i) => {
gsap.to(panel, {
//...
}
})
</syntaxhighlight>

== Helpers ==
=== gsap loader ===
<syntaxhighlight lang="javascript">
gsap.registerPlugin(ScrollTrigger);

const images = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');
const updateProgress = (instance) =>
loader.textContent = `${Math.round(instance.progressedCount * 100 / images.length)}%`;

const showDemo = () => {
document.body.style.overflow = 'auto';
document.scrollingElement.scrollTo(0, 0);
gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });
// do some cool stuff
gsap.utils.toArray('section').forEach((section, index) => {
const w = section.querySelector('.wrapper');
const [x, xEnd] = (index % 2) ? ['100%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];
gsap.fromTo(w, { x }, {
x: xEnd,
scrollTrigger: {
trigger: section,
scrub: 0.5
}
});
});
}
// check how much is loaded
imagesLoaded(images).on('progress', updateProgress).on('always', showDemo);
</syntaxhighlight>

Fritz.box Probleme lösen

2022-03-20T11:24:23Z

134.3.74.15: Die Seite wurde neu angelegt: „== FTP extrem langsam == In manchen Firmwareversionen gibt es Bugs. Hier die Lösung: Okay, ich habe die Lösung gefunden. In diesem Thread steht alles: https…“

== FTP extrem langsam ==
In manchen Firmwareversionen gibt es Bugs. Hier die Lösung:

Okay, ich habe die Lösung gefunden. In diesem Thread steht alles: https://www.unitymediaforum.de/threads/39320/page-2

Das FTP-Problem ist wohl AVM bekannt und ist in der neuesten FritzOS-Version gefixt. Diese muss uns aber VF zur Verfügung stellen. Da das erfahrungsgemäß immer ein wenig länger dauert, gibt es solange einen Workaround. In der Fritzbox einloggen, unten links neben "Ansicht: Erweitert" auf "Inhalt" klicken, dann auf der neuen Seite ganz unten auf "FRITZ!Box Support" und hier gibt es eine Option, die sich "Paketbeschleunigung" schimpft. Hier waren bei mir beide Haken an, also sowohl Paket- als auch Hardwarebeschleunigung. Wenn man den Haken bei Hardwarebeschleunigung rausnimmt, sprich die Option deaktiviert, sind FTP-Verbindungen wieder genauso schnell wie zuvor. Ich habe es gerade bei mir getestet. Nachteil: Die Downloadrate wird langsamer, anstelle meiner 1 G, erreiche ich max. 400 M im Download. Daher ist mein Workflow nun erst einmal: Wenn FTP, dann Haken bei Hardwarebeschleunigung raus und wenn fertig, dann Haken wieder rein.

Webp

2022-03-18T19:06:13Z

134.3.74.15: Die Seite wurde neu angelegt: „<syntaxhighlight lang="html5"> <picture> <source srcset="img.webp" type="image/webp"> <source srcset="img.jpg" type="image/jpeg"> <img src="img.jpg"> </…“

Blender Modeling Tipps

2022-03-17T20:51:17Z

134.3.74.15: /* Shade Smooth */

== Allgemeine Tipps ==
=== Geschicktes Auswählen ===
Alt - Klick -> Ring wählen
L - Select Linked
Wählt mit dem aktiven Vertice verbundene. Nützlich wenn man zwei Objekte aufeinander klebend hat und eines auswählt um es z.B. zu transformieren.
=== Skalieren über zwei Achsen ===
S > Shift Z -> Scale über X und Y Achse, aber NICHT Z Achse
=== Skalierung zurücksetzen ===
Hat man ein Objekt auf seine entgültige Größe gebracht, möchte man den Skalierwert auf 1 setzen. Das nennt sich '''Apply Scale'''. So kann man einfach auf dessen Ursprungsgröße zurückkehren.
Ctrl A > Scale -> Alle Scale Werte für die jetzige Größe auf 1 setzen.
=== Bevel ===
Ctrl B > Bevel (Achte darauf das die Scale Werte auf 1 stehen und du im Edge Mode bist)
MD -> Drag regelt die Größe der Bevel-Fläche
MW -> Wheel regelt die Anzahl der Bevel-Stufen
=== Geschicktes Löschen ===
X > Dissolve -> lösche Vertices oder Edges ohne die Flächen zu löschen.

== Mirror Modifier ==
Symetrisches bearbeiten. Clipping aktivieren um überlappende Bereiche zu verhindern.

== Loop Cuts ==
Cmd R - Loop Cut setzen
G Move Loop Cut
GG Move Loop Cut an original Achse

== Aproximity Loops ==
Nutze am Anfang eher weniger Loop Cuts und nutze dann Subsurfaces. Danach setze zusätzliche Loopcuts um scharfe Kanten (Tasse unten und oben etc.) zu bekommen.

== Inset ==
I - Inset
Inset ist eine Kombination aus neuem Loop und Skalieren.

Nutze Insets um wellenartige Rundungen die durch die Subface Surfaces zustandegekommen sind zu verstecken (u.B. Tassenrand).

== Vermeide n-gons ==
Strebe als Polygone immer 4-Ecke an. Nicht mehr.

== Darstellung ==
=== Shade Smooth ===
RM auf Objekt > Kontextmenü Shade Smooth
Gut um Materialien zu testen.
==== Auto Smooth ====
Tipp mit der Auto Smooth Funktion kann man für das Smooth Shading einen Grenzwinkel angeben. Dadurch kann man Kanten erhalten die eckig bleiben sollen.

Object Data Properties > Normals > Auto Smooth

== Proportional Editing ==
Beeinflusst die umgebenden nicht gewählten Vertices. Die Art der Beeinflussung lässt sich einstellen (Smooth, Round...).
O - Proportional Editing
MW - Einflussbereich einstellen
=== Vertices im Einflussbereich fixieren ===
Beispiel: Donut Topping soll unten Tropfen bilden, oben aber fixiert bleiben. Dazu blendet man die oberen Vertices mit Shortcut H aus und Grabt sich einen V. unten stellt Proportional Editing auf Random und zieht bis es passt.

== Objekte erzeugen ==
P - Ein eigenes Objekt erstellen. Meist aus einer Auswahl geht aber auch aus Material.
=== Thickness ===
==== Solidify ====
Hat man ein flaches Objekt könnte man es mit Extrude dicker machen. Danach lässt sich die Dicke aber nur schwer ändern. Man kann aber auch den '''Solidify Modifier''' nutzen. Thickness setzt die Dicke, Offset gibt vor ob nach außen oder nach innen "verdickt" wird (1 nach außen, -1 nach innen).
=== Verbindungen ===
F - Face
Erzeuge Faces aus 4 Punkten (4 sind optimal). Oft entstehen dabei im innernen neue Flächen die man noch löschen muss um einen sauberen Hohlkörper zu bekommen. Sonst enstehen unschöne Kanten.

=== Bessere Objekte ===
[[Bessere Kugel in Blender]]

== Probleme beheben ==
=== Normalen checken ===
* Anschalten unter Overlays Dropdown > Normals
* Recalculate Normals
A - Select all
Ctrl Shift N - Recalculate
* oder Flip Normal
Ctrl N

== Curve to Mesh ==
Kurve modellieren
Shift + A > Add -> Bezier Curve
Tab -> Wechsel in Edit Mode
G -> Grab
E -> Extrude
R -> Rotate ( Anfasser )
Cmd + Select -> letzte offene Punkte auswählen
F -> Face -> Kurve schließen

In Objekt umwandeln
Tab -> Wechsel in Object Mode, Objekt auswählen.
Object > Convert to > Mesh -> Vertices werden auf der Kurve erzeugt
Tab -> Edit Mode
Objekt wählen
NICHT: F -> erzeugt eine einzelne kaputte Fläche, die den Raum nicht abdeckt
3 Benachbarte Vertices wählen
F -> Face -> erzeugt eine Teilfläche
Innere Kante wählen (2 Vertices)
F - F - F -> erzeugt anschließende Teilflächen

== Klassische "CAD" Operationen ==
[[Blender - Boolean Modifier]]

Blender Modeling Tipps

2022-03-17T20:45:55Z

134.3.74.15: /* Shade Smooth */

== Allgemeine Tipps ==
=== Geschicktes Auswählen ===
Alt - Klick -> Ring wählen
L - Select Linked
Wählt mit dem aktiven Vertice verbundene. Nützlich wenn man zwei Objekte aufeinander klebend hat und eines auswählt um es z.B. zu transformieren.
=== Skalieren über zwei Achsen ===
S > Shift Z -> Scale über X und Y Achse, aber NICHT Z Achse
=== Skalierung zurücksetzen ===
Hat man ein Objekt auf seine entgültige Größe gebracht, möchte man den Skalierwert auf 1 setzen. Das nennt sich '''Apply Scale'''. So kann man einfach auf dessen Ursprungsgröße zurückkehren.
Ctrl A > Scale -> Alle Scale Werte für die jetzige Größe auf 1 setzen.
=== Bevel ===
Ctrl B > Bevel (Achte darauf das die Scale Werte auf 1 stehen und du im Edge Mode bist)
MD -> Drag regelt die Größe der Bevel-Fläche
MW -> Wheel regelt die Anzahl der Bevel-Stufen
=== Geschicktes Löschen ===
X > Dissolve -> lösche Vertices oder Edges ohne die Flächen zu löschen.

== Mirror Modifier ==
Symetrisches bearbeiten. Clipping aktivieren um überlappende Bereiche zu verhindern.

== Loop Cuts ==
Cmd R - Loop Cut setzen
G Move Loop Cut
GG Move Loop Cut an original Achse

== Aproximity Loops ==
Nutze am Anfang eher weniger Loop Cuts und nutze dann Subsurfaces. Danach setze zusätzliche Loopcuts um scharfe Kanten (Tasse unten und oben etc.) zu bekommen.

== Inset ==
I - Inset
Inset ist eine Kombination aus neuem Loop und Skalieren.

Nutze Insets um wellenartige Rundungen die durch die Subface Surfaces zustandegekommen sind zu verstecken (u.B. Tassenrand).

== Vermeide n-gons ==
Strebe als Polygone immer 4-Ecke an. Nicht mehr.

== Darstellung ==
=== Shade Smooth ===
RM auf Objekt > Kontextmenü Shade Smooth
Gut um Materialien zu testen.
==== Auto Smooth ====
Tipp mit der Auto Smooth funktion kann man einen Grenzwinkel angeben. Dadurch kann man Kanten erhalten.

Object Data Properties > Auto Smooth

== Proportional Editing ==
Beeinflusst die umgebenden nicht gewählten Vertices. Die Art der Beeinflussung lässt sich einstellen (Smooth, Round...).
O - Proportional Editing
MW - Einflussbereich einstellen
=== Vertices im Einflussbereich fixieren ===
Beispiel: Donut Topping soll unten Tropfen bilden, oben aber fixiert bleiben. Dazu blendet man die oberen Vertices mit Shortcut H aus und Grabt sich einen V. unten stellt Proportional Editing auf Random und zieht bis es passt.

== Objekte erzeugen ==
P - Ein eigenes Objekt erstellen. Meist aus einer Auswahl geht aber auch aus Material.
=== Thickness ===
==== Solidify ====
Hat man ein flaches Objekt könnte man es mit Extrude dicker machen. Danach lässt sich die Dicke aber nur schwer ändern. Man kann aber auch den '''Solidify Modifier''' nutzen. Thickness setzt die Dicke, Offset gibt vor ob nach außen oder nach innen "verdickt" wird (1 nach außen, -1 nach innen).
=== Verbindungen ===
F - Face
Erzeuge Faces aus 4 Punkten (4 sind optimal). Oft entstehen dabei im innernen neue Flächen die man noch löschen muss um einen sauberen Hohlkörper zu bekommen. Sonst enstehen unschöne Kanten.

=== Bessere Objekte ===
[[Bessere Kugel in Blender]]

== Probleme beheben ==
=== Normalen checken ===
* Anschalten unter Overlays Dropdown > Normals
* Recalculate Normals
A - Select all
Ctrl Shift N - Recalculate
* oder Flip Normal
Ctrl N

== Curve to Mesh ==
Kurve modellieren
Shift + A > Add -> Bezier Curve
Tab -> Wechsel in Edit Mode
G -> Grab
E -> Extrude
R -> Rotate ( Anfasser )
Cmd + Select -> letzte offene Punkte auswählen
F -> Face -> Kurve schließen

In Objekt umwandeln
Tab -> Wechsel in Object Mode, Objekt auswählen.
Object > Convert to > Mesh -> Vertices werden auf der Kurve erzeugt
Tab -> Edit Mode
Objekt wählen
NICHT: F -> erzeugt eine einzelne kaputte Fläche, die den Raum nicht abdeckt
3 Benachbarte Vertices wählen
F -> Face -> erzeugt eine Teilfläche
Innere Kante wählen (2 Vertices)
F - F - F -> erzeugt anschließende Teilflächen

== Klassische "CAD" Operationen ==
[[Blender - Boolean Modifier]]

ThreeJS

2022-03-17T20:20:45Z

134.3.74.15: /* Debugging */

https://threejs.org/
https://threejsfundamentals.org/
https://threejs.org/editor/ (Szenen und Objekte erstellen und expportieren)
https://threejs-journey.com/ Bruno Simon Course (registriert mit dev@stephanschlegel.de)
https://discoverthreejs.com/tips-and-tricks/ Tipps zu Performance und vielem mehr.

[[ThreeJS - Snippets]]
== Basics ==
=== Basic Scene ===
<syntaxhighlight lang="javascript">
// Canvas
const canvas = document.querySelector('canvas')
console.log(canvas)
// Scene
const scene = new THREE.Scene()
// Red cube
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({
color: '#ff0000'
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
const sizes = {
width: 800,
height: 600,
}
const fov = 75

// Camera (field of view, aspect ratio)
const camera = new THREE.PerspectiveCamera(fov, sizes.width / sizes.height)
camera.position.z = 3 // move camera a little backward
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height) // renderer needs size too
renderer.render(scene, camera)
</syntaxhighlight>

=== Basic animation example ===
<syntaxhighlight lang="javascript">
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
color: 0xff0000
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
const sizes = {
width: 800,
height: 600
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)

// ANIMATIONS
const clock = new THREE.Clock()

const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
//console.log(elapsedTime)

// rotate the cube
mesh.rotation.y = elapsedTime * Math.PI * 0.1

// circular movement of camera
camera.position.y = Math.sin(elapsedTime)
camera.position.x = Math.cos(elapsedTime)
camera.lookAt(mesh.position)

// Render new setting
renderer.render(scene, camera)

// tell JS to call tick on the next frame
window.requestAnimationFrame(tick)
}

// GO...
tick()

</syntaxhighlight>

== Camera ==
=== Perspective Camera ===
Entspricht etwa einem regulären Objektiv.
const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

'''Field of View (FOV)''' Gibt die '''Brennweite''' vor. Gute Werte sind zwischen 45 (Weitwinkel) und 75 (Tele)

''' Aspect Ratio ''' Das Seitenverhältnis des Renderbereichs. Da hier nur eine Zahl angegeben wird muss man dem Renderer noch die Endbreite mitgeben.
renderer.setSize(breite, hoehe)

'''Near, Far''' - gibt an ab welcher Entfernung Objekte nicht mehr angezeigt werden. Vermeide Extreme Werte, da diese zu Glitches führen können (z-fighting)
const camera = new THREE.PerspectiveCamera( 55, width / height, 0.1, 100 );
=== Orthographic Camera ===
Diese Kamera hat keine Brennweite / Perspektive. D.h. entfernte Objekte erscheinen gleich groß wie nahe Objekte. Man übergibt 4 Werte: links, rechts, oben, unten
const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
Achtung das Bild kann verzerrt erscheinen, wenn die Höhe und Breite des Renderers nicht zu diesen Werten passen. Kann man z.B. so einstellen:
const aspectRatio = width/height // width and height of renderer viewport
const camera = new THREE.OrthographicCamera(-1 * aspectRatio,1 * aspectRatio,1,-1)

== Debugging ==
=== Debug UI ===
Mit einer Debug UI kann man beliebige '''Properties von Objekten''' komfortabel '''verändern'''. Das funktioniert mit allen Objekten und ist nicht spezifisch für ThreeJS. Einzige Voraussetzung ist, dass es sich um Objekte und Eigenschaften handelt (also nicht eine normale Variable).

Dat.GUI ist (Ende 21) nicht mehr aktuell. Stattdessen kann man lil-gui verwenden.

Dat.GUI https://github.com/dataarts/dat.gui
lil-gui https://lil-gui.georgealways.com/
control-panel https://github.com/freeman-lab/control-panel
ControlKit https://github.com/automat/controlkit.js
Uil https://github.com/lo-th/uil
Tweakpane https://cocopon.github.io/tweakpane/
Guify https://github.com/colejd/guify
Oui https://github.com/wearekuva/oui
Bruno Simon's debug panel https://bruno-simon.com/#debug
==== lil-gui ====
https://www.npmjs.com/package/lil-gui
Mit Webpack / npm
npm i --save lil-gui

Beispiel inkl. kleiner GSAP Animation:
<syntaxhighlight lang="javascript">
// https://lil-gui.georgealways.com/#
import GUI from 'lil-gui';
/**
* Debug
*/
const gui = new GUI({
width:400
})
gui.close()
const params = {
color: 0xff0000,
spin: () =>
{
console.log('spin')
let tl = new gsap.timeline
tl.to(mesh.rotation,{y: mesh.rotation.y + 0.5*Math.PI, duration: 1.5, ease: "circ"})
//...
}
}
//...
// Debug
//gui.add(mesh.position,'y',-2,2,0.1) // OR
gui.add(mesh.position,'y')
.min(-2)
.max(3)
.step(0.1)
.name('elevation') // chain version
gui.add(mesh,'visible')
gui.add(material,'wireframe')
// we can not use material.color as it's not an object
// thus we use a separately created object...
gui.addColor(params,'color')
// ... and update material when this param changed:
.onChange( ()=>
{
material.color.set(params.color)
})
gui.add(params, 'spin')
</syntaxhighlight>
Viele Eigenschaften erkennt das gui selbst. Manche Eigenschaften die keine Objekteigenschaften sind kann man vorher in ein Objekt packen und diesen Wert verändern (hier z.b. Color). Danach kann man über onChange den tatsächlichen Wert ändern.

Auch Funktionen kann man übergeben, diese werden dann per Klick ausgelöst.

=== JavaScript Module oder Vanilla ===
In moderneren Setups nutzt man heute Loader wie Webpack und lädt Plugins als Module. Es gibt aber alle Plugins auch als konventionelle Skripte.

Konventionell:
<syntaxhighlight lang="javascript">
<script src="\node_modules\three\build\three.js"></script>
<script src="\node_modules\three\examples\js\loaders\GLTFLoader.js"></script>
<script src="index.js"></script>
// Achtung bei manchen Modulen geht das hier anders als bei den Modulimporten:
// You should instantiate the GLTFLoader constructor using its parent class constructor that is the 'THREE' constructor
var loader = new THREE.GLTFLoader();
</syntaxhighlight>

Modern:
<syntaxhighlight lang="javascript">import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'lil-gui'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger.js";
gsap.registerPlugin(ScrollTrigger)
//...
// Hier kann die Loader Klasse direkt angesprochen werden.
const gltfLoader = new GLTFLoader()
</syntaxhighlight>

You should instantiate the GLTFLoader constructor using its parent class constructor that is the 'THREE' constructor, like I have shown above. This will resolve the issue.