# Hwk Html
Html Dummy für die Handwerkskammer 

## Versionen

### Projekt
Version 2.0.4

[Changelog](CHANGELOG.md)

### Bootstrap
Version 3.4.1

[getbootstrap.com](https://getbootstrap.com/docs/3.4/)

#### javascript
Achtung: transition.js fehlt in der Auflistung im dist Ordner von Bootstrap 3.4.1! Das Menü gleitet dann nicht auf im Mobile, sondern springt abrupt.

### jQuery
Version 3.5.1

[jquery.com ](https://jquery.com/)

## Struktur

### _src Ordner

Dies ist der Ordner mit den Source Dateien. Für das Css wurde wie in Bootstrap 3 vorgegeben mit Less gearbeitet.

Im __src_ Ordner gibt es jeweils eine _bootstrap.less_ und eine _bootstrap.js_ Datei, in der die nicht benutzten Elemente entfernt werden können. 

Die Dateien auf der obersten Ebene im __src_ Ordner kompilieren jeweils in den css oder js Ordner.

    .
    ├── _src                   # Source files 
    |     └── xxx.less         # files will compile to css folder
    |     └── xxx.js           # files will compile to js folder
    ├── css                    # Compiled css files
    └── js                     # Compiled js files 

#### Kompilierung

Für die Kompilierung der Dateien wurde als Hilfsprogramm die App Codekit ([codekitapp.com](https://codekitapp.com)) verwendet. Es kann natürlich auch auf einem anderen Weg kompiliert werden. Wichtig zu beachten:

#### Kompilierung CSS
Für die Kompilierung ist es notwendig, einen Autoprefixer zu benutzen.

#### Kompilierung JS
Das Javascript wurde nur komprimiert und zusammengeführt.

### CSS Ordner
Im _css_ Ordner befinden sich zwei Dateien, die je nach Bedarf ausgetauscht werden können:
 
<table>
<tr>
<td>main.min.css</td>
<td>Das ist das komplette Css mit dem alten main.css kombiniert mit den Änderungen (new.css)</td>
</tr>
<tr>
<td>new.min.css</td>
<td>Das ist das Css welches das alte main.css überschreibt jedoch nicht beinhaltet.</td>
</tr>
</table>

## Bilder

### Retina Unterstützung

Wird ein Retina Display erkannt, dann wird automatisch dem Bildnamen das `@2x` hinzugefügt und dieses Bild wird verwendet. Sollte es das Bild nicht geben, regelt der Server die Weiterleitung auf das normale Bild ohne den `@2x` Zusatz.

#### Server Redirect einrichten

Dieses Serververhalten muss auf jedem Server eingerichtet sein oder werden. Hierfür einfach folgendes in die _.htaccess_ Datei im Hauptverzeichnis kopieren:

```apacheconf
# if no @2x redirect to normal image
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} ^(.*)(@2x)(.jpg|.png)$ [NC]
RewriteRule ^(.*)@2x(.jpg|.png) $1$2 [L]
```

### Automatisierte Bildgrößenwahl

Es besteht die Möglichkeit dem System eine Auswahl an Bildgrößen zur Verfügung zu stellen, so dass das System die optimale Bildgröße je nach Größe des umgebenden Containers selbst auswählt.

Will man das nicht nutzen, so fügt man wie gewohnt die Bilder ein und es wird nur mit dem im src angegebenen Bildpfad gearbeitet.


#### Anwendung

Möchte man die Vorteile der optimierten Bildgrößenauswahl nutzen, so sollten für jedes Bild zusätzlich folgende Größen angelegt werden:

<table>
<tr>
<td>Thumbnail</td>
<td>150px</td>
<td>data-src-thumbnail</td>
<td>

- Dies ist das Bild was als Platzhalter zuerst beim Aufrufen der Seite geladen wird.
- Von daher muss es in dem src Attribute des `<img>` gespeichert werden.
- Es wird per javascript dann sofort durch das optimalste Bild ersetzt, sollte von daher also eine möglichst kleine Dateigröße haben.
</td>
</tr>
<tr>
<td>Small</td>
<td>480px</td>
<td>data-src-small</td>
<td>

- Dies ist das kleinste Bild und es ist 480px breit.
- Im `<img>` erhält es ein eigenes Attribute `data-src-small`
</td>
</tr>
<tr>
<td>Medium</td>
<td>768px</td>
<td>data-src-medium</td>
<td>

- Dies ist die mittlere Bildgöße mit 768px Breite.
- Im `<img>` erhält es ein eigenes Attribute `data-src-medium`
</td>
</tr>
<tr>
<td>Large</td>
<td>1024px</td>
<td>data-src-large</td>
<td>

- Dies ist die große Bildgöße mit 1024px Breite.
- Im `<img>` erhält es ein eigenes Attribute `data-src-large`
</td>
</tr>
<tr>
<td>Full</td>
<td></td>
<td>data-src-full</td>
<td>

- Dies ist das Originalbild.
- Es kann größer als das Large-Bild sein, sollte aber immer noch eine zumutbare bzw. ladbare Größe haben.
- Ist es nicht möglich oder notwendig, das Bild in einen der größeren Größen zur Verfügung zu stellen, so kann das Originalbild auch jede andere kleinere Größe haben.
- Im `<img>` erhält es ein eigenes Attribute `data-src-full`
</td>
</tr>
</table>


Beispiel `img`

```html
<img 
    src="uploads/example-150x92.jpg"

    data-src-thumbnail="uploads/example-150x92.jpg"
    data-src-small="uploads/example-480x294.jpg"
    data-src-medium="uploads/example-768x471.jpg"
    data-src-large="uploads/example-1024x628.jpg"
    data-src-full="uploads/example.jpg"
 
    title="example"
    alt="example" 
    class="img-responsive"
/>
```

Es ist nicht notwendig, dass alle Größen angelegt sind

Je nach Bildmaterial ist es manchmal entweder nicht möglich oder auch nicht notwendig, dass das Bild in allen Größen angelegt wird.

Wichtig ist nur, dass die existierenden Bildgrößen in den jeweiligen <img> Attributen gespeichert sind und alle anderen Attribute ohne entsprechendes Bild gelöscht werden.

Beispielsweise:

```html
<img
src="uploads/example-150x92.jpg"
    
    data-src-thumbnail="uploads/example-150x92.jpg"
    data-src-small="uploads/example-480x294.jpg"
    data-src-full="uploads/example.jpg"
 
    title="example"
    alt="example" 
    class="img-responsive"
/>
```

Hierbei würden es zum Beispiel nur folgende Dateien geben, wobei die Originaldatei beispielsweise 600px breit ist.

- `example.jpg`
- `example-150.jpg`
- `example-150@2x.jpg`
- `example-480.jpg`

#### Gif Bilder
Bei Gif Bildern wird immer das Originalbild verwendet

Es wird davon ausgegangen, dass ein Gif-Bild nur als animiertes Gif verwendet wird. Hierfür müssen nicht mehrere Versionen erstellt werden, da immer auf die Originalgröße zurückgegriffen wird.
 
## CSS
Es gibt zwei CSS|Less Versionen. 
1) In dem Hwk-Html Paket überschreibt das neue CSS das CSS der alten Version 1.0.1. 
    
2) In dem Hwk-Html-Cleanup Paket wurde das CSS und die Less Dateien komplett bereinigt bzw. neu geschrieben. Sie haben nicht den Anspruch alte CSS Regeln zu überschreiben.  

### Neue CSS Klassen

Ein Überblick der neuen CSS Klassen:

``` 
.align-middle.col /* needs .d-flex on row to be effective (will stretch height) */
.aria-structure /* used on ul to make items more accessable not really ul */
.bg-color
.bg-white
.bg-white-box
.border-right
    .border-right-lg
    .border-right-md
    .border-right-sm
.border-bottom
    .border-bottom-lg
    .border-bottom-md
    .border-bottom-sm
    .border-bottom-xs
.btn-white 
.d-flex
    .d-flex-lg
    .d-flex-md
    .d-flex-sm
    .d-flex-xs
.d-flex-wrap
    .d-flex-wrap-lg
    .d-flex-wrap-md
    .d-flex-wrap-sm
    .d-flex-wrap-xs
.d-block
    .d-block-lg    
    .d-block-md    
    .d-block-sm    
    .d-block-xs
.d-inline-block
    .d-inline-block-lg        
    .d-inline-block-md        
    .d-inline-block-sm        
    .d-inline-block-xs        
.hwk-icon-menu.col     /* small icon menu on home page */
.hwk-teaser-image-info /* presse teaser => smaller image height */
.no-margin-x
.no-margin-y
.no-padding-x
.no-padding-y
.space-around

/* .stretch on .row needs segments which have height: 100% */
/* .stretch usually combined with .d-block-xs */ 
.stretch
    .stretch-lg
    .stretch-md
    .stretch-sm
    .stretch-xs
.submenu-full-width
.teaser-box
.teaser-icon
.teaser-image-info
.top-blog
.top-blog-image

/* white nav box inside margin */
.nav-white-box        /* on .nav-tabs.nav-stacked */
.scrollspy            /* outside .nav-tabs.nav-stacked */

.listgroup-wrapper
.listgroup-intro
.listgroup-content 
.list-group
.listgroup-footer

.listgroup-arrow
.listgroup-arrow-right
.listgroup-content
.listgroup-footer
.listgroup-image-blog
.listgroup-info
.list-group-item 
.listgroup-wrapper
.list-icon-check
.listgroup-color
```
Added @since 2.0.1
```
.no-wrap
.slider-link    (to #carousel-header)
```
Added @since 2.0.4
1) Icon können nur eingefärbt werden über die body Klasse, wenn sie .allow-change-color gesetzt haben.
```
.allow-change-color  /* only on glyphicon - will change color to color set in body class if set */
```
2) Der Icon Font wurde um folgende Zeichen erweitert:
```
.glyphicon-thumbs-up
.glyphicon-thumbs-down
.glyphicon-hand-right
.glyphicon-hand-left
.glyphicon-hand-up
.glyphicon-hand-down
```

## Anpassungen Javascript
Tauscht man die Javascript Dateien nur aus, gibt es nichts zu beachten, da die neue _main.min.js_ Datei schon alle Anpassungen beinhaltet.
 
**ACHTUNG!**
Arbeitet man allerdings mit einer Javascript Datei, die erweitert wurde ist zu beachten, dass bevor die neue _main.min.js_ Datei eingesetzt wird, zuvor noch Anpassungen an der alten Datei vorgenommen werden, da einige Funktionen angepasst werden mussten.

### Aktualisierte Funktionen
Folgende Funktionen mussten angepasst werden, weshalb sie aus der alten Javascript entfernt werden müssen:

- checkImageForResize
- chooseImage
- emailReplace (**Achtung** auch Funktionsaufruf `emailReplace()` entfernen )
- initSectionCollapse
- setImageAsBackgroundOfParent
- setImageSizeOnInit  
- sliderHeaderXsSameHeight  
- writeNavNthLevel

Die geänderten Funtionen befinden sich in __src/js/main-new.js_
<table>
<tr>
<td>main-new.js </td>
<td>alte main.js Funktionen jetzt angepasst/überschrieben</td>
</tr>
<tr>
<td>main-old.js</td>
<td>altes main.js ohne die oben neu geschriebenen Funktionen</td>
</tr>
</table>

#### email.js
Erweiterte emailReplace() Funktion, die auch ein no-follow hinzufügt und es erlaubt als href einen scheinbaren echten Link einzufügen wie z.B.:
```html
<a class="mail" href="https://max.musterman--at--hwk-musterstadt.de">
   max.musterman--at--hwk-musterstadt.de
</a>
```
Kann jetzt wie folgt auch an anderen Stellen aufgerufen werden:
```js
$(SELCETOR).emailReplace();
```
## Anpassungen HTML

### Bilder

Falls mit den Html Attributen _src-xxx_ gearbeitet wurde, ist zu beachten, dass diese geändert wurden, da es teilweise Probleme mit manchen Browsern und der Bezeichnung gab.

Im Javascript wurde aber ein Fallback für die alten Attribute hinzugefügt. Dennoch wäre es ratsam die Bezeichnungen anzupassen, wenn möglich.

<table>
<tr>
<th>alt</th>
<th>neu</th>
</tr>
<tr>
<td>src-thumbnail</td>
<td>data-src-thumbnail</td>
</tr>
<tr>
<td>src-small</td>
<td>data-src-small</td>
</tr>
<tr>
<td>src-medium</td>
<td>data-src-medium</td>
</tr>
<tr>
<td>src-large</td>
<td>data-src-large</td>
</tr>
<tr>
<td>src-full</td>
<td>data-src-full</td>
</tr>
</table>

### Formular
Die Formulare haben jetzt schwebende Label, die sich bei Eingabe verkleinern. Folgende Anpassungen wurden gemacht:

- die Reihenfolge von _label_ und _input_ in `.form-control` wurde geändert zu `<input>` `<label>`
- die Klasse `.sr-only` wurde vom `<label>` entfernt
- der Platzhalter wurde geleert und opacity auf 0 gestellt<br> (Das Label ist ja jetzt der Platzhaltertext)

**Hinweis**: Die alte Struktur wird mit der Javascript Funktion `adjustForm()` automatisch angepasst.

<hr>

### Hauptnavigation 
#### Mega Menu
Wenn das Untermenü auf voller Breite gewünscht ist, muss die Klasse `.submenu-full-width` oberhalb des Menü's eingetragen werden.

Für diese Seiten wird das Html für die dritte Navigationsebene innerhalb der Seite nicht mehr benötigt.

### Header Carousel
#### onTop Variante
- Neues Html => siehe Kommentare im Html.
- Altes Html wird mit der `function adjustCarouselHeader()` automatisch angepasst (siehe adjust.js).
- Das Hintergrundbild muss jetzt auf `div.container` liegen, nicht `div.item`.

```html
<div class="item text-on-top" aria-roledescription="slide" aria-label="1 von 2">
  <div class="container">
    <div class="col-sm-1 slider-deco-text-on-top"></div>
    <div class="col-md-6 col-sm-7 slider-text">
      <div class="slider-text-container"><!-- NEW HTML -->
        <div class="slider-text-h1"><!-- NEW HTML -->
          <h2 class="h1">
            <span class="slider-text-h1-deco"><!-- NEW HTML --></span>
            <span class="slider-text-h1-text">Headline<!-- NEW HTML --></span>
          </h2>
        </div>
        <p class="lead">Text</p>
      </div>
    </div>
    <p class="note inside">© Gusen Fertelmann</p>
    <div class="slider-image-text-on-top">
      <img data-src-full="uploads/slider-ontop.jpg" title="titel_textontop" src="uploads/slider-ontop.jpg" alt="Fertelmann" class="img-responsive" />
    </div>
  </div>
  <a href="#" class="slider-link"><span class="sr-only">Link zu #</span></a>
</div>
```

### Horizontal Swipe
Um Pfeile hinzuzufügen musste folgendes Html um das `div.swipe-horizontal-container` gebaut werden:

```html
<div class="swipe-horizontal-wrapper">
    <a class="swipe-horizontal-arrow swipe-horizontal-left invisible">
        <span class="glyphicon glyphicon-einfacher-pfeil-links"></span>
    </a>
    
    <div class="swipe-horizontal-container" />

    <a class="swipe-horizontal-arrow swipe-horizontal-right invisible">
        <span class="glyphicon glyphicon-einfacher-pfeil-rechts"></span>
    </a>
</div>
```

Dies wird in der Javascript Funktion `addArrowsHorizontalSwipe` automatisch hinzugefügt, falls das Html fehlt.
 
### Link mit Icon

Das neue Link-Design hat es erforderlich gemacht, die Html Struktur anzupassen, wenn mehrzeiliger Text bündig neben dem Icon stehen soll.

<table>
<tr>
<th>Neues Html</th>
<th>Altes Html</th>
</tr>
<tr>
<td><img src="___helper/img/icon-text-new.png"></td>
<td><img src="___helper/img/icon-text-old.png"></td>
</tr>
</table>

Wo es eben geht, sollte also optimalerweise folgendes Html benutzt werden:

```html
 <p class="icon-text-block small">
    <span class="glyphicon glyphicon-pdf-download-2" aria-hidden="true"></span>
    <span class="sr-only">Pdf</span>
    <a href="#"><span class="link-text">Linkname</span></a>
</p>
```

### Srcollspy Seiten 
Dies sind die Seiten, die das fliegende Menü in der Marginale haben.
Es kann jetzt auch mit der Klasse `.scrollspy` gearbeitet werden anstatt der id `#myScrollspy`. 
Die Spaltenbreiten sollten noch folgendermaßen angepasst werden:

```html
<div class="col-md-9 content">...</div>
<div class="scrollspy col-md-3 visible-md visible-lg">...</div> 
```


Alt:

```html
<div class="col-md-10 content">...</div>
<div class="col-md-2 visible-md visible-lg" id="myScrollspy">...</div>
```

### Suche
#### Suchfilter
Damit die kleinen `<sup>` Nummern ohne Unterstrich angezeigt werden wenn der Punkt aktiv ist, muss der Text immer in `<span>` Tags gesetzt werden.
Also:
```html
<li>
    <a href="#alle" role="tab" data-toggle="tab"><span>Alle</span></a>
</li>
<li>
    <a href="#seiten" role="tab" data-toggle="tab">
        <span>Seiten</span> <sup class="search-result-number-circle">23588</sup>
    </a>
</li>
```
#### Suchergebnis mit Karte
```html
<body onload="init_map();">
<li class="active"><a href="#handwerker" role="tab" data-toggle="tab" onclick="init_map();"><span>Handwerker</span></a></li>
```


## Barrierefreiheit
An dieser Stelle wird nur Bemerkenswertes aufgeführt.
### Standard Icon-Font
1) Wenn `<span.glyphicon>` in einem `<a>` Tag liegt bekommt das `<a>` Tag den Beschreibungstext wie folgt: `aria-label="Beschreibungstext"`

```html
<a aria-label="Vorherige Seiten" href="#" role="button">
    <span class="glyphicon glyphicon-einfacher-pfeil-links" aria-hidden="true"></span>
</a>
```

2) Wenn `<span.glyphicon>` nicht in einem `<a>` Tag liegt, wird der Beschreibungstext - falls erfolderlich - normalerweise als `<span.sr-only>` angehängt.

```html
<div>
    <span class="glyphicon glyphicon-word-dokument" aria-hidden="true"></span>
    <span class="sr-only">Word Dokument</span>
</div>
```