From fd23c864cae8cc696468955d477e736b5e255f8d Mon Sep 17 00:00:00 2001 From: Chris Manson Date: Fri, 12 Apr 2019 13:00:09 +0100 Subject: [PATCH] implementing tabs interaction --- addon/components/es-tab.js | 15 +++ addon/components/es-tabs.js | 29 +++++ addon/templates/components/es-tab.hbs | 9 ++ addon/templates/components/es-tabs.hbs | 7 ++ app/components/es-tab.js | 1 + app/components/es-tabs.js | 1 + app/templates/components/es-tab.js | 1 + app/templates/components/es-tabs.js | 1 + package-lock.json | 149 +++++++++++++++++++++++++ package.json | 1 + tests/dummy/app/templates/index.hbs | 24 ++-- 11 files changed, 226 insertions(+), 12 deletions(-) create mode 100644 addon/components/es-tab.js create mode 100644 addon/components/es-tabs.js create mode 100644 addon/templates/components/es-tab.hbs create mode 100644 addon/templates/components/es-tabs.hbs create mode 100644 app/components/es-tab.js create mode 100644 app/components/es-tabs.js create mode 100644 app/templates/components/es-tab.js create mode 100644 app/templates/components/es-tabs.js diff --git a/addon/components/es-tab.js b/addon/components/es-tab.js new file mode 100644 index 00000000..8b28ea36 --- /dev/null +++ b/addon/components/es-tab.js @@ -0,0 +1,15 @@ +import Component from 'sparkles-component'; +import { action } from '@ember-decorators/object'; + +export default class EsTab extends Component { + constructor(args) { + super(); + this.tabs = args.tabs; + args.tabs.register(this); + } + + @action + click() { + this.tabs.setActive(this); + } +} diff --git a/addon/components/es-tabs.js b/addon/components/es-tabs.js new file mode 100644 index 00000000..e0bbe39e --- /dev/null +++ b/addon/components/es-tabs.js @@ -0,0 +1,29 @@ +import Component from 'sparkles-component'; +import { set } from '@ember/object'; +import { computed } from '@ember-decorators/object'; + +export default class EsTabs extends Component { + tabs = [] + + @computed() + get wormholeId() { + return `tab-wormhole-${Math.random().toString(36).substring(2)}`; + } + + register(tab){ + if(this.tabs.length === 0) { + set(tab, 'active', true); + } + this.tabs.push(tab); + } + + setActive(activeTab) { + this.tabs.forEach((tab) => { + if(tab === activeTab) { + set(tab, 'active', true); + } else { + set(tab, 'active', false); + } + }) + } +} diff --git a/addon/templates/components/es-tab.hbs b/addon/templates/components/es-tab.hbs new file mode 100644 index 00000000..e4f9aa81 --- /dev/null +++ b/addon/templates/components/es-tab.hbs @@ -0,0 +1,9 @@ +
+ {{@title}} +
+ +{{#if this.active}} + +

{{yield}}

+ +{{/if}} diff --git a/addon/templates/components/es-tabs.hbs b/addon/templates/components/es-tabs.hbs new file mode 100644 index 00000000..9bc79069 --- /dev/null +++ b/addon/templates/components/es-tabs.hbs @@ -0,0 +1,7 @@ +
+ {{yield (component 'es-tab' wormholeId=wormholeId tabs=this)}} +
+ +
+ +
diff --git a/app/components/es-tab.js b/app/components/es-tab.js new file mode 100644 index 00000000..6840f1b6 --- /dev/null +++ b/app/components/es-tab.js @@ -0,0 +1 @@ +export { default } from 'ember-styleguide/components/es-tab'; diff --git a/app/components/es-tabs.js b/app/components/es-tabs.js new file mode 100644 index 00000000..c38c86bd --- /dev/null +++ b/app/components/es-tabs.js @@ -0,0 +1 @@ +export { default } from 'ember-styleguide/components/es-tabs'; diff --git a/app/templates/components/es-tab.js b/app/templates/components/es-tab.js new file mode 100644 index 00000000..78bfe30b --- /dev/null +++ b/app/templates/components/es-tab.js @@ -0,0 +1 @@ +export { default } from 'ember-styleguide/templates/components/es-tab'; diff --git a/app/templates/components/es-tabs.js b/app/templates/components/es-tabs.js new file mode 100644 index 00000000..b88fa444 --- /dev/null +++ b/app/templates/components/es-tabs.js @@ -0,0 +1 @@ +export { default } from 'ember-styleguide/templates/components/es-tabs'; diff --git a/package-lock.json b/package-lock.json index 1c07430e..54e49d24 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7975,6 +7975,155 @@ } } }, + "ember-wormhole": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/ember-wormhole/-/ember-wormhole-0.5.5.tgz", + "integrity": "sha512-z8l3gpoKmRA2BnTwvnYRk4jKVcETKHpddsD6kpS+EJ4EfyugadFS3zUqBmRDuJhFbNP8BVBLXlbbATj+Rk1Kgg==", + "dev": true, + "requires": { + "ember-cli-babel": "^6.10.0", + "ember-cli-htmlbars": "^2.0.1" + }, + "dependencies": { + "amd-name-resolver": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/amd-name-resolver/-/amd-name-resolver-1.2.0.tgz", + "integrity": "sha512-hlSTWGS1t6/xq5YCed7YALg7tKZL3rkl7UwEZ/eCIkn8JxmM6fU6Qs/1hwtjQqfuYxlffuUcgYEm0f5xP4YKaA==", + "dev": true, + "requires": { + "ensure-posix-path": "^1.0.1" + } + }, + "babel-plugin-debug-macros": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/babel-plugin-debug-macros/-/babel-plugin-debug-macros-0.2.0.tgz", + "integrity": "sha512-Wpmw4TbhR3Eq2t3W51eBAQSdKlr+uAyF0GI4GtPfMCD12Y4cIdpKC9l0RjNTH/P9isFypSqqewMPm7//fnZlNA==", + "dev": true, + "requires": { + "semver": "^5.3.0" + } + }, + "broccoli-babel-transpiler": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/broccoli-babel-transpiler/-/broccoli-babel-transpiler-6.5.1.tgz", + "integrity": "sha512-w6GcnkxvHcNCte5FcLGEG1hUdQvlfvSN/6PtGWU/otg69Ugk8rUk51h41R0Ugoc+TNxyeFG1opRt2RlA87XzNw==", + "dev": true, + "requires": { + "babel-core": "^6.26.0", + "broccoli-funnel": "^2.0.1", + "broccoli-merge-trees": "^2.0.0", + "broccoli-persistent-filter": "^1.4.3", + "clone": "^2.0.0", + "hash-for-dep": "^1.2.3", + "heimdalljs-logger": "^0.1.7", + "json-stable-stringify": "^1.0.0", + "rsvp": "^4.8.2", + "workerpool": "^2.3.0" + } + }, + "broccoli-merge-trees": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-2.0.1.tgz", + "integrity": "sha512-WjaexJ+I8BxP5V5RNn6um/qDRSmKoiBC/QkRi79FT9ClHfldxRyCDs9mcV7mmoaPlsshmmPaUz5jdtcKA6DClQ==", + "dev": true, + "requires": { + "broccoli-plugin": "^1.3.0", + "merge-trees": "^1.0.1" + } + }, + "broccoli-persistent-filter": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz", + "integrity": "sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==", + "dev": true, + "requires": { + "async-disk-cache": "^1.2.1", + "async-promise-queue": "^1.0.3", + "broccoli-plugin": "^1.0.0", + "fs-tree-diff": "^0.5.2", + "hash-for-dep": "^1.0.2", + "heimdalljs": "^0.2.1", + "heimdalljs-logger": "^0.1.7", + "mkdirp": "^0.5.1", + "promise-map-series": "^0.2.1", + "rimraf": "^2.6.1", + "rsvp": "^3.0.18", + "symlink-or-copy": "^1.0.1", + "walk-sync": "^0.3.1" + }, + "dependencies": { + "rsvp": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz", + "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==", + "dev": true + } + } + }, + "ember-cli-babel": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/ember-cli-babel/-/ember-cli-babel-6.18.0.tgz", + "integrity": "sha512-7ceC8joNYxY2wES16iIBlbPSxwKDBhYwC8drU3ZEvuPDMwVv1KzxCNu1fvxyFEBWhwaRNTUxSCsEVoTd9nosGA==", + "dev": true, + "requires": { + "amd-name-resolver": "1.2.0", + "babel-plugin-debug-macros": "^0.2.0-beta.6", + "babel-plugin-ember-modules-api-polyfill": "^2.6.0", + "babel-plugin-transform-es2015-modules-amd": "^6.24.0", + "babel-polyfill": "^6.26.0", + "babel-preset-env": "^1.7.0", + "broccoli-babel-transpiler": "^6.5.0", + "broccoli-debug": "^0.6.4", + "broccoli-funnel": "^2.0.0", + "broccoli-source": "^1.1.0", + "clone": "^2.0.0", + "ember-cli-version-checker": "^2.1.2", + "semver": "^5.5.0" + } + }, + "ember-cli-htmlbars": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/ember-cli-htmlbars/-/ember-cli-htmlbars-2.0.5.tgz", + "integrity": "sha512-3f3PAxdnQ/fhQa8XP/3z4RLRgLHxV8j4Ln75aHbRdemOCjBa048KxL9l+acRLhCulbGQCMnLiIUIC89PAzLrcA==", + "dev": true, + "requires": { + "broccoli-persistent-filter": "^1.4.3", + "hash-for-dep": "^1.2.3", + "json-stable-stringify": "^1.0.0", + "strip-bom": "^3.0.0" + } + }, + "merge-trees": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-trees/-/merge-trees-1.0.1.tgz", + "integrity": "sha1-zL5nRWl4f53vF/1G5lJfVwC70j4=", + "dev": true, + "requires": { + "can-symlink": "^1.0.0", + "fs-tree-diff": "^0.5.4", + "heimdalljs": "^0.2.1", + "heimdalljs-logger": "^0.1.7", + "rimraf": "^2.4.3", + "symlink-or-copy": "^1.0.0" + } + }, + "rsvp": { + "version": "4.8.4", + "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.4.tgz", + "integrity": "sha512-6FomvYPfs+Jy9TfXmBpBuMWNH94SgCsZmJKcanySzgNNP6LjWxBvyLTa9KaMfDDM5oxRfrKDB0r/qeRsLwnBfA==", + "dev": true + }, + "workerpool": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-2.3.3.tgz", + "integrity": "sha512-L1ovlYHp6UObYqElXXpbd214GgbEKDED0d3sj7pRdFXjNkb2+un/AUcCkceHizO0IVI6SOGGncrcjozruCkRgA==", + "dev": true, + "requires": { + "object-assign": "4.1.1" + } + } + } + }, "emit-function": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/emit-function/-/emit-function-0.0.2.tgz", diff --git a/package.json b/package.json index 59110250..2208b782 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "ember-cli-postcss": "^4.2.0", "ember-svg-jar": "^1.2.2", "ember-truth-helpers": "^2.1.0", + "ember-wormhole": "^0.5.5", "normalize.css": "^8.0.1", "postcss-import": "^12.0.1", "postcss-preset-env": "^6.6.0", diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs index 02af29bb..e2620e32 100644 --- a/tests/dummy/app/templates/index.hbs +++ b/tests/dummy/app/templates/index.hbs @@ -31,17 +31,18 @@

Batteries are included

Ember’s out-of-the-box experience has everything you need to start building on day one, and keep shipping for years. Never wire together your own framework again.

-
-
- Build Pipeline -
-
- Routing -
-
- Data Layer -
-
+ + + + Ember CLI is the backbone of modern Ember apps. Code generators let you quickly create new components and tests. Use the local server for a development environment with Babel, fast rebuilds, auto-reloading and a test runner. Build your app for production with a single command. + + + I love me some routing + + + Let's get our data on 😎 + +
@@ -52,4 +53,3 @@

Ember CLI is the backbone of modern Ember apps. Code generators let you quickly create new components and tests. Use the local server for a development environment with Babel, fast rebuilds, auto-reloading and a test runner. Build your app for production with a single command.

-