Skip to content
Permalink
Browse files

initial commit

  • Loading branch information...
dzmitry-stramavus committed Apr 5, 2019
0 parents commit da97686b7fb8c099a247320783f2fa9e2343614a
@@ -0,0 +1,21 @@
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "ie 11"]
}
}
],
"stage-2"
],
"plugins": ["array-includes"],
"env": {
"production": {
"presets": [
"minify"
]
}
}
}
@@ -0,0 +1,13 @@
/node_modules
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.idea
/.idea
dist
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
@@ -0,0 +1,8 @@
# .npmignore
src
examples
config
build
.babelrc
.gitignore
.idea
21 LICENSE
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2019 scaleflex

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
180 README.md
@@ -0,0 +1,180 @@
[![Release](https://img.shields.io/badge/release-v0.0.1-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)

[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage)

<p align="center">
<img
height="175"
alt="The Lounge"
src="https://demo.cloudimg.io/height/350/n/https://scaleflex.airstore.io/filerobot/filerobot-cloudimage.png?sanitize=true">
</p>

<h1 align="center">
JS Cloudimage 360 View
</h1>

<p align="center">
<strong>
<a href="#table_of_contents">Docs</a>
<a href="https://scaleflex.github.io/js-cloudimage-360-view/" target="_blank">Demo</a>
<a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html" target="_blank">Code Sandbox</a>
</strong>
</p>
A simple, interactive resource that can be used to provide a virtual tour of your product.
<p align="center">
<img
alt="The Lounge"
src="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/demo-360-small.gif?sanitize=true">
</p>
powered by [Cloudimage](https://www.cloudimage.io/)
([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
## Table of contents
* [Demo](#demo)
* [Step 1: Installation](#installation)
* [Step 2: Initialize](#initialize)
* [Configuration](#configuration)
* [Best practices](#best-practices)
* [Browser support](#browser_support)
* [Filerobot UI Family](#ui_family)
* [Contributing](#contributing)
* [License](#license)
## <a name="demo"></a> Demo
To see the Cloudimage 360 view plugin in action, please check out the
[Demo page](https://scaleflex.github.io/js-cloudimage-360-view/).
## <a name="installation"></a>Step 1: Installation
Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
```javascript
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v0.0.2.min.js"></script>
```
or using npm
```
$ npm install --save js-cloudimage-360-view
```
```javascript
import 'js-cloudimage-360-view';
```
## <a name="initialize"></a>Step 2: Initialize
After adding the js-cloudimage-360-view lib, simply iniatialize it with **class name "cloudimage-360"**,
**server folder path**, **file name** and amount of images:
```html
<div
class="cloudimage-360"
data-folder="https://scaleflex.cloudimg.io/crop/1920x700/n/https://scaleflex.airstore.io/demo/360-car/"
data-filename="iris-{index}.jpeg"
data-amount="36"
></div>
```
<a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edeit in codesandbox"/></a>
## <a name="configuration"></a> Config
### class
###### Type: **String** | Value: **"cloudimage-360"** | _required_

The selector for js-cloudimage-360-view lib.

### data-folder (or folder)

###### Type: **String(url)** | _required_

Your images folder on server.

### data-amount (or amount)

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

Amount of images to load for 360 view.

### data-keys (or keys)

###### Type: **Bool** | Default: **false** | _optional_

Support for 360 spin by pressing arrow keys on keyboard.

### data-autoplay (or autoplay)

###### Type: **Bool** | Default: **false** | _optional_

Autoplay 360 spin view on load.

### data-autoplay-reverse (or autoplay-reverse)

###### Type: **Bool** | Default: **false** | _optional_

Autoplay 360 spin view on load.

### data-speed (or speed)

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

Speed of changing frames in milliseconds.

### data-box-shadow (or box-shadow)

###### Type: **String** (e.g. data-box-shadow="inset 0 0 100px #222") | Default: **none** | _optional_

Apply box shadow for container.

### data-bottom-circle (or bottom-circle)

###### Type: **Bool** | Default: **false** | _optional_

Display 360 view line at the bottom of container.

### data-bottom-circle-offset (or bottom-circle-offset)

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

Bottom offset for 360 view line.

## <a name="best-practices"/> Best practices

* In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server
or storage bucket (S3, Google Cloud, Azure Blob...) reachable over
HTTP or HTTPS by Cloudimage. If you want to upload your master images to
Cloudimage, contact us at
[hello@cloudimage.io](mailto:hello@cloudimage.io).

## <a name="browser_support"></a> Browser support

Tested in all modern browsers and IE 11, 10, 9.

## <a name="ui_family"></a>Filerobot UI Familiy

* [JS Cloudimage Responsive](https://github.com/scaleflex/js-cloudimage-responsive)
* [React Cloudimage Responsive](https://github.com/scaleflex/react-cloudimage-responsive)
* [Angular Cloudimage Responsive](https://github.com/scaleflex/ng-cloudimage-responsive)
* [Image Editor](https://github.com/scaleflex/filerobot-image-editor)
* [Uploader](https://github.com/scaleflex/filerobot-uploader)

## <a name="contributing"></a>Contributing!

All contributions are super welcome!

## <a name="license"></a>License
JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)

Large diffs are not rendered by default.

@@ -0,0 +1,42 @@
const path = require('path');
const webpack = require('webpack');
const pkg = require('../package');

const now = new Date();
const banner = `
${pkg.name} v${pkg.version}
${pkg.repository.url}
Copyright (c) 2019 ${pkg.author}
Released under the ${pkg.license} license
Date: ${now.toISOString()}
`;


module.exports = {
entry: path.join(__dirname, "../src/index.js"),
output: {
path: path.join(__dirname, "../build"),
filename: `v${pkg.version}.min.js`
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new webpack.BannerPlugin(banner),
],
resolve: {
extensions: [".js", ".jsx"]
}
};
@@ -0,0 +1,34 @@
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, "../examples/src/index.html"),
filename: "./index.html"
});
module.exports = {
entry: path.join(__dirname, "../examples/src/index.js"),
output: {
path: path.join(__dirname, "../examples/dist"),
filename: "bundle[hash].js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [htmlWebpackPlugin],
resolve: {
extensions: [".js", ".jsx"]
},
devServer: {
port: 3001
},
devtool: 'source-map'
};
@@ -0,0 +1,24 @@
@font-face {
font-family: 'Helvetica Neue';
src: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-Medium.eot');
src: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-Medium.woff2') format('woff2'),
url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-Medium.woff') format('woff'),
url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-Medium.ttf') format('truetype'),
url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-Medium.svg#HelveticaNeue-Medium') format('svg');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Helvetica Neue';
src: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-LightExt.eot');
src: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-LightExt.eot?#iefix') format('embedded-opentype'),
url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-LightExt.woff2') format('woff2'),
url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-LightExt.woff') format('woff'),
url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-LightExt.ttf') format('truetype'),
url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/assets/fonts/helvetica-neue/HelveticaNeue-LightExt.svg#HelveticaNeue-LightExt') format('svg');
font-weight: 300;
font-style: normal;
}

0 comments on commit da97686

Please sign in to comment.
You can’t perform that action at this time.