Bowerizing the demo. Bringing in Bootstrap 3.0. Improving style wishes.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "genie",
   "main": "genie.js",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "homepage": "https://github.com/kentcdodds/genie",
   "authors": [
     "Kent C. Dodds <[email protected]>"
@@ -10,17 +10,7 @@
   "license": "MIT",
   "private": false,
   "ignore": [
-    "**/.*",
-    "demo-files/",
-    "node-modules/",
-    "other/",
-    "test/",
-    ".travis.yml",
-    "bower.json",
-    "Gruntfile.js",
-    "index.html",
-    "LICENSE",
-    "package.json",
-    "README.md"
+    "*",
+    "!genie.js"
   ]
 }

demo-files/app.js

@@ -43,7 +43,7 @@
       if (typeof magicWords === 'string') {
         magicWords = magicWords.split(',');
       }
-      var wish = genie({
+      return genie({
         magicWords: magicWords,
         action: action || function(wish) {
           alert('Your "' + wish.magicWords[0] + '" wish is my command!');
@@ -52,25 +52,33 @@
     }
 
     function addStyleWish(style, altStyle, property) {
-      var styleLabel = 'Style Genie: ' + style;
-      var altStyleLabel = 'Style Genie: ' + altStyle;
-      addWish(styleLabel, function(wish) {
-        if (wish.magicWords[0] === styleLabel) {
-          $scope.$apply(function() {
-            wish.magicWords[0] = altStyleLabel;
-            $scope.genieStyle[property] = style.toLowerCase();
-          });
-        } else {
-          $scope.$apply(function() {
-            wish.magicWords[0] = styleLabel;
-            $scope.genieStyle[property] = altStyle.toLowerCase();
-          });
+      var originalWish, altWish;
+      function applyStyleAndSwapWishes(wish) {
+        $scope.genieStyle[property] = wish.data.style.toLowerCase();
+        genie.deregisterWish(wish);
+        genie(wish.data.otherWish);
+      }
+      originalWish = genie({
+        magicWords: 'Style the lamp: ' + style,
+        action: applyStyleAndSwapWishes,
+        data: {
+          style: style
+        }
+      });
+      altWish = genie({
+        magicWords: 'Style the lamp: ' + altStyle,
+        action: applyStyleAndSwapWishes,
+        data: {
+          style: altStyle,
+          otherWish: originalWish
         }
       });
+      originalWish.data.otherWish = altWish;
+      genie.deregisterWish(altWish);
     }
 
     function addDestinationWish(magicWord, destination) {
-      addWish('Go to ' + magicWord, {
+      addWish('Navigate: ' + magicWord, {
         destination: destination,
         openNewTab: true
       });

demo-files/bower.json

@@ -0,0 +1,12 @@
+{
+  "name": "genie-demo",
+  "version": "0.0.0",
+  "dependencies": {
+    "angular": "~1.2.4",
+    "ux-genie": "*",
+    "bootstrap": "3.0.3",
+    "angular-ga": "0.1.0"
+  },
+  "devDependencies": { },
+  "private": true
+}

demo-files/style.css

@@ -6,6 +6,13 @@ h3 {
   color: #999
 }
 
+#fork-me {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0;
+}
+
 .btn {
   margin-bottom: 12px;
 }
@@ -14,6 +21,10 @@ h3 {
   margin-top: 12px;
 }
 
+#bottom-stuff {
+  clear: both;
+}
+
 #wish-output {
   color: #808080;
 }
@@ -54,9 +65,11 @@ h3 {
   -mos-border-radius: 8px;
   border-radius: 8px;
   margin: 0px;
+  width: 100%;
 }
 
 .genie-wishes {
+  width: 100%;
   margin-top: 10px;
   cursor: pointer;
   overflow-y: auto;
@@ -101,21 +114,19 @@ h3 {
 
 /* ng-genie large styles */
 #uxLampContainer.large .genie-container {
-  width: 384px;
-  margin-left: -208px;
+  width: 600px;
+  margin-left: -300px;
   padding: 16px;
 }
 
 #uxLampContainer.large .genie-container > input {
-  width: 358px;
   line-height: 60px;
   padding: 0px 12px 0px 12px;
   font-size: 40px;
   height: 60px;
 }
 
 #uxLampContainer.large .genie-wishes {
-  width: 384px;
   max-height: 300px;
   font-size: 30px;
 }
@@ -133,15 +144,13 @@ h3 {
 }
 
 #uxLampContainer.small .genie-container > input {
-  width: 274px;
   line-height: 50px;
   padding: 0px 12px 0px 12px;
   font-size: 34px;
   height: 54px;
 }
 
 #uxLampContainer.small .genie-wishes {
-  width: 297px;
   max-height: 216px;
   font-size: 24px;
 }