added bundle and improvements

Author: paulpflug

.gitignore

@@ -2,7 +2,7 @@ node_modules
 *.sublime-project
 *.sublime-workspace
 npm-debug.log
-build
+build/bundle.js
 dev/index.js
 static
 *.js

.npmignore

@@ -2,6 +2,5 @@ node_modules
 *.sublime-project
 *.sublime-workspace
 npm-debug.log
-build
 dev/index.js
 static

README.md

@@ -4,27 +4,47 @@ To mask out the background when a dialog / modal or similar is opened, a overlay
 
 ### [See it in action](https://vue-comps.github.io/vue-overlay)
 
-Only for [**webpack**](https://webpack.github.io/) workflows.
-
-
 # Install
 
 ```sh
 npm install --save-dev vue-overlay
 ```
+or include `build/bundle.js`
 
 ## Usage
 ```coffee
-overlay = require("../overlay.js")(Vue) # overlay is a singleton
-
-zindex = overlay.open(options) # returns the z-index of the overlay + 1
+# overlay is a singleton and is designed
+# to be used in different places simultaniously
+overlay = require("vue-overlay")(Vue)
+# or, when using bundle.js
+overlay = window.vueComps.overlay
+
+# returns the z-index of the overlay + 1 (starts with 1001)
+zindex = overlay.open(options)
+overlay.open() # z-index will raise by 5
+
+# close hooks of the first options object will be called
+# and z-index will be lowered by 5
 overlay.close()
+overlay.close() # overlay really closes
+
+# the overlay comes without animation, but you can easily set them up,
+# for example with velocity.js:
+Velocity = require("velocity-animate")
+overlay.fade = ({el,opacity,cb}) ->
+  Velocity el, {opacity: opacity},
+    {
+      duration: 300
+      queue: false
+      easing: 'easeOutQuad'
+      complete: cb
+    }
 ```
 #### Options
 | Name | type | default | description |
 | ---:| --- | ---| --- |
 | opacity | Number | 0.5 | opacity of the overlay |
-| dismissable | Boolean | true | Is the overlay dismissable by click or ESC? |
+| dismissable | Boolean | true | is the overlay dismissable by click or ESC? |
 | onBeforeOpen | Function | null | hook before open animation |
 | onOpened | Function | null | hook after open animation |
 | onBeforeClose | Function | null | hook before close animation |

build/common.coffee

@@ -0,0 +1,2 @@
+window.vueComps ?= {}
+window.vueComps.overlay = require('../overlay.js')(Vue)

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()
+  ]

package.json

@@ -17,7 +17,6 @@
     "node": "*"
   },
   "dependencies": {
-    "velocity-animate": "^1.2.3",
     "vue-filters": "^0.1.6",
     "vue-mixins": "^0.2.2"
   },
@@ -47,6 +46,7 @@
     "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",
@@ -67,7 +67,9 @@
   ],
   "readmeFilename": "README.md",
   "scripts": {
-    "build": "NODE_ENV=production vue-compiler --out / src/*.vue",
+    "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",

src/overlay-component.vue

@@ -8,8 +8,6 @@ div#overlay(
 </template>
 
 <script lang="coffee">
-Velocity = require("velocity-animate")
-
 module.exports =
 
   mixins:[
@@ -32,6 +30,9 @@ module.exports =
       height: "120vh"
       "background-color": "black"
       "will-change": "opacity"
+    fade: ({el,opacity,cb}) ->
+      @style.opacity = opacity
+      cb?()
 
   el: -> document.createElement "div"
 
@@ -48,14 +49,7 @@ module.exports =
       @stack.push options
       options.onBeforeOpen?()
       @style["z-index"] += 5
-      Velocity @$el, {opacity: options.opacity},
-        {
-          duration: 300
-          queue: false
-          easing: 'easeOutQuad'
-          complete: options.onOpened
-        }
-
+      @fade el:@$el, opacity:options.opacity, cb:options.onOpened
       return @style["z-index"]+1
 
     close: ->
@@ -68,14 +62,7 @@ module.exports =
           opacity = @stack[@stack.length-1].opacity
         options.onBeforeClose?()
         @style["z-index"]-=5
-        Velocity @$el, {opacity: opacity},
-          {
-            duration: 300
-            queue: false
-            easing: 'easeOutQuad'
-            complete: =>
-
-              options.onClosed?()
-              @$remove() if @stack.length == 0
-          }
+        @fade el:@$el, opacity:opacity, cb: =>
+          options.onClosed?()
+          @$remove() if @stack.length == 0
 </script>

test/overlay.coffee

@@ -14,21 +14,28 @@ describe "overlay", ->
       env.overlay.$el.parentNode.nodeType.should.equal 11
 
     it "should open first overlay", (done) ->
-      env.openOverlay()
-      env.firstOpened.should.be.true
-      env.overlay.style["z-index"].should.equal 1000
-      done()
+      env.openOverlay ->
+        env.$nextTick ->
+          env.firstOpened.should.be.true
+          if window.getComputedStyle
+            style = window.getComputedStyle(env.overlay.$el)
+            style.getPropertyValue("opacity").should.equal '0.5'
+          env.overlay.style["z-index"].should.equal 1000
+          done()
 
     it "should open second overlay", (done) ->
-      env.openSecondOverlay()
-      env.overlay.style["z-index"].should.equal 1005
-      env.overlay.close()
-      env.overlay.close()
-      done()
+      env.openSecondOverlay ->
+        env.$nextTick ->
+          if window.getComputedStyle
+            style = window.getComputedStyle(env.overlay.$el)
+            style.getPropertyValue("opacity").should.equal '0.6'
+          env.overlay.style["z-index"].should.equal 1005
+          env.overlay.close()
+          env.overlay.close()
+          done()
 
     it "should not close when not dismissable", (done) ->
-      env.overlay.open(dismissable:false)
+      env.overlay.open(dismissable:false,onClosed:done)
       env.overlay.dismiss()
       env.overlay.stack.length.should.equal 1
       env.overlay.close()
-      done()