🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

carousel-html5

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

carousel-html5 - npm Package Compare versions

Comparing version
1.0.4
 to
1.0.6
+8
-2
package.json
{
"name": "carousel-html5",
"version": "1.0.4",
"version": "1.0.6",
"description": "carousel",

@@ -8,2 +8,5 @@ "main": "dist/carousel.js",

"private": false,
"files": [
"dist"
],
"scripts": {

@@ -50,3 +53,6 @@ "dev": "node build/dev-server.js",

"not ie <= 8"
]
],
"dependencies": {
"carousel-html5": "^1.0.4"
}
}
+7
-5
README.md

@@ -8,5 +8,7 @@ # carousel

直接引入dist或者使用npm安装后import
直接引入dist 或者
使用 npm install carousel-html5 安装后import：
```js
import Carousel from 'Carousel'
import Carousel from 'carousel-html5'

@@ -24,3 +26,3 @@ var c = new Carousel({

要求 `#root` 是以下结构：  
要求 `#root` 是以下类似的三级结构：  

@@ -30,8 +32,8 @@ ```html

<div id="component-carousel">
<ul>
<ul><!-- 不要求必须使用ul标签 -->
<li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放，2时自动补足成4个以便于切换 -->
<li><img src="xxx"></li><!-- 不要求必须使用li标签 -->
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
</ul>

@@ -38,0 +40,0 @@ </div>

.npmignore

Sorry, the diff of this file is not supported yet

-35
build/build.js
require('./check-versions')()
process.env.NODE_ENV = 'production'
var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
-48
build/check-versions.js
var chalk = require('chalk')
var semver = require('semver')
var packageConfig = require('../package.json')
var shell = require('shelljs')
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
var versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
})
}
module.exports = function () {
var warnings = []
for (var i = 0; i < versionRequirements.length; i++) {
var mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (var i = 0; i < warnings.length; i++) {
var warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
-9
build/dev-client.js
/* eslint-disable */
require('eventsource-polyfill')
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})
-89
build/dev-server.js
require('./check-versions')()
var config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable
var app = express()
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
var uri = 'http://localhost:' + port
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve
})
console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
console.log('> Listening at ' + uri + '\n')
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
_resolve()
})
var server = app.listen(port)
module.exports = {
ready: readyPromise,
close: () => {
server.close()
}
}
-10
build/utils.js
var path = require('path')
var config = require('../config')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.assetsPath = function (_path) {
var assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
return path.posix.join(assetsSubDirectory, _path)
}
-57
build/webpack.base.conf.js
var path = require('path')
var utils = require('./utils')
var config = require('../config')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.json'],
alias: {
'@': resolve('example')
}
},
module: {
rules: [
{
test: /\.(js)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('example'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('example'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
-37
build/webpack.dev.conf.js
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
baseWebpackConfig.entry = {
app: './src/index.js'
}
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
// cheap-module-eval-source-map is faster for development
devtool: '#cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
-82
build/webpack.prod.conf.js
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var env = config.build.env
var webpackConfig = merge(baseWebpackConfig, {
entry: {
app: './src/carousel.js'
},
devtool: false,
output: {
path: config.build.assetsRoot,
publicPath: '/dist/',
filename: 'carousel.js',
library: 'Carousel',
libraryTarget: 'umd',
umdNamedDefine: true
},
plugins: [
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: {
safe: true
}
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
-6
config/dev.env.js
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
-37
config/index.js
var path = require('path')
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'example',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: false
}
}
-3
config/prod.env.js
module.exports = {
NODE_ENV: '"production"'
}
-55
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>carousel</title>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, th, td {
margin: 0;
padding: 0;
}
#component-carousel {
overflow: hidden;
height: 5.85rem;
background-color: #e7e7e7;
}
#component-carousel ul {
position: relative;
overflow: hidden;
list-style: none;
}
#component-carousel ul li{
position: relative;
float: left;
}
#component-carousel ul li img {
width: 100%;
height: 5.85rem;
}
</style>
<script>
(function(doc,win){
var docEl = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recacl = function(){
var w = docEl.clientWidth || document.body.clientWidth;
win.PG_CONFIG = win.PG_CONFIG?win.PG_CONFIG:{};
win.PG_CONFIG.rem = 20*(w/375);
docEl.style.fontSize = win.PG_CONFIG.rem + 'px';
}
recacl()
win.addEventListener(resizeEvt,recacl);
})(document,window)
</script>
</head>
<body>
<div id="component-carousel">
<ul>
<li><img src="https://easyread.nosdn.127.net/bfe75dbe46b74c7180fe93a319cc64e1.webp"></li>
<li><img src="https://easyread.nosdn.127.net/af6a04c83c4147aaaca952c7e3db734e.webp"></li>
</ul>
</div>
<!-- built files will be auto injected -->
</body>
</html> 
-266
src/carousel.js
function Carousel (options) {
if (!(this instanceof Carousel)) {
warn('Carousel is a constructor and should be called with the `new` keyword')
return
}
var opts = options || {}
this.root = getElement(opts.root)
this.itemWrap = this.root.children[0]
var items = this.itemWrap.children
/* 0个或一个元素返回 */
if (items.length < 2) return
/* 对于两个元素的情况进行自动补足 */
if (items.length < 3) this.fill(items)
this.items = Array.prototype.slice.call(this.itemWrap.children, 0)
this.length = this.items.length
this.speed = opts.speed || 300
this.onSwitch = opts.onSwitch || function () {}
this.indexArray = indexArray(this.length)
this.init()
this.handleEvent()
if (opts.interval) {
this.interval = opts.interval
this.play()
}
}
/*
** timer的几种状态：
** undefined-未设置定时器
** null-设置但清除了定时器
** timerId-执行中的计时器
**/
Carousel.prototype.play = function () {
this.timer = setInterval(function () {
this.move('left')
}.bind(this), this.interval)
}
Carousel.prototype.stop = function () {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
}
Carousel.prototype.handleTransitionEnd = function () {
if (this.timer === null) {
this.play()
}
}
Carousel.prototype.handleEvent = function () {
this.itemWrap.addEventListener('touchstart', this.handleTouchStart.bind(this), false)
this.itemWrap.addEventListener('transitionend', this.handleTransitionEnd.bind(this), false)
window.addEventListener('resize', this.init.bind(this), false)
/* 初次触发onSwitch回调 */
this.onSwitch(0)
}
Carousel.prototype.handleTouchStart = function () {
this.stop()
var touch = event.touches[0]
this.touchStart = {
x: touch.pageX,
y: touch.pageY,
time: Date.now()
}
this.bindTouchMoveFn = this.handleTouchMove.bind(this)
this.bindTouchEndFn = this.handleTouchEnd.bind(this)
this.itemWrap.addEventListener('touchmove', this.bindTouchMoveFn, false)
this.itemWrap.addEventListener('touchend', this.bindTouchEndFn, false)
}
Carousel.prototype.handleTouchMove = function () {
if (event.touches.length > 1 || event.scale && event.scale !== 1) return
var touch = event.touches[0]
var touchStart = this.touchStart
var delta = this.delta = {
x: touch.pageX - touchStart.x,
y: touch.pageY - touchStart.y
}
this.isScrolling = this.isScrolling || Math.abs(delta.x) > Math.abs(delta.y)
if (this.isScrolling) {
event.preventDefault()
this.handleMove(delta.x)
}
}
Carousel.prototype.handleTouchEnd = function () {
/* 删除事件，避免叠加 */
this.itemWrap.removeEventListener('touchmove', this.bindTouchMoveFn, false)
this.itemWrap.removeEventListener('touchend', this.bindTouchEndFn, false)
if (!this.delta) {
this.timer === null && this.play()
return
}
var interval = Date.now() - this.touchStart.time
var distance = Math.abs(this.delta.x)
var isValidSlide = (interval < 250 && distance > 20) || distance > this.offset/2
var directions = ['left', 'right']
var direction = this.delta.x > 0 ? directions.pop() : directions.shift()
var reverseDirection = directions[0]
if (isValidSlide) {
this.move(direction)
} else {
this.handleMove(reverseDirection)
}
/* 重置 */
this.delta = null
this.isScrolling = false
}
/* 获取切换后index,要考虑到自动补足的情况 */
Carousel.prototype.getIndex = function () {
var index = this.indexArray[0]
return this.__fill ? index % 2 : index
}
Carousel.prototype.move = function (direction) {
var array = this.indexArray
if (direction === 'left') {
array.push(array.shift())
} else {
array.unshift(array.pop())
}
this.handleMove(direction)
this.onSwitch(this.getIndex())
}
Carousel.prototype.handleMove = function (delta) {
var _delta = typeof delta === 'string' ? 0 : delta
var direction = typeof delta === 'string' ? delta : (delta > 0 ? 'right' : 'left')
var indexArray = this.indexArray.slice(0)
var transform = this.getTransform(_delta)
var collect = 0
var change = []
while (collect < 3) {
change[collect] = (collect < 2 ? indexArray.shift() : indexArray.pop())
collect++
}
var noSpeedIndex = direction === 'left' ? change[1] : change[2]
change.forEach(function (value, index) {
var speed = (value === noSpeedIndex || _delta !== 0) ? 0 : this.speed
setStyle(this.items[value], transform[index], speed)
}.bind(this))
/* 元素个数大于3 并且非手动情况下，处理第四个元素的隐藏 */
if (indexArray.length && _delta === 0) {
var hideIndex = direction === 'left' ? indexArray.pop() : indexArray.shift()
setStyle(this.items[hideIndex], this.hideTransform, 0)
}
}
Carousel.prototype.getTransform = function (delta) {
var resp = [
'translate(' + delta + 'px, 0px) translateZ(0px)',
'translate(' + (this.offset + delta) + 'px, 0px) translateZ(0px)',
'translate(' + (-this.offset + delta) + 'px, 0px) translateZ(0px)'
]
return resp
}
Carousel.prototype.init = function () {
this.offset = getOffset(this.root)
this.hideTransform = 'translate(' + this.offset + 'px, 0px) translateZ(0px)'
this.itemWrap.style.width = this.offset * this.length + 'px'
var transform = this.getTransform(0)
var indexArray = this.indexArray.slice(0)
var map = new Array(this.length)
var collect = 0
while (collect < 3) {
map[collect < 2 ? indexArray.shift() : indexArray.pop()] = transform[collect++]
}
this.items.forEach(function(item, i) {
item.style.width = this.offset + 'px'
item.style.left = -this.offset*i + 'px'
setStyle(item, map[i] || this.hideTransform, 0)
}.bind(this))
}
Carousel.prototype.fill = function (items) {
this.__fill = true
var node1 = items[0]
var node2 = items[1]
var cloneNode1 = node1.cloneNode(true)
var cloneNode2 = node2.cloneNode(true)
this.itemWrap.appendChild(cloneNode1)
this.itemWrap.appendChild(cloneNode2)
}
function setStyle (dom, transform, speed) {
dom.style.transform = transform
dom.style.transitionDuration = speed + 'ms'
}
function bind () {
var self = this
var _this = arguments[0]
var args = Array.prototype.slice.call(arguments, 1)
var fn = function () {}
var res = function () {
self.apply(_this, args.contact(Array.prototype.slice.call(arguments, 0)))
}
if (this.prototype) {
fn.prototype = this.prototype
res.prototype = new fn()
}
return res
}
function indexArray (length) {
var res = []
for (var i = 0; i < length; i++) {
res.push(i)
}
return res
}
function getStyle (ele, prop) {
var result = prop.match(/[A-Z]/g)
if (!ele.currentStyle && result) {
var propBridge = prop
for (var i = 0; i < result.length; i++) {
var upperCase = result[i]
propBridge = propBridge.replace(upperCase, '-' + upperCase.toLowerCase())
}
}
return parseFloat((ele.currentStyle && ele.currentStyle[propBridge]) || getComputedStyle(ele, null)[prop])
}
function getOffset (root) {
var width = getStyle(root, 'width')
var paddingLeft = getStyle(root, 'paddingLeft')
var paddingRight = getStyle(root, 'paddingRight')
var contentWidth = width - paddingLeft - paddingRight
return (contentWidth > 0 && contentWidth) || document.clientWidth || document.documentElement.clientWidth
}
function getElement (el) {
if (!(el && (typeof el === 'string' || (typeof el === 'object' && el.nodeType === 1)))) warn('element does not exist')
return (typeof el === 'string' && document.querySelector('#' + el)) || el
}
function warn (text) {
throw new Error(text)
}
module.exports = Carousel 
-10
src/index.js
import Carousel from './carousel'
var c = new Carousel({
root: 'component-carousel',
speed: 300,
interval: 3000,
onSwitch: function (currentIndex) {
console.log(currentIndex)
}
})
yarn.lock

Sorry, the diff of this file is too big to display