Skip to content

Commit

Permalink
[WIP] Add scaling logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@MisRob
MisRob committed Nov 9, 2023
1 parent 9a61e60 commit 1ad2190
Show file tree
Hide file tree
Showing 5 changed files with 473 additions and 96 deletions.
Binary file added docs/assets/hummingbird CC BY-SA 4.0.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/assets/img_sample_for_kimg.png
View file
Binary file not shown.
16 changes: 16 additions & 0 deletions docs/common/DocsShow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,29 @@
type: Boolean,
required: false,
},
/**
* Container width
*/
width: {

Check warning on line 35 in docs/common/DocsShow.vue

View workflow job for this annotation

GitHub Actions / lint 

Prop 'width' requires default value to be set
type: String,
required: false,
},
/**
* Container max width
*/
maxWidth: {

Check warning on line 42 in docs/common/DocsShow.vue

View workflow job for this annotation

GitHub Actions / lint 

Prop 'maxWidth' requires default value to be set
type: String,
required: false,
},
},
computed: {
style() {
return {
display: this.block ? 'block' : 'inline-block',
padding: this.padding ? '8px 24px' : null,
backgroundColor: this.dark ? this.$themePalette.grey.v_500 : undefined,
width: this.width ? this.width : undefined,
maxWidth: this.maxWidth ? this.maxWidth : undefined,
};
},
},
Expand Down
328 changes: 257 additions & 71 deletions docs/pages/kimg.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,267 @@

<DocsPageTemplate apiDocs>
<DocsPageSection title="Overview" anchor="#overview">
<div>
The <DocsLibraryLink component="KImg" /> component displays images based on an image source and optional image
dimensions provided by the implementer.
<p>
The <code>KImg</code> component displays an image and provides additional functionality to manipulate it such as setting an aspect ratio, scaling, letterboxing, and more.
</p>

<DocsShow>
<KImg
:src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
altText="A photo of a sitting hummingbird"
/>
</DocsShow>
<DocsShowCode>
<KImg
src="hummingbird.jpg"
altText="A photo of a sitting hummingbird"
/>
</DocsShowCode>
</DocsPageSection>

<DocsPageSection title="Examples" anchor="#examples">
TODO: Mention original image dimension

In the examples below, you can resize the screen to observe how responsive behavior is achieved.

<h3>Sample implementations of <DocsLibraryLink component="KImg" /> including props:</h3>
<h3>Inline vs block</h3>

<h4>Inline</h4>
<DocsShow>
<span>
<KImg
:src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
altText="A photo of a sitting hummingbird"
/>
</span>
</DocsShow>
<DocsShowCode>
<span>
<KImg
src="hummingbird.jpg"
altText="A photo of a sitting hummingbird"
/>
</span>
</DocsShowCode>

<h4>Block</h4>

<p>When rendered within a block element, by default the image scales to its parent element with the <code>'centerInside'</code> scale type (see below).</p>

<DocsShow block>
<div>
Dimensions may be either numbers or strings consisting of a numeral and valid units (e.g. <code>px</code>,
<code>em</code>, <code>vh</code>).
<KImg
:src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
altText="A photo of a sitting hummingbird"
/>
</div>
</DocsShow>
<DocsShowCode>
<div>
<KImg
src="hummingbird.jpg"
altText="A photo of a sitting hummingbird"
/>
</div>
</DocsShowCode>

<h3>Units</h3>

<p>TODO</p>
<h3>Alternative text</h3>

<p>TODO</p>

<div class="img-example-1">
<DocsShow>
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
altText="Computers are run by bees"
:height="'250.2px'"
:width="225.5"
:maxHeight="600"
:minWidth="25"
/>
</DocsShow>
<DocsShowCode language="html">
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
altText="Computers are run by bees"
:height="'250.2px'"
:width="225.5"
/>
</DocsShowCode>
<h3>Scaling</h3>
<p>TODO: Mention that width etc are set on container rather than the image itself</p>

<h4><code style="font-weight: bold">'centerInside'</code> scale type</h4>

<p>Scales the image uniformly and maintains its original aspect ratio so that both its width and height are equal to or less than the container. The image can be letterboxed. It's the safest mode as it never distorts the image.</p>

<DocsShow block>
<div>
<KImg
:src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
altText="A photo of a sitting hummingbird"
height="200"
width="100%"
maxWidth="500"
scaleType="centerInside"
/>
</div>
</DocsShow>
<DocsShowCode>
<div>
<KImg
altText="A photo of a sitting hummingbird"
height="200"
width="100%"
maxWidth="500"
scaleType="centerInside"
/>
</div>
</div>
</DocsShowCode>

<h4><code style="font-weight: bold">'contain'</code> scale type</h4>

<p>Behaves like <code>'centerInside'</code> except it ensures that at least one axis of the image fits the container exactly. The original aspect ratio is maintained. The image can be letterboxed. This mode may distort the image by enlarging it above its original size.</p>

<div class="img-example-2">
<DocsLibraryLink component="KImg" /> requires alternative text that describes the image unless
<code>isDecorative</code> is <code>true</code>. In that case, any alt text provided will be overwritten to an
empty string.
<DocsShow block>
<div>
<div>
<DocsShow>
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
isDecorative
:height="50"
:width="50"
/>
</DocsShow>
</div>
<DocsShowCode language="html">
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
isDecorative
:height="50"
:width="50"
/>
</DocsShowCode>
<KImg
:src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
altText="A photo of a sitting hummingbird"
height="200"
width="100%"
maxWidth="500"
scaleType="contain"
/>
</div>
</div>
</DocsShow>
<DocsShowCode>
<div>
<KImg
altText="A photo of a sitting hummingbird"
height="200"
width="100%"
maxWidth="500"
scaleType="contain"
/>
</div>
</DocsShowCode>

<div>
If dimensions for the image are not specified, the size will default to the height and width of the source
image.
<DocsShow>
<h4><code style="font-weight: bold">'fitXY'</code> scale type</h4>

<p>Scales X and Y axis of the image independently, so that the image matches the container exactly. This mode may distort the image as its originalaspect ratio is ignored and the image won't be letterboxed. It could also distort the image by enlarging it above its original size.</p>

<DocsShow block>
<div>
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
altText="Computers are run by bees"
:src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
altText="A photo of a sitting hummingbird"
height="200"
width="100%"
maxWidth="500"
scaleType="fitXY"
/>
</DocsShow>
<DocsShowCode language="html">
</div>
</DocsShow>
<DocsShowCode>
<div>
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
altText="Computers are run by bees"
altText="A photo of a sitting hummingbird"
height="200"
width="100%"
maxWidth="500"
scaleType="fitXY"
/>
</DocsShowCode>
</div>
</DocsShowCode>

<h2>With ratio</h2>

<!-- Note that ratio styles are based on the width being available, therefore make sure that width information is available in some way. For example, you could either by providing it directly to KImg, or make sure parent element has width by setting it explicitly or by using block element. -->

<DocsShowCode>
<KImg
:src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
altText="A photo of a sitting hummingbird"
aspectRatio="4:3"
/>
</DocsShowCode>
<DocsShow block>
<KImg
:src="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
altText="A photo of a sitting hummingbird"
aspectRatio="4:3"
/>
</DocsShow>

<!-- You may combine aspect ratio with any scale type. -->

</div>

<!--
<div>
The <DocsLibraryLink component="KImg" /> component displays images based on an image source and optional image
dimensions provided by the implementer.
<h3>Sample implementations of <DocsLibraryLink component="KImg" /> including props:</h3>
<div>
Dimensions may be either numbers or strings consisting of a numeral and valid units (e.g. <code>px</code>,
<code>em</code>, <code>vh</code>).
</div>
<div class="img-example-1">
<DocsShow>
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
altText="Computers are run by bees"
:height="'250.2px'"
:width="225.5"
:maxHeight="600"
:minWidth="25"
/>
</DocsShow>
<DocsShowCode language="html">
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
altText="Computers are run by bees"
:height="'250.2px'"
:width="225.5"
/>
</DocsShowCode>
</div>
</div>
<div class="img-example-2">
<DocsLibraryLink component="KImg" /> requires alternative text that describes the image unless
<code>isDecorative</code> is <code>true</code>. In that case, any alt text provided will be overwritten to an
empty string.
<div>
<div>
<DocsShow>
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
isDecorative
:height="50"
:width="50"
/>
</DocsShow>
</div>
<DocsShowCode language="html">
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
isDecorative
:height="50"
:width="50"
/>
</DocsShowCode>
</div>
</div>
<div>
If dimensions for the image are not specified, the size will default to the height and width of the source
image.
<DocsShow>
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
altText="Computers are run by bees"
/>
</DocsShow>
<DocsShowCode language="html">
<KImg
:src="require('../assets/img_sample_for_kimg.png')"
altText="Computers are run by bees"
/>
</DocsShowCode>
</div> -->
</DocsPageSection>

</DocsPageTemplate>

</template>
Expand All @@ -95,21 +279,23 @@
.img-example-1 {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.img-example-2 {
margin-top: 20px;
margin-bottom: 20px;
}
/*
.img-example-2 {
margin-top: 20px;
margin-bottom: 20px;
}
.img-example-2 > div {
display: flex;
}
.img-example-2 > div {
display: flex;
}
.img-example-2 > div > div {
margin-top: 30px;
}
.img-example-2 > div > div {
margin-top: 30px;
} */
</style>

Expand Down
Loading

0 comments on commit 1ad2190

Please sign in to comment.