Update Demo Page (#238)

* Initial implementation for computed options

* Freeze original options object so it cannot be accidentally modified

* Fix test cases

* Fix phantom test cases

* Run tests in chrome

* remove phantom script

* Remove options freeze

* fix options dependent key

* remove frozen test

* add options copy test

* Cleanup validators

* Extract dependent keys from all options

* Force dependentKeys to be prefixed with `model`

* Fix merge conflicts

* Initial demo reboot

* More demo changes

* Fix typo

addon/validations/factory.js

@@ -384,6 +384,7 @@ function createCPValidationFor(attribute, validations, owner) {
  */
 function createTopLevelPropsMixin(validatableAttrs) {
   return Ember.Mixin.create({
+    isWarning: and(...validatableAttrs.map(attr => `attrs.${attr}.isWarning`)).readOnly(),
     isValid: and(...validatableAttrs.map(attr => `attrs.${attr}.isValid`)).readOnly(),
     isValidating: or(...validatableAttrs.map(attr => `attrs.${attr}.isValidating`)).readOnly(),
     isDirty: or(...validatableAttrs.map(attr => `attrs.${attr}.isDirty`)).readOnly(),

addon/validations/result-collection.js

@@ -54,6 +54,22 @@ export default Ember.Object.extend({
     set(this, 'content', emberArray(get(this, 'content')));
   },
 
+  /**
+   * ```javascript
+   * // Examples
+   * get(user, 'validations.isWarning')
+   * get(user, 'validations.attrs.username.isWarning')
+   * ```
+   *
+   * @property isWarning
+   * @default false
+   * @readOnly
+   * @type {Boolean}
+   */
+  isWarning: computed('[email protected]', cycleBreaker(function () {
+    return get(this, 'content').isEvery('isWarning', true);
+  }, false)).readOnly(),
+
   /**
    * ```javascript
    * // Examples

bower.json

@@ -5,7 +5,8 @@
     "ember-cli-shims": "0.1.1",
     "ember-cli-test-loader": "0.2.2",
     "moment": ">= 2.8.0",
-    "moment-timezone": ">= 0.1.0"
+    "moment-timezone": ">= 0.1.0",
+    "font-awesome": "~4.5.0"
   },
   "devDependencies": {
     "blanket": "5e94fc30f2e694bb5c3718ddcbf60d467f4b4d26",

ember-cli-build.js

@@ -4,7 +4,8 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   var app = new EmberAddon(defaults, {
-    // Add options here
+    snippetSearchPaths: ['addon','tests/dummy/app'],
+    snippetPaths: ['snippets','tests/dummy/snippets']
   });
 
   /*

package.json

@@ -41,25 +41,28 @@
     "ember-cli-app-version": "^1.0.0",
     "ember-cli-blanket": "0.9.5",
     "ember-cli-dependency-checker": "^1.2.0",
+    "ember-cli-font-awesome": "1.5.2",
     "ember-cli-github-pages": "^0.1.0",
     "ember-cli-htmlbars": "^1.0.3",
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-inject-live-reload": "^1.4.0",
     "ember-cli-jshint": "^1.0.0",
+    "ember-cli-less": "1.5.3",
     "ember-cli-moment-shim": "2.0.0",
     "ember-cli-qunit": "^2.0.2",
     "ember-cli-release": "^1.0.0-beta.1",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-cli-yuidoc": "0.8.4",
+    "ember-code-snippet": "1.3.0",
     "ember-data": "^2.6.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-disable-proxy-controllers": "^1.0.1",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
     "ember-moment": "6.1.0",
     "ember-resolver": "^2.0.3",
-    "ember-try": "0.2.4",
+    "ember-truth-helpers": "1.2.0",
     "loader.js": "^4.0.1",
     "moment": "2.13.0",
     "moment-timezone": "0.5.4",

tests/acceptance/dummy-index-test.js

@@ -29,8 +29,8 @@ test("Page Loads", function(assert) {
   assert.expect(2);
   visit('/');
   andThen(function() {
-    assert.equal(find('.demo .info h1').text(), "CP Validations");
-    assert.equal(find('.demo .form .register h2').text(), "Create an Account");
+    assert.equal(find('a.navbar-brand').text().trim(), "CP Validations");
+    assert.equal(find('.form .register h2').text(), "Create an Account");
   });
 });
 
@@ -43,11 +43,22 @@ test("Helper tooltips", function(assert) {
   });
 });
 
+test("Invalid form submit", function(assert) {
+  visit('/');
+  andThen(function() {
+    click('#signup');
+  });
+
+  andThen(function() {
+    assert.equal(find('.form .alert').text().trim(), 'Please fix all the errors below before continuing.');
+  });
+});
+
 test("Valid form submit", function(assert) {
   visit('/');
   andThen(function() {
     Object.keys(validInputValues).forEach((input) => {
-      let $input = find(`.demo .validated-input input[name="${input}"]`);
+      let $input = find(`.validated-input input[name="${input}"]`);
       assert.ok($input, `${input} found`);
       fillIn($input, validInputValues[input]);
       assert.ok($input.parent('.validated-input.has-success'), `${input} success`);
@@ -66,7 +77,7 @@ test("Invalid to valid email", function(assert) {
   visit('/');
   var $input;
   andThen(function() {
-    $input = find('.demo .validated-input input[name="email"]');
+    $input = find('.validated-input input[name="email"]');
     assert.ok($input);
     fillIn($input, 'invalid-email');
   });
@@ -79,4 +90,3 @@ test("Invalid to valid email", function(assert) {
     assert.ok($input.parent('.validated-input.has-success'));
   });
 });
-

tests/dummy/app/components/validated-input.js

@@ -3,6 +3,7 @@
  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  */
 
+// BEGIN-SNIPPET validated-input
 import Ember from 'ember';
 
 const {
@@ -43,3 +44,4 @@ export default Ember.Component.extend({
     return (this.get('validation.isDirty') || this.get('didValidate')) && this.get('isValid') && !isEmpty(this.get('validation.warnings'));
   })
 });
+// END-SNIPPET

tests/dummy/app/controllers/index.js

@@ -13,31 +13,41 @@ export default Ember.Controller.extend({
 
   actions: {
     showCode() {
-        this.toggleProperty('showCode');
-      },
+      this.toggleProperty('showCode');
+    },
 
-      submit() {
-        var model = this.get('model');
-        model.validate().then(({
-          model, validations
-        }) => {
-          if (validations.get('isValid')) {
-            this.setProperties({
-              showAlert: false,
-              isRegistered: true,
-              showCode: false
-            });
-          } else {
-            this.set('showAlert', true);
-          }
-          this.set('didValidate', true);
-        }, (errors) => {
+    submit() {
+      var model = this.get('model');
+      model.validate().then(({
+        model,
+        validations
+      }) => {
+        if (validations.get('isValid')) {
+          this.setProperties({
+            showAlert: false,
+            isRegistered: true,
+            showCode: false
+          });
+        } else {
+          this.set('showAlert', true);
+        }
+        this.set('didValidate', true);
+      }, (errors) => {
 
-        });
-      },
+      });
+    },
 
-      dismissAlert() {
-        this.set('showAlert', false);
-      }
+    dismissAlert() {
+      this.set('showAlert', false);
+    },
+
+    reset() {
+      this.setProperties({
+        showAlert: false,
+        isRegistered: false,
+        showCode: false,
+        didValidate: false
+      });
+    }
   }
 });

tests/dummy/app/index.html

@@ -3,16 +3,14 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Ember CP Validations Demo</title>
+    <title>Ember CP Validations</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     {{content-for 'head'}}
 
     <link rel="stylesheet" href="assets/vendor.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500,300,100|Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="assets/dummy.css">
 
@@ -22,8 +20,7 @@
     {{content-for 'body'}}
 
     <script src="assets/vendor.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
     <script src="assets/dummy.js"></script>
 
     {{content-for 'body-footer'}}

tests/dummy/app/models/user-detail.js

@@ -3,19 +3,14 @@
  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  */
 
+ // BEGIN-SNIPPET user-detail-model
 import Ember from 'ember';
 import DS from 'ember-data';
 import moment from 'moment';
-import {
-  validator, buildValidations
-}
-from 'ember-cp-validations';
+import { validator, buildValidations } from 'ember-cp-validations';
 
-const {
-  computed
-} = Ember;
-
-var attr = DS.attr;
+const { computed } = Ember;
+const { attr } = DS;
 
 var Validations = buildValidations({
   firstName: validator('presence', true),
@@ -64,3 +59,4 @@ export default DS.Model.extend(Validations, {
   "phone": attr('string'),
   "url": attr('string')
 });
+// END-SNIPPET

tests/dummy/app/models/user.js

@@ -3,15 +3,13 @@
  * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
  */
 
+ // BEGIN-SNIPPET user-model
 import Ember from 'ember';
 import DS from 'ember-data';
 import { validator, buildValidations } from 'ember-cp-validations';
 
-const {
-  computed
-} = Ember;
-
-var attr = DS.attr;
+const { computed } = Ember;
+const { attr } = DS;
 
 var Validations = buildValidations({
   username: {
@@ -67,3 +65,4 @@ export default DS.Model.extend(Validations, {
 
   minLength: 5
 });
+// END-SNIPPET

tests/dummy/app/styles/app.less

@@ -0,0 +1,29 @@
+@accent-color: #f23818;
+
+@import "./navbar.less";
+@import "./form.less";
+@import "./code-snippet.less";
+
+body,
+html {
+  min-height: 100%;
+  min-width: 100%;
+  background-color: #F3F3F3;
+  height: 100%;
+  font-family: 'Open Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  > div {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.content {
+  display: flex;
+  justify-content: center;
+  padding: 25px;
+  flex: 1 0 auto;
+}

tests/dummy/app/styles/code-snippet.less

@@ -0,0 +1,51 @@
+@background-color: #fdfdfd;
+
+.snippet-container {
+  background: @background-color;
+  align-self: flex-start;
+  overflow: auto;
+  width: 0;
+  height: 670px;
+  margin: auto 0;
+  -webkit-transition: width 1s ease;
+  -moz-transition: width 1s ease;
+  -o-transition: width 1s ease;
+  transition: width 1s ease;
+  border-radius: 3px;
+  padding: 15px 10px;
+  margin-left: -20px;
+  z-index: 0;
+
+  &.show {
+    width: 600px;
+    margin-left: -2px;
+    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.15);
+  }
+
+  .nav-tabs {
+    li > a {
+      color: #8A8A8A;
+      border-radius: 2px 2px 0 0;
+      font-size: 12px;
+    }
+    li.active > a {
+      background-color: @background-color;
+      color: #696969;
+    }
+  }
+  .tab-content {
+    background-color: @background-color;
+    max-height: 600px;
+    overflow: auto;
+
+    > .active {
+      padding: 15px 15px 0;
+    }
+  }
+  pre {
+    border: none;
+    margin: 0;
+    padding: 0;
+    background-color: @background-color;
+  }
+}