Skip to content

Commit

Permalink
chore: build v2.7.6
Browse files Browse the repository at this point in the history
  • Loading branch information
Amr Wagdy committed Feb 20, 2022
1 parent 6c8c091 commit e182633
Show file tree
Hide file tree
Showing 11 changed files with 105 additions and 91 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ Types of changes:
- ...

-------------
## 2.7.6 - 2022-02-20
### Fixed
- drag speed
- responsive canvas width and height

## 2.7.5 - 2022-02-08
### Added
- update method to re-render or re-init the plugin
Expand Down
52 changes: 38 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
[![Release](https://img.shields.io/badge/release-v2.7.5-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
[![Release](https://img.shields.io/badge/release-v2.7.6-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
[![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
Expand Down Expand Up @@ -308,25 +308,49 @@ Open 360 spin view in full screen modal.

Magnifier to zoom image.

### ~~data-ratio (or ratio)~~ [deprecated]
### data-ratio (or ratio)


###### ~~Type: **Number** (height / width) | Default: **none** | _optional_~~
###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
#### `ratio`: string

~~Prevents page from jumping.~~
### data-width (or width)
Setting the height relative to the container width according to the provided ratio</br>
In the following example, the height should be 0.3 the container width

###### Type: **Number** | Default: **none** | _optional_

Set a responsive width for the container.
It will maintain the aspect ratio in respect to width
### data-height (or height)

###### Type: **Number** | Default: **none** | _optional_
```html
<div
id="cloudimage-360-car"
class="cloudimage-360"
data-folder="https://scaleflex.airstore.io/demo/360-car/"
data-filename-x="iris-{index}.jpeg"
data-amount-x="36"
data-ratio="2"
></div>
```
<a href="https://codesandbox.io/s/js-cloudimage-360-view-g4wyt1?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
#### `ratio`: JSON
Setting the height relative to the container width at any window size.

Set a responsive height for the container.
It will maintain the aspect ratio in respect to height
In the following example, the height should be 1.3 the container width at window size less than or equal to 567px
and 2.22 at window size less than or equal to 768px.

```html
<div
id="cloudimage-360-car"
class="cloudimage-360"
data-folder="https://scaleflex.airstore.io/demo/360-car/"
data-filename-x="iris-{index}.jpeg"
data-amount-x="36"
data-ratio='{
"576": "1.3",
"768": "2.22",
"992": "2.23",
"1200": "3",
"2400": "3.2"
}'
></div>
```
<a href="https://codesandbox.io/s/js-cloudimage-360-view-5tssb7?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
### data-autoplay-reverse (or autoplay-reverse)

###### Type: **Bool** | Default: **false** | _optional_
Expand Down
6 changes: 3 additions & 3 deletions build/js-cloudimage-360-view.min.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions examples/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ <h2>Engage your customers with a stunning <strong>360 view of your products</str
data-autoplay
data-magnifier="3"
data-box-shadow="inset 0 0 100px #222"
data-ratio="0.365"
data-ratio="1.7"
data-responsive="scaleflex"
data-spin-reverse
data-pointer-zoom="3"
Expand Down Expand Up @@ -489,7 +489,7 @@ <h2 class="text-center">Ready to get started?</h2>
<p>Include the following script into your project after all content in body tag</p>
<figure class="highlight">
<pre><code class="javascript">
&lt;script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.5/js-cloudimage-360-view.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.7.6/js-cloudimage-360-view.min.js"&gt;&lt;/script&gt;
</code></pre>
</figure>
</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "js-cloudimage-360-view",
"version": "2.7.5",
"version": "2.7.6",
"main": "dist/index.js",
"description": "",
"author": "scaleflex",
Expand Down
51 changes: 12 additions & 39 deletions src/ci360.service.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,6 @@ import {
createBoxShadow,
getSpeedFactor,
isCompletedOneCycle,
getContainerResponsiveWidth,
getContainerResponsiveHeight,
getMovingDirection,
applyStylesToContainer,
initControls,
Expand All @@ -39,6 +37,7 @@ import {
generateZoomInSteps,
generateZoomOutSteps,
isSrcPropsChanged,
getImageAspectRatio,
} from './utils';

class CI360Viewer {
Expand Down Expand Up @@ -648,12 +647,8 @@ import {
loop(this.autoplayBehavior, this.spinY, reversed, loopTriggers);
}

updateContainerSize(image) {
const parentEl = this.container.parentNode || {};
const imageAspectRatio = image.width / image.height;
const isProvidedHeightLessThanWidth = this.containerHeight < this.containerWidth;
const containerWidth = getContainerResponsiveWidth(parentEl, this.containerWidth);
const containerHeight = getContainerResponsiveHeight(this.container, containerWidth, this.containerHeight);
updateContainerAndCanvasSize(image) {
const imageAspectRatio = getImageAspectRatio(image, this.ratio);

if (this.fullscreenView) {
this.container.width = window.innerWidth * this.devicePixelRatio;
Expand All @@ -665,26 +660,11 @@ import {
return;
}

if (this.containerWidth && this.containerHeight) {
this.container.style.width = containerWidth + 'px';
this.container.style.height = containerHeight / imageAspectRatio + 'px';

return;
}

if (!this.containerWidth && !this.containerHeight) {
this.container.style.height = containerHeight / imageAspectRatio + 'px';

return;
}
this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
this.canvas.style.width = this.container.offsetWidth + 'px';

if ((isProvidedHeightLessThanWidth || !this.containerWidth) && this.containerHeight) {
this.container.style.maxWidth = containerHeight * imageAspectRatio + 'px';
this.container.style.height = containerHeight + 'px';
} else {
this.container.style.maxWidth = containerWidth + 'px';
this.container.style.height = containerWidth / imageAspectRatio + 'px';
}
this.canvas.height = (this.container.offsetWidth / imageAspectRatio) * this.devicePixelRatio;
this.canvas.style.height = (this.container.offsetWidth / imageAspectRatio) + 'px';
}

onResizedImageLoad(orientation, image, index) {
Expand Down Expand Up @@ -715,7 +695,7 @@ import {
const responsive = this.ciParams.ciToken;
const firstImage = this.imagesX[0];

this.updateContainerSize(firstImage);
this.updateContainerAndCanvasSize(firstImage);
this.update();

this.speedFactor = getSpeedFactor(this.dragSpeed, this.amountX, this.container.offsetWidth);
Expand Down Expand Up @@ -752,12 +732,6 @@ import {
const ctx = this.canvas.getContext("2d");
ctx.scale(this.devicePixelRatio, this.devicePixelRatio);

this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
this.canvas.style.width = this.container.offsetWidth + 'px';

this.canvas.height = this.container.offsetHeight * this.devicePixelRatio;
this.canvas.style.height = this.container.offsetHeight + 'px';

if (this.fullscreenView) {
const { width, height, offsetX, offsetY } =
contain(this.canvas.width, this.canvas.height, image.width, image.height);
Expand Down Expand Up @@ -1206,7 +1180,7 @@ import {
init(container, update = false, reload = false) {
let {
folder, apiVersion,filenameX, filenameY, imageListX, imageListY, indexZeroBase, amountX, amountY, draggable = true, swipeable = true, keys, keysReverse, bottomCircle, bottomCircleOffset, boxShadow,
autoplay, autoplayBehavior, playOnce, speed, autoplayReverse, disableDrag = true, fullscreen, magnifier, ciToken, ciFilters, ciTransformation, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc, containerWidth, containerHeight, pointerZoom
autoplay, autoplayBehavior, playOnce, speed, autoplayReverse, disableDrag = true, fullscreen, magnifier, ciToken, ciFilters, ciTransformation, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc, pointerZoom, ratio
} = get360ViewProps(container);

const ciParams = { ciToken, ciFilters, ciTransformation };
Expand Down Expand Up @@ -1240,17 +1214,16 @@ import {
this.lazySelector = lazySelector;
this.spinReverse = spinReverse;
this.controlReverse = controlReverse;
this.dragSpeed = Math.max(magnifier, 50);
this.dragSpeed = Math.max(dragSpeed, 50);
this.autoplaySpeed = this.speed * 36 / this.amountX;
this.stopAtEdges = stopAtEdges;
this.hide360Logo = hide360Logo;
this.logoSrc = logoSrc;
this.ciParams = ciParams;
this.apiVersion = apiVersion;
this.containerWidth = containerWidth;
this.containerHeight = containerHeight;
this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
this.keysReverse = keysReverse;
this.ratio = ratio && JSON.parse(ratio);

if (reload) {
new CI360Viewer(this.container);
Expand Down Expand Up @@ -1342,7 +1315,7 @@ import {
if (this.lazyloadX || this.lazyloadY) return initLazyload(image, orientation);

if (isFirstImageLoaded) {
this.updateContainerSize(image);
this.updateContainerAndCanvasSize(image);
this.onFirstImageLoaded(image);
}

Expand Down
3 changes: 1 addition & 2 deletions src/ci360.utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ const get360ViewProps = (image) => ({
stopAtEdges: isTrue(image, 'stop-at-edges'),
hide360Logo: isTrue(image, 'hide-360-logo'),
logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
containerWidth: parseInt(attr(image, 'width') || attr(image, 'data-width'), 10) || 0,
containerHeight: parseInt(attr(image, 'height') || attr(image, 'data-height'), 10) || 0,
ratio: attr(image, 'ratio') || attr(image, 'data-ratio') || null,
});

const isTrue = (image, type) => {
Expand Down
25 changes: 17 additions & 8 deletions src/utils/index.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
export { isSrcPropsChanged } from './image-src/is-src-props-changed';

export { generateImagesPath } from './image-src/generate-images-path';
export { preloadImages } from './load-images/preload-images';
export { preloadOriginalImages } from './load-images/preload-original-images';

export { contain } from './responsive/contain';
export { getImageAspectRatio } from './responsive/get-image-aspect-ratio';

export { getCurrentOriginalImage } from './magnify/get-current-original-image';
export { magnify } from './magnify/magnify';

export { generateZoomInSteps } from './zoom/generate-zoom-in-steps';
export { generateZoomOutSteps } from './zoom/generate-zoom-out-steps';

export { loop } from './auto-play/loop';
export { getSpeedFactor } from './auto-play/get-speed-factor';
export { isCompletedOneCycle } from './auto-play/is-completed-one-cycle';
export { getContainerResponsiveWidth } from './responsive/get-container-responsive-width';
export { getContainerResponsiveHeight } from './responsive/get-container-responsive-height';
export { getMovingDirection } from './spin-y/get-moving-direction';
export { initControls } from './controls/init-controls';

export { addClass } from './common/add-class';
export { removeClass } from './common/remove-class';

export { getMovingDirection } from './spin-y/get-moving-direction';

export { getItemSkipped } from './controls/get-item-skipped';
export { initControls } from './controls/init-controls';

export * from './container-elements';
export { loop } from './auto-play/loop';
export { generateZoomInSteps } from './zoom/generate-zoom-in-steps';
export { generateZoomOutSteps } from './zoom/generate-zoom-out-steps';

export { updateHotspots } from './hotspot/update-hotspots';
export { createHotspots } from './hotspot/elements/create-hotspots';
export { generateHotspotsConfigs } from './hotspot/generate-hotspots-configs';
export { isMouseOnHotspot } from './hotspot/is-mouse-on-hotspot';
export { hideHotspotsIcons } from './hotspot/hide-hotspots-icons';
export { isSrcPropsChanged } from './image-src/is-src-props-changed';
11 changes: 0 additions & 11 deletions src/utils/responsive/get-container-responsive-height.js

This file was deleted.

11 changes: 0 additions & 11 deletions src/utils/responsive/get-container-responsive-width.js

This file was deleted.

26 changes: 26 additions & 0 deletions src/utils/responsive/get-image-aspect-ratio.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export const getImageAspectRatio = (image, providedRatio) => {
try {
let imageAspectRatio = image.width / image.height;

if (typeof providedRatio === 'number') {
imageAspectRatio = providedRatio;
}

if (typeof providedRatio === 'object') {
const mediaQueries = Object.keys(providedRatio)
.sort((a, b) => a - b);

const activeMedia = mediaQueries.find((mediaQuery) => (
window.innerWidth <= parseInt(mediaQuery, 10)
));

if (activeMedia) {
imageAspectRatio = providedRatio[activeMedia];
}
}

return imageAspectRatio;
} catch {
return 1;
}
}

0 comments on commit e182633

Please sign in to comment.