[WIP] Slots and background

MisRob · Nov 22, 2023 · 0a62058 · 0a62058
1 parent 694f5bf
commit 0a62058
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/docs/pages/kimg.vue b/docs/pages/kimg.vue
@@ -198,6 +198,24 @@
           />
         </div>
       </DocsShow>
+
+      <h3>Placeholder</h3>
+
+      <DocsShow block>
+        <div>
+          <KImg
+            src=""
+            altText="A sitting hummingbird"
+            aspectRatio="4:3"
+            maxWidth="300px"
+          >
+            <span :style="{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center' }">
+              <KIcon icon="readSolid" />
+            </span>
+          </KImg>
+        </div>
+      </DocsShow>
+
     </DocsPageSection>
 
   </DocsPageTemplate>

diff --git a/lib/KImg.vue b/lib/KImg.vue
@@ -2,13 +2,21 @@
 
   <span :style="rootContainerStyles">
     <span :style="ratioContainerStyles">
+      <!-- TODO: add v-if src and show placeholder slot only if src is empty (in cotrast to the default slot) -->
       <img
         :src="src"
         :alt="alternativeText"
         :style="imgStyles"
       >
+      <!-- https://github.com/learningequality/kolibri/tree/8048572c731ffe50787e46c4791eb810ac283840/kolibri/plugins/learn/assets/src/views/thumbnails -->
       <!-- @slot An unstyled slot that can be used for anything that other slots are not suitable for. -->
-      <slot></slot>
+      <!-- defaultSlotPosition = topLeft, topRight, bottomLeft, bottomRight, center -->
+      <!-- placeholderSlotPosition -->
+      <!-- TODO: use template #topLeft, etc. so props are not needed -->
+      <!-- TODO: three slots: overImage, placeholder, default -->
+      <span :style="{ position: 'absolute', top: '0', right: '0', left: '0', bottom: '0' }">
+        <slot></slot>
+      </span>
     </span>
   </span>
 
@@ -137,6 +145,25 @@
         default: 'centerInside', // needs to be duplicated rather than using ScaleTypes.CENTER_INSIDE, otherwise it doesn't render correctly in the auto-generated Props documentation
         validator: isValidScaleType,
       },
+      /**
+       * A color to be displayed instead or behind an image.
+       * It creates a background area which respects the dimensions
+       * set on the container.
+       *
+       * It can serve as (1) a color of the area surrounding an image when
+       * it's letterboxed, (2) creates a placeholder area displayed
+       * over the whole container when an image source is not provided,
+       * (3) creates a progressive loading experience as the colored background
+       * is displayed while an image is loading.
+       *
+       * Its default value is `$themePalette.grey.v_200`
+       */
+      // See `created` hook for an assignment of the default value
+      backgroundColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
     },
     computed: {
       ratio() {
@@ -149,7 +176,7 @@
         return {
           rootContainer: {
             display: 'block',
-            backgroundColor: this.$themePalette.grey.v_200,
+            backgroundColor: this.backgroundColor,
             height: this.validateAndFormatUnits(this.height),
             width: this.validateAndFormatUnits(this.width),
             maxHeight: this.validateAndFormatUnits(this.maxHeight),
@@ -264,6 +291,9 @@
       },
     },
     created() {
+      if (!this.backgroundColor) {
+        this.backgroundColor = this.$themePalette.grey.v_200;
+      }
       if (!this.isDecorative && !this.altText) {
         throw new Error('Missing required prop - provide altText or indicate isDecorative');
       }