Merge pull request #152 from nzzdev/release-1.12.1

Release 1.12.1
nzzdev · Oct 31, 2023 · b0dd0a4 · b0dd0a4
2 parents 3c0431a + add6022
commit b0dd0a4
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nzz/q-quiz",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "Q quiz",
   "keywords": [
     "storytelling",

diff --git a/script_src/helpers.js b/script_src/helpers.js
@@ -43,7 +43,7 @@ export function isQuestionType(type) {
 
 export function constructPictureElement(quizRootElement, quizQuestionImages) {
   const elementMarkup =
-    '<source type="image/webp" srcset="{webp1x} 1x, {webp2x} 2x"><source srcset="{image1x} 1x, {image2x} 2x"><img class="q-quiz-question-image q-quiz-question-image--responsive" src="{image1x}">';
+    '<source type="image/webp" srcset="{webp1x} 1x, {webp2x} 2x"><source srcset="{image1x} 1x, {image2x} 2x"><img class="q-quiz-question-image q-quiz-question-image--responsive" src="{image1x}" loading="lazy">';
   const rootElementWidth = quizRootElement.getBoundingClientRect().width;
   quizQuestionImages.forEach(function (quizImage) {
     const imageKey = quizImage.getAttribute("data-imageKey");

diff --git a/views/Question.html b/views/Question.html
@@ -1,16 +1,38 @@
-{#if question.introduction}<h3 class="s-font-text-s q-quiz-question-introduction">{question.introduction}</h3>{/if}
-{#if question.image && question.image.key} {#if width }
-<picture style="position:relative; display:block; padding-bottom:{ question.image.height / question.image.width * 100 }%;">
-  <source type="image/webp" srcset="{ question.image.urls.webp1x } 1x, { question.image.urls.webp2x } 2x">
-  <source srcset="{ question.image.urls.image1x } 1x, { question.image.urls.image2x } 2x">
-  <img class="q-quiz-question-image q-quiz-question-image--responsive" src="{ question.image.urls.image1x }" />
+{#if question.introduction}
+<h3 class="s-font-text-s q-quiz-question-introduction">
+  {question.introduction}
+</h3>
+{/if} {#if question.image && question.image.key} {#if width }
+<picture
+  style="position:relative; display:block; padding-bottom:{ question.image.height / question.image.width * 100 }%;"
+>
+  <source
+    type="image/webp"
+    srcset="{ question.image.urls.webp1x } 1x, { question.image.urls.webp2x } 2x"
+  />
+  <source
+    srcset="{ question.image.urls.image1x } 1x, { question.image.urls.image2x } 2x"
+  />
+  <img
+    class="q-quiz-question-image q-quiz-question-image--responsive"
+    src="{ question.image.urls.image1x }"
+    loading="lazy"
+  />
 </picture>
 {:else}
-<picture class="q-quiz-question-image" data-imageServiceUrl="{imageServiceUrl}" data-imageKey="{question.image.key}"
-  style="position:relative; display: block; padding-bottom: { question.image.height / question.image.width * 100 }%;"></picture>
-{/if} {/if}
-{#if question.question}<h3 class="s-q-item__title q-quiz-question-title">{question.question}</h3>{/if}
-{#if question.questionSubTitle}<p class="s-font-text-s" style="font-style:italic">{question.questionSubTitle}</p>{/if}
+<picture
+  class="q-quiz-question-image"
+  data-imageServiceUrl="{imageServiceUrl}"
+  data-imageKey="{question.image.key}"
+  style="position:relative; display: block; padding-bottom: { question.image.height / question.image.width * 100 }%;"
+></picture>
+{/if} {/if} {#if question.question}
+<h3 class="s-q-item__title q-quiz-question-title">{question.question}</h3>
+{/if} {#if question.questionSubTitle}
+<p class="s-font-text-s" style="font-style: italic">
+  {question.questionSubTitle}
+</p>
+{/if}
 <div>
   {#if isMultipleChoice}
   <MultipleChoice question="{question}" /> {/if} {#if isNumberGuess}
@@ -19,18 +41,29 @@
   <MapPointGuess question="{question}" /> {/if}
   <div class="s-q-item__footer">
     {#if question.notes}
-    <div class="s-q-item__footer__notes">
-      {question.notes}
-    </div>
+    <div class="s-q-item__footer__notes">{question.notes}</div>
     {/if}
   </div>
-  <button class="q-quiz-button q-quiz-button--horizontal q-quiz-button--right s-font-note-s state-hidden">
+  <button
+    class="q-quiz-button q-quiz-button--horizontal q-quiz-button--right s-font-note-s state-hidden"
+  >
     <div class="q-quiz-button__content">
       <span>nächste Frage</span>
-      <div class="q-quiz-button__icon q-quiz-button__icon s-button s-button--small s-button--circular ">
-        <svg class="s-button__icon" viewBox="0 0 28 28" width="16" heigth="16" xmlns="http://www.w3.org/2000/svg">
+      <div
+        class="q-quiz-button__icon q-quiz-button__icon s-button s-button--small s-button--circular"
+      >
+        <svg
+          class="s-button__icon"
+          viewBox="0 0 28 28"
+          width="16"
+          heigth="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g fill="none" fill-rule="evenodd">
-            <path fill="currentColor" d="M9.8 22.4l1.4 1.4L21 14l-9.8-9.8-1.4 1.4 8.4 8.4z"></path>
+            <path
+              fill="currentColor"
+              d="M9.8 22.4l1.4 1.4L21 14l-9.8-9.8-1.4 1.4 8.4 8.4z"
+            ></path>
           </g>
         </svg>
       </div>
@@ -39,31 +72,31 @@
 </div>
 
 <script>
-  import MultipleChoice from './MultipleChoice.html';
-  import NumberGuess from './NumberGuess.html';
-  import NumberPoll from './NumberPoll.html';
-  import MapPointGuess from './MapPointGuess.html';
+  import MultipleChoice from "./MultipleChoice.html";
+  import NumberGuess from "./NumberGuess.html";
+  import NumberPoll from "./NumberPoll.html";
+  import MapPointGuess from "./MapPointGuess.html";
 
   export default {
     computed: {
       isMultipleChoice: ({ question }) => {
-        return question.type === 'multipleChoice';
+        return question.type === "multipleChoice";
       },
       isNumberGuess: ({ question }) => {
-        return question.type === 'numberGuess';
+        return question.type === "numberGuess";
       },
       isNumberPoll: ({ question }) => {
-        return question.type === 'numberPoll';
+        return question.type === "numberPoll";
       },
       isMapPointGuess: ({ question }) => {
-        return question.type === 'mapPointGuess';
-      }
+        return question.type === "mapPointGuess";
+      },
     },
     components: {
       MultipleChoice,
       NumberGuess,
       NumberPoll,
-      MapPointGuess
-    }
+      MapPointGuess,
+    },
   };
 </script>