🎩 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.2
 to
1.0.3
+0
-61
build/utils.js

@@ -11,62 +11,1 @@ var path = require('path')

}
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
}
+2
-9
build/webpack.base.conf.js
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

@@ -19,5 +18,4 @@ function resolve (dir) {

resolve: {
extensions: ['.js', '.vue', '.json'],
extensions: ['.js', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('example')

@@ -29,3 +27,3 @@ }

{
test: /\.(js|vue)$/,
test: /\.(js)$/,
loader: 'eslint-loader',

@@ -39,7 +37,2 @@ enforce: 'pre',

{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,

@@ -46,0 +39,0 @@ loader: 'babel-loader',

+0
-3
build/webpack.dev.conf.js

@@ -20,5 +20,2 @@ var utils = require('./utils')

module.exports = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// cheap-module-eval-source-map is faster for development

@@ -25,0 +22,0 @@ devtool: '#cheap-module-eval-source-map',

+0
-7
build/webpack.prod.conf.js

@@ -18,8 +18,2 @@ var path = require('path')

},
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: false,

@@ -35,3 +29,2 @@ output: {

plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({

@@ -38,0 +31,0 @@ 'process.env': env

+0
-1
config/index.js

@@ -1,2 +0,1 @@

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

@@ -3,0 +2,0 @@ 

+2
-22
package.json
{
"name": "carousel-html5",
"version": "1.0.2",
"version": "1.0.3",
"description": "carousel",

@@ -12,32 +12,15 @@ "main": "dist/carousel.js",

"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
"lint": "eslint --ext .js src"
},
"dependencies": {
"vue": "^2.2.6",
"vuedrag-html5": "^1.0.5"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",

@@ -53,5 +36,2 @@ "html-webpack-plugin": "^2.28.0",

"url-loader": "^0.5.8",
"vue-loader": "^11.3.4",
"vue-style-loader": "^2.0.5",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.3.3",

@@ -58,0 +38,0 @@ "webpack-bundle-analyzer": "^2.2.1",

+33
-44
README.md

@@ -1,51 +0,40 @@

# vue-drag
# carousel
> vue drag based on HTML5
移动端网站首页几乎都会用到的图片轮播组件。
组件使用了 `touchstart` 和 touchend` 事件，所以仅适用于移动端
## Build Setup
## 用法
# install
npm install vuedrag-html5
直接引入dist或者使用npm安装后import
```js
import Carousel from 'Carousel'
# use
var c = new Carousel({
root: 'component-carousel',
speed: 300, /* 可选参数，表示滑动速度，默认 300，单位 ms */
interval: 3000, /* 可选参数，表示定时器间隔，不传则不开启定时器，单位 ms */
onSwitch: function (currentIndex) { /* 可选参数，切换回调，返回切换后index */
console.log(currentIndex)
}
})
```
要求 `#root` 是以下结构：  
```html
<vuedrag v-model="articles">
<template scope="props">
<li v-for="(article, index) in articles"
draggable="true"
@dragstart="props.dragStart">
{{article.label}}<br>{{article.value}}
</li>
</template>
</vuedrag>
<div id="component-carousel">
<ul>
<li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放，2时自动补足成4个以便于切换 -->
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
</ul>
</div>
```
```javascript
import vuedrag from 'vuedrag-html5'
export default {
name: 'app',
data () {
return {
articles: [
{
label: '第一个',
value: 10
},
{
label: '第二个',
value: 20
},
{
label: '第三个',
value: 30
}
]
}
},
components: {
vuedrag
}
}
```
## git
For detailed [git](https://github.com/juzhikan/vue-drag)
**具体可以查看：**
[DEMO](https://juzhikan.github.io/carousel/index.html)
[GITHUB](https://github.com/juzhikan/carousel)
-12
build/vue-loader.conf.js
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
})
}
-39
README2.md
# carousel
移动端网站首页几乎都会用到的图片轮播组件。
组件使用了 `touchstart` 和 touchend` 事件，所以仅适用于移动端
## 用法
ES6
```js
import Carousel from 'Carousel'
var c = new Carousel({
root: 'component-carousel',
speed: 300, /* 可选参数，表示滑动速度，默认 300，单位 ms */
interval: 3000, /* 可选参数，表示定时器间隔，不传则不开启定时器，单位 ms */
onSwitch: function (currentIndex) { /* 可选参数，切换回调，返回切换后index */
console.log(currentIndex)
}
})
```
要求 `#root` 是以下结构：  
```html
<div id="component-carousel">
<ul>
<li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放，2时自动补足成4个以便于切换 -->
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
</ul>
</div>
```
**具体可以查看：**
[DEMO](https://juzhikan.github.io/carousel/index.html)
-51
static/README.md
# vue-drag
> vue drag based on HTML5
## Build Setup
# install
npm install vuedrag-html5
# use
```html
<vuedrag v-model="articles">
<template scope="props">
<li v-for="(article, index) in articles"
draggable="true"
@dragstart="props.dragStart">
{{article.label}}<br>{{article.value}}
</li>
</template>
</vuedrag>
```
```javascript
import vuedrag from 'vuedrag-html5'
export default {
name: 'app',
data () {
return {
articles: [
{
label: '第一个',
value: 10
},
{
label: '第二个',
value: 20
},
{
label: '第三个',
value: 30
}
]
}
},
components: {
vuedrag
}
}
```
## git
For detailed [git](https://github.com/juzhikan/vue-drag)
-39
static/README2.md
# carousel
移动端网站首页几乎都会用到的图片轮播组件。
组件使用了 `touchstart` 和 touchend` 事件，所以仅适用于移动端
## 用法
ES6
```js
import Carousel from 'Carousel'
var c = new Carousel({
root: 'component-carousel',
speed: 300, /* 可选参数，表示滑动速度，默认 300，单位 ms */
interval: 3000, /* 可选参数，表示定时器间隔，不传则不开启定时器，单位 ms */
onSwitch: function (currentIndex) { /* 可选参数，切换回调，返回切换后index */
console.log(currentIndex)
}
})
```
要求 `#root` 是以下结构：  
```html
<div id="component-carousel">
<ul>
<li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放，2时自动补足成4个以便于切换 -->
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
<li><img src="xxx"></li>
</ul>
</div>
```
**具体可以查看：**
[DEMO](https://juzhikan.github.io/carousel/index.html)
yarn.lock

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