fix: make the examples work locally (fixes #75)

gajus · Jan 11, 2017 · 910813e · 910813e
1 parent dfd1f6b
commit 910813e
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ Give it a [swing](http://gajus.com/sandbox/swing/examples/card-stack/)! and plea
 * [Programmatically control](http://gajus.com/sandbox/swing/examples/card-state/) the state of the card.
 * [Indicate the state of the drop](http://gajus.com/sandbox/swing/examples/throw-confidence/) using `throwConfidence` and `direction` [event object](#event-object) properties.
 
-The code for all of the examples is in the [./examples/](https://github.com/gajus/swing/tree/master/examples/) folder.
+The code for all of the examples is in the [./examples/](./examples/) folder.
 
 [Raise an issue](https://github.com/gajus/swing/issues) if you are missing an example.
 

diff --git a/examples/README.md b/examples/README.md
@@ -0,0 +1,14 @@
+To run locally:
+
+```bash
+git clone [email protected]:gajus/swing.git
+cd ./swing/examples
+npm install
+npm start
+```
+
+This will start server on port 8080:
+
+```bash
+open http://localhost:8080/
+```
diff --git a/examples/card-stack/card-stack.js b/examples/card-stack/card-stack.js
@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', function () {
     var stack;
 
-    stack = gajus.Swing.Stack();
+    stack = window.swing.Stack();
 
     [].forEach.call(document.querySelectorAll('.stack li'), function (targetElement) {
         stack.createCard(targetElement);

diff --git a/examples/card-stack/index.html b/examples/card-stack/index.html
@@ -7,7 +7,7 @@
 
     <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
-    <script src="./../../dist/browser/swing.js"></script>
+    <script src="http://localhost:8080/bundle.js"></script>
     <script src="./card-stack.js"></script>
 </head>
 <body>

diff --git a/examples/card-state/card-state.js b/examples/card-state/card-state.js
@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', function () {
-    var stack = gajus.Swing.Stack(),
+    var stack = window.swing.Stack(),
         cardElement = document.querySelector('.stack li');
 
     window.card = stack.createCard(cardElement);
@@ -11,4 +11,4 @@ document.addEventListener('DOMContentLoaded', function () {
     stack.on('throwin', function (e) {
         console.log(e.target.innerText || e.target.textContent, 'has been thrown into the stack from the', e.throwDirection, 'direction.');
     });
-});
+});
diff --git a/examples/card-state/index.html b/examples/card-state/index.html
@@ -7,7 +7,7 @@
 
     <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
-    <script src="../../dist/browser/swing.js"></script>
+    <script src="http://localhost:8080/bundle.js"></script>
     <script src="./card-state.js"></script>
 </head>
 <body>

diff --git a/examples/index.js b/examples/index.js
@@ -0,0 +1 @@
+window.swing = require('swing');
diff --git a/examples/package.json b/examples/package.json
@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "swing": "^4.0.1"
+  },
+  "devDependencies": {
+    "webpack": "^1.14.0",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "private": true,
+  "scripts": {
+    "start": "webpack-dev-server --entry ./index.js"
+  }
+}
diff --git a/examples/throw-confidence/index.html b/examples/throw-confidence/index.html
@@ -8,7 +8,7 @@
 
     <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 
-    <script src="./../../dist/browser/swing.js"></script>
+    <script src="http://localhost:8080/bundle.js"></script>
     <script src="./throw-confidence.js"></script>
 </head>
 <body>

diff --git a/examples/throw-confidence/throw-confidence.js b/examples/throw-confidence/throw-confidence.js
@@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', function () {
         directionBind,
         throwOutConfidenceElements;
 
-    stack = gajus.Swing.Stack();
+    stack = window.swing.Stack();
     cardElement = document.querySelector('.stack li');
     throwOutConfidenceBind = document.querySelector('#throw-out-confidence-bind');
     directionBind = document.querySelector('#direction-bind');