first commit

paulpflug · paulpflug · commit 983b44d9fea7 · 2016-04-12T02:21:25.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+node_modules
+*.sublime-project
+*.sublime-workspace
+npm-debug.log
+build/bundle.js
+dev/index.js
+static
+*.js
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,6 @@
+node_modules
+*.sublime-project
+*.sublime-workspace
+npm-debug.log
+dev/index.js
+static
diff --git a/README.md b/README.md
@@ -0,0 +1,49 @@
+# vue-parallax
+
+Scrolls a image slower than the window to create a neat optical effect.
+
+### [Demo](https://vue-comps.github.io/vue-parallax)
+
+
+# Install
+
+```sh
+npm install --save-dev vue-parallax
+```
+or include `build/bundle.js`.
+
+## Usage
+```coffee
+# in your component
+components:
+  "parallax": require("vue-parallax")
+# or, when using bundle.js
+components:
+  "parallax": window.vueComps.parallax
+```
+```html
+<parallax src="path/to/img">
+</parallax>
+```
+
+For examples see [`dev/`](dev/).
+
+#### Props
+| Name | type | default | description |
+| ---:| --- | ---| --- |
+| src | String | - | (required) path to image |
+| height | Number | 500 | height of the parallax element |
+| speed | Number | 0.8 | 0 doesn't scroll the image, 1 scrolls through the whole image  |
+
+
+# Development
+Clone repository.
+```sh
+npm install
+npm run dev
+```
+Browse to `http://localhost:8080/`.
+
+## License
+Copyright (c) 2016 Paul Pflugradt
+Licensed under the MIT license.
diff --git a/build/common.coffee b/build/common.coffee
@@ -0,0 +1,2 @@
+window.vueComps ?= {}
+window.vueComps.parallax = require('../parallax.js')
diff --git a/build/webpack.config.coffee b/build/webpack.config.coffee
@@ -0,0 +1,15 @@
+webpack = require "webpack"
+
+module.exports =
+  entry: "./build/common.coffee"
+  output:
+    filename: "bundle.js"
+    path: __dirname
+  module:
+    loaders: [
+      { test: /\.coffee$/, loader: "coffee"}
+    ]
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin compress: warnings: false
+    new webpack.optimize.OccurenceOrderPlugin()
+  ]
diff --git a/dev/basic.vue b/dev/basic.vue
@@ -0,0 +1,23 @@
+<template lang="jade">
+parallax(src="parallax1.jpg")
+.parallax-between
+  a(href="https://github.com/vue-comps/vue-parallax/blob/master/dev/basic.vue") source
+parallax(src="parallax2.jpg")
+.parallax-between
+.parallax-between
+</template>
+
+<script lang="coffee">
+module.exports =
+  components:
+    "parallax": require "../src/parallax.vue"
+</script>
+
+<style lang="stylus">
+.parallax-between
+  height: 500px
+  > a
+    position relative
+    left 250px
+    top 40px
+</style>
diff --git a/dev/parallax1.jpg b/dev/parallax1.jpg
diff --git a/dev/parallax2.jpg b/dev/parallax2.jpg
diff --git a/karma.conf.coffee b/karma.conf.coffee
@@ -0,0 +1,32 @@
+module.exports = (config) ->
+  config.set
+    preprocessors:
+      "**/*.coffee": ["webpack",'sourcemap']
+    webpack:
+      devtool: 'inline-source-map'
+      resolve:
+        extensions: ["",".js",".coffee",".vue"]
+      module:
+        loaders: [
+          { test: /\.coffee$/, loader: "coffee-loader" }
+          { test: /\.vue$/, loader: "vue-loader" }
+          { test: /\.html$/, loader: "html"}
+          { test: /\.css$/, loader: "style-loader!css-loader" }
+        ]
+    webpackMiddleware:
+      noInfo: true
+    files: ["test/*.coffee"]
+    frameworks: ["mocha","chai-dom","chai-spies","chai","vue-component"]
+    plugins: [
+      require("karma-chai")
+      require("karma-chai-dom")
+      require("karma-chrome-launcher")
+      require("karma-firefox-launcher")
+      require("karma-mocha")
+      require("karma-webpack")
+      require("karma-sourcemap-loader")
+      require("karma-spec-reporter")
+      require("karma-chai-spies")
+      require("karma-vue-component")
+    ]
+    browsers: ["Chrome","Firefox"]
diff --git a/package.json b/package.json
@@ -0,0 +1,80 @@
+{
+  "name": "vue-parallax",
+  "description": "Scrolls a image slower than the window to create a neat optical effect",
+  "version": "0.0.0",
+  "homepage": "https://github.com/vue-comps",
+  "author": {
+    "name": "Paul Pflugradt",
+    "email": "paul.pflugradt@gmail.com"
+  },
+  "license": "MIT",
+  "main": "parallax.js",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/vue-comps/vue-parallax"
+  },
+  "engines": {
+    "node": "*"
+  },
+  "dependencies": {
+    "vue-mixins": "^0.2.5"
+  },
+  "devDependencies": {
+    "babel-core": "^6.7.6",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-runtime": "^6.7.5",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-runtime": "^5.8.34",
+    "chai": "^3.5.0",
+    "chai-spies": "^0.7.1",
+    "coffee-loader": "^0.7.2",
+    "coffee-script": "^1.10.0",
+    "css-loader": "^0.23.1",
+    "gh-pages": "^0.11.0",
+    "jade": "^1.11.0",
+    "karma": "^0.13.22",
+    "karma-chai": "^0.1.0",
+    "karma-chai-dom": "^1.1.0",
+    "karma-chai-spies": "^0.1.4",
+    "karma-chrome-launcher": "^0.2.3",
+    "karma-firefox-launcher": "^0.1.7",
+    "karma-mocha": "^0.2.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "^0.0.26",
+    "karma-vue-component": "^0.1.0",
+    "karma-webpack": "^1.7.0",
+    "mocha": "^2.4.5",
+    "parse5": "^2.1.5",
+    "script-runner": "^0.1.4",
+    "style-loader": "^0.13.1",
+    "stylus-loader": "^2.0.0",
+    "template-html-loader": "0.0.3",
+    "vue": "^1.0.21",
+    "vue-compiler": "^0.1.0",
+    "vue-dev-server": "^0.2.10",
+    "vue-hot-reload-api": "^1.3.2",
+    "vue-html-loader": "^1.2.2",
+    "vue-loader": "^8.2.2",
+    "vue-style-loader": "^1.0.0",
+    "vueify-insert-css": "^1.0.0",
+    "webpack": "^1.12.15"
+  },
+  "keywords": [
+    "parallax",
+    "component",
+    "vue"
+  ],
+  "readmeFilename": "README.md",
+  "scripts": {
+    "build:vue": "NODE_ENV=production vue-compiler --out . src/*.vue",
+    "build:webpack": "webpack --config build/webpack.config.coffee",
+    "build": "run-npm build:*",
+    "dev": "vue-dev-server",
+    "watch": "karma start --browsers Chrome --auto-watch --reporters spec",
+    "test": "karma start --single-run",
+    "preversion": "npm test",
+    "version": "npm run build && git add .",
+    "postversion": "git push && git push --tags && npm publish",
+    "ghpages": "vue-dev-server --static static/ && gh-pages -d static"
+  }
+}
diff --git a/src/parallax.vue b/src/parallax.vue
@@ -0,0 +1,74 @@
+// out: ..
+<template lang="jade">
+div(
+  v-bind:style="style"
+  )
+  img(v-bind:src="src" v-el:img @load="processSrc" style="position:absolute;visibility:hidden")
+  slot
+</template>
+
+<script lang="coffee">
+module.exports =
+
+  mixins:[
+    require("vue-mixins/onWindowScroll")
+    require("vue-mixins/getDocumentHeight")
+    require("vue-mixins/getViewportSize")
+    require("vue-mixins/onWindowResize")
+  ]
+
+  props:
+    "src":
+      type: String
+      required: true
+    "height":
+      type: Number
+      default: 500
+    "speed":
+      type: Number
+      default: 0.8
+
+  data: ->
+    viewportHeight: 0
+    parallaxDistance: 0
+    scrollDistance: 0
+    ratio: 1
+    style:
+      position: "relative"
+      width: "100%"
+      overflow: "hidden"
+      height: 0
+      backgroundImage:"url('#{@src}')"
+      backgroundSize: "100% auto"
+      backgroundPositionY: 0
+  watch:
+    "height": "processHeight"
+  methods:
+    processResize: ->
+      @viewportHeight = @getViewportSize().height
+      @processSrc()
+    processSrc: ->
+      @ratio = @$els.img.clientHeight / @$els.img.clientWidth
+      @processHeight()
+    processHeight: ->
+      if @height/@ratio > @$el.clientWidth # image smaller than box
+        height = Math.floor(@$el.clientWidth*@ratio)
+        @parallaxDistance = 0
+      else
+        height = @height
+        @parallaxDistance = Math.floor(@$el.clientWidth*@ratio) - height
+      @scrollDistance = @viewportHeight + height*2
+      @style.height = height + "px"
+      @processScroll()
+    processScroll: ->
+      rect = @$el.getBoundingClientRect()
+      if rect.bottom > 0 and rect.top < @viewportHeight # in viewport
+        percentage = (@viewportHeight - rect.top) / (@scrollDistance)
+        percentage = (1-@speed)/2+percentage*@speed
+        @style.backgroundPositionY = Math.round( -@parallaxDistance * percentage ) + 'px'
+
+  compiled: ->
+    @onWindowScroll @processScroll
+    @onWindowResize @processResize
+    @viewportHeight = @getViewportSize().height
+</script>
diff --git a/test/parallax.coffee b/test/parallax.coffee
@@ -0,0 +1,12 @@
+env = null
+describe "parallax", ->
+
+  describe "basic env", ->
+
+    before ->
+      env = loadComp(require("../dev/basic.vue"))
+
+    after ->
+      unloadComp(env)
+
+    it "should work", ->

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+window.vueComps ?= {}`
	`2`	`+window.vueComps.parallax = require('../parallax.js')`