hr-design-system-handlebars 0.65.0 → 0.67.0

package/.storybook/preview.js

@@ -163,7 +163,7 @@ export const parameters = {
                     { id: 'hr2', title: 'hr2.de' },
                     { id: 'hr3', title: 'hr3.de' },
                     { id: 'hr4', title: 'hr4.de' },
-                    { id: 'youfm', title: 'you-fm.de' },
+                    { id: 'you-fm', title: 'you-fm.de' },
                     { id: 'hr-inforadio', title: 'hr-info.de' },
                     { id: 'hr-fernsehen', title: 'hr-fernsehen.de' },
                     { id: 'hr-rundfunkrat', title: 'hr-rundfunkrat.de' },

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.67.0 (Wed Oct 19 2022)
+
+#### 🚀 Enhancement
+
+- Bugfix/dpe 1567 [#342](https://github.com/mumprod/hr-design-system-handlebars/pull/342) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v0.66.0 (Tue Oct 18 2022)
+
+#### 🚀 Enhancement
+
+- Dpe 1696 podcast player refactoring part5 [#343](https://github.com/mumprod/hr-design-system-handlebars/pull/343) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.65.0 (Fri Oct 14 2022)
 
 #### 🚀 Enhancement

package/README.md

@@ -38,15 +38,72 @@ Mit dem Befehl
 npm run storybook
 ```
 
-kann das Designsystem lokal gestartet werden. Um immer mit den aktuellsten Assets zu arbeiten, sollte zudem
-noch in einem anderen Terminal Fenster der Befehl
+kann das Designsystem lokal gestartet werden. Damit dieses immer mit den aktuellsten Daten arbeitet, muss in einem weiteren Terminalfenster zudem das Skript `optimize-assets` mit dem Befehl
 
 ```
 npm run optimize-assets
 ```
 
-aufgerufen werden. Dieser sorgt dafür, dass den Stories immer die derzeit aktuellsten statischen Daten (Fixtures)
-bereitgestellt werden und erzeugt zudem immer optimierte Versionen unserer Icons. Das Skript läuft im Watch-Modus
-sodass änderungen an Dateien automatisch erkannt und die entsprechenden Optimierungs-Operationen neu ausgeführt werden.
+gestartet werden. Dieses Skript erzeugt für die einzelnen Features JSON-Testdaten, optimiert im SVG-Format vorliegende Icons, erzeugt eine angepasste Version von Modernizr.js und stellt alle Handelbars-Templates als JS-Exporte zur Verfügung. Es läuft im Watch-Modus,
+sodass Dateiänderungen automatisch erkannt und die entsprechenden Optimierungs-Operationen neu ausgeführt werden.
+Beim ersten Aufruf des Skripts cached es die Rohdaten der jeweiligen Assets im Verzeichnis `build/gulp/cache`. Bei allen zukünftigen Aufrufen vergleicht es die Rohdaten mit den Daten im Cache und führt die Optimierungen lediglich noch für geänderte Dateien aus. Dies verkürzt zukünftige Builds erheblich.
+
+## Einrichten eines VS-Code Makros zur komfortableren Ausführung der Skripte
+
+Die NPM-Skripte `storybook` und `optimize-assets` müssen für die korrekte Funktionsweise von Storybook immer zusammen ausgeführt werden. Zur Zeitersparnis und
+weil insbesondere der Aufruf des Skripts `optimize-assets` gerne mal vergessen wird, erlaubt es der Code Editor VS-Code zum gemeinsamen Starten der Skripte
+ein Makro zu erstellen. Damit VS-Code Makros ausführen kann, muss das Add-On [Macro-Commander](https://marketplace.visualstudio.com/items?itemName=jeff-hykin.macro-commander) installiert werden. Zur Einrichtung des eigentlichen Makros, müsssen an zwei Dateien Änderungen vorgenommen werden.
+Zunächst muss der Code des Makros in den benutzerspezifischen Einstellungen (`Strg + Shift + P` > "User Settings (JSON)") eingetragen werden.
+
+```json
+settings.json
+{
+    // Weitere benutzerspezifische Einstellungen
+    ...
+    "macros": {
+        "start_storybook_scripts": [
+            "workbench.action.terminal.killAll",
+            "workbench.action.terminal.new",
+            "workbench.action.terminal.split",
+            "workbench.action.terminal.focusPreviousPane",
+            {
+                "command": "workbench.action.terminal.sendSequence",
+                "args": { "text": "npm run storybook-only\r" }
+            },
+            "workbench.action.terminal.focusNextPane",
+            {
+                "command": "workbench.action.terminal.sendSequence",
+                "args": { "text": "npm run optimize-assets\r" }
+            }
+        ]
+    }
+}
+```
+
+Im Anschluss daran muss, um das Makro aufrufen zu können, eine Tastenkombination mit dem Makro verknüpft werden. Hierfür muss in der
+benutzerspezifischen Datei `keybindings.json` (`Strg + Shift + P` > Open Keyboard Shortcuts (JSON)) eine Tastenkombination zugeordet
+werden.
+
+```json
+[
+    {
+        "key": "ctrl+shift+9",
+        "command": "macros.start_storybook_scripts"
+    }
+]
+```
+
+Als `key` kann eine beliebige Tastenkombination festgelegt werden. Um einzusehen welche Tastenkombinationen gegegebenenfalls schon in
+Verwendung sind, empfiehlt es sich unter `Datei>Einstellungen>Tastenkombinationen` die derzeitigen Tastenzuordnungen in VS-Code einzusehen.
+Ist dem Makro eine Tastenkombination zugeordnet, kann es, wenn alles korrekt gemacht wurde, ausgeführt werden. Folgende `Kommandos` führt das
+Makro hintereinander aus:
+
+1. Beenden aller derzeit geöffneten Terminal Instanzen
+2. Öffnen eines neuen Terminal Fensters
+3. Teilen des Terminal Fensters
+4. Setze den Fokus auf das linke Terminal Fenster
+5. Setze den Befehl `npm run storybook` ab und führe ihn aus
+6. Setze den Fokus auf das rechte Terminal Fenster
+7. Setze den Befehl `npm run optimize-assets` ab und führe ihn aus
 
 Weitere Details und Grundlagen zum Gebrauch des Designsystems können direkt in dessen Dokumentation eingesehen werden.

package/build/handlebars/handlebars.js

@@ -2,6 +2,19 @@
 const handlebars = require('handlebars'),
     partials = require('./partials/handlebar-partials'),
     runtime = require('handlebars/runtime'),
+    locatagsHessenschau = require('../../src/assets/brand/hessenschau/conf/locatags.merged.json'),
+    locatagsHr = require('../../src/assets/brand/hr/conf/locatags.merged.json'),
+    locatagsHrBigband = require('../../src/assets/brand/hr-bigband/conf/locatags.merged.json'),
+    locatagsHrFernsehen = require('../../src/assets/brand/hr-fernsehen/conf/locatags.merged.json'),
+    locatagsHrInforadio = require('../../src/assets/brand/hr-inforadio/conf/locatags.merged.json'),
+    locatagsHrRundfunkrat = require('../../src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json'),
+    locatagsHrSinfonieorchester = require('../../src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json'),
+    locatagsHrWerbung = require('../../src/assets/brand/hr-werbung/conf/locatags.merged.json'),
+    locatagsHr1 = require('../../src/assets/brand/hr1/conf/locatags.merged.json'),
+    locatagsHr2 = require('../../src/assets/brand/hr2/conf/locatags.merged.json'),
+    locatagsHr3 = require('../../src/assets/brand/hr3/conf/locatags.merged.json'),
+    locatagsHr4 = require('../../src/assets/brand/hr4/conf/locatags.merged.json'),
+    locatagsYouFm = require('../../src/assets/brand/you-fm/conf/locatags.merged.json'),
     fs = require('fs'),
     path = require('path'),
     options = {
@@ -10,6 +23,21 @@ const handlebars = require('handlebars'),
         partialsBaseDir: './src/stories/views',
         precompile: false,
         writeJson: true,
+        locaTags: {
+            'hessenschau': locatagsHessenschau,
+            'hr': locatagsHr,
+            'hr-bigband': locatagsHrBigband,
+            'hr-fernsehen': locatagsHrFernsehen,
+            'hr-inforadio': locatagsHrInforadio,
+            'hr-rundfunkrat': locatagsHrRundfunkrat,
+            'hr-sinfonieorchester': locatagsHrSinfonieorchester,
+            'hr-werbung': locatagsHrWerbung,
+            'hr1': locatagsHr1,
+            'hr2': locatagsHr2,
+            'hr3': locatagsHr3,
+            'hr4': locatagsHr4,
+            'you-fm': locatagsYouFm,
+        },
     }
 
 /*
@@ -35,6 +63,7 @@ for (const [key, partial] of Object.entries(partials)) {
 const register = require('./helpers/handlebar-helpers').register
 register(handlebars, {
     partialsDir: options.partialsDir,
+    locaTags: options.locaTags,
 })
 
 /**

package/build/handlebars/helpers/handlebar-helpers.js

@@ -12,6 +12,14 @@ var generateRandom = function () {
     return Math.floor(Math.random() * (max - min + 1)) + min
 }
 
+const extractBrandFromUrl = function () {
+    let url = window.location.href
+    let extractBrandFromUrlRegex = /(?<=brands\:).*?(?=\&)/g
+    let brand = url.match(extractBrandFromUrlRegex)
+    brand = null != brand ? brand[0] : 'hessenschau'
+    return brand
+}
+
 var helpers = {
     'helperOptions': null,
 
@@ -359,7 +367,8 @@ var helpers = {
         return null
     },
 
-    /*loca: function () {
+    'loca': function () {
+        let brand = extractBrandFromUrl()
         var loca = ''
 
         if (arguments.length >= 1) {
@@ -367,8 +376,8 @@ var helpers = {
 
             if (typeof loca === 'string') {
                 // Check loca-tag
-                if (typeof helpers.helperOptions.locaTags[loca] === 'string') {
-                    loca = helpers.helperOptions.locaTags[loca]
+                if (typeof helpers.helperOptions.locaTags[brand][loca] === 'string') {
+                    loca = helpers.helperOptions.locaTags[brand][loca]
 
                     // Exchange variables in loca-text
                     // - the last argument is the "context" object which can be
@@ -388,7 +397,7 @@ var helpers = {
         }
 
         return new handlebars.SafeString(loca)
-    },*/
+    },
 
     'getRandom': function () {
         return randomNumber
@@ -426,7 +435,13 @@ var helpers = {
 
         return tokenStr
     },
-    'loca': function (text, options) {
+    /*'loca': function (text, options) {
+        let url = window.location.href
+        console.log(url)
+        const regex = /(?<=brands\:).*?(?=\&)/g
+        let brand = url.match(regex)
+        brand = null != brand ? brand[0] : 'hessenschau'
+        console.log(brand)
         var loca
         var locas = {
             anchor_brandNav: 'Übersicht der Marken des HR anspringen',
@@ -458,7 +473,7 @@ var helpers = {
                 return loca
             }
         }
-    },
+    },*/
 
     /*staticSSI: function (filepath) {
         var template = grunt.file.read(helpers.helperOptions.libraryDir + '/' + filepath, {