Merge pull request #6 from Exelord/landing-page

Landing page

Author: Exelord

README.md

@@ -9,6 +9,10 @@ Ember Custom Actions is a package for defining custom API actions, dedicated for
 
 # Getting started
 
+## Demo
+Before you will start with documentation check our demo app: [Ember-Custom-Actions Website][43255946]
+[43255946]: https://exelord.github.io/ember-custom-actions/ "Website - Demo App"
+
 ## Installation
 
 `ember install ember-custom-actions`

addon/actions/action.js

@@ -1,17 +1,16 @@
 /* eslint ember-suave/no-direct-property-access:1 */
 
 import Ember from 'ember';
-import DS from 'ember-data';
 
 import UrlBuilder from '../utils/url-builder';
 import normalizePayload from '../utils/normalize-payload';
 import defaultConfig from '../config';
 
-const { assign, getOwner, computed, Object } = Ember;
+const { assign, getOwner, computed, Object, ObjectProxy, ArrayProxy, PromiseProxyMixin } = Ember;
 
 const promiseTypes = {
-  array: DS.PromiseArray,
-  object: DS.PromiseObject
+  array: ArrayProxy.extend(PromiseProxyMixin),
+  object: ObjectProxy.extend(PromiseProxyMixin)
 };
 
 export default Object.extend({

bower.json

@@ -1,4 +1,6 @@
 {
   "name": "ember-custom-actions",
-  "dependencies": {}
+  "devDependencies": {
+    "bootstrap": "^3.3.7"
+  }
 }

ember-cli-build.js

@@ -1,10 +1,26 @@
-/*jshint node:true*/
+/* eslint no-var:0*/
 /* global require, module */
+
 var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
+  var config = defaults.project.config(EmberAddon.env());
+
   var app = new EmberAddon(defaults, {
-    // Add options here
+    sassOptions: {
+      extension: 'sass'
+    },
+    favicons: {
+      faviconsConfig: {
+        appName: 'Ember Custom Actions',
+        appDescription: 'Trigger custom API actions for Ember 2 applications and communicate with non-CRUD API servers',
+        developerName: 'Exelord',
+        developerURL: 'www.macsour.com',
+        background: '#ffffff',
+        path: config.rootURL,  // Path for overriding default icons path. `string`
+        url: 'https://exelord.github.io/ember-custom-actions/images/og-image.jpg'  // Absolute URL for OpenGraph image. `string`
+      }
+    }
   });
 
   /*
@@ -14,5 +30,6 @@ module.exports = function(defaults) {
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
 
+  app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');
   return app.toTree();
 };

package.json

@@ -29,39 +29,51 @@
     "ember-cli-babel": "^5.1.7"
   },
   "devDependencies": {
+    "bootstrap-sass": "^3.3.7",
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^2.4.1",
+    "ember-bootstrap": "1.0.0-alpha.4",
+    "ember-browserify": "1.1.13",
     "ember-cli": "2.11.0",
     "ember-cli-app-version": "^2.0.0",
     "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-eslint": "3.0.0",
+    "ember-cli-favicon": "1.0.0-beta.4",
+    "ember-cli-github-pages": "0.1.2",
     "ember-cli-htmlbars": "^1.1.1",
     "ember-cli-htmlbars-inline-precompile": "^0.3.3",
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-pretender": "1.0.1",
     "ember-cli-qunit": "^3.0.1",
     "ember-cli-release": "^0.2.9",
+    "ember-cli-sass": "6.1.1",
     "ember-cli-shims": "^1.0.2",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-data": "^2.11.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
+    "ember-font-awesome": "3.0.3",
+    "ember-initials": "2.2.0",
     "ember-load-initializers": "^0.6.0",
     "ember-resolver": "^2.0.3",
+    "ember-scroll-to": "0.5.4",
     "ember-source": "^2.11.0",
     "ember-suave": "4.0.1",
     "eslint-plugin-ember-suave": "^1.0.0",
     "express": "^4.14.1",
+    "faker": "^3.1.0",
     "glob": "^4.5.3",
     "loader.js": "^4.0.10",
-    "morgan": "^1.8.0"
+    "morgan": "^1.8.0",
+    "pretender": "1.4.2"
   },
   "engines": {
     "node": ">= 0.12.0"
   },
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "configPath": "tests/dummy/config",
+    "demoURL": "https://exelord.github.io/ember-custom-actions/"
   }
 }

tests/dummy/app/components/page-sections/documentation/template.hbs

@@ -0,0 +1,13 @@
+<div id="documentation" class="examples">
+  <div class="container">
+    <div class="section-heading">
+      <h1 data-wow-delay=".3s" class="title wow fadeInDown" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInDown;">
+        Documentation & Configuration
+      </h1>
+      <div data-wow-delay=".5s" class="wow fadeInUp" style="visibility: visible; animation-delay: 0.5s; animation-name: fadeInUp;">
+        <h2 class="lead">An advanced way to get to know ember-custom-acions better</h2>
+        <a class="btn btn-lg btn-outline btn-default" href="https://github.com/Exelord/ember-custom-actions">d{{fa-icon 'github'}}cumentati{{fa-icon 'github'}}n</a>
+      </div>
+    </div>
+  </div>
+</div>

tests/dummy/app/components/page-sections/examples/burn-action/component.js

@@ -0,0 +1,43 @@
+import Ember from 'ember';
+
+const { Component, computed, inject, run, observer } = Ember;
+
+export default Component.extend({
+  tagName: 'tr',
+  classNames: 'action',
+  store: inject.service(),
+  server: inject.service(),
+
+  init() {
+    this._super(...arguments);
+
+    this.get('server').server.get('/bridges/burn', () => {
+      return [200, { }, '{}'];
+    });
+  },
+
+  bridge: computed('store', function() {
+    return this.get('store').createRecord('bridge');
+  }),
+
+  burnedObserver: observer('burned', function() {
+    if (this.get('burned') == true) {
+      run.later(() => {
+        this.set('burned', false);
+      }, 3000);
+    }
+  }),
+
+  actions: {
+    burn() {
+      this.set('pending', true);
+
+      run.later(() => {
+        this.get('bridge').burnAll().then(() => {
+          this.set('burned', true);
+          this.set('pending', false);
+        });
+      }, 500);
+    }
+  }
+});

tests/dummy/app/components/page-sections/examples/burn-action/template.hbs

@@ -0,0 +1,20 @@
+<td>
+  <a class="btn btn-lg btn-outline btn-ember {{if burned 'disabled'}}" {{action 'burn'}}>Burn all bridges</a>
+</td>
+<td>
+  {{#if pending}}
+    <p class="status text-warning">Pending</p>
+  {{else}}
+    <p class="status text-success">Waiting</p>
+  {{/if}}
+  <h4 class="request">bridges/burn</h4>
+</td>
+<td>
+  {{#if burned}}
+    <div class="{{if burned 'show-result'}}">
+      <span class="h4 text-danger">Bridges Burned</span>
+    </div>
+  {{else}}
+    <span class="text-muted call-to-action">Call custom action</span>
+  {{/if}}
+</td>

tests/dummy/app/components/page-sections/examples/post-action/component.js

@@ -0,0 +1,54 @@
+import Ember from 'ember';
+
+const { Component, computed, inject, run, observer } = Ember;
+
+export default Component.extend({
+  tagName: 'tr',
+  classNames: 'action',
+  store: inject.service(),
+  server: inject.service(),
+
+  init() {
+    this._super(...arguments);
+
+    this.get('server').server.put('/posts/:id/publish', (request) => {
+      let post = this.get('store').peekRecord('post', request.params.id);
+      let data = post.serialize({ includeId: true });
+      data.data.attributes.published = true;
+
+      return [200, { }, JSON.stringify(data)];
+    });
+  },
+
+  post: computed('store', function() {
+    return this.get('store').createRecord('post', { id: 1 });
+  }),
+
+  publishedObserver: observer('post.published', function() {
+    if (this.get('post.published') == true) {
+      run.later(() => {
+        this.get('store').push({
+          data: {
+            id: '1',
+            type: 'post',
+            attributes: {
+              published: false
+            }
+          }
+        });
+      }, 3000);
+    }
+  }),
+
+  actions: {
+    publish(post) {
+      this.set('pending', true);
+
+      run.later(() => {
+        post.publish().then(() => {
+          this.set('pending', false);
+        });
+      }, 500);
+    }
+  }
+});

tests/dummy/app/components/page-sections/examples/post-action/template.hbs

@@ -0,0 +1,20 @@
+<td>
+  <a class="btn btn-lg btn-outline btn-ember {{if post.published 'disabled'}}" {{action 'publish' post}}>Publish post</a>
+</td>
+<td>
+  {{#if pending}}
+    <p class="status text-warning">Pending</p>
+  {{else}}
+    <p class="status text-success">Waiting</p>
+  {{/if}}
+  <h4 class="request">posts/1/publish</h4>
+</td>
+<td>
+  {{#if post.published}}
+    <div class="{{if post.published 'show-result'}}">
+      <span class="text-muted">Published:</span> <span class="h4 text-success">{{post.published}}</span>
+    </div>
+  {{else}}
+    <span class="text-muted call-to-action">Call custom action</span>
+  {{/if}}
+</td>

tests/dummy/app/components/page-sections/examples/template.hbs

@@ -0,0 +1,24 @@
+<div id="examples">
+  <div class="container">
+    <div class="section-heading">
+      <h1 data-wow-delay=".3s" class="title wow fadeInDown" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInDown;">Live Examples</h1>
+    </div>
+
+    <div class="table-responsive">
+      <table class="table">
+        <thead>
+          <tr>
+            <th class="col-sm-4">Custom Actions</th>
+            <th class="col-sm-4">Requests</th>
+            <th class="col-sm-4">Results</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{page-sections/examples/post-action}}
+          {{page-sections/examples/burn-action}}
+          {{page-sections/examples/user-action}}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

tests/dummy/app/components/page-sections/examples/user-action/component.js

@@ -0,0 +1,55 @@
+import Ember from 'ember';
+import Faker from 'npm:faker';
+
+const { Component, computed, inject, run, observer } = Ember;
+
+export default Component.extend({
+  tagName: 'tr',
+  classNames: 'action',
+  store: inject.service(),
+  server: inject.service(),
+
+  init() {
+    this._super(...arguments);
+
+    this.get('server').server.get('/users/:id/profile', (request) => {
+      let user = this.get('store').peekRecord('user', request.params.id);
+      let data = user.serialize({ includeId: true });
+      data.data.attributes.name = Faker.name.findName();
+      // debugger;
+      return [200, { }, JSON.stringify(data)];
+    });
+  },
+
+  user: computed('store', function() {
+    return this.get('store').createRecord('user', { id: 1 });
+  }),
+
+  nameObserver: observer('user.name', function() {
+    if (this.get('user.name')) {
+      run.later(() => {
+        this.get('store').push({
+          data: {
+            id: '1',
+            type: 'user',
+            attributes: {
+              name: null
+            }
+          }
+        });
+      }, 3000);
+    }
+  }),
+
+  actions: {
+    generate(user) {
+      this.set('pending', true);
+
+      run.later(() => {
+        user.profile().then(() => {
+          this.set('pending', false);
+        });
+      }, 500);
+    }
+  }
+});

tests/dummy/app/components/page-sections/examples/user-action/template.hbs

@@ -0,0 +1,20 @@
+<td>
+  <a class="btn btn-lg btn-outline btn-ember {{if user.name 'disabled'}}" {{action 'generate' user}}>Generate Profile</a>
+</td>
+<td>
+  {{#if pending}}
+    <p class="status text-warning">Pending</p>
+  {{else}}
+    <p class="status text-success">Waiting</p>
+  {{/if}}
+  <h4 class="request">users/1/generate</h4>
+</td>
+<td>
+  {{#if user.name}}
+    <div class="{{if user.name 'show-result'}}">
+      {{ember-initials name=user.name class="img-circle"}} <span class="h4">{{user.name}}</span>
+    </div>
+  {{else}}
+    <span class="text-muted call-to-action">Call custom action</span>
+  {{/if}}
+</td>