The blue area is a sidebar named "right", rendered by \{{show-sidebar name="right"}}.
16 |
17 |
The green area (visible only on some pages) is a sidebar named "tools", rendered by a \{{#with-sidebar}} component that allows it to be composed with liquid-fire animations.
18 |
19 |
20 |
As you use the links below to switch between the three routes, each route can choose to place content into either of the sidebars by including \{{in-sidebar}}.
21 |
22 |
27 |
28 | {{outlet}}
29 |
30 |
31 |
32 | {{show-sidebar name="right"}}
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/tests/dummy/config/environment.js:
--------------------------------------------------------------------------------
1 | /* jshint node: true */
2 |
3 | module.exports = function(environment) {
4 | var ENV = {
5 | modulePrefix: 'dummy',
6 | environment: environment,
7 | baseURL: '/',
8 | locationType: 'auto',
9 | EmberENV: {
10 | FEATURES: {
11 | // Here you can enable experimental features on an ember canary build
12 | // e.g. 'with-controller': true
13 | }
14 | },
15 |
16 | APP: {
17 | // Here you can pass flags/options to your application instance
18 | // when it is created
19 | }
20 | };
21 |
22 | if (environment === 'development') {
23 | // ENV.APP.LOG_RESOLVER = true;
24 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
25 | // ENV.APP.LOG_TRANSITIONS = true;
26 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
27 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
28 | }
29 |
30 | if (environment === 'test') {
31 | // Testem prefers this...
32 | ENV.baseURL = '/';
33 | ENV.locationType = 'none';
34 |
35 | // keep test console output quieter
36 | ENV.APP.LOG_ACTIVE_GENERATION = false;
37 | ENV.APP.LOG_VIEW_LOOKUPS = false;
38 |
39 | ENV.APP.rootElement = '#ember-testing';
40 | }
41 |
42 | if (environment === 'production') {
43 | ENV.baseURL = '/ember-sidebars';
44 | ENV.locationType = 'hash';
45 | }
46 |
47 | return ENV;
48 | };
49 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ember-sidebars",
3 | "version": "0.2.2",
4 | "description": "Composable sidebar management.",
5 | "directories": {
6 | "doc": "doc",
7 | "test": "tests"
8 | },
9 | "scripts": {
10 | "build": "ember build",
11 | "start": "ember server",
12 | "test": "ember try:testall"
13 | },
14 | "repository": "https://github.com/ef4/ember-sidebars",
15 | "engines": {
16 | "node": ">= 0.10.0"
17 | },
18 | "author": "Edward Faulkner ",
19 | "license": "MIT",
20 | "devDependencies": {
21 | "broccoli-asset-rev": "^2.2.0",
22 | "ember-ajax": "0.7.1",
23 | "ember-cli": "2.4.1",
24 | "ember-cli-app-version": "^1.0.0",
25 | "ember-cli-dependency-checker": "^1.2.0",
26 | "ember-cli-deploy": "0.6.0",
27 | "ember-cli-deploy-build": "0.1.1",
28 | "ember-cli-deploy-git": "0.1.0",
29 | "ember-cli-htmlbars-inline-precompile": "^0.3.1",
30 | "ember-cli-inject-live-reload": "^1.3.1",
31 | "ember-cli-qunit": "^1.2.1",
32 | "ember-cli-release": "0.2.8",
33 | "ember-cli-sri": "^2.1.0",
34 | "ember-cli-uglify": "^1.2.0",
35 | "ember-code-snippet": "1.2.1",
36 | "ember-data": "^2.4.0",
37 | "ember-disable-prototype-extensions": "^1.1.0",
38 | "ember-disable-proxy-controllers": "^1.0.1",
39 | "ember-export-application-global": "^1.0.4",
40 | "ember-load-initializers": "^0.5.0",
41 | "ember-resolver": "^2.0.3",
42 | "ember-try": "^0.1.2",
43 | "liquid-fire": "0.23.0",
44 | "loader.js": "^4.0.0"
45 | },
46 | "keywords": [
47 | "ember-addon"
48 | ],
49 | "dependencies": {
50 | "ember-cli-babel": "^5.1.5",
51 | "ember-cli-htmlbars": "^1.0.1"
52 | },
53 | "ember-addon": {
54 | "configPath": "tests/dummy/config",
55 | "demoURL": "http://ef4.github.io/ember-sidebars/"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/tests/unit/services/ember-sidebars-test.js:
--------------------------------------------------------------------------------
1 | import { moduleFor, test } from 'ember-qunit';
2 | import run from 'ember-runloop';
3 |
4 | moduleFor('service:ember-sidebars', 'Unit | Service | ember sidebars', {
5 | });
6 |
7 | test('it exposes currently active component', function(assert) {
8 | let service = this.subject();
9 | let component = {};
10 |
11 | run(() => {
12 | service.show('source', 'my-sidebar', component);
13 | });
14 |
15 | assert.equal(service.get('actives.my-sidebar.component'), component);
16 | });
17 |
18 | test('it removes cleared component', function(assert) {
19 | let service = this.subject();
20 | let component = {};
21 |
22 | run(() => {
23 | service.show('source', 'my-sidebar', component);
24 | });
25 |
26 | run(() => {
27 | service.clear('source');
28 | });
29 |
30 | assert.equal(service.get('actives.my-sidebar.component'), undefined);
31 | });
32 |
33 | test('last shown source wins', function(assert) {
34 | let service = this.subject();
35 | let componentA = {};
36 | let componentB = {};
37 |
38 | run(() => {
39 | service.show('sourceA', 'my-sidebar', componentA);
40 | service.show('sourceB', 'my-sidebar', componentB);
41 | });
42 |
43 | assert.equal(service.get('actives.my-sidebar.component'), componentB);
44 |
45 | run(() => {
46 | service.show('sourceB', 'my-sidebar', componentB);
47 | service.show('sourceA', 'my-sidebar', componentA);
48 | });
49 |
50 | assert.equal(service.get('actives.my-sidebar.component'), componentA);
51 |
52 | });
53 |
54 | test('earlier shown source takes back over when later source clears', function(assert) {
55 | let service = this.subject();
56 | let componentA = {};
57 | let componentB = {};
58 |
59 | run(() => {
60 | service.show('sourceA', 'my-sidebar', componentA);
61 | service.show('sourceB', 'my-sidebar', componentB);
62 | });
63 |
64 | assert.equal(service.get('actives.my-sidebar.component'), componentB);
65 |
66 | run(() => {
67 | service.clear('sourceB');
68 | });
69 |
70 | assert.equal(service.get('actives.my-sidebar.component'), componentA);
71 |
72 | });
73 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # This addon has been superceded by [ember-elsewhere](https://github.com/ef4/ember-elsewhere)
2 |
3 | Because it's really not just about sidebars, so it needed some better naming.
4 |
5 | # ember-sidebars
6 |
7 | [![NPM][npm-badge-img]][npm-badge-link]
8 | [![Ember Observer Score][ember-observer-badge]][ember-observer-url]
9 | ![Ember Version][ember-version]
10 |
11 | This addon makes it easy to manage sidebars, toolbars, or any piece of DOM that you want to lift outside your normal route hiearchy.
12 |
13 | It is similar to [ember-wormhole](https://github.com/yapplabs/ember-wormhole), but is more suitable when your target is your own Ember component (as opposed to arbitrary, potentially foreign DOM).
14 |
15 | The best documentation is the sample application in `tests/dummy`, which is also running at [http://ef4.github.io/ember-sidebars/](http://ef4.github.io/ember-sidebars/).
16 |
17 | ## Install
18 |
19 | ```no-highlight
20 | ember install ember-sidebars
21 | ```
22 |
23 | ## Components
24 |
25 | Create a sidebar named "my-right-sidebar":
26 |
27 | ```hbs
28 | {{show-sidebar name="my-right-sidebar"}}
29 | ```
30 |
31 | From elsewhere, declare which component should render in the sidebar -- complete with bound inputs and actions:
32 |
33 |
34 | ```hbs
35 | {{in-sidebar name="my-right-sidebar" show=(component "cool-thing" model=model launch=(action "launchIt"))}}
36 | ```
37 |
38 | For fancier behaviors, you can use `{{#with-sidebar}}` instead of `{{show-sidebar}}` which gives you an opportunity to extend the sidebar's behavior in arbitrary ways. For example, this lets your sidebar animate as its content changes:
39 |
40 | ```hbs
41 | {{#with-sidebar name="my-right-sidebar" as |sidebar|}}
42 |
47 | {{/with-sidebar}}
48 | ```
49 |
50 | ember-sidebars is also a great way to do modals, since modals are just another thing that you want to render "elsewhere" in the DOM. [Here is a gist with an example.](https://gist.github.com/ef4/0bcc6f7c99dafffdf6cc)
51 |
52 | ## Passing additional state through to sidebar
53 |
54 | Sometime you may want to pass an action or value into the sidebar that is accessible outside the closed-over component. There is an optional `hooks` argument for that.
55 |
56 | ```hbs
57 | {{in-sidebar name="modal" component=(component "warning-message") hooks=(hash onOutsideClick=(action "close"))}}
58 | ```
59 |
60 | ```hbs
61 | {{#with-sidebar name="modal" as |modalContent hooks|}}
62 |
63 |
64 | {{component modalContent}}
65 |
66 |
67 | {{/with-sidebar}}
68 | ```
69 |
70 | A more comprehensive example of the above modal behavior [is available here](https://gist.github.com/ef4/0bcc6f7c99dafffdf6cc).
71 |
72 | ## Installation
73 |
74 | * `git clone` this repository
75 | * `npm install`
76 | * `bower install`
77 |
78 | ## Running
79 |
80 | * `ember server`
81 | * Visit your app at http://localhost:4200.
82 |
83 | ## Running Tests
84 |
85 | * `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
86 | * `ember test`
87 | * `ember test --server`
88 |
89 | ## Building
90 |
91 | * `ember build`
92 |
93 | For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
94 |
95 | [npm-badge-img]: https://badge.fury.io/js/ember-sidebars.svg
96 | [npm-badge-link]: http://badge.fury.io/js/ember-sidebars
97 | [ember-observer-badge]: http://emberobserver.com/badges/ember-sidebars.svg
98 | [ember-observer-url]: http://emberobserver.com/addons/ember-sidebars
99 | [ember-version]: https://embadge.io/v1/badge.svg?start=1.13.0
100 |
--------------------------------------------------------------------------------