Fixes assets paths for browser and replaces them for cordova build

apache-cordova/arsnova-click-app/build.sh

@@ -31,6 +31,7 @@ pushd ../..
 popd
 
 # Change absolute paths to relative ones
+sed -i www/index.html -e"s|/theme-default.css|./theme-default.css"
 find www -type f -exec sed -e's|(/assets/|(./assets/|g' -i {} \;
 sed -e's|:"/|:"./|g' -i www/assets/meta/*/linkNodes.json
 

src/app/quiz/quiz-flow/answer-result/answer-result.component.ts

@@ -117,7 +117,7 @@ export class AnswerResultComponent implements OnInit, OnDestroy, IHasTriggeredNa
     this._confettiScriptRef = this.document.createElement('script');
     this._confettiScriptRef.innerHTML = '';
     this._confettiScriptRef.id = 'confetti-js-script';
-    this._confettiScriptRef.src = './assets/js/confetti/confetti.min.js';
+    this._confettiScriptRef.src = '/assets/js/confetti/confetti.min.js';
     this._confettiScriptRef.async = true;
     this._confettiScriptRef.defer = true;
     this._confettiScriptRef.onload = () => {

src/app/quiz/quiz-flow/quiz-results/quiz-results.component.spec.ts

@@ -104,7 +104,7 @@ describe('QuizResultsComponent', () => {
               timer: 5,
             }),
             getVisibleQuestions: () => ({}),
-            loadDataToPlay: () => new Promise(resolve => resolve()),
+            loadDataToPlay: () => new Promise<void>(resolve => resolve()),
             quiz: {
               currentQuestionIndex: 0,
               sessionConfig: {
@@ -203,7 +203,11 @@ describe('QuizResultsComponent', () => {
     quizService.quiz.currentQuestionIndex = 0;
     expect(component.hideProgressbarStyle).toBeTrue();
   }));
-  it(`#showConfidenceRate`, inject([QuizService, AttendeeService, SettingsService], (quizService: QuizService, attendeeService: AttendeeService, settingsService: SettingsService) => {
+  it(`#showConfidenceRate`, waitForAsync(() => {
+    const quizService = TestBed.inject(QuizService);
+    const attendeeService = TestBed.inject(AttendeeService);
+    const settingsService = TestBed.inject(SettingsService);
+
     attendeeService.addMember(new Attendee({
       id: '',
       name: 'testNickname',
@@ -253,7 +257,11 @@ describe('QuizResultsComponent', () => {
       expect(result.percent).toEqual('20%');
     }
   }));
-  it(`#showReadingConfirmation`, inject([QuizService, AttendeeService, SettingsService], (quizService: QuizService, attendeeService: AttendeeService, settingsService: SettingsService) => {
+  it(`#showReadingConfirmation`, waitForAsync(() => {
+    const quizService = TestBed.inject(QuizService);
+    const attendeeService = TestBed.inject(AttendeeService);
+    const settingsService = TestBed.inject(SettingsService);
+
     attendeeService.addMember(new Attendee({
       id: '',
       name: 'testNickname',

src/app/root/info/info.component.ts

@@ -120,8 +120,8 @@ export class InfoComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   private buildMarkdownFileSources(lang: string): void {
-    this.imprintMarkdownSrc = `./assets/i18n/${lang}.imprint.${this._markdownFilePostfix}.md`;
-    this.dataPrivacyMarkdownSrc = `./assets/i18n/${lang}.data_privacy.${this._markdownFilePostfix}.md`;
-    this.tosMarkdownSrc = `./assets/i18n/${lang}.tos.${this._markdownFilePostfix}.md`;
+    this.imprintMarkdownSrc = `/assets/i18n/${lang}.imprint.${this._markdownFilePostfix}.md`;
+    this.dataPrivacyMarkdownSrc = `/assets/i18n/${lang}.data_privacy.${this._markdownFilePostfix}.md`;
+    this.tosMarkdownSrc = `/assets/i18n/${lang}.tos.${this._markdownFilePostfix}.md`;
   }
 }

src/app/root/root/root.component.ts

@@ -125,7 +125,7 @@ export class RootComponent implements OnInit, AfterViewInit {
         this.document.body.appendChild(matomoConfig);
 
         const matomoScript = this.document.createElement('script');
-        matomoScript.src = './assets/piwik/piwik.js';
+        matomoScript.src = '/assets/piwik/piwik.js';
         matomoConfig.type = 'text/javascript';
         this.document.body.appendChild(matomoScript);
       });

src/app/service/api/themes/themes-api.service.ts

@@ -13,16 +13,16 @@ export class ThemesApiService {
 
   public THEMES_PREVIEW_GET_URL(id: string, langRef: string): Array<string> {
     return frontendPreview.map(derivate => {
-      return `./assets/images/theme/${encodeURIComponent(id)}/preview_${langRef}_s${derivate}.png`;
+      return `/assets/images/theme/${encodeURIComponent(id)}/preview_${langRef}_s${derivate}.png`;
     });
   }
 
   public getThemePreviewDefaultUrl(id: string, langRef: string): string {
-    return `./assets/images/theme/${id}/preview_${langRef}_s1280x720.png`;
+    return `/assets/images/theme/${id}/preview_${langRef}_s1280x720.png`;
   }
 
   public THEMES_LINK_IMAGES_GET_URL(theme: string): string {
-    return `./assets/meta/${theme}/linkNodes.json`;
+    return `/assets/meta/${theme}/linkNodes.json`;
   }
 
   public getLinkImages(theme: string): Observable<Array<any>> {
@@ -30,6 +30,6 @@ export class ThemesApiService {
   }
 
   public getThemeConfig(): Observable<Array<IThemeHashMap>> {
-    return this.http.get<Array<IThemeHashMap>>('./assets/theme-hashes.json');
+    return this.http.get<Array<IThemeHashMap>>('/assets/theme-hashes.json');
   }
 }

src/app/service/notification/notification.service.ts

@@ -86,7 +86,7 @@ export class NotificationService {
 
   private buildOptions(payload: any): NotificationOptions {
     return {
-      icon: `./assets/images/theme/${this.themesService.currentTheme}/logo_s64x64.png`,
+      icon: `/assets/images/theme/${this.themesService.currentTheme}/logo_s64x64.png`,
       vibrate: [100, 50, 100],
       requireInteraction: true,
       body: payload.body,

src/app/service/outdated-version-guard/outdated-version-guard.service.ts

@@ -45,7 +45,7 @@ export class OutdatedVersionGuardService implements CanActivate {
       switchMap(() => {
         console.log('fetching version.txt');
         return this.http.get<string>(
-          './assets/version.txt',
+          '/assets/version.txt',
           {
             responseType: 'text' as any,
             headers: {

src/app/service/update-check/update-check.service.ts

@@ -66,7 +66,7 @@ export class UpdateCheckService {
       toastClass: 'toast show ngx-toastr',
     });
 
-    const httpReq = this.http.get('./assets/version.txt', { responseType: 'text' })
+    const httpReq = this.http.get('/assets/version.txt', { responseType: 'text' })
       .pipe(tap(val => sessionStorage.setItem(StorageKey.OutdatedVersionFunnelStep, val.trim())));
 
     this.swUpdateToast.onTap.pipe(switchMapTo(httpReq)).subscribe(() => {

src/app/shared/gamification-animation/gamification-animation.component.ts

@@ -21,7 +21,7 @@ export class GamificationAnimationComponent {
     if (value < this._gamification.length) {
       this._background = this._gamification[value].background;
       if (this._gamification[value].image) {
-        this._image = './assets/images/gamification/' + this._gamification[value].image;
+        this._image = '/assets/images/gamification/' + this._gamification[value].image;
         this.cd.markForCheck();
       }
       if (!value) {

src/assets/i18n/de.json

@@ -247,7 +247,7 @@
       "show_answer_content_on_buttons": "Antworttext auf Abstimmbuttons?",
       "show_one_answer_per_row": "Zeige nur eine Antwortoption pro Zeile?",
       "multiple_selection_survey": "Mehrere Optionen auswählbar?",
-      "emoji_info": "Du kannst auch Emojis einfügen! <a href='http://www.webpagefx.com/tools/emoji-cheat-sheet/' target='_blank'><img class='w-40px' src='./assets/images/emojis/smile.png' alt='smiling_emoji.png'/></a>",
+      "emoji_info": "Du kannst auch Emojis einfügen! <a href='http://www.webpagefx.com/tools/emoji-cheat-sheet/' target='_blank'><img class='w-40px' src='/assets/images/emojis/smile.png' alt='smiling_emoji.png'/></a>",
       "description": {
         "default_answer_row": "Ziehe diesen Block in die Liste der Antwortoptionen oder klick auf ihn, um eine neue Antwort einzufügen.",
         "added_answers": "Hier siehst du die Antwortoptionen der Frage. Du kannst die Reihenfolge per Drag & Drop ändern.",

src/assets/i18n/en.json

@@ -247,7 +247,7 @@
       "show_answer_content_on_buttons": "Display the answer's content on the buttons?",
       "show_one_answer_per_row": "Show only one answer per row?",
       "multiple_selection_survey": "Allow selection of multiple answers?",
-      "emoji_info": "You can embed also one of these <a href='http://www.webpagefx.com/tools/emoji-cheat-sheet/' target='_blank'>Emojis (external website!)</a> <img class='w-40px' src='./assets/images/emojis/smile.png' alt='emoji'/> <br/>Simply click on the website on the Emoji and paste it into the answeroption.",
+      "emoji_info": "You can embed also one of these <a href='http://www.webpagefx.com/tools/emoji-cheat-sheet/' target='_blank'>Emojis (external website!)</a> <img class='w-40px' src='/assets/images/emojis/smile.png' alt='emoji'/> <br/>Simply click on the website on the Emoji and paste it into the answeroption.",
       "description": {
         "default_answer_row": "Drag this block into the list of answeroptions to create a new one.",
         "added_answers": "Here are all already created answeroptions. You can change the order of the answers via drag & drop.",

src/assets/jobs/GenerateMetaNodes.js

@@ -50,7 +50,7 @@ class GenerateMetaNodes {
 
   generateLinkImages() {
     Object.keys(themeData).forEach(theme => {
-      const basePath = `./assets/images/theme/${theme}`;
+      const basePath = `/assets/images/theme/${theme}`;
       const manifestPath = `/manifest_${theme}_%%LANG%%.json`;
 
       const result = [
@@ -142,7 +142,7 @@ class GenerateMetaNodes {
           orientation: 'portrait',
           icons: imageDerivates.logo.map(derivate => {
             return {
-              src: `./assets/images/theme/${theme}/logo_s${derivate}.png`,
+              src: `/assets/images/theme/${theme}/logo_s${derivate}.png`,
               sizes: derivate,
               type: 'image/png',
             }

src/assets/static/unsupported.html

@@ -100,7 +100,7 @@
 </script>
 
 <script crossorigin="anonymous"
-        src="./assets/js/modernizr/modernizr-custom.js"></script>
+        src="/assets/js/modernizr/modernizr-custom.js"></script>
 
 </body>
 </html>

src/index.html

@@ -27,17 +27,17 @@
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
         name="viewport">
 
-  <base href="."/>
+  <base href="/">
 
-  <link as="style" href="./theme-default.css" rel="preload" type="text/css"/>
-  <link class="theme-meta-data" type="image/svg+xml" id="link-icon-32x32" rel="icon" href="./assets/images/logo.svg"/>
+  <link as="style" href="/theme-default.css" rel="preload" type="text/css"/>
+  <link class="theme-meta-data" type="image/svg+xml" id="link-icon-32x32" rel="icon" href="/assets/images/logo.svg"/>
 
-  <link as="font" href="./assets/fonts/Lato/Lato-Regular.woff2" rel="preload" crossorigin="anonymous"/>
-  <link as="font" href="./assets/fonts/Roboto/Roboto-Bold.woff2" rel="preload" crossorigin="anonymous"/>
-  <link as="font" href="./assets/fonts/Roboto/Roboto-Medium.woff2" rel="preload" crossorigin="anonymous"/>
+  <link as="font" href="/assets/fonts/Lato/Lato-Regular.woff2" rel="preload" crossorigin="anonymous"/>
+  <link as="font" href="/assets/fonts/Roboto/Roboto-Bold.woff2" rel="preload" crossorigin="anonymous"/>
+  <link as="font" href="/assets/fonts/Roboto/Roboto-Medium.woff2" rel="preload" crossorigin="anonymous"/>
 
   <link as="script"
-        href="./assets/js/highslide/highslide.min.js"
+        href="/assets/js/highslide/highslide.min.js"
         rel="prefetch"/>
 
   <link as="script"
@@ -45,7 +45,7 @@
         rel="prefetch"/>
 
   <link class="theme-styles"
-        href="./theme-default.css"
+        href="/theme-default.css"
         rel="stylesheet"
         type="text/css"/>
 
@@ -99,28 +99,28 @@
       typeof window.TextDecoder === 'function',
     ].forEach(function (test) {
       if (!test) {
-        location.href = './assets/static/unsupported.html';
+        location.href = '/assets/static/unsupported.html';
       }
     });
 
     Modernizr.on('indexeddb', function (result) {
       if (!result) {
-        location.href = './assets/static/unsupported.html';
+        location.href = '/assets/static/unsupported.html';
       }
     });
   }
 </script>
 
 <script crossorigin="anonymous"
-        src="./assets/js/modernizr/modernizr-custom.js"></script>
+        src="/assets/js/modernizr/modernizr-custom.js"></script>
 
 <script crossorigin="anonymous"
         src="https://polyfill.io/v3/polyfill.min.js?callback=polyfillsLoaded&flags=gated&features=default%2CArray.from%2CArray.isArray%2CArray.prototype.every%2CArray.prototype.entries%2CArray.prototype.filter%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.forEach%2CArray.prototype.includes%2CArray.prototype.indexOf%2CArray.prototype.keys%2CArray.prototype.map%2CArray.prototype.reduce%2CArray.prototype.some%2CAudioContext%2CBlob%2CDate.now%2CJSON%2CMap%2CNumber.parseFloat%2CNumber.parseInt%2CObject.assign%2CObject.entries%2CObject.keys%2CObject.values%2CPromise%2CSet%2CString.prototype.endsWith%2CString.prototype.includes%2CString.prototype.startsWith%2CString.prototype.trim%2CSymbol%2CSymbol.hasInstance%2CSymbol.isConcatSpreadable%2CSymbol.iterator%2CSymbol.match%2CSymbol.replace%2CSymbol.search%2CSymbol.species%2CSymbol.split%2CSymbol.toPrimitive%2CSymbol.toStringTag%2CSymbol.unscopables%2CWindow%2CXMLHttpRequest%2Cconsole%2Cconsole.log%2Cconsole.info%2Cdocument%2ClocalStorage"></script>
 
-<script src="./assets/js/highslide/highslide.min.js"></script>
+<script src="/assets/js/highslide/highslide.min.js"></script>
 
 <script>
-  hs.graphicsDir = './assets/js/highslide/graphics/';
+  hs.graphicsDir = '/assets/js/highslide/graphics/';
   hs.showCredits = false;
   hs.expandCursor = null;
   hs.restoreCursor = null;