From 92356562c4c09e36dd9a93aa8decffbf43ea5716 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 12 Jul 2015 22:42:26 -0400 Subject: [PATCH 01/51] Upgraded to ember-cli version 1.13.1 --- .npmignore | 1 + .watchmanconfig | 3 +++ Brocfile.js | 24 ------------------------ bower.json | 12 ++++++------ ember-cli-build.js | 20 ++++++++++++++++++++ package.json | 17 ++++++++++------- tests/.jshintrc | 5 +++-- tests/helpers/start-app.js | 1 - tests/index.html | 16 ---------------- tests/test-helper.js | 2 +- 10 files changed, 44 insertions(+), 57 deletions(-) create mode 100644 .watchmanconfig delete mode 100644 Brocfile.js create mode 100644 ember-cli-build.js diff --git a/.npmignore b/.npmignore index 49996f5a3..d522ca2b7 100644 --- a/.npmignore +++ b/.npmignore @@ -10,5 +10,6 @@ dist/ .npmignore **/.gitkeep bower.json +ember-cli-build.js Brocfile.js testem.json diff --git a/.watchmanconfig b/.watchmanconfig new file mode 100644 index 000000000..5e9462c20 --- /dev/null +++ b/.watchmanconfig @@ -0,0 +1,3 @@ +{ + "ignore_dirs": ["tmp"] +} diff --git a/Brocfile.js b/Brocfile.js deleted file mode 100644 index 8c39c9939..000000000 --- a/Brocfile.js +++ /dev/null @@ -1,24 +0,0 @@ -/* jshint node: true */ -/* global require, module */ - -var EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); - -var app = new EmberAddon(); - -// Use `app.import` to add additional libraries to the generated -// output files. -// -// If you need to use different assets in different -// environments, specify an object as the first parameter. That -// object's keys should be the environment name and the values -// should be the asset to use in that environment. -// -// If the library that you are including contains AMD or ES6 -// modules that you would like to import into your application -// please specify an object with the list of modules as keys -// along with the exports of each module as its value. - -app.import('bower_components/semantic-ui/dist/semantic.css'); -app.import('bower_components/semantic-ui/dist/semantic.js'); - -module.exports = app.toTree(); diff --git a/bower.json b/bower.json index 9d1d3a256..883850fb2 100644 --- a/bower.json +++ b/bower.json @@ -1,19 +1,19 @@ { "name": "semantic-ui-ember", "dependencies": { - "ember": "1.12.1", + "ember": "1.13.3", "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", - "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.4", - "ember-qunit": "0.3.3", + "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5", + "ember-qunit": "0.4.1", "ember-qunit-notifications": "0.0.7", - "ember-resolver": "~0.1.15", + "ember-resolver": "~0.1.18", "jquery": "^1.11.1", "loader.js": "ember-cli/loader.js#3.2.0", "qunit": "~1.17.1" }, "devDependencies": { - "ember-data": "1.0.0-beta.17", - "semantic-ui": "~1.12.3" + "ember-data": "1.13.5", + "semantic-ui": "^1.0" } } diff --git a/ember-cli-build.js b/ember-cli-build.js new file mode 100644 index 000000000..6a4015510 --- /dev/null +++ b/ember-cli-build.js @@ -0,0 +1,20 @@ +/* global require, module */ +var EmberApp = require('ember-cli/lib/broccoli/ember-addon'); + +module.exports = function(defaults) { + var app = new EmberApp(defaults, { + // Add options here + }); + + /* + This build file specifes the options for the dummy test app of this + addon, located in `/tests/dummy` + This build file does *not* influence how the addon or the app using it + behave. You most likely want to be modifying `./index.js` or app's build file + */ + + app.import('bower_components/semantic-ui/dist/semantic.css'); + app.import('bower_components/semantic-ui/dist/semantic.js'); + + return app.toTree(); +}; diff --git a/package.json b/package.json index 1b20240f0..f013fecc9 100644 --- a/package.json +++ b/package.json @@ -34,19 +34,22 @@ "license": "MIT", "devDependencies": { "broccoli-asset-rev": "^2.0.2", - "ember-cli": "0.2.5", - "ember-cli-app-version": "0.3.3", + "ember-cli": "1.13.1", + "ember-cli-app-version": "0.4.0", "ember-cli-content-security-policy": "0.4.0", "ember-cli-dependency-checker": "^1.0.0", - "ember-cli-htmlbars": "0.7.6", - "ember-cli-ic-ajax": "0.1.1", + "ember-cli-htmlbars": "0.7.9", + "ember-cli-htmlbars-inline-precompile": "^0.1.1", + "ember-cli-ic-ajax": "0.2.1", "ember-cli-inject-live-reload": "^1.3.0", - "ember-cli-qunit": "0.3.13", + "ember-cli-qunit": "0.3.15", + "ember-cli-release": "0.2.3", "ember-cli-uglify": "^1.0.1", - "ember-disable-proxy-controllers": "^0.7.0", + "ember-data": "1.13.5", + "ember-disable-proxy-controllers": "^1.0.0", "ember-export-application-global": "^1.0.2", "ember-disable-prototype-extensions": "^1.0.0", - "ember-try": "0.0.4" + "ember-try": "0.0.6" }, "keywords": [ "ember-addon" diff --git a/tests/.jshintrc b/tests/.jshintrc index ea8b88f62..6ec0b7c15 100644 --- a/tests/.jshintrc +++ b/tests/.jshintrc @@ -26,7 +26,7 @@ "node": false, "browser": false, "boss": true, - "curly": false, + "curly": true, "debug": false, "devel": false, "eqeqeq": true, @@ -47,5 +47,6 @@ "strict": false, "white": false, "eqnull": true, - "esnext": true + "esnext": true, + "unused": true } diff --git a/tests/helpers/start-app.js b/tests/helpers/start-app.js index 16cc7c398..0f7aab1af 100644 --- a/tests/helpers/start-app.js +++ b/tests/helpers/start-app.js @@ -1,6 +1,5 @@ import Ember from 'ember'; import Application from '../../app'; -import Router from '../../router'; import config from '../../config/environment'; export default function startApp(attrs) { diff --git a/tests/index.html b/tests/index.html index 4112b61b4..8fea6fe70 100644 --- a/tests/index.html +++ b/tests/index.html @@ -13,22 +13,6 @@ - {{content-for 'head-footer'}} {{content-for 'test-head-footer'}} diff --git a/tests/test-helper.js b/tests/test-helper.js index 804a7b2e3..e6cfb70fe 100644 --- a/tests/test-helper.js +++ b/tests/test-helper.js @@ -3,4 +3,4 @@ import { setResolver } from 'ember-qunit'; -setResolver(resolver); \ No newline at end of file +setResolver(resolver); From 49df5b685c65516922f4e58b8f74edb8163bc8c2 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 12 Jul 2015 22:43:00 -0400 Subject: [PATCH 02/51] Added configuration options for ember-cli-build/Brocfile so that css, javascript or font loading can be disabled --- index.js | 56 +++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 41 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 622e596e6..3abba059d 100644 --- a/index.js +++ b/index.js @@ -1,23 +1,49 @@ /* jshint node: true */ 'use strict'; +var defaults = { + css: true, + javascript: true, + fonts: true +}; + +var getWithDefault = function(property, default_property) { + if (property === null || property === undefined) { + return default_property; + } + + return property; +} + module.exports = { name: 'semantic-ui-ember', - included: function (app) { - app.import({ - development: 'bower_components/semantic-ui/dist/semantic.css', - production: 'bower_components/semantic-ui/dist/semantic.min.css' - }); - - app.import({ - development: 'bower_components/semantic-ui/dist/semantic.js', - production: 'bower_components/semantic-ui/dist/semantic.min.js' - }); - - var fontExtensions = ['.eot','.otf','.svg','.ttf','.woff','.woff2']; - for (var i = fontExtensions.length - 1; i >= 0; i--) { - app.import('bower_components/semantic-ui/dist/themes/default/assets/fonts/icons'+fontExtensions[i], { destDir: 'assets/themes/default/assets/fonts' }); - }; + included: function (app, x) { + var options = (app && app.options['SemanticUI']) || {}; + + if (getWithDefault(options['css'], defaults['css'])) { + app.import({ + development: 'bower_components/semantic-ui/dist/semantic.css', + production: 'bower_components/semantic-ui/dist/semantic.min.css' + }); + } + + if (getWithDefault(options['javascript'], defaults['javascript'])) { + console.log('loading javascript'); + app.import({ + development: 'bower_components/semantic-ui/dist/semantic.js', + production: 'bower_components/semantic-ui/dist/semantic.min.js' + }); + } else { + + } + + if (getWithDefault(options['fonts'], defaults['fonts'])) { + var fontExtensions = ['.eot','.otf','.svg','.ttf','.woff','.woff2']; + var fontOptions = { destDir: 'assets/themes/default/assets/fonts' }; + for (var i = fontExtensions.length - 1; i >= 0; i--) { + app.import('bower_components/semantic-ui/dist/themes/default/assets/fonts/icons'+fontExtensions[i], fontOptions); + }; + } } }; From dd24c621ab7c72a5c862a61b719423927cda7e6e Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 12 Jul 2015 22:55:03 -0400 Subject: [PATCH 03/51] Removed x and console.log --- index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.js b/index.js index 3abba059d..e268eac5d 100644 --- a/index.js +++ b/index.js @@ -18,7 +18,7 @@ var getWithDefault = function(property, default_property) { module.exports = { name: 'semantic-ui-ember', - included: function (app, x) { + included: function (app) { var options = (app && app.options['SemanticUI']) || {}; if (getWithDefault(options['css'], defaults['css'])) { @@ -29,7 +29,6 @@ module.exports = { } if (getWithDefault(options['javascript'], defaults['javascript'])) { - console.log('loading javascript'); app.import({ development: 'bower_components/semantic-ui/dist/semantic.js', production: 'bower_components/semantic-ui/dist/semantic.min.js' From aff9e299ebbf111254074fc76a7fee02348ab22e Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Tue, 21 Jul 2015 09:12:49 -0400 Subject: [PATCH 04/51] Upgraded to Semantic 2.0 Added a images option to serve flags.png Updated the environment contentSecurityPolicy --- bower.json | 2 +- index.js | 8 +++++++- tests/dummy/config/environment.js | 10 ++++++++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 883850fb2..f05b27f1b 100644 --- a/bower.json +++ b/bower.json @@ -14,6 +14,6 @@ }, "devDependencies": { "ember-data": "1.13.5", - "semantic-ui": "^1.0" + "semantic-ui": "^2.0" } } diff --git a/index.js b/index.js index e268eac5d..8b24d4198 100644 --- a/index.js +++ b/index.js @@ -4,7 +4,8 @@ var defaults = { css: true, javascript: true, - fonts: true + fonts: true, + images: true }; var getWithDefault = function(property, default_property) { @@ -37,6 +38,11 @@ module.exports = { } + if (getWithDefault(options['images'], defaults['images'])) { + var imageOptions = { destDir: 'assets/themes/default/assets/images' }; + app.import('bower_components/semantic-ui/dist/themes/default/assets/images/flags.png', imageOptions); + } + if (getWithDefault(options['fonts'], defaults['fonts'])) { var fontExtensions = ['.eot','.otf','.svg','.ttf','.woff','.woff2']; var fontOptions = { destDir: 'assets/themes/default/assets/fonts' }; diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js index c59bcd538..8603267f4 100644 --- a/tests/dummy/config/environment.js +++ b/tests/dummy/config/environment.js @@ -13,6 +13,16 @@ module.exports = function(environment) { } }, + contentSecurityPolicy: { + 'default-src': "*", + 'script-src': "'self' 'unsafe-inline' *", + 'font-src': "*", + 'connect-src': "*", + 'img-src': "*", + 'style-src': "'self' 'unsafe-inline' *", + 'media-src': "*" + }, + APP: { // Here you can pass flags/options to your application instance // when it is created From 1d7319d5f9e2bfc51111701580ad64069e3717a3 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Tue, 21 Jul 2015 09:21:45 -0400 Subject: [PATCH 05/51] Simplified dropdown to a small shim on top of semantic-ui and removed the inheritance from Ember.Select The dropdown template will need to be specified explicitly now but it gives more control to building out the html exactly how you want it --- addon/components/ui-dropdown-item.js | 24 ---- addon/components/ui-dropdown.js | 40 +++++-- app/templates/components/ui-dropdown.hbs | 21 +--- .../dummy/app/controllers/modules/dropdown.js | 7 ++ .../dummy/app/templates/modules/dropdown.hbs | 87 ++++++++++++--- .../components/ui-dropdown-test.js | 104 ++++++++++++++++++ 6 files changed, 211 insertions(+), 72 deletions(-) delete mode 100644 addon/components/ui-dropdown-item.js create mode 100644 tests/integration/components/ui-dropdown-test.js diff --git a/addon/components/ui-dropdown-item.js b/addon/components/ui-dropdown-item.js deleted file mode 100644 index e81160764..000000000 --- a/addon/components/ui-dropdown-item.js +++ /dev/null @@ -1,24 +0,0 @@ -import Ember from 'ember'; - -export default Ember.SelectOption.extend({ - tagName: 'div', - classNames: 'item', - - bindData: Ember.on('didInsertElement', function() { - var valuePath = this.get('valuePath'); - - if (!valuePath) { - return; - } - - if (this.$() == null) { - return; - } - - this.$().data('value', this.get(valuePath)); - }), - - unbindData: Ember.on('willDestroyElement', function() { - this.$().removeData('value'); - }) -}); diff --git a/addon/components/ui-dropdown.js b/addon/components/ui-dropdown.js index 542b5b636..9aaecb35c 100644 --- a/addon/components/ui-dropdown.js +++ b/addon/components/ui-dropdown.js @@ -1,28 +1,44 @@ import Ember from 'ember'; import Base from '../mixins/base'; import DataAttributes from '../mixins/data-attributes'; -import Item from './ui-dropdown-item'; -export default Ember.Select.extend(Base, DataAttributes, { +export default Ember.Component.extend(Base, DataAttributes, { classNames: ['ui', 'dropdown'], module: 'dropdown', tagName: 'div', - defaultTemplate: null, - - optionView: Item, - - groupedView: null, - groupedContent: null, initialize: Ember.on('didInsertElement', function() { var value = this.get('value'); if (typeof value !== "undefined" && value !== null) { this.execute('set selected', value); } + }), + + /** + When `multiple` is `false`, the element of `content` that is currently + selected, if any. + When `multiple` is `true`, an array of such elements. + @property selection + @type Object or Array + @default null + */ + selection: null, + + /** + In single selection mode (when `multiple` is `false`), value can be used to + get the current selection's value or set the selection by its value. + It is not currently supported in multiple selection mode. + @property value + @type String + @default null + */ + value: Ember.computed('selection', { + get(/* key */) { + return this.get('selection'); + }, - var placeholder = this.get('prompt'); - if (typeof placeholder !== "undefined" && placeholder !== null) { - this.$().data('placeholderText', placeholder); + set(key, value) { + return value; } }), @@ -34,7 +50,7 @@ export default Ember.Select.extend(Base, DataAttributes, { // https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/dropdown.js#L85 value = $element.data('value'); } - return this.set('value', value); + return this.set('selection', value); }, onUpdate: Ember.observer('value', function() { diff --git a/app/templates/components/ui-dropdown.hbs b/app/templates/components/ui-dropdown.hbs index dd6360fe4..889d9eead 100644 --- a/app/templates/components/ui-dropdown.hbs +++ b/app/templates/components/ui-dropdown.hbs @@ -1,20 +1 @@ -
{{view.prompt}}
-{{#if view.icon}} - -{{else}} - -{{/if}} -
- {{#if view.optionGroupPath}} - {{#each view.groupedContent as |group|}} - {{view view.groupView content=group.content label=group.label}} - {{/each}} - {{else}} - {{#each view.content as |item|}} - {{view view.optionView content=item valuePath=view.optionValuePath}} - {{/each}} - {{/if}} -
-{{#if view.template}} - {{yield}} -{{/if}} +{{yield}} diff --git a/tests/dummy/app/controllers/modules/dropdown.js b/tests/dummy/app/controllers/modules/dropdown.js index c89945287..66a2df6e5 100644 --- a/tests/dummy/app/controllers/modules/dropdown.js +++ b/tests/dummy/app/controllers/modules/dropdown.js @@ -11,5 +11,12 @@ export default Ember.Controller.extend({ genders: [ { id: 1, text: 'Male' }, { id: 0, text: 'Female' } + ], + + country: null, + countries: [ + { iso2: 'us', name: 'United States' }, + { iso2: 'ca', name: 'Canada' }, + { iso2: 'mx', name: 'Mexico' } ] }); diff --git a/tests/dummy/app/templates/modules/dropdown.hbs b/tests/dummy/app/templates/modules/dropdown.hbs index c7daa3cb0..eb22ed175 100644 --- a/tests/dummy/app/templates/modules/dropdown.hbs +++ b/tests/dummy/app/templates/modules/dropdown.hbs @@ -1,20 +1,75 @@ -

- Dropdown -
A dropdown
-

+
+
+
+

+ Dropdown +
A dropdown
+

-{{ui-dropdown content=categories prompt="Shop"}} + {{ui-dropdown content=categories prompt="Shop"}} +
+
-
+
+
+
-

- Selection -
A dropdown can be used to select between choices in a form
-

+
+
+

+ Selection +
A dropdown can be used to select between choices in a form
+

-{{ui-dropdown class="selection" - content=genders - value=gender - prompt="Gender" - optionLabelPath="content.text" - optionValuePath="content.id"}} + {{#ui-dropdown class="selection" value=gender}} +
Gender
+ +
+ {{#each genders as |gender|}} +
+ {{gender.text}} +
+ {{/each}} +
+ {{/ui-dropdown}} +
+
+
+
+ + {{input value=gender readonly="true"}} +
+
+
+
+ +
+
+

+ Multi Select +
A dropdown can be used to select between choices in a form
+

+ + {{#ui-dropdown class="fluid multiple selection" selection=country}} + +
Select Country
+
+ {{#each countries as |country|}} +
+ + {{country.name}} +
+ {{/each}} +
+ {{/ui-dropdown}} +
+
+
+
+ + {{input value=country readonly="true"}} +
+
+
+
+
diff --git a/tests/integration/components/ui-dropdown-test.js b/tests/integration/components/ui-dropdown-test.js new file mode 100644 index 000000000..a0c7b4225 --- /dev/null +++ b/tests/integration/components/ui-dropdown-test.js @@ -0,0 +1,104 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui dropdown', { + integration: true +}); + +test('it renders from an array', function(assert) { + assert.expect(3); + + this.set('people', [ "Sherlock Homes", "Patrick Bateman" ]); + this.render(hbs` + {{#ui-dropdown selection=value}} +
+ {{#each people as |person|}} +
{{person}}
+ {{/each}} +
+ {{/ui-dropdown}} + `); + + assert.equal(this.$('.item').length, 2); + assert.equal(this.get('value'), undefined); + + this.$(".menu .item[data-value='Sherlock Homes']").click(); + assert.equal(this.get('value'), 'Sherlock Homes'); +}); + +test('it renders from an object array', function(assert) { + assert.expect(3); + + this.set('people', [ + { id: 1, name: "Sherlock Homes" }, + { id: 2, name: "Patrick Bateman" } + ]); + + this.render(hbs` + {{#ui-dropdown selection=value}} +
+ {{#each people as |person|}} +
{{person.name}}
+ {{/each}} +
+ {{/ui-dropdown}} + `); + + assert.equal(this.$('.item').length, 2); + assert.equal(this.get('value'), undefined); + + this.$(".menu .item[data-value=1]").click(); + assert.equal(this.get('value'), 1); +}); + +test('it renders with an option selected', function(assert) { + assert.expect(3); + + this.set('people', [ + { id: 1, name: "Sherlock Homes" }, + { id: 2, name: "Patrick Bateman" } + ]); + + this.set('value', 2); + this.render(hbs` + {{#ui-dropdown selection=value}} +
+ {{#each people as |person|}} +
{{person.name}}
+ {{/each}} +
+ {{/ui-dropdown}} + `); + + assert.equal(this.$('.item').length, 2); + assert.equal(this.get('value'), 2); + + this.$(".menu .item[data-value=1]").click(); + assert.equal(this.get('value'), 1); +}); + +test('it renders multiple', function(assert) { + assert.expect(3); + + this.set('people', [ + { id: 1, name: "Sherlock Homes" }, + { id: 2, name: "Patrick Bateman" } + ]); + + this.render(hbs` + {{#ui-dropdown class='multiple' selection=value}} +
+ {{#each people as |person|}} +
{{person.name}}
+ {{/each}} +
+ {{/ui-dropdown}} + `); + + assert.equal(this.$('.item').length, 2); + assert.equal(this.get('value'), undefined); + + this.$(".menu .item[data-value=1]").click(); + this.$(".menu .item[data-value=2]").click(); + assert.equal(this.get('value'), '1,2'); +}); From e601418445816c2cf6e8edbce3009e2ec98ada33 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 14:57:07 -0400 Subject: [PATCH 06/51] Upgraded to ember-cli 1.13.8 --- bower.json | 14 ++++++-------- package.json | 27 ++++++++++++++------------- 2 files changed, 20 insertions(+), 21 deletions(-) diff --git a/bower.json b/bower.json index f05b27f1b..81cdbf519 100644 --- a/bower.json +++ b/bower.json @@ -1,19 +1,17 @@ { "name": "semantic-ui-ember", "dependencies": { - "ember": "1.13.3", + "ember": "1.13.7", "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", + "ember-data": "1.13.8", "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5", - "ember-qunit": "0.4.1", + "ember-qunit": "0.4.9", "ember-qunit-notifications": "0.0.7", "ember-resolver": "~0.1.18", - "jquery": "^1.11.1", - "loader.js": "ember-cli/loader.js#3.2.0", - "qunit": "~1.17.1" - }, - "devDependencies": { - "ember-data": "1.13.5", + "jquery": "^1.11.3", + "loader.js": "ember-cli/loader.js#3.2.1", + "qunit": "~1.18.0", "semantic-ui": "^2.0" } } diff --git a/package.json b/package.json index f013fecc9..7bf4f2d3c 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "test": "tests" }, "scripts": { - "start": "ember server", "build": "ember build", + "start": "ember server", "test": "ember try:testall" }, "repository": { @@ -28,26 +28,27 @@ "url": "git://github.com/Semantic-Org/Semantic-UI-Ember.git" }, "engines": { - "node": ">= 0.12.0" + "node": ">= 0.10.0" }, "author": "", "license": "MIT", "devDependencies": { - "broccoli-asset-rev": "^2.0.2", - "ember-cli": "1.13.1", - "ember-cli-app-version": "0.4.0", + "broccoli-asset-rev": "^2.1.2", + "ember-cli": "1.13.8", + "ember-cli-app-version": "0.5.0", "ember-cli-content-security-policy": "0.4.0", - "ember-cli-dependency-checker": "^1.0.0", + "ember-cli-dependency-checker": "^1.0.1", "ember-cli-htmlbars": "0.7.9", - "ember-cli-htmlbars-inline-precompile": "^0.1.1", + "ember-cli-htmlbars-inline-precompile": "^0.2.0", "ember-cli-ic-ajax": "0.2.1", - "ember-cli-inject-live-reload": "^1.3.0", - "ember-cli-qunit": "0.3.15", + "ember-cli-inject-live-reload": "^1.3.1", + "ember-cli-qunit": "^1.0.0", "ember-cli-release": "0.2.3", - "ember-cli-uglify": "^1.0.1", - "ember-data": "1.13.5", + "ember-cli-sri": "^1.0.3", + "ember-cli-uglify": "^1.2.0", + "ember-data": "1.13.8", "ember-disable-proxy-controllers": "^1.0.0", - "ember-export-application-global": "^1.0.2", + "ember-export-application-global": "^1.0.3", "ember-disable-prototype-extensions": "^1.0.0", "ember-try": "0.0.6" }, @@ -55,7 +56,7 @@ "ember-addon" ], "dependencies": { - "ember-cli-babel": "^5.0.0" + "ember-cli-babel": "^5.1.3" }, "ember-addon": { "configPath": "tests/dummy/config" From 80cc501f16cb24308352b2692d68632cb763d0f3 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 14:57:27 -0400 Subject: [PATCH 07/51] Using class instead of className for the accordion since it's overriding instead of extending the actual list of class names --- tests/dummy/app/templates/modules/accordion.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/dummy/app/templates/modules/accordion.hbs b/tests/dummy/app/templates/modules/accordion.hbs index 85101e6ac..55802eebc 100644 --- a/tests/dummy/app/templates/modules/accordion.hbs +++ b/tests/dummy/app/templates/modules/accordion.hbs @@ -1,6 +1,6 @@

Accordion

-{{#ui-accordion classNames="styled"}} +{{#ui-accordion class="styled"}}
Semantic UI
From 21966b99c202b0f48764aa613930967b0c2239ed Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 20:08:43 -0400 Subject: [PATCH 08/51] Removed the View/Controller Modal and replaced it with a Component version that is closer to how Semantic has it defined - Dropped ApplicationRoute - Dropped Modal Mixin - Dropped UiModal View - Added ui-modal Component --- addon/components/ui-modal.js | 136 ++++++++++++++++ addon/mixins/application-route.js | 58 ------- addon/mixins/modal.js | 68 -------- addon/views/ui-modal.js | 5 - app/components/ui-modal.js | 2 + app/templates/components/ui-modal.hbs | 1 + app/views/ui-modal.js | 2 - tests/dummy/app/components/inbox-modal.js | 17 ++ tests/dummy/app/controllers/modules/modal.js | 20 +++ tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 2 +- .../app/templates/components/inbox-modal.hbs | 24 +++ tests/dummy/app/templates/modules/modal.hbs | 47 ++++++ tests/integration/components/ui-modal-test.js | 153 ++++++++++++++++++ tests/test-helper.js | 2 + 15 files changed, 404 insertions(+), 134 deletions(-) create mode 100644 addon/components/ui-modal.js delete mode 100644 addon/mixins/application-route.js delete mode 100644 addon/mixins/modal.js delete mode 100644 addon/views/ui-modal.js create mode 100644 app/components/ui-modal.js create mode 100644 app/templates/components/ui-modal.hbs delete mode 100644 app/views/ui-modal.js create mode 100644 tests/dummy/app/components/inbox-modal.js create mode 100644 tests/dummy/app/controllers/modules/modal.js create mode 100644 tests/dummy/app/templates/components/inbox-modal.hbs create mode 100644 tests/dummy/app/templates/modules/modal.hbs create mode 100644 tests/integration/components/ui-modal-test.js diff --git a/addon/components/ui-modal.js b/addon/components/ui-modal.js new file mode 100644 index 000000000..112d0c9f4 --- /dev/null +++ b/addon/components/ui-modal.js @@ -0,0 +1,136 @@ +import Ember from 'ember'; +import Base from '../mixins/base'; +// import DataAttributes from '../mixins/data-attributes'; + +export default Ember.Component.extend(Base, { + module: 'modal', + classNames: [ 'ui', 'modal' ], + detachable: false, + name: null, + + /** + Check that the name parameter was passed in. The name is required and must + be unique per modal + + @name String + */ + init: function() { + this._super(); + + if (!this.get('name')) { + return Ember.Logger.error('All modals must include a name so they can be triggered properly'); + } + }, + + /** + Initialize the events that are called from the controller + */ + createEvent: Ember.on('didInsertElement', function() { + var component = this; + var target = this.get('targetObject'); + if (typeof target === "undefined") { + return; + } + + if (Ember.testing) { + target.context.on('showModal', function(name) { + return component.showModal.apply(component, [ name ]); + }); + return; + } + + if (typeof target.on !== "function") { + return; + } + + target.on('showModal', this, component.showModal); + }), + + /** + Destroy any event handlers that we create upon initialization + */ + destroyEvent: Ember.on('willClearRender', function() { + var target = this.get('targetObject'); + if (typeof target === "undefined") { + return; + } + + if (Ember.testing) { + return; + } + + if (typeof target.on !== "function") { + return; + } + + target.off('showModal', this, this.showModal); + }), + + /** + Callback that is fired from the Controller when we want to open a modal + */ + showModal: function(name) { + var _this = this; + + return new Ember.RSVP.Promise(function(resolve, reject) { + // This will trigger on all modals so we + // have to compare the name. + if (name !== _this.get('name')) { + reject(); + return; + } + + _this.execute('show', function() { + resolve(); + }); + }); + }, + + /** + Passing approve through to the calling controller if it was passed in + */ + onApprove: function() { + return this.triggerPassedInEvent('approve', [ this.get('name') ]); + }, + + /** + Passing deny through to the calling controller if it was passed in + */ + onDeny: function() { + return this.triggerPassedInEvent('deny', [ this.get('name') ]); + }, + + /** + Helper to conditionally trigger a passed in action. + + @action String + @args Array + */ + triggerPassedInEvent: function(action, args) { + if (typeof this.attrs[action] !== "function") { + return true; + } + + if (this.attrs[action].apply(this, args)) { + return true; + } + + return false; + }, + + /** + Helper to get the targetObject for this component + + @action String + */ + checkTargetForAction: function(action) { + var target = this.get('targetObject'); + if (typeof target !== "undefined" && target !== null && + typeof target._actions !== "undefined" && target._actions !== null && + typeof target._actions[action] !== "undefined" && target._actions[action] !== null) { + return target; + } + + return false; + } +}); diff --git a/addon/mixins/application-route.js b/addon/mixins/application-route.js deleted file mode 100644 index e37336e9a..000000000 --- a/addon/mixins/application-route.js +++ /dev/null @@ -1,58 +0,0 @@ -import Ember from 'ember'; - -export default Ember.Mixin.create({ - actions: { - openModal: function(name, model, properties) { - var container, - controller, - key, - prop, - result, - view, - viewName; - - try { - container = this.get('container'); - try { - controller = this.controllerFor(name); - if (Ember.isBlank(controller)) { - throw "Controller not found"; - } - } catch (e) { - controller = Ember.generateController(container, name, model); - } - - controller.set('model', model); - if (Ember.$.isPlainObject(properties)) { - for (key in properties) { - prop = properties[key]; - controller.set(key, prop); - } - } - - view = container.lookup('view:' + name); - if (view) { - viewName = name; - } else { - viewName = 'ui-modal'; - } - - return result = this.render(name, { - into: 'application', - outlet: 'modal', - controller: controller, - view: viewName - }); - } catch (e) { - return Ember.Logger.log(e); - } - }, - - closeModal: function() { - return this.disconnectOutlet({ - outlet: 'modal', - parentView: 'application' - }); - } - } -}); diff --git a/addon/mixins/modal.js b/addon/mixins/modal.js deleted file mode 100644 index 4e9b1d3fe..000000000 --- a/addon/mixins/modal.js +++ /dev/null @@ -1,68 +0,0 @@ -import Ember from 'ember'; -import Base from '../mixins/base'; - -export default Ember.Mixin.create(Base, { - module: 'modal', - classNames: [ 'ui', 'modal' ], - closable: false, - transition: 'horizontal flip', - - setup: Ember.on('init', function() { - this.set('hiding', false); - }), - - didInsertElement: function() { - this._super(); - this.execute('show'); - }, - - willDestroyElement: function() { - this._super(); - Ember.assert("Semantic modal was destroyed without being properly hidden. Don't call closeModal from the controller. Instead add an approve or deny action, and then call view.execute('hide') from the view passed in.", this.get('hiding')); - }, - - onHide: function() { - this.set('hiding', true); - var controller = this.checkControllerForAction('hide'); - if (controller) { - // we don't pass in view, since you can't stop it from hiding once it starts - controller.send('hide'); - } - }, - - onHidden: function() { - if (this.get('controller')) { - this.get('controller').send('closeModal'); - } - }, - - onDeny: function() { - var controller = this.checkControllerForAction('deny'); - if (controller) { - // if controller handles approves, they must manually call view.execute('hide') - controller.send('deny', this); - return false; - } - return true; - }, - - onApprove: function() { - var controller = this.checkControllerForAction('approve'); - if (controller) { - // if controller handles approves, they must manually call view.execute('hide') - controller.send('approve', this); - return false; - } - return true; - }, - - checkControllerForAction: function(action) { - var controller = this.get('controller'); - if (typeof controller !== "undefined" && controller !== null && - typeof controller._actions !== "undefined" && controller._actions !== null && - typeof controller._actions[action] !== "undefined" && controller._actions[action] !== null) { - return controller; - } - return false; - } -}); diff --git a/addon/views/ui-modal.js b/addon/views/ui-modal.js deleted file mode 100644 index 2bd331401..000000000 --- a/addon/views/ui-modal.js +++ /dev/null @@ -1,5 +0,0 @@ -import Ember from 'ember'; -import ModalMixin from '../mixins/modal'; - -export default Ember.View.extend(ModalMixin, { -}); diff --git a/app/components/ui-modal.js b/app/components/ui-modal.js new file mode 100644 index 000000000..16dd50e86 --- /dev/null +++ b/app/components/ui-modal.js @@ -0,0 +1,2 @@ +import Modal from 'semantic-ui-ember/components/ui-modal'; +export default Modal; diff --git a/app/templates/components/ui-modal.hbs b/app/templates/components/ui-modal.hbs new file mode 100644 index 000000000..889d9eead --- /dev/null +++ b/app/templates/components/ui-modal.hbs @@ -0,0 +1 @@ +{{yield}} diff --git a/app/views/ui-modal.js b/app/views/ui-modal.js deleted file mode 100644 index 86bb5b679..000000000 --- a/app/views/ui-modal.js +++ /dev/null @@ -1,2 +0,0 @@ -import Modal from 'semantic-ui-ember/views/ui-modal'; -export default Modal; diff --git a/tests/dummy/app/components/inbox-modal.js b/tests/dummy/app/components/inbox-modal.js new file mode 100644 index 000000000..ac5e99663 --- /dev/null +++ b/tests/dummy/app/components/inbox-modal.js @@ -0,0 +1,17 @@ +/* global alert */ +import UiModal from 'semantic-ui-ember/components/ui-modal'; + +export default UiModal.extend({ + name: 'inbox', + + actions: { + yes: function() { + alert('yes'); + this.execute('hide'); + }, + + no: function() { + alert('no'); + } + } +}); diff --git a/tests/dummy/app/controllers/modules/modal.js b/tests/dummy/app/controllers/modules/modal.js new file mode 100644 index 000000000..8d9699435 --- /dev/null +++ b/tests/dummy/app/controllers/modules/modal.js @@ -0,0 +1,20 @@ +/* global alert */ +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { + actions: { + openModal: function(name) { + this.trigger('showModal', name); + }, + + approveModal: function(name) { + alert('approve ' + name); + return false; + }, + + denyModal: function(name) { + alert('deny ' + name); + return true; + } + } +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 1f9860902..1ae64facf 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -10,6 +10,7 @@ Router.map(function() { this.route('accordion'); this.route('checkbox'); this.route('dropdown'); + this.route('modal'); this.route('progress'); this.route('rating'); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index 24d069b18..026289fb2 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -5,9 +5,9 @@ {{#link-to 'modules.accordion' class='item'}}Accordion{{/link-to}} {{#link-to 'modules.checkbox' class='item'}}Checkbox{{/link-to}} {{#link-to 'modules.dropdown' class='item'}}Dropdown{{/link-to}} + {{#link-to 'modules.modal' class='item'}}Modal{{/link-to}} {{#link-to 'modules.progress' class='item'}}Progress{{/link-to}} {{#link-to 'modules.rating' class='item'}}Rating{{/link-to}} - diff --git a/tests/dummy/app/templates/components/inbox-modal.hbs b/tests/dummy/app/templates/components/inbox-modal.hbs new file mode 100644 index 000000000..a402911d3 --- /dev/null +++ b/tests/dummy/app/templates/components/inbox-modal.hbs @@ -0,0 +1,24 @@ + +
+ Archive Old Messages +
+
+
+ +
+
+

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

+
+
+
+
+
+ + No +
+
+ + Yes +
+
+
diff --git a/tests/dummy/app/templates/modules/modal.hbs b/tests/dummy/app/templates/modules/modal.hbs new file mode 100644 index 000000000..c1751233a --- /dev/null +++ b/tests/dummy/app/templates/modules/modal.hbs @@ -0,0 +1,47 @@ + +

Modal

+ +
+ Open Profile +
+
+ Open Inbox +
+ +{{#ui-modal name="profile" class="profile" approve=(action 'approveModal') deny=(action 'denyModal')}} + +
+ Profile Picture +
+
+
+ +
+
+
We've auto-chosen a profile image for you.
+

We've grabbed the following image from the gravatar image associated with your registered e-mail address.

+

Is it okay to use this photo?

+
+
+
+
+ Nope +
+
+ Yep, that's me + +
+
+{{/ui-modal}} + +{{inbox-modal}} diff --git a/tests/integration/components/ui-modal-test.js b/tests/integration/components/ui-modal-test.js new file mode 100644 index 000000000..f6a34465a --- /dev/null +++ b/tests/integration/components/ui-modal-test.js @@ -0,0 +1,153 @@ +/* global stop, start */ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui modal', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{ui-modal name='profile'}} + `); + + assert.equal(this.$('.ui.modal').length, 1); +}); + +test('it will show if triggered', function(assert) { + assert.expect(3); + + var _this = this; + + this.on('openModal', function(name) { + stop(); + + return _this.actions.showModal.apply(this, [ name ]).then(function() { + start(); + assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible"); + }); + }); + + this.render(hbs` +
+ Open +
+ + {{ui-modal name='profile'}} + `); + + assert.equal(this.$('.ui.modal').length, 1, ".ui.modal exists"); + assert.equal(this.$('.ui.modal.visible').length, 0, ".ui.modal is not visible"); + + this.$('.ui.button').click(); +}); + +test('it will send approve back to controller and hide', function(assert) { + assert.expect(3); + + var _this = this; + + this.on('openModal', function(name) { + return _this.actions.showModal.apply(this, [ name ]).then(function() { + _this.$('.ui.modal .ui.positive.button').click(); + assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible"); + }); + }); + + this.on('approve', function(name) { + assert.equal('profile', name, 'approve is called'); + setTimeout(function() { + start(); + assert.equal(_this.$('.ui.modal.visible').length, 0, ".ui.modal is not visible after clicking"); + }, 1000); + return true; + }); + + this.render(hbs` +
+ Open +
+ + {{#ui-modal name='profile' approve=(action 'approve')}} +
+
No
+
Yes
+
+ {{/ui-modal}} + `); + + stop(); + this.$('.ui.open.button').click(); +}); + +test('it will send approve back to controller and skip the hide', function(assert) { + assert.expect(3); + + var _this = this; + + this.on('openModal', function(name) { + return _this.actions.showModal.apply(this, [ name ]).then(function() { + _this.$('.ui.modal .ui.positive.button').click(); + assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible"); + }); + }); + + this.on('approve', function(name) { + assert.equal('profile', name, 'approve is called'); + setTimeout(function() { + start(); + assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible after clicking"); + }, 1000); + return false; + }); + + this.render(hbs` +
+ Open +
+ + {{#ui-modal name='profile' approve=(action 'approve')}} +
+
No
+
Yes
+
+ {{/ui-modal}} + `); + + stop(); + this.$('.ui.open.button').click(); +}); + +test('it will send deny back to controller', function(assert) { + assert.expect(1); + + var _this = this; + + this.on('openModal', function(name) { + stop(); + + return _this.actions.showModal.apply(this, [ name ]).then(function() { + start(); + _this.$('.ui.modal.negative').click(); + }); + }); + + this.on('deny', function(name) { + assert.equal('profile', name); + }); + + this.render(hbs` +
+ Open +
+ + {{#ui-modal name='profile' deny=(action 'deny')}} +
+
No
+
Yes
+
+ {{/ui-modal}} + `); + + this.$('.ui.button').click(); +}); diff --git a/tests/test-helper.js b/tests/test-helper.js index e6cfb70fe..909c561f5 100644 --- a/tests/test-helper.js +++ b/tests/test-helper.js @@ -4,3 +4,5 @@ import { } from 'ember-qunit'; setResolver(resolver); + +$.fn.modal.settings.context = "#ember-testing"; From ae36bc76848efaaa823545b90a83e23a105ed4d3 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 21:04:33 -0400 Subject: [PATCH 09/51] Added an example how dimmer can be used. We don't have a separate component since there isn't a clear need for one --- tests/dummy/app/components/dimmer-example.js | 13 +++++++++++++ tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + .../app/templates/components/dimmer-example.hbs | 15 +++++++++++++++ tests/dummy/app/templates/modules/dimmer.hbs | 3 +++ 5 files changed, 33 insertions(+) create mode 100644 tests/dummy/app/components/dimmer-example.js create mode 100644 tests/dummy/app/templates/components/dimmer-example.hbs create mode 100644 tests/dummy/app/templates/modules/dimmer.hbs diff --git a/tests/dummy/app/components/dimmer-example.js b/tests/dummy/app/components/dimmer-example.js new file mode 100644 index 000000000..592efd7b8 --- /dev/null +++ b/tests/dummy/app/components/dimmer-example.js @@ -0,0 +1,13 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + actions: { + show: function(component) { + this.$('.ui.segment').dimmer('show'); + }, + + hide: function(component) { + this.$('.ui.segment').dimmer('hide'); + } + } +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 1ae64facf..3eb8c5148 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -9,6 +9,7 @@ Router.map(function() { this.resource('modules', function() { this.route('accordion'); this.route('checkbox'); + this.route('dimmer'); this.route('dropdown'); this.route('modal'); this.route('progress'); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index 026289fb2..a1386b97e 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -4,6 +4,7 @@
{{#link-to 'modules.accordion' class='item'}}Accordion{{/link-to}} {{#link-to 'modules.checkbox' class='item'}}Checkbox{{/link-to}} + {{#link-to 'modules.dimmer' class='item'}}Dimmer{{/link-to}} {{#link-to 'modules.dropdown' class='item'}}Dropdown{{/link-to}} {{#link-to 'modules.modal' class='item'}}Modal{{/link-to}} {{#link-to 'modules.progress' class='item'}}Progress{{/link-to}} diff --git a/tests/dummy/app/templates/components/dimmer-example.hbs b/tests/dummy/app/templates/components/dimmer-example.hbs new file mode 100644 index 000000000..8a051e4a4 --- /dev/null +++ b/tests/dummy/app/templates/components/dimmer-example.hbs @@ -0,0 +1,15 @@ +
+
+ +
+ +

+ Overlayable Section +

+
+ + + +
+ +
diff --git a/tests/dummy/app/templates/modules/dimmer.hbs b/tests/dummy/app/templates/modules/dimmer.hbs new file mode 100644 index 000000000..727178d3e --- /dev/null +++ b/tests/dummy/app/templates/modules/dimmer.hbs @@ -0,0 +1,3 @@ +

Dimmer

+ +{{dimmer-example}} From 0ee82b1a51d2818343cca2ec6e6f5678b7c8797e Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 21:04:43 -0400 Subject: [PATCH 10/51] Updated the checkbox title to match the other section titles --- tests/dummy/app/templates/modules/checkbox.hbs | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/tests/dummy/app/templates/modules/checkbox.hbs b/tests/dummy/app/templates/modules/checkbox.hbs index ec1656f46..5bdf63d28 100644 --- a/tests/dummy/app/templates/modules/checkbox.hbs +++ b/tests/dummy/app/templates/modules/checkbox.hbs @@ -1,7 +1,4 @@ -

- Checkbox -
A standard checkbox
-

+

Checkbox

{{ui-checkbox label="Make my profile visible" checked=checked}} From ef04abcf8cb58ec0cf3d842118ba57c72fe32ac0 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 21:49:43 -0400 Subject: [PATCH 11/51] Added an embed component to use for embedding video --- README.md | 18 +++++++++++++++++- addon/components/ui-embed.js | 8 ++++++++ app/components/ui-embed.js | 2 ++ tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + tests/dummy/app/templates/modules/embed.hbs | 7 +++++++ tests/integration/components/ui-embed-test.js | 14 ++++++++++++++ 7 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 addon/components/ui-embed.js create mode 100644 app/components/ui-embed.js create mode 100644 tests/dummy/app/templates/modules/embed.hbs create mode 100644 tests/integration/components/ui-embed-test.js diff --git a/README.md b/README.md index f74efb876..1bee7ece6 100644 --- a/README.md +++ b/README.md @@ -179,6 +179,23 @@ export default Ember.Controller.extend({ }} ``` +## Embed + +* **Documentation**: [Official Documentation](http://semantic-ui.com/modules/embed.html) +* **Class**: `ui embed` +* **Parameters** + * **data-id**: The id of the video you wanted embedded + * **data-source**: The source provider of the video (youtube for example) + * **data-icon**: Icon to show for the play button + * **data-place**: Placeholder image to show before the video starts + +### Template +```handlebars + {{ui-embed + data-source="youtube" + data-id="pfdu_gTry8E"}} + ``` + ## Modal * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/modal.html) @@ -315,4 +332,3 @@ _NOT IMPLEMENTED_ * **Class**: `ui sidebar` There isn't a cooresponding Ember component for this since it isn't rendered to the screen but instead invoked. - diff --git a/addon/components/ui-embed.js b/addon/components/ui-embed.js new file mode 100644 index 000000000..787b48a6b --- /dev/null +++ b/addon/components/ui-embed.js @@ -0,0 +1,8 @@ +import Ember from 'ember'; +import Base from '../mixins/base'; + +export default Ember.Component.extend(Base, { + module: 'embed', + classNames: [ 'ui', 'embed' ], + attributeBindings: ['data-id', 'data-source', 'data-placeholder', 'data-url', 'data-icon'] +}); diff --git a/app/components/ui-embed.js b/app/components/ui-embed.js new file mode 100644 index 000000000..4edff6dd4 --- /dev/null +++ b/app/components/ui-embed.js @@ -0,0 +1,2 @@ +import Embed from 'semantic-ui-ember/components/ui-embed'; +export default Embed; diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 3eb8c5148..6a2c2cb1c 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -11,6 +11,7 @@ Router.map(function() { this.route('checkbox'); this.route('dimmer'); this.route('dropdown'); + this.route('embed'); this.route('modal'); this.route('progress'); this.route('rating'); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index a1386b97e..aefdbef02 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -6,6 +6,7 @@ {{#link-to 'modules.checkbox' class='item'}}Checkbox{{/link-to}} {{#link-to 'modules.dimmer' class='item'}}Dimmer{{/link-to}} {{#link-to 'modules.dropdown' class='item'}}Dropdown{{/link-to}} + {{#link-to 'modules.embed' class='item'}}Embed{{/link-to}} {{#link-to 'modules.modal' class='item'}}Modal{{/link-to}} {{#link-to 'modules.progress' class='item'}}Progress{{/link-to}} {{#link-to 'modules.rating' class='item'}}Rating{{/link-to}} diff --git a/tests/dummy/app/templates/modules/embed.hbs b/tests/dummy/app/templates/modules/embed.hbs new file mode 100644 index 000000000..db70fad43 --- /dev/null +++ b/tests/dummy/app/templates/modules/embed.hbs @@ -0,0 +1,7 @@ +

Embed

+ +

Using data-url (with placeholder)

+{{ui-embed data-url="https://www.youtube.com/embed/pfdu_gTry8E" data-placeholder="http://semantic-ui.com/images/image-16by9.png"}} + +

Using data-id (no placeholder)

+{{ui-embed data-source="youtube" data-id="pfdu_gTry8E"}} diff --git a/tests/integration/components/ui-embed-test.js b/tests/integration/components/ui-embed-test.js new file mode 100644 index 000000000..18873b4c5 --- /dev/null +++ b/tests/integration/components/ui-embed-test.js @@ -0,0 +1,14 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui embed', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{ui-embed data-source="youtube" data-id="pfdu_gTry8E"}} + `); + + assert.equal(this.$('.ui.embed .embed iframe').length, 1); +}); From 2460970b6697afa944a9d7338d162c8616a67227 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 21:50:09 -0400 Subject: [PATCH 12/51] Removed the unused component parameter for dimmer-example --- tests/dummy/app/components/dimmer-example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/dummy/app/components/dimmer-example.js b/tests/dummy/app/components/dimmer-example.js index 592efd7b8..e5e799c72 100644 --- a/tests/dummy/app/components/dimmer-example.js +++ b/tests/dummy/app/components/dimmer-example.js @@ -2,11 +2,11 @@ import Ember from 'ember'; export default Ember.Component.extend({ actions: { - show: function(component) { + show: function() { this.$('.ui.segment').dimmer('show'); }, - hide: function(component) { + hide: function() { this.$('.ui.segment').dimmer('hide'); } } From 7cae41dfb1569fdea56854122e254cf6f1e666c4 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 22:37:53 -0400 Subject: [PATCH 13/51] Added an nag component --- README.md | 17 ++++++++++++++++- addon/components/ui-nag.js | 12 ++++++++++++ app/components/ui-nag.js | 2 ++ tests/dummy/app/controllers/modules/nag.js | 11 +++++++++++ tests/dummy/app/index.html | 1 + tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + tests/dummy/app/templates/modules/nag.hbs | 12 ++++++++++++ tests/dummy/public/jquery.cookie.min.js | 2 ++ 9 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 addon/components/ui-nag.js create mode 100644 app/components/ui-nag.js create mode 100644 tests/dummy/app/controllers/modules/nag.js create mode 100644 tests/dummy/app/templates/modules/nag.hbs create mode 100644 tests/dummy/public/jquery.cookie.min.js diff --git a/README.md b/README.md index 1bee7ece6..47d76c0fb 100644 --- a/README.md +++ b/README.md @@ -194,7 +194,7 @@ export default Ember.Controller.extend({ {{ui-embed data-source="youtube" data-id="pfdu_gTry8E"}} - ``` +``` ## Modal @@ -287,6 +287,21 @@ export default Ember.View.extend(SemanticModalMixin, { }) ``` +## Nag + +* **Documentation**: [Official Documentation](http://semantic-ui.com/modules/nag.html) +* **Class**: `ui nag` + +### Template +```handlebars + {{#ui-nag}} + + We use cookies to ensure you get the best experience on our website + + + {{/ui-nag}} +``` + ## Popup * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/popup.html) diff --git a/addon/components/ui-nag.js b/addon/components/ui-nag.js new file mode 100644 index 000000000..c30fc8056 --- /dev/null +++ b/addon/components/ui-nag.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import Base from '../mixins/base'; + +export default Ember.Component.extend(Base, { + module: 'nag', + classNames: [ 'ui', 'nag' ], + + init: function() { + this._super(); + this.execute('show'); + } +}); diff --git a/app/components/ui-nag.js b/app/components/ui-nag.js new file mode 100644 index 000000000..26988f663 --- /dev/null +++ b/app/components/ui-nag.js @@ -0,0 +1,2 @@ +import Nag from 'semantic-ui-ember/components/ui-nag'; +export default Nag; diff --git a/tests/dummy/app/controllers/modules/nag.js b/tests/dummy/app/controllers/modules/nag.js new file mode 100644 index 000000000..59a03c820 --- /dev/null +++ b/tests/dummy/app/controllers/modules/nag.js @@ -0,0 +1,11 @@ +/* global $ */ +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { + actions: { + clear: function(name) { + $('.cookie.nag').nag('clear'); + $('.cookie.nag').nag('show'); + } + } +}); diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html index 1c49d36d0..7fbcfc4ff 100644 --- a/tests/dummy/app/index.html +++ b/tests/dummy/app/index.html @@ -19,6 +19,7 @@ + {{content-for 'body-footer'}} diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 6a2c2cb1c..44392d126 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -13,6 +13,7 @@ Router.map(function() { this.route('dropdown'); this.route('embed'); this.route('modal'); + this.route('nag'); this.route('progress'); this.route('rating'); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index aefdbef02..7710145f1 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -8,6 +8,7 @@ {{#link-to 'modules.dropdown' class='item'}}Dropdown{{/link-to}} {{#link-to 'modules.embed' class='item'}}Embed{{/link-to}} {{#link-to 'modules.modal' class='item'}}Modal{{/link-to}} + {{#link-to 'modules.nag' class='item'}}Nag{{/link-to}} {{#link-to 'modules.progress' class='item'}}Progress{{/link-to}} {{#link-to 'modules.rating' class='item'}}Rating{{/link-to}}
diff --git a/tests/dummy/app/templates/modules/nag.hbs b/tests/dummy/app/templates/modules/nag.hbs new file mode 100644 index 000000000..682006d0c --- /dev/null +++ b/tests/dummy/app/templates/modules/nag.hbs @@ -0,0 +1,12 @@ +

Nag

+ +
+ Clear +
+ +{{#ui-nag class="inline cookie"}} + + We use cookies to ensure you get the best experience on our website + + +{{/ui-nag}} diff --git a/tests/dummy/public/jquery.cookie.min.js b/tests/dummy/public/jquery.cookie.min.js new file mode 100644 index 000000000..c0f19d8a3 --- /dev/null +++ b/tests/dummy/public/jquery.cookie.min.js @@ -0,0 +1,2 @@ +/*! jquery.cookie v1.4.1 | MIT */ +!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}}); \ No newline at end of file From 963923856728f1ba60bc4ab0a02a5e4c8542f3a1 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 22:41:36 -0400 Subject: [PATCH 14/51] Minor update to the documentation for modals --- README.md | 97 ++++++++++++++++++++----------------------------------- 1 file changed, 35 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index 47d76c0fb..c3546cfe1 100644 --- a/README.md +++ b/README.md @@ -202,91 +202,64 @@ export default Ember.Controller.extend({ * **Class**: `ui modal` * **View**: `ui-modal` -In order to use the modal you must first prepare your Ember application for modals. This follows the same instructions [found on ember.js](http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/). +In order to use the modal you must include Ember.Evented in your controller. -### Application Template -You must add the `modal` outlet to the main application layout - - * templates/application.hbs OR - * pods/application/template.hbs - -```handlebars -{{outlet}} -{{outlet 'modal'}} -``` - -### ApplicationRoute -This provides the `openModal` and `closeModal` actions that allows modals to be opened from any controller. - - * routes/application.js OR - * pods/application/route.js +### Controller ```javascript -import SemanticRouteMixin from 'semantic-ui-ember/mixins/application-route'; +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { -var ApplicationRoute = Ember.Route.extend(SemanticRouteMixin, {}); +}); ``` -Now to use the modal the bare minimum is to create a template and trigger `openModal`. +Embed the Modal within your page's template, similar to the semantic-ui master documentation. +Except instead of using `
` you can use `{{ui-modal}}`. Each +modal MUST include a name so it knows which one you are referring too. ### Template ```handlebars - -
- Demo Modal -
-
- Content -
-
-
- Cancel +{{#ui-modal name="profile" class="profile" approve=(action 'approveModal') deny=(action 'denyModal')}} + +
+ Profile Picture
-
- Ok - +
+
+ +
+
+
We've auto-chosen a profile image for you.
+

We've grabbed the following image from the gravatar image associated with your registered e-mail address.

+

Is it okay to use this photo?

+
-
+
+
+ Nope +
+
+ Yep, that's me + +
+
+{{/ui-modal}} ``` -Then you can fire `openModal` from any controller +In order to open the modal you just need to create an action and fire the `showModal` event. ### Controller (no model) ```javascript export default Ember.Controller.extend({ actions: { - confirm: function() { - this.send('openModal', 'projects/confirm'); - } - } -}); -``` - -If you want to send a model in just use the third parameter - -### Controller (model) -```javascript -export default Ember.Controller.extend({ - actions: { - confirm: function() { - this.send('openModal', 'projects/confirm', this.get('model')); + openModal: function(name) { + this.trigger('showModal', name); } } }); ``` -If a controller is found with the same name as the template it will be used. You can also use your own view if necessary. You just need to make sure to inherit from the base class. - -### View -```javascript -import Ember from 'ember'; -import SemanticModalMixin from 'semantic-ui-ember/mixins/modal'; - -export default Ember.View.extend(SemanticModalMixin, { - templateName: 'shared/modal' -}) -``` - ## Nag * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/nag.html) From 0461249b0fc4dfac8b8bd08d85b1327f97e781d4 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 22:44:09 -0400 Subject: [PATCH 15/51] Added the popup example to the test app --- tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + tests/dummy/app/templates/modules/popup.hbs | 7 +++++++ 3 files changed, 9 insertions(+) create mode 100644 tests/dummy/app/templates/modules/popup.hbs diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 44392d126..2105be463 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -14,6 +14,7 @@ Router.map(function() { this.route('embed'); this.route('modal'); this.route('nag'); + this.route('popup'); this.route('progress'); this.route('rating'); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index 7710145f1..ea3a42ea9 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -9,6 +9,7 @@ {{#link-to 'modules.embed' class='item'}}Embed{{/link-to}} {{#link-to 'modules.modal' class='item'}}Modal{{/link-to}} {{#link-to 'modules.nag' class='item'}}Nag{{/link-to}} + {{#link-to 'modules.popup' class='item'}}Popup{{/link-to}} {{#link-to 'modules.progress' class='item'}}Progress{{/link-to}} {{#link-to 'modules.rating' class='item'}}Rating{{/link-to}}
diff --git a/tests/dummy/app/templates/modules/popup.hbs b/tests/dummy/app/templates/modules/popup.hbs new file mode 100644 index 000000000..a9de6095f --- /dev/null +++ b/tests/dummy/app/templates/modules/popup.hbs @@ -0,0 +1,7 @@ +

Popup

+ +{{#ui-popup content="Add users to your feed"}} +
+ +
+{{/ui-popup}} From 3de0f0d4b4f2b177790139b664ee43de5a3943d6 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 22:57:29 -0400 Subject: [PATCH 16/51] Added the search component --- README.md | 21 +++++++++++++++++++ addon/components/ui-search.js | 12 +++++++++++ app/components/ui-search.js | 2 ++ tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + tests/dummy/app/templates/modules/search.hbs | 6 ++++++ .../integration/components/ui-search-test.js | 17 +++++++++++++++ 7 files changed, 60 insertions(+) create mode 100644 addon/components/ui-search.js create mode 100644 app/components/ui-search.js create mode 100644 tests/dummy/app/templates/modules/search.hbs create mode 100644 tests/integration/components/ui-search-test.js diff --git a/README.md b/README.md index c3546cfe1..6617c3af6 100644 --- a/README.md +++ b/README.md @@ -300,6 +300,27 @@ You can also create an icon version by specifying the tagName _NOT IMPLEMENTED_ +## Search + +* **Documentation**: [Official Documentation](http://semantic-ui.com/modules/search.html) +* **Class**: `ui search` +* **Parameters** + * **url**: The url used for searching + +```handlebars +{{#ui-search url="/search"}} + +
+{{/ui-search}} +``` + +### Template +```handlebars + {{ui-embed + data-source="youtube" + data-id="pfdu_gTry8E"}} +``` + ## Shape * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/shape.html) diff --git a/addon/components/ui-search.js b/addon/components/ui-search.js new file mode 100644 index 000000000..40fa4c0f7 --- /dev/null +++ b/addon/components/ui-search.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import Base from '../mixins/base'; + +export default Ember.Component.extend(Base, { + module: 'search', + classNames: [ 'ui', 'search' ], + + /** + Proxying all the attributes to apiSettings + */ + apiSettings: Ember.computed.alias('attrs') +}); diff --git a/app/components/ui-search.js b/app/components/ui-search.js new file mode 100644 index 000000000..bef2d012c --- /dev/null +++ b/app/components/ui-search.js @@ -0,0 +1,2 @@ +import Search from 'semantic-ui-ember/components/ui-search'; +export default Search; diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 2105be463..27600bc9f 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -17,6 +17,7 @@ Router.map(function() { this.route('popup'); this.route('progress'); this.route('rating'); + this.route('search'); }); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index ea3a42ea9..ea9a5c712 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -12,6 +12,7 @@ {{#link-to 'modules.popup' class='item'}}Popup{{/link-to}} {{#link-to 'modules.progress' class='item'}}Progress{{/link-to}} {{#link-to 'modules.rating' class='item'}}Rating{{/link-to}} + {{#link-to 'modules.search' class='item'}}Search{{/link-to}}
diff --git a/tests/dummy/app/templates/modules/search.hbs b/tests/dummy/app/templates/modules/search.hbs new file mode 100644 index 000000000..4081664cd --- /dev/null +++ b/tests/dummy/app/templates/modules/search.hbs @@ -0,0 +1,6 @@ +

Search

+ +{{#ui-search url="/search"}} + +
+{{/ui-search}} diff --git a/tests/integration/components/ui-search-test.js b/tests/integration/components/ui-search-test.js new file mode 100644 index 000000000..bcdbd9200 --- /dev/null +++ b/tests/integration/components/ui-search-test.js @@ -0,0 +1,17 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui search', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{#ui-search url="/search"}} + +
+ {{/ui-search}} + `); + + assert.equal(this.$('.ui.search').length, 1); +}); From 817473cda6ce038d0e483fd1bf01a22723066417 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 22:57:40 -0400 Subject: [PATCH 17/51] Removed the unnecessary variable for nag --- tests/dummy/app/controllers/modules/nag.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/dummy/app/controllers/modules/nag.js b/tests/dummy/app/controllers/modules/nag.js index 59a03c820..8b71e79ae 100644 --- a/tests/dummy/app/controllers/modules/nag.js +++ b/tests/dummy/app/controllers/modules/nag.js @@ -3,7 +3,7 @@ import Ember from 'ember'; export default Ember.Controller.extend(Ember.Evented, { actions: { - clear: function(name) { + clear: function() { $('.cookie.nag').nag('clear'); $('.cookie.nag').nag('show'); } From 39e32abee37cddc006c1cfe6c58c56a095e0ada2 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 22:57:53 -0400 Subject: [PATCH 18/51] Updated documentation for progress and rating --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6617c3af6..72ae59642 100644 --- a/README.md +++ b/README.md @@ -293,12 +293,26 @@ You can also create an icon version by specifying the tagName {{ui-popup tagName="i" class="icon link" content="The text you'd like to show"}} ``` +## Progress + + * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/progress.html) + * **Class**: `ui progress` + +```handlebars +{{#ui-progress percent=40 classNames="teal indicating"}} +
+
Completed
+{{/ui-progress}} +``` + ## Rating * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/rating.html) * **Class**: `ui rating` -_NOT IMPLEMENTED_ +```handlebars +{{ui-rating initialRating=3 maxRating=7}} +``` ## Search From 62143ae4043ef08b427b9a34051760b1752150ff Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 23:09:30 -0400 Subject: [PATCH 19/51] Added the shape component --- README.md | 28 +++++-- addon/components/ui-shape.js | 7 ++ app/components/ui-shape.js | 2 + tests/dummy/app/controllers/modules/shape.js | 10 +++ tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + tests/dummy/app/templates/modules/shape.hbs | 74 +++++++++++++++++++ tests/integration/components/ui-shape-test.js | 16 ++++ 8 files changed, 132 insertions(+), 7 deletions(-) create mode 100644 addon/components/ui-shape.js create mode 100644 app/components/ui-shape.js create mode 100644 tests/dummy/app/controllers/modules/shape.js create mode 100644 tests/dummy/app/templates/modules/shape.hbs create mode 100644 tests/integration/components/ui-shape-test.js diff --git a/README.md b/README.md index 72ae59642..8d2a42e47 100644 --- a/README.md +++ b/README.md @@ -321,6 +321,7 @@ You can also create an icon version by specifying the tagName * **Parameters** * **url**: The url used for searching +### Template ```handlebars {{#ui-search url="/search"}} @@ -328,19 +329,32 @@ You can also create an icon version by specifying the tagName {{/ui-search}} ``` +## Shape + + * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/shape.html) + * **Class**: `ui shape` + ### Template ```handlebars - {{ui-embed - data-source="youtube" - data-id="pfdu_gTry8E"}} +{{#ui-shape}} +

Content

+{{/ui-shape}} ``` -## Shape +### Controller +You control the shape through semantic's regular javascript code - * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/shape.html) - * **Class**: `ui shape` +```javascript +import Ember from 'ember'; -_NOT IMPLEMENTED_ +export default Ember.Controller.extend(Ember.Evented, { + actions: { + flip: function(direction) { + $('.ui.shape').shape('flip ' + direction); + } + } +}); +``` ## Sidebar diff --git a/addon/components/ui-shape.js b/addon/components/ui-shape.js new file mode 100644 index 000000000..8bb185317 --- /dev/null +++ b/addon/components/ui-shape.js @@ -0,0 +1,7 @@ +import Ember from 'ember'; +import Base from '../mixins/base'; + +export default Ember.Component.extend(Base, { + module: 'shape', + classNames: [ 'ui', 'shape' ] +}); diff --git a/app/components/ui-shape.js b/app/components/ui-shape.js new file mode 100644 index 000000000..4d39d7a69 --- /dev/null +++ b/app/components/ui-shape.js @@ -0,0 +1,2 @@ +import Shape from 'semantic-ui-ember/components/ui-shape'; +export default Shape; diff --git a/tests/dummy/app/controllers/modules/shape.js b/tests/dummy/app/controllers/modules/shape.js new file mode 100644 index 000000000..5a71cf35e --- /dev/null +++ b/tests/dummy/app/controllers/modules/shape.js @@ -0,0 +1,10 @@ +/* global $ */ +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { + actions: { + flip: function(direction) { + $('.ui.shape').shape('flip ' + direction); + } + } +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 27600bc9f..c0f1cee02 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -18,6 +18,7 @@ Router.map(function() { this.route('progress'); this.route('rating'); this.route('search'); + this.route('shape'); }); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index ea9a5c712..64b9d5d9f 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -13,6 +13,7 @@ {{#link-to 'modules.progress' class='item'}}Progress{{/link-to}} {{#link-to 'modules.rating' class='item'}}Rating{{/link-to}} {{#link-to 'modules.search' class='item'}}Search{{/link-to}} + {{#link-to 'modules.shape' class='item'}}Shape{{/link-to}} diff --git a/tests/dummy/app/templates/modules/shape.hbs b/tests/dummy/app/templates/modules/shape.hbs new file mode 100644 index 000000000..155ec50b4 --- /dev/null +++ b/tests/dummy/app/templates/modules/shape.hbs @@ -0,0 +1,74 @@ +

Shape

+ +{{#ui-shape class="people"}} +
+
+
+
+ +
+
+
Steve Jobes
+
+ Acquaintances +
+
+ Steve Jobes is a fictional character designed to resemble someone familiar to readers. +
+
+
+ + Joined in 2014 + + + + 151 Friends + +
+
+
+
+
+
+ +
+
+ Stevie Feliciano +
+ Joined in 2014 +
+
+ Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. +
+
+
+ + + 22 Friends + +
+
+
+
+{{/ui-shape}} + +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
diff --git a/tests/integration/components/ui-shape-test.js b/tests/integration/components/ui-shape-test.js new file mode 100644 index 000000000..6881581be --- /dev/null +++ b/tests/integration/components/ui-shape-test.js @@ -0,0 +1,16 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui shape', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{#ui-shape}} +

Content

+ {{/ui-shape}} + `); + + assert.equal(this.$('.ui.shape').length, 1); +}); From a995a49c663fc05244a07997547f569a4a1f547c Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 23:24:34 -0400 Subject: [PATCH 20/51] Added the sidebar component --- README.md | 32 ++++++++++++++++++- addon/components/ui-sidebar.js | 7 ++++ app/components/ui-sidebar.js | 2 ++ .../dummy/app/controllers/modules/sidebar.js | 10 ++++++ tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + tests/dummy/app/templates/modules/sidebar.hbs | 17 ++++++++++ tests/dummy/app/views/application.js | 5 +++ .../integration/components/ui-sidebar-test.js | 19 +++++++++++ 9 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 addon/components/ui-sidebar.js create mode 100644 app/components/ui-sidebar.js create mode 100644 tests/dummy/app/controllers/modules/sidebar.js create mode 100644 tests/dummy/app/templates/modules/sidebar.hbs create mode 100644 tests/dummy/app/views/application.js create mode 100644 tests/integration/components/ui-sidebar-test.js diff --git a/README.md b/README.md index 8d2a42e47..907f12ee5 100644 --- a/README.md +++ b/README.md @@ -298,6 +298,7 @@ You can also create an icon version by specifying the tagName * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/progress.html) * **Class**: `ui progress` +### Template ```handlebars {{#ui-progress percent=40 classNames="teal indicating"}}
@@ -310,6 +311,7 @@ You can also create an icon version by specifying the tagName * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/rating.html) * **Class**: `ui rating` +### Template ```handlebars {{ui-rating initialRating=3 maxRating=7}} ``` @@ -361,7 +363,35 @@ export default Ember.Controller.extend(Ember.Evented, { * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/sidebar.html) * **Class**: `ui sidebar` -_NOT IMPLEMENTED_ +### Template +```handlebars +{{#ui-sidebar class="inverted vertical menu"}} + + 1 + + + 2 + + + 3 + +{{/ui-sidebar}} +``` + +When you want to invoke the sidebar you simply use the semantic methods. + +### Controller +```javascript +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { + actions: { + toggle: function(direction) { + $('.ui.sidebar').sidebar('toggle'); + } + } +}); +``` ## Transition diff --git a/addon/components/ui-sidebar.js b/addon/components/ui-sidebar.js new file mode 100644 index 000000000..ec9fe0163 --- /dev/null +++ b/addon/components/ui-sidebar.js @@ -0,0 +1,7 @@ +import Ember from 'ember'; +import Base from '../mixins/base'; + +export default Ember.Component.extend(Base, { + module: 'sidebar', + classNames: [ 'ui', 'sidebar' ] +}); diff --git a/app/components/ui-sidebar.js b/app/components/ui-sidebar.js new file mode 100644 index 000000000..51818b2ff --- /dev/null +++ b/app/components/ui-sidebar.js @@ -0,0 +1,2 @@ +import Sidebar from 'semantic-ui-ember/components/ui-sidebar'; +export default Sidebar; diff --git a/tests/dummy/app/controllers/modules/sidebar.js b/tests/dummy/app/controllers/modules/sidebar.js new file mode 100644 index 000000000..ffa01956b --- /dev/null +++ b/tests/dummy/app/controllers/modules/sidebar.js @@ -0,0 +1,10 @@ +/* global $ */ +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { + actions: { + toggle: function() { + $('.ui.sidebar').sidebar('toggle'); + } + } +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index c0f1cee02..63d46e309 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -19,6 +19,7 @@ Router.map(function() { this.route('rating'); this.route('search'); this.route('shape'); + this.route('sidebar'); }); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index 64b9d5d9f..6494659e6 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -14,6 +14,7 @@ {{#link-to 'modules.rating' class='item'}}Rating{{/link-to}} {{#link-to 'modules.search' class='item'}}Search{{/link-to}} {{#link-to 'modules.shape' class='item'}}Shape{{/link-to}} + {{#link-to 'modules.sidebar' class='item'}}Sidebar{{/link-to}} diff --git a/tests/dummy/app/templates/modules/sidebar.hbs b/tests/dummy/app/templates/modules/sidebar.hbs new file mode 100644 index 000000000..d2e88d48e --- /dev/null +++ b/tests/dummy/app/templates/modules/sidebar.hbs @@ -0,0 +1,17 @@ +

Sidebar

+ +
+ Toggle +
+ +{{#ui-sidebar class="inverted vertical menu"}} + + 1 + + + 2 + + + 3 + +{{/ui-sidebar}} diff --git a/tests/dummy/app/views/application.js b/tests/dummy/app/views/application.js new file mode 100644 index 000000000..406019afc --- /dev/null +++ b/tests/dummy/app/views/application.js @@ -0,0 +1,5 @@ +import Ember from 'ember'; + +export default Ember.View.extend({ + classNames: [ 'pusher' ] +}); diff --git a/tests/integration/components/ui-sidebar-test.js b/tests/integration/components/ui-sidebar-test.js new file mode 100644 index 000000000..afb587623 --- /dev/null +++ b/tests/integration/components/ui-sidebar-test.js @@ -0,0 +1,19 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui sidebar', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{#ui-sidebar}} + 1 + 2 + 3 + {{/ui-sidebar}} + `); + + assert.equal($('.ui.sidebar').length, 1); + assert.equal($('.ui.sidebar a').length, 3); +}); From 6d17b20cfde40d441389de8b372971d04e1f1f5c Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 23:31:34 -0400 Subject: [PATCH 21/51] Added the sticky component --- addon/components/ui-sticky.js | 7 +++++++ app/components/ui-sticky.js | 2 ++ tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + tests/dummy/app/templates/modules/sticky.hbs | 13 +++++++++++++ tests/integration/components/ui-sticky-test.js | 18 ++++++++++++++++++ 6 files changed, 42 insertions(+) create mode 100644 addon/components/ui-sticky.js create mode 100644 app/components/ui-sticky.js create mode 100644 tests/dummy/app/templates/modules/sticky.hbs create mode 100644 tests/integration/components/ui-sticky-test.js diff --git a/addon/components/ui-sticky.js b/addon/components/ui-sticky.js new file mode 100644 index 000000000..0345c9d44 --- /dev/null +++ b/addon/components/ui-sticky.js @@ -0,0 +1,7 @@ +import Ember from 'ember'; +import Base from '../mixins/base'; + +export default Ember.Component.extend(Base, { + module: 'sticky', + classNames: [ 'ui', 'sticky' ] +}); diff --git a/app/components/ui-sticky.js b/app/components/ui-sticky.js new file mode 100644 index 000000000..fbb9d91ec --- /dev/null +++ b/app/components/ui-sticky.js @@ -0,0 +1,2 @@ +import Sticky from 'semantic-ui-ember/components/ui-sticky'; +export default Sticky; diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 63d46e309..f1fd16ab2 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -20,6 +20,7 @@ Router.map(function() { this.route('search'); this.route('shape'); this.route('sidebar'); + this.route('sticky'); }); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index 6494659e6..c3f1fba23 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -15,6 +15,7 @@ {{#link-to 'modules.search' class='item'}}Search{{/link-to}} {{#link-to 'modules.shape' class='item'}}Shape{{/link-to}} {{#link-to 'modules.sidebar' class='item'}}Sidebar{{/link-to}} + {{#link-to 'modules.sticky' class='item'}}Sticky{{/link-to}} diff --git a/tests/dummy/app/templates/modules/sticky.hbs b/tests/dummy/app/templates/modules/sticky.hbs new file mode 100644 index 000000000..67c81c196 --- /dev/null +++ b/tests/dummy/app/templates/modules/sticky.hbs @@ -0,0 +1,13 @@ +

Sticky

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non laoreet nulla. Quisque quis ipsum volutpat, tempus leo ac, convallis dolor. Mauris mattis quis tellus a fermentum. Suspendisse quis urna nisl. Ut blandit ante eu placerat pretium. Maecenas aliquam commodo luctus. Aenean tempor pulvinar pulvinar. Suspendisse eu auctor neque. Donec risus neque, hendrerit quis tempor id, gravida ut mauris.

+ +{{#ui-sticky class="segment"}} +

Cras id nisi vitae libero bibendum eleifend vel eu purus. Aliquam consectetur, nisl eu condimentum condimentum, lacus orci ullamcorper nisi, in porttitor urna lectus at tortor. Mauris fermentum dolor metus, vitae fermentum risus vulputate in. Vivamus porttitor mi nec pharetra tempus. Phasellus at mi sed ante molestie pretium id vel elit. Sed tincidunt, dolor quis euismod interdum, justo mauris pretium diam, sit amet egestas sem sem quis turpis. Donec eu est id tortor pulvinar auctor.

+{{/ui-sticky}} + +

Etiam facilisis ipsum eget dui lacinia, ut elementum nisi bibendum. Nulla euismod, mauris et elementum posuere, libero nulla aliquam ex, vel feugiat lacus justo quis justo. Etiam commodo luctus rhoncus. Curabitur sed quam ornare, hendrerit nunc quis, cursus turpis. Suspendisse potenti. Ut eget odio nec augue aliquet iaculis. In dapibus cursus mi.

+ +

Phasellus semper egestas hendrerit. Morbi ac neque blandit neque elementum gravida et vitae tortor. Praesent laoreet risus sed tellus tincidunt pharetra et quis erat. Mauris malesuada elit ut fermentum sodales. Nam neque tellus, scelerisque ut consequat sed, lobortis sit amet libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer sit amet augue vel nibh congue tincidunt. Cras imperdiet orci quis sem convallis tristique. Nulla non rhoncus tortor. Morbi luctus tempor laoreet. Fusce ex erat, facilisis in felis at, accumsan ultrices enim. Cras pharetra nec velit vel fermentum.

+ +

Nulla lacinia aliquam libero, non fringilla mi. Suspendisse a ex congue urna maximus tincidunt. Praesent rhoncus luctus elit ut consectetur. Cras non ante id magna fringilla condimentum. Proin sit amet placerat mauris, a luctus urna. Quisque congue facilisis dolor quis rutrum. Phasellus aliquet sed ante non convallis. Donec aliquam nulla mi, nec viverra enim eleifend id. In vulputate mattis varius. Vestibulum molestie et erat sit amet rhoncus. Vestibulum placerat purus quis aliquet lobortis. Fusce ut pulvinar risus, in commodo quam. Aenean viverra mauris pharetra sollicitudin aliquet. Sed eget risus vitae nisl commodo volutpat. Nullam risus nisi, laoreet fermentum cursus sit amet, interdum at mauris. Mauris posuere et mi sit amet ultricies.

diff --git a/tests/integration/components/ui-sticky-test.js b/tests/integration/components/ui-sticky-test.js new file mode 100644 index 000000000..870f323ac --- /dev/null +++ b/tests/integration/components/ui-sticky-test.js @@ -0,0 +1,18 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui sticky', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{#ui-sticky}} +

Some text

+ {{/ui-sticky}} + `); + + assert.equal($('.ui.sticky').length, 1); + assert.ok($('.ui.sticky').css('width') !== undefined); + assert.ok($('.ui.sticky').css('height') !== undefined); +}); From fc6ae0128b9a8fd3ac0a27ba45416cc5916ff4df Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 23:38:09 -0400 Subject: [PATCH 22/51] Added a placeholder for tab since it doesn't make sense to implement it --- README.md | 4 ++++ tests/dummy/app/controllers/modules/transition.js | 10 ++++++++++ tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + tests/dummy/app/templates/modules/tab.hbs | 3 +++ 5 files changed, 19 insertions(+) create mode 100644 tests/dummy/app/controllers/modules/transition.js create mode 100644 tests/dummy/app/templates/modules/tab.hbs diff --git a/README.md b/README.md index 907f12ee5..3cda1d820 100644 --- a/README.md +++ b/README.md @@ -393,6 +393,10 @@ export default Ember.Controller.extend(Ember.Evented, { }); ``` +## Tab + +Not implemented. Better suited to use routes through Ember. If you disagree please open an issue with how you would see it used. + ## Transition * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/transition.html) diff --git a/tests/dummy/app/controllers/modules/transition.js b/tests/dummy/app/controllers/modules/transition.js new file mode 100644 index 000000000..bcbc1b716 --- /dev/null +++ b/tests/dummy/app/controllers/modules/transition.js @@ -0,0 +1,10 @@ +/* global $ */ +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { + actions: { + transition: function() { + $('img').transition('horizontal flip', '500ms'); + } + } +}); diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index f1fd16ab2..81bfdbe21 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -21,6 +21,7 @@ Router.map(function() { this.route('shape'); this.route('sidebar'); this.route('sticky'); + this.route('tab'); }); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index c3f1fba23..9ae180923 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -16,6 +16,7 @@ {{#link-to 'modules.shape' class='item'}}Shape{{/link-to}} {{#link-to 'modules.sidebar' class='item'}}Sidebar{{/link-to}} {{#link-to 'modules.sticky' class='item'}}Sticky{{/link-to}} + {{#link-to 'modules.tab' class='item'}}Tab{{/link-to}} diff --git a/tests/dummy/app/templates/modules/tab.hbs b/tests/dummy/app/templates/modules/tab.hbs new file mode 100644 index 000000000..af7aa298f --- /dev/null +++ b/tests/dummy/app/templates/modules/tab.hbs @@ -0,0 +1,3 @@ +

Tab

+ +

Tabs are better implemented through ember routes. If you disagree I'd love to hear some example usages.

From 8129dbff71c01eb2c079d9008a3042586d39af35 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Sun, 23 Aug 2015 23:38:50 -0400 Subject: [PATCH 23/51] Added an example of transition (no need for a component) --- README.md | 17 +++++++++++++++-- tests/dummy/app/router.js | 1 + tests/dummy/app/templates/_menu.hbs | 1 + .../dummy/app/templates/modules/transition.hbs | 7 +++++++ 4 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 tests/dummy/app/templates/modules/transition.hbs diff --git a/README.md b/README.md index 3cda1d820..21b6baa4d 100644 --- a/README.md +++ b/README.md @@ -400,6 +400,19 @@ Not implemented. Better suited to use routes through Ember. If you disagree plea ## Transition * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/transition.html) - * **Class**: `ui sidebar` + * **Class**: `ui transition` + +You can invoke the semantic javascript directly. + +### Controller +```javascript +import Ember from 'ember'; -There isn't a cooresponding Ember component for this since it isn't rendered to the screen but instead invoked. +export default Ember.Controller.extend(Ember.Evented, { + actions: { + transition: function() { + $('img').transition('horizontal flip', '500ms'); + } + } +}); +``` diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 81bfdbe21..8fbb65f31 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -22,6 +22,7 @@ Router.map(function() { this.route('sidebar'); this.route('sticky'); this.route('tab'); + this.route('transition'); }); }); diff --git a/tests/dummy/app/templates/_menu.hbs b/tests/dummy/app/templates/_menu.hbs index 9ae180923..196102aca 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -17,6 +17,7 @@ {{#link-to 'modules.sidebar' class='item'}}Sidebar{{/link-to}} {{#link-to 'modules.sticky' class='item'}}Sticky{{/link-to}} {{#link-to 'modules.tab' class='item'}}Tab{{/link-to}} + {{#link-to 'modules.transition' class='item'}}Transition{{/link-to}} diff --git a/tests/dummy/app/templates/modules/transition.hbs b/tests/dummy/app/templates/modules/transition.hbs new file mode 100644 index 000000000..2ace10002 --- /dev/null +++ b/tests/dummy/app/templates/modules/transition.hbs @@ -0,0 +1,7 @@ +

Transition

+ +
+ Transition +
+ + From 54ec3511596e7153998c0eea43b9098e081cd354 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 07:59:16 -0400 Subject: [PATCH 24/51] Added tests for ui-nag --- addon/components/ui-nag.js | 1 + tests/index.html | 1 + tests/integration/components/ui-nag-test.js | 50 +++++++++++++++++++++ 3 files changed, 52 insertions(+) create mode 100644 tests/integration/components/ui-nag-test.js diff --git a/addon/components/ui-nag.js b/addon/components/ui-nag.js index c30fc8056..fe1809eb7 100644 --- a/addon/components/ui-nag.js +++ b/addon/components/ui-nag.js @@ -4,6 +4,7 @@ import Base from '../mixins/base'; export default Ember.Component.extend(Base, { module: 'nag', classNames: [ 'ui', 'nag' ], + attributeBindings: [ 'storageMethod', 'key', 'expires', 'domain', 'path', 'value' ], init: function() { this._super(); diff --git a/tests/index.html b/tests/index.html index 8fea6fe70..546ffd940 100644 --- a/tests/index.html +++ b/tests/index.html @@ -22,6 +22,7 @@ {{content-for 'body'}} {{content-for 'test-body'}} + diff --git a/tests/integration/components/ui-nag-test.js b/tests/integration/components/ui-nag-test.js new file mode 100644 index 000000000..7d28310fd --- /dev/null +++ b/tests/integration/components/ui-nag-test.js @@ -0,0 +1,50 @@ +/* global stop, start */ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui nag', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{#ui-nag class="inline cookie"}} + + We use cookies to ensure you get the best experience on our website + + + {{/ui-nag}} + `); + + assert.equal(this.$('.ui.nag').length, 1); +}); + +test('it will only show once', function(assert) { + assert.expect(4); + + var _this = this; + + this.render(hbs` + {{#ui-nag class="inline cookie"}} + + We use cookies to ensure you get the best experience on our website + + + {{/ui-nag}} + `); + + assert.equal(this.$('.ui.nag').length, 1); + this.$('.ui.nag').nag('clear'); + this.$('.ui.nag').nag('show'); + assert.equal(this.$('.ui.nag').css('display'), 'block'); + this.$('.ui.nag .close').click(); + + stop(); + setTimeout(function() { + start(); + + assert.equal(_this.$('.ui.nag').css('display'), 'none'); + _this.$('.ui.nag').nag('show'); + assert.equal(_this.$('.ui.nag').css('display'), 'none'); + }, 800); +}); From 05e8c15a9f08fe9ffd002ba4cdf70520640fbd8a Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 07:59:26 -0400 Subject: [PATCH 25/51] Added tests for ui-progress --- addon/components/ui-progress.js | 7 ++- .../components/ui-progress-test.js | 45 +++++++++++++++++++ 2 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 tests/integration/components/ui-progress-test.js diff --git a/addon/components/ui-progress.js b/addon/components/ui-progress.js index 5a2658fb6..c4b50b248 100644 --- a/addon/components/ui-progress.js +++ b/addon/components/ui-progress.js @@ -3,7 +3,12 @@ import Base from '../mixins/base'; var Progress = Ember.Component.extend(Base,{ module: 'progress', - classNames: ['ui', 'progress'] + classNames: ['ui', 'progress'], + attributeBindings: [ 'percent', 'total', 'value' ], + + updatePercent: Ember.observer('percent', function() { + this.execute('set percent', this.get('percent')); + }) }); export default Progress; diff --git a/tests/integration/components/ui-progress-test.js b/tests/integration/components/ui-progress-test.js new file mode 100644 index 000000000..e7b1cd45d --- /dev/null +++ b/tests/integration/components/ui-progress-test.js @@ -0,0 +1,45 @@ +/* global stop, start */ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui progress', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{#ui-progress percent=40 class="teal indicating"}} +
+
Completed
+ {{/ui-progress}} + `); + + assert.equal(this.$('.ui.progress').length, 1); +}); + +test('binding updates progress', function(assert) { + assert.expect(4); + + var _this = this; + + this.set('progress', 40); + this.render(hbs` + {{#ui-progress percent=progress class="teal indicating"}} +
+
Completed
+ {{/ui-progress}} + `); + + assert.equal(this.$('.ui.progress').length, 1); + assert.equal(this.$('.ui.progress').attr('data-percent'), 40); + var width = this.$('.ui.progress .bar').css('width'); + this.set('progress', 60); + + stop(); + setTimeout(function() { + start(); + + assert.equal(_this.$('.ui.progress').attr('data-percent'), 60); + assert.notEqual(_this.$('.ui.progress .bar').css('width'), width); + }, 500); +}); From 3a503517dde5660183bd752bb918729829f6ab89 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 07:59:40 -0400 Subject: [PATCH 26/51] Added tests for ui-rating --- addon/components/ui-rating.js | 14 +++++++++- .../integration/components/ui-rating-test.js | 26 +++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 tests/integration/components/ui-rating-test.js diff --git a/addon/components/ui-rating.js b/addon/components/ui-rating.js index a81341a6d..f71b00cd2 100644 --- a/addon/components/ui-rating.js +++ b/addon/components/ui-rating.js @@ -3,7 +3,19 @@ import Base from '../mixins/base'; var Rating = Ember.Component.extend(Base,{ module: 'rating', - classNames: ['ui', 'rating'] + classNames: ['ui', 'rating'], + + init: function() { + this._super(); + + if (!this.get('initialRating') && this.get('rating')) { + this.set('initialRating', this.get('rating')); + } + }, + + updateRating: Ember.observer('rating', function() { + this.execute('set rating', this.get('rating')); + }) }); export default Rating; diff --git a/tests/integration/components/ui-rating-test.js b/tests/integration/components/ui-rating-test.js new file mode 100644 index 000000000..d4afe0629 --- /dev/null +++ b/tests/integration/components/ui-rating-test.js @@ -0,0 +1,26 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui rating', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{ui-rating initialRating=3 maxRating=7}} + `); + + assert.equal(this.$('.ui.rating').length, 1); +}); + +test('it updates with bound values', function(assert) { + this.set('rating', 3); + this.render(hbs` + {{ui-rating rating=rating maxRating=7}} + `); + + assert.equal(this.$('.ui.rating').length, 1); + assert.equal(this.$('.ui.rating .active').length, 3); + this.set('rating', 6); + assert.equal(this.$('.ui.rating .active').length, 6); +}); From fb0573e590ab11c05d4a1127c00b37db88f49735 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 07:59:56 -0400 Subject: [PATCH 27/51] Updated the dummy templates for progress and rating --- tests/dummy/app/templates/modules/progress.hbs | 2 +- tests/dummy/app/templates/modules/rating.hbs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/dummy/app/templates/modules/progress.hbs b/tests/dummy/app/templates/modules/progress.hbs index 961a77680..f5f93b367 100644 --- a/tests/dummy/app/templates/modules/progress.hbs +++ b/tests/dummy/app/templates/modules/progress.hbs @@ -1,7 +1,7 @@

Progress

- {{#ui-progress percent=40 classNames="teal indicating"}} + {{#ui-progress percent=40 class="teal indicating"}}
Completed
{{/ui-progress}} diff --git a/tests/dummy/app/templates/modules/rating.hbs b/tests/dummy/app/templates/modules/rating.hbs index 0d0f708d2..dccc735a9 100644 --- a/tests/dummy/app/templates/modules/rating.hbs +++ b/tests/dummy/app/templates/modules/rating.hbs @@ -5,5 +5,5 @@
- {{ui-rating rating=0 classNames="heart"}} + {{ui-rating rating=0 class="heart"}}
From 6fde52279ce0b35e303cea21d7f349a158ea0ac5 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 08:00:04 -0400 Subject: [PATCH 28/51] Added tests for ui-accordion --- .../components/ui-accordion-test.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 tests/integration/components/ui-accordion-test.js diff --git a/tests/integration/components/ui-accordion-test.js b/tests/integration/components/ui-accordion-test.js new file mode 100644 index 000000000..d716b3398 --- /dev/null +++ b/tests/integration/components/ui-accordion-test.js @@ -0,0 +1,27 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui accordion', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{#ui-accordion class="styled"}} +
+ Semantic UI +
+
+ Accordion Component +
+
+ Section Two +
+
+ Content Two +
+ {{/ui-accordion}} + `); + + assert.equal($('.ui.accordion').length, 1); +}); From 600063e684978fed355c2b2e1d12665988683a9a Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 08:00:11 -0400 Subject: [PATCH 29/51] Added tests for ui-checkbox --- .../components/ui-checkbox-test.js | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 tests/integration/components/ui-checkbox-test.js diff --git a/tests/integration/components/ui-checkbox-test.js b/tests/integration/components/ui-checkbox-test.js new file mode 100644 index 000000000..6ae790543 --- /dev/null +++ b/tests/integration/components/ui-checkbox-test.js @@ -0,0 +1,26 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui checkbox', { + integration: true +}); + +test('it renders', function(assert) { + this.set('checked', false); + this.render(hbs` + {{ui-checkbox label="Make my profile visible" checked=checked}} + `); + + assert.equal($('.ui.checkbox').length, 1); +}); + +test('checking will update the bound property', function(assert) { + this.set('checked', false); + this.render(hbs` + {{ui-checkbox label="Make my profile visible" checked=checked}} + `); + + assert.equal(this.$('.ui.checkbox').length, 1); + this.$('.ui.checkbox').click(); + assert.equal(true, this.get('checked')); +}); From 914bd7ec8399f4031ae80243330a1a7d70160e41 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 08:00:20 -0400 Subject: [PATCH 30/51] Added an additional test for ui-embed for url --- tests/integration/components/ui-embed-test.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/tests/integration/components/ui-embed-test.js b/tests/integration/components/ui-embed-test.js index 18873b4c5..0a9b0672c 100644 --- a/tests/integration/components/ui-embed-test.js +++ b/tests/integration/components/ui-embed-test.js @@ -5,10 +5,18 @@ moduleForComponent('ui-dropdown', 'Integration | Component | ui embed', { integration: true }); -test('it renders', function(assert) { +test('it embeds youtube by id', function(assert) { this.render(hbs` {{ui-embed data-source="youtube" data-id="pfdu_gTry8E"}} `); assert.equal(this.$('.ui.embed .embed iframe').length, 1); }); + +test('it embeds through a url', function(assert) { + this.render(hbs` + {{ui-embed data-url="https://www.youtube.com/embed/pfdu_gTry8E"}} + `); + + assert.equal(this.$('.ui.embed .embed iframe').length, 1); +}); From 16bea24fb4fede58d02a982ca11f8e4c81dfd003 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 08:00:25 -0400 Subject: [PATCH 31/51] Added tests for ui-popup --- tests/integration/components/ui-popup-test.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 tests/integration/components/ui-popup-test.js diff --git a/tests/integration/components/ui-popup-test.js b/tests/integration/components/ui-popup-test.js new file mode 100644 index 000000000..b2394105e --- /dev/null +++ b/tests/integration/components/ui-popup-test.js @@ -0,0 +1,18 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui popup', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` + {{#ui-popup content="Add users to your feed"}} +
+ +
+ {{/ui-popup}} + `); + + assert.equal(this.$('div[data-content]').length, 1); +}); From 7eb6dd7297fa06be4ef6d2bdba9a634daea414fb Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 08:00:31 -0400 Subject: [PATCH 32/51] Added tests for ui-radio --- tests/integration/components/ui-radio-test.js | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 tests/integration/components/ui-radio-test.js diff --git a/tests/integration/components/ui-radio-test.js b/tests/integration/components/ui-radio-test.js new file mode 100644 index 000000000..5a085022e --- /dev/null +++ b/tests/integration/components/ui-radio-test.js @@ -0,0 +1,49 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-dropdown', 'Integration | Component | ui radio', { + integration: true +}); + +test('it renders', function(assert) { + this.render(hbs` +
+
+
+ {{ui-radio name="fruit" label="Once a week" checked=fruit}} +
+
+ {{ui-radio name="fruit" label="2-3 times a week" checked=fruit}} +
+
+ {{ui-radio name="fruit" label="Once a day" checked=fruit}} +
+
+
+ `); + + assert.equal(this.$('.ui.radio').length, 3); +}); + +test('selecting will update the bound property', function(assert) { + this.set('frequency', 'weekly'); + this.render(hbs` +
+
+
+ {{ui-radio name="frequency" label="Once a week" value='weekly' current=frequency}} +
+
+ {{ui-radio name="frequency" label="2-3 times a week" value='biweekly' current=frequency}} +
+
+ {{ui-radio name="frequency" label="Once a day" value='daily' current=frequency}} +
+
+
+ `); + + assert.equal(this.$('.ui.radio').length, 3); + this.$('.ui.radio')[2].click(); + assert.equal('daily', this.get('frequency')); +}); From 40c23317644633fa12e4d9966129138da7383701 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 08:22:10 -0400 Subject: [PATCH 33/51] Simplified the modal by removing the evented system Since all modals had to listen for events and required that we set a name and it matched it's not much different than calling the semantic modal show manually and this removes a fair bit of complexity --- addon/components/ui-modal.js | 94 ------------------- tests/dummy/app/components/inbox-modal.js | 1 + tests/dummy/app/controllers/modules/modal.js | 2 +- tests/integration/components/ui-modal-test.js | 30 +++--- 4 files changed, 16 insertions(+), 111 deletions(-) diff --git a/addon/components/ui-modal.js b/addon/components/ui-modal.js index 112d0c9f4..458312178 100644 --- a/addon/components/ui-modal.js +++ b/addon/components/ui-modal.js @@ -8,84 +8,6 @@ export default Ember.Component.extend(Base, { detachable: false, name: null, - /** - Check that the name parameter was passed in. The name is required and must - be unique per modal - - @name String - */ - init: function() { - this._super(); - - if (!this.get('name')) { - return Ember.Logger.error('All modals must include a name so they can be triggered properly'); - } - }, - - /** - Initialize the events that are called from the controller - */ - createEvent: Ember.on('didInsertElement', function() { - var component = this; - var target = this.get('targetObject'); - if (typeof target === "undefined") { - return; - } - - if (Ember.testing) { - target.context.on('showModal', function(name) { - return component.showModal.apply(component, [ name ]); - }); - return; - } - - if (typeof target.on !== "function") { - return; - } - - target.on('showModal', this, component.showModal); - }), - - /** - Destroy any event handlers that we create upon initialization - */ - destroyEvent: Ember.on('willClearRender', function() { - var target = this.get('targetObject'); - if (typeof target === "undefined") { - return; - } - - if (Ember.testing) { - return; - } - - if (typeof target.on !== "function") { - return; - } - - target.off('showModal', this, this.showModal); - }), - - /** - Callback that is fired from the Controller when we want to open a modal - */ - showModal: function(name) { - var _this = this; - - return new Ember.RSVP.Promise(function(resolve, reject) { - // This will trigger on all modals so we - // have to compare the name. - if (name !== _this.get('name')) { - reject(); - return; - } - - _this.execute('show', function() { - resolve(); - }); - }); - }, - /** Passing approve through to the calling controller if it was passed in */ @@ -115,22 +37,6 @@ export default Ember.Component.extend(Base, { return true; } - return false; - }, - - /** - Helper to get the targetObject for this component - - @action String - */ - checkTargetForAction: function(action) { - var target = this.get('targetObject'); - if (typeof target !== "undefined" && target !== null && - typeof target._actions !== "undefined" && target._actions !== null && - typeof target._actions[action] !== "undefined" && target._actions[action] !== null) { - return target; - } - return false; } }); diff --git a/tests/dummy/app/components/inbox-modal.js b/tests/dummy/app/components/inbox-modal.js index ac5e99663..838537363 100644 --- a/tests/dummy/app/components/inbox-modal.js +++ b/tests/dummy/app/components/inbox-modal.js @@ -3,6 +3,7 @@ import UiModal from 'semantic-ui-ember/components/ui-modal'; export default UiModal.extend({ name: 'inbox', + classNames: [ 'inbox' ], actions: { yes: function() { diff --git a/tests/dummy/app/controllers/modules/modal.js b/tests/dummy/app/controllers/modules/modal.js index 8d9699435..cb7b2e3bd 100644 --- a/tests/dummy/app/controllers/modules/modal.js +++ b/tests/dummy/app/controllers/modules/modal.js @@ -4,7 +4,7 @@ import Ember from 'ember'; export default Ember.Controller.extend(Ember.Evented, { actions: { openModal: function(name) { - this.trigger('showModal', name); + $('.ui.' + name + '.modal').modal('show'); }, approveModal: function(name) { diff --git a/tests/integration/components/ui-modal-test.js b/tests/integration/components/ui-modal-test.js index f6a34465a..36cd57760 100644 --- a/tests/integration/components/ui-modal-test.js +++ b/tests/integration/components/ui-modal-test.js @@ -19,12 +19,10 @@ test('it will show if triggered', function(assert) { var _this = this; - this.on('openModal', function(name) { - stop(); - - return _this.actions.showModal.apply(this, [ name ]).then(function() { + this.on('openModal', function() { + _this.$('.ui.modal').modal('show', function() { start(); - assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible"); + assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible after showing"); }); }); @@ -39,6 +37,7 @@ test('it will show if triggered', function(assert) { assert.equal(this.$('.ui.modal').length, 1, ".ui.modal exists"); assert.equal(this.$('.ui.modal.visible').length, 0, ".ui.modal is not visible"); + stop(); this.$('.ui.button').click(); }); @@ -47,10 +46,10 @@ test('it will send approve back to controller and hide', function(assert) { var _this = this; - this.on('openModal', function(name) { - return _this.actions.showModal.apply(this, [ name ]).then(function() { + this.on('openModal', function() { + _this.$('.ui.modal').modal('show', function() { + assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible after showing"); _this.$('.ui.modal .ui.positive.button').click(); - assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible"); }); }); @@ -85,10 +84,10 @@ test('it will send approve back to controller and skip the hide', function(asser var _this = this; - this.on('openModal', function(name) { - return _this.actions.showModal.apply(this, [ name ]).then(function() { + this.on('openModal', function() { + _this.$('.ui.modal').modal('show', function() { + assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible after showing"); _this.$('.ui.modal .ui.positive.button').click(); - assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible"); }); }); @@ -123,16 +122,14 @@ test('it will send deny back to controller', function(assert) { var _this = this; - this.on('openModal', function(name) { - stop(); - - return _this.actions.showModal.apply(this, [ name ]).then(function() { - start(); + this.on('openModal', function() { + _this.$('.ui.modal').modal('show', function() { _this.$('.ui.modal.negative').click(); }); }); this.on('deny', function(name) { + start(); assert.equal('profile', name); }); @@ -149,5 +146,6 @@ test('it will send deny back to controller', function(assert) { {{/ui-modal}} `); + stop(); this.$('.ui.button').click(); }); From 5e7fd4a52612722bc78ef2c4bc2de42367b7a4f1 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 24 Aug 2015 08:23:06 -0400 Subject: [PATCH 34/51] Changed the application view to a Component instead of a view --- tests/dummy/app/views/application.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/dummy/app/views/application.js b/tests/dummy/app/views/application.js index 406019afc..b12a96343 100644 --- a/tests/dummy/app/views/application.js +++ b/tests/dummy/app/views/application.js @@ -1,5 +1,5 @@ import Ember from 'ember'; -export default Ember.View.extend({ +export default Ember.Component.extend({ classNames: [ 'pusher' ] }); From c3e4d004c122ba8d5db73b791380c1803d4eaaf1 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Tue, 25 Aug 2015 23:55:44 -0400 Subject: [PATCH 35/51] Added spaces around class names --- addon/components/ui-accordion.js | 2 +- addon/components/ui-dropdown.js | 2 +- addon/components/ui-progress.js | 2 +- addon/components/ui-radio.js | 2 +- addon/components/ui-rating.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/addon/components/ui-accordion.js b/addon/components/ui-accordion.js index 0a4240209..9e6ab7415 100644 --- a/addon/components/ui-accordion.js +++ b/addon/components/ui-accordion.js @@ -3,7 +3,7 @@ import Base from '../mixins/base'; var Accordion = Ember.Component.extend(Base,{ module: 'accordion', - classNames: ['ui', 'accordion'] + classNames: [ 'ui', 'accordion' ] }); export default Accordion; diff --git a/addon/components/ui-dropdown.js b/addon/components/ui-dropdown.js index 9aaecb35c..3cbff685d 100644 --- a/addon/components/ui-dropdown.js +++ b/addon/components/ui-dropdown.js @@ -3,8 +3,8 @@ import Base from '../mixins/base'; import DataAttributes from '../mixins/data-attributes'; export default Ember.Component.extend(Base, DataAttributes, { - classNames: ['ui', 'dropdown'], module: 'dropdown', + classNames: [ 'ui', 'dropdown' ], tagName: 'div', initialize: Ember.on('didInsertElement', function() { diff --git a/addon/components/ui-progress.js b/addon/components/ui-progress.js index c4b50b248..6ca889e55 100644 --- a/addon/components/ui-progress.js +++ b/addon/components/ui-progress.js @@ -3,7 +3,7 @@ import Base from '../mixins/base'; var Progress = Ember.Component.extend(Base,{ module: 'progress', - classNames: ['ui', 'progress'], + classNames: [ 'ui', 'progress' ], attributeBindings: [ 'percent', 'total', 'value' ], updatePercent: Ember.observer('percent', function() { diff --git a/addon/components/ui-radio.js b/addon/components/ui-radio.js index ef5d35fa8..2a43ac0cd 100644 --- a/addon/components/ui-radio.js +++ b/addon/components/ui-radio.js @@ -2,8 +2,8 @@ import Ember from 'ember'; import CheckboxMixin from '../mixins/checkbox-mixin'; export default Ember.Component.extend(CheckboxMixin, { - classNames: ['radio'], type: 'radio', + classNames: [ 'radio' ], name: 'default', init: function() { diff --git a/addon/components/ui-rating.js b/addon/components/ui-rating.js index f71b00cd2..28055411a 100644 --- a/addon/components/ui-rating.js +++ b/addon/components/ui-rating.js @@ -3,7 +3,7 @@ import Base from '../mixins/base'; var Rating = Ember.Component.extend(Base,{ module: 'rating', - classNames: ['ui', 'rating'], + classNames: [ 'ui', 'rating' ], init: function() { this._super(); From 51f5a57189f069a1efaa006f0d4cd45456521cf1 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Thu, 27 Aug 2015 00:35:47 -0400 Subject: [PATCH 36/51] Created a ui-dropdown item so we can optionally bind objects to a dropdown --- addon/components/ui-dropdown-item.js | 18 +++++++++ app/components/ui-dropdown-item.js | 2 + .../dummy/app/controllers/modules/dropdown.js | 13 ++++++- .../dummy/app/templates/modules/dropdown.hbs | 38 +++++++++++++++++-- .../components/ui-dropdown-test.js | 27 +++++++++++++ 5 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 addon/components/ui-dropdown-item.js create mode 100644 app/components/ui-dropdown-item.js diff --git a/addon/components/ui-dropdown-item.js b/addon/components/ui-dropdown-item.js new file mode 100644 index 000000000..ab17b72da --- /dev/null +++ b/addon/components/ui-dropdown-item.js @@ -0,0 +1,18 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + classNames: ['item'], + tagName: 'div', + + initialize: Ember.on('init', function() { + Ember.run.scheduleOnce('afterRender', this, this.update_data); + }), + + update_data: function() { + if (this.$().data('value')) { + return; + } + + this.$().data('value', this.get('content')); + } +}); diff --git a/app/components/ui-dropdown-item.js b/app/components/ui-dropdown-item.js new file mode 100644 index 000000000..683433171 --- /dev/null +++ b/app/components/ui-dropdown-item.js @@ -0,0 +1,2 @@ +import DropdownItem from 'semantic-ui-ember/components/ui-dropdown-item'; +export default DropdownItem; diff --git a/tests/dummy/app/controllers/modules/dropdown.js b/tests/dummy/app/controllers/modules/dropdown.js index 66a2df6e5..52cd777c4 100644 --- a/tests/dummy/app/controllers/modules/dropdown.js +++ b/tests/dummy/app/controllers/modules/dropdown.js @@ -18,5 +18,16 @@ export default Ember.Controller.extend({ { iso2: 'us', name: 'United States' }, { iso2: 'ca', name: 'Canada' }, { iso2: 'mx', name: 'Mexico' } - ] + ], + + actions: { + set_active: function() { + this.set('dropdown_active', true); + }, + + update_gender: function(id, value) { + this.set('gender', id) + return true; + } + } }); diff --git a/tests/dummy/app/templates/modules/dropdown.hbs b/tests/dummy/app/templates/modules/dropdown.hbs index eb22ed175..8e1823ced 100644 --- a/tests/dummy/app/templates/modules/dropdown.hbs +++ b/tests/dummy/app/templates/modules/dropdown.hbs @@ -6,12 +6,13 @@
A dropdown
- {{ui-dropdown content=categories prompt="Shop"}} + {{ui-dropdown content=categories prompt="Shop" active=dropdown_active}}
- +
Active
+
@@ -21,7 +22,7 @@
A dropdown can be used to select between choices in a form
- {{#ui-dropdown class="selection" value=gender}} + {{#ui-dropdown class="selection" onChange=(action 'update_gender')}}
Gender
@@ -43,6 +44,35 @@
+
+
+

+ Selection +
A dropdown can be used to select between choices in a form
+

+ + {{#ui-dropdown class="selection" value=gender2}} +
Gender
+ +
+ {{#each genders as |gender|}} + {{#ui-dropdown-item content=gender}} + {{gender.text}} + {{/ui-dropdown-item}} + {{/each}} +
+ {{/ui-dropdown}} +
+
+
+
+ + {{input value=gender2.text readonly="true"}} +
+
+
+
+

@@ -50,7 +80,7 @@
A dropdown can be used to select between choices in a form

- {{#ui-dropdown class="fluid multiple selection" selection=country}} + {{#ui-dropdown class="fluid multiple selection" value=country}}
Select Country
diff --git a/tests/integration/components/ui-dropdown-test.js b/tests/integration/components/ui-dropdown-test.js index a0c7b4225..d3c5e7e7f 100644 --- a/tests/integration/components/ui-dropdown-test.js +++ b/tests/integration/components/ui-dropdown-test.js @@ -102,3 +102,30 @@ test('it renders multiple', function(assert) { this.$(".menu .item[data-value=2]").click(); assert.equal(this.get('value'), '1,2'); }); + +test('it binds to an object', function(assert) { + assert.expect(3); + + this.set('people', [ + { id: 1, name: "Sherlock Homes" }, + { id: 2, name: "Patrick Bateman" } + ]); + + this.render(hbs` + {{#ui-dropdown selection=value}} +
+ {{#each people as |person|}} + {{#ui-dropdown-item content=person}} + {{person.name}} + {{/ui-dropdown-item}} + {{/each}} +
+ {{/ui-dropdown}} + `); + + assert.equal(this.$('.item').length, 2); + assert.equal(this.get('value'), undefined); + + this.$(".menu .item")[1].click(); + assert.equal(this.get('value'), this.get('people')[1]); +}); From 06763e8572e581af2b796cc9769606aa0fbd8ea1 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Thu, 27 Aug 2015 00:36:36 -0400 Subject: [PATCH 37/51] Added dynamic events on the base so any semantic event your an pass through a property --- addon/components/ui-checkbox.js | 10 +---- addon/components/ui-dropdown.js | 68 +-------------------------------- addon/components/ui-popup.js | 5 ++- addon/components/ui-progress.js | 6 +-- addon/components/ui-radio.js | 11 +----- addon/components/ui-rating.js | 6 +-- addon/mixins/base.js | 51 ++++++++++++++++++++++--- 7 files changed, 55 insertions(+), 102 deletions(-) diff --git a/addon/components/ui-checkbox.js b/addon/components/ui-checkbox.js index e997119fc..34dbed9b9 100644 --- a/addon/components/ui-checkbox.js +++ b/addon/components/ui-checkbox.js @@ -3,13 +3,5 @@ import CheckboxMixin from '../mixins/checkbox-mixin'; export default Ember.Component.extend(CheckboxMixin, { type: 'checkbox', - checked: false, - - onChange: function() { - this.set('checked', this.$('input').prop('checked')); - this.sendAction('action', { - checked: this.get('checked'), - value: this.get('value') - }); - } + checked: false }); diff --git a/addon/components/ui-dropdown.js b/addon/components/ui-dropdown.js index 3cbff685d..9435504d9 100644 --- a/addon/components/ui-dropdown.js +++ b/addon/components/ui-dropdown.js @@ -7,41 +7,6 @@ export default Ember.Component.extend(Base, DataAttributes, { classNames: [ 'ui', 'dropdown' ], tagName: 'div', - initialize: Ember.on('didInsertElement', function() { - var value = this.get('value'); - if (typeof value !== "undefined" && value !== null) { - this.execute('set selected', value); - } - }), - - /** - When `multiple` is `false`, the element of `content` that is currently - selected, if any. - When `multiple` is `true`, an array of such elements. - @property selection - @type Object or Array - @default null - */ - selection: null, - - /** - In single selection mode (when `multiple` is `false`), value can be used to - get the current selection's value or set the selection by its value. - It is not currently supported in multiple selection mode. - @property value - @type String - @default null - */ - value: Ember.computed('selection', { - get(/* key */) { - return this.get('selection'); - }, - - set(key, value) { - return value; - } - }), - onChange: function(value, text, $element) { if (value === undefined) { // The initial set selected doesn't have an value. This is potentially a problem @@ -50,37 +15,6 @@ export default Ember.Component.extend(Base, DataAttributes, { // https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/dropdown.js#L85 value = $element.data('value'); } - return this.set('selection', value); - }, - - onUpdate: Ember.observer('value', function() { - return Ember.run.scheduleOnce('afterRender', this, this.setValue); - }), - - onContentChange: Ember.observer('content', function() { - // Wait for the afterRender portion of the Run Loop to complete after - // after a content change. Once that happens, re-initialize the - // Semantic component the same way as Semantic.BaseMixin - // - // Without this, Dropdown Items will not be clickable if the content - // is set after the initial render. - Ember.run.scheduleOnce('afterRender', this, function() { - if (this.get('isDestroyed') || this.get('isDestroying')) { - return; - } - this.didInsertElement(); - this.setValue(); - }); - }), - - setValue: function() { - var dropdownValue, inputValue; - inputValue = this.get('value'); - dropdownValue = this.execute("get value"); - if (inputValue == null) { - return this.execute("clear"); - } else if (inputValue !== dropdownValue) { - return this.execute("set selected", this.get('value')); - } + return this.set('value', value); } }); diff --git a/addon/components/ui-popup.js b/addon/components/ui-popup.js index de5861459..b7f36cc3e 100644 --- a/addon/components/ui-popup.js +++ b/addon/components/ui-popup.js @@ -3,8 +3,9 @@ import Base from '../mixins/base'; export default Ember.Component.extend(Base, { module: 'popup', + attributeBindings: ['content:data-content'], + contentChanges: Ember.observer('content', function() { this.didInsertElement(); - }), - attributeBindings: ['content:data-content'] + }) }); diff --git a/addon/components/ui-progress.js b/addon/components/ui-progress.js index 6ca889e55..72262ee6e 100644 --- a/addon/components/ui-progress.js +++ b/addon/components/ui-progress.js @@ -4,11 +4,7 @@ import Base from '../mixins/base'; var Progress = Ember.Component.extend(Base,{ module: 'progress', classNames: [ 'ui', 'progress' ], - attributeBindings: [ 'percent', 'total', 'value' ], - - updatePercent: Ember.observer('percent', function() { - this.execute('set percent', this.get('percent')); - }) + attributeBindings: [ 'percent', 'total', 'value' ] }); export default Progress; diff --git a/addon/components/ui-radio.js b/addon/components/ui-radio.js index 2a43ac0cd..0c29b7ca2 100644 --- a/addon/components/ui-radio.js +++ b/addon/components/ui-radio.js @@ -8,6 +8,7 @@ export default Ember.Component.extend(CheckboxMixin, { init: function() { this._super(); + if (!(this.get('name') && this.get('name') !== 'default')) { Ember.Logger.warn('Name was not passed into semantic radio component'); } @@ -15,13 +16,5 @@ export default Ember.Component.extend(CheckboxMixin, { checked: Ember.computed('current', 'value', function() { return this.get('current') === this.get('value'); - }), - - onChange: function() { - this.set('current', this.get('value')); - this.sendAction("action", { - checked: this.get('checked'), - value: this.get('value') - }); - } + }) }); diff --git a/addon/components/ui-rating.js b/addon/components/ui-rating.js index 28055411a..2dd1dbf03 100644 --- a/addon/components/ui-rating.js +++ b/addon/components/ui-rating.js @@ -11,11 +11,7 @@ var Rating = Ember.Component.extend(Base,{ if (!this.get('initialRating') && this.get('rating')) { this.set('initialRating', this.get('rating')); } - }, - - updateRating: Ember.observer('rating', function() { - this.execute('set rating', this.get('rating')); - }) + } }); export default Rating; diff --git a/addon/mixins/base.js b/addon/mixins/base.js index 5d5c0f305..8c31675e6 100644 --- a/addon/mixins/base.js +++ b/addon/mixins/base.js @@ -4,51 +4,91 @@ import Semantic from '../semantic'; Semantic.BaseMixin = Ember.Mixin.create({ init: function() { this._super(); + if (!this.get('module')) { return Ember.Logger.error('Module was not declared on semantic extended type'); } }, + settings: function(module) { - var component, custom, key, prop, value, _ref; + var component, custom, key, prop, value; + component = window.$.fn[module]; if (!component) { throw "Unable to find semantic module: " + module; } + custom = { debug: Semantic.UI_DEBUG, performance: Semantic.UI_PERFORMANCE, verbose: Semantic.UI_VERBOSE }; - _ref = component.settings; - for (key in _ref) { - prop = _ref[key]; + + for (key in component.settings) { + console.log(key + ' for ' + module) + prop = component.settings[key]; if (window.$.inArray(key, Semantic.BaseMixin.DEBUG) >= 0) { continue; } + if (window.$.inArray(key, Semantic.BaseMixin.STANDARD) >= 0) { continue; } + if (typeof prop === 'function' && typeof this.get(key) !== 'function') { continue; } + if (window.$.inArray(key, Semantic.BaseMixin.EMBER) >= 0) { value = this.get("ui_" + key); } else { value = this.get(key); } + if (value != null) { if (typeof value === 'function') { custom[key] = Ember.run.bind(this, value); } else { custom[key] = value; } + } else { + if (key.startsWith('on') && key != 'on') { + custom[key] = this.updateEvent(key); + } } } + return custom; }, + + updateProperty: function(property) { + return function() { + this.execute('set ' + property, this.get(property)); + }; + }, + + updateEvent: function(name) { + return function() { + return this.sendAction(name, arguments); + } + }, + didInsertElement: function() { - return this.$()[this.get("module")](this.settings(this.get("module"))); + this.$()[this.get("module")](this.settings(this.get("module"))); + + var _this = this; + var properties = this.execute('set'); + var property; + + for(property in properties) { + if (!properties.hasOwnProperty(property)) { + continue; + } + + _this.addObserver(property, _this, _this.updateProperty(property)); + } }, + willDestroyElement: function() { var name, selector; if ((selector = this.$()) != null) { @@ -57,6 +97,7 @@ Semantic.BaseMixin = Ember.Mixin.create({ } } }, + execute: function() { var selector, module; if ((selector = this.$()) != null) { From 20898a43f3847344321b50f67534960b6ebade9a Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Thu, 27 Aug 2015 00:49:38 -0400 Subject: [PATCH 38/51] Fixed the dropdown test and brought back a couple of the onChange events --- addon/components/ui-checkbox.js | 7 ++++++- addon/components/ui-radio.js | 5 +++++ addon/mixins/base.js | 5 ++--- tests/dummy/app/controllers/modules/dropdown.js | 4 ++-- tests/integration/components/ui-dropdown-test.js | 10 +++++----- 5 files changed, 20 insertions(+), 11 deletions(-) diff --git a/addon/components/ui-checkbox.js b/addon/components/ui-checkbox.js index 34dbed9b9..5b11fc8fd 100644 --- a/addon/components/ui-checkbox.js +++ b/addon/components/ui-checkbox.js @@ -3,5 +3,10 @@ import CheckboxMixin from '../mixins/checkbox-mixin'; export default Ember.Component.extend(CheckboxMixin, { type: 'checkbox', - checked: false + checked: false, + + onChange: function() { + this._super(); + this.set('checked', this.$('input').prop('checked')); + } }); diff --git a/addon/components/ui-radio.js b/addon/components/ui-radio.js index 0c29b7ca2..6c39659a6 100644 --- a/addon/components/ui-radio.js +++ b/addon/components/ui-radio.js @@ -14,6 +14,11 @@ export default Ember.Component.extend(CheckboxMixin, { } }, + onChange: function() { + this._super(); + this.set('current', this.get('value')); + }, + checked: Ember.computed('current', 'value', function() { return this.get('current') === this.get('value'); }) diff --git a/addon/mixins/base.js b/addon/mixins/base.js index 8c31675e6..58932f51a 100644 --- a/addon/mixins/base.js +++ b/addon/mixins/base.js @@ -25,7 +25,6 @@ Semantic.BaseMixin = Ember.Mixin.create({ }; for (key in component.settings) { - console.log(key + ' for ' + module) prop = component.settings[key]; if (window.$.inArray(key, Semantic.BaseMixin.DEBUG) >= 0) { continue; @@ -52,7 +51,7 @@ Semantic.BaseMixin = Ember.Mixin.create({ custom[key] = value; } } else { - if (key.startsWith('on') && key != 'on') { + if (key.startsWith('on') && key !== 'on') { custom[key] = this.updateEvent(key); } } @@ -70,7 +69,7 @@ Semantic.BaseMixin = Ember.Mixin.create({ updateEvent: function(name) { return function() { return this.sendAction(name, arguments); - } + }; }, didInsertElement: function() { diff --git a/tests/dummy/app/controllers/modules/dropdown.js b/tests/dummy/app/controllers/modules/dropdown.js index 52cd777c4..bc120b712 100644 --- a/tests/dummy/app/controllers/modules/dropdown.js +++ b/tests/dummy/app/controllers/modules/dropdown.js @@ -25,8 +25,8 @@ export default Ember.Controller.extend({ this.set('dropdown_active', true); }, - update_gender: function(id, value) { - this.set('gender', id) + update_gender: function(id /*, value*/) { + this.set('gender', id); return true; } } diff --git a/tests/integration/components/ui-dropdown-test.js b/tests/integration/components/ui-dropdown-test.js index d3c5e7e7f..60b306b2c 100644 --- a/tests/integration/components/ui-dropdown-test.js +++ b/tests/integration/components/ui-dropdown-test.js @@ -10,7 +10,7 @@ test('it renders from an array', function(assert) { this.set('people', [ "Sherlock Homes", "Patrick Bateman" ]); this.render(hbs` - {{#ui-dropdown selection=value}} + {{#ui-dropdown value=value}}
{{#each people as |person|}}
{{person}}
@@ -35,7 +35,7 @@ test('it renders from an object array', function(assert) { ]); this.render(hbs` - {{#ui-dropdown selection=value}} + {{#ui-dropdown value=value}}
{{#each people as |person|}}
{{person.name}}
@@ -61,7 +61,7 @@ test('it renders with an option selected', function(assert) { this.set('value', 2); this.render(hbs` - {{#ui-dropdown selection=value}} + {{#ui-dropdown value=value}}
{{#each people as |person|}}
{{person.name}}
@@ -86,7 +86,7 @@ test('it renders multiple', function(assert) { ]); this.render(hbs` - {{#ui-dropdown class='multiple' selection=value}} + {{#ui-dropdown class='multiple' value=value}}
{{#each people as |person|}}
{{person.name}}
@@ -112,7 +112,7 @@ test('it binds to an object', function(assert) { ]); this.render(hbs` - {{#ui-dropdown selection=value}} + {{#ui-dropdown value=value}}
{{#each people as |person|}} {{#ui-dropdown-item content=person}} From cbc55e455559b32bfdcd20846ea2e0651107603f Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Fri, 28 Aug 2015 00:20:22 -0400 Subject: [PATCH 39/51] Removed the event mapping from base since passing in event properties works without it --- addon/components/ui-dropdown.js | 1 + addon/mixins/base.js | 10 ---------- tests/dummy/app/templates/modules/dropdown.hbs | 2 -- 3 files changed, 1 insertion(+), 12 deletions(-) diff --git a/addon/components/ui-dropdown.js b/addon/components/ui-dropdown.js index 9435504d9..c8f282dec 100644 --- a/addon/components/ui-dropdown.js +++ b/addon/components/ui-dropdown.js @@ -8,6 +8,7 @@ export default Ember.Component.extend(Base, DataAttributes, { tagName: 'div', onChange: function(value, text, $element) { + this._super(); if (value === undefined) { // The initial set selected doesn't have an value. This is potentially a problem // within the main Semantic library diff --git a/addon/mixins/base.js b/addon/mixins/base.js index 58932f51a..ad5a8175b 100644 --- a/addon/mixins/base.js +++ b/addon/mixins/base.js @@ -50,10 +50,6 @@ Semantic.BaseMixin = Ember.Mixin.create({ } else { custom[key] = value; } - } else { - if (key.startsWith('on') && key !== 'on') { - custom[key] = this.updateEvent(key); - } } } @@ -66,12 +62,6 @@ Semantic.BaseMixin = Ember.Mixin.create({ }; }, - updateEvent: function(name) { - return function() { - return this.sendAction(name, arguments); - }; - }, - didInsertElement: function() { this.$()[this.get("module")](this.settings(this.get("module"))); diff --git a/tests/dummy/app/templates/modules/dropdown.hbs b/tests/dummy/app/templates/modules/dropdown.hbs index 8e1823ced..fc6eae671 100644 --- a/tests/dummy/app/templates/modules/dropdown.hbs +++ b/tests/dummy/app/templates/modules/dropdown.hbs @@ -5,8 +5,6 @@ Dropdown
A dropdown
- - {{ui-dropdown content=categories prompt="Shop" active=dropdown_active}}
Active
From ab5f3c5b17f6e37b98279be36f077272743d7fbc Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Fri, 28 Aug 2015 00:20:34 -0400 Subject: [PATCH 40/51] Increased the timeout for the nag test (it failed randomly) --- tests/integration/components/ui-nag-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/integration/components/ui-nag-test.js b/tests/integration/components/ui-nag-test.js index 7d28310fd..14e7be043 100644 --- a/tests/integration/components/ui-nag-test.js +++ b/tests/integration/components/ui-nag-test.js @@ -46,5 +46,5 @@ test('it will only show once', function(assert) { assert.equal(_this.$('.ui.nag').css('display'), 'none'); _this.$('.ui.nag').nag('show'); assert.equal(_this.$('.ui.nag').css('display'), 'none'); - }, 800); + }, 1000); }); From 6ed8bc045d280140bd38fec9c6736a3be19c7ec5 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Fri, 28 Aug 2015 01:06:25 -0400 Subject: [PATCH 41/51] Upgraded to Ember 2.0! --- bower.json | 8 ++++---- tests/dummy/app/router.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bower.json b/bower.json index 81cdbf519..a16d53d08 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,11 @@ { "name": "semantic-ui-ember", "dependencies": { - "ember": "1.13.7", - "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", + "ember": "2.0.1", + "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.4", "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", - "ember-data": "1.13.8", - "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5", + "ember-data": "2.0.0", + "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.6", "ember-qunit": "0.4.9", "ember-qunit-notifications": "0.0.7", "ember-resolver": "~0.1.18", diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js index 8fbb65f31..b768bdf2d 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -6,7 +6,7 @@ var Router = Ember.Router.extend({ }); Router.map(function() { - this.resource('modules', function() { + this.route('modules', function() { this.route('accordion'); this.route('checkbox'); this.route('dimmer'); From 85c214c5ea1f3d706fca1905c9701be7841fe93e Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Mon, 31 Aug 2015 08:43:45 -0400 Subject: [PATCH 42/51] Updating the version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7bf4f2d3c..28fd3fe03 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "semantic-ui-ember", - "version": "0.0.1-rc.10", + "version": "0.9.0", "title": "Semantic UI Ember", "description": "Semantic UI for Ember applications", "homepage": "http://www.semantic-ui.com", From a864c97087c84efdf35e0f0ff7891ddc53c95ac3 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Tue, 29 Sep 2015 09:13:25 -0400 Subject: [PATCH 43/51] Updated base events to use an underscore so they don't get overwritten by passed in events BREAKING: Firing all events from semantic by also passing in the component as the first parameter. This helps with things like checkbox that don't have any parameters BREAKING: Removed the onApprove and onDeny event handlers on the modal and use the regular versions now by passing onApprove versus approve (to keep things consistent) --- addon/components/ui-checkbox.js | 3 +- addon/components/ui-dropdown.js | 3 +- addon/components/ui-modal.js | 35 +------------------ addon/components/ui-radio.js | 3 +- addon/mixins/base.js | 31 +++++++++++++--- .../dummy/app/controllers/modules/checkbox.js | 9 ++++- .../dummy/app/controllers/modules/dropdown.js | 2 +- .../dummy/app/templates/modules/checkbox.hbs | 4 ++- .../components/ui-accordion-test.js | 2 +- .../components/ui-checkbox-test.js | 2 +- tests/integration/components/ui-embed-test.js | 2 +- tests/integration/components/ui-modal-test.js | 17 +++++---- tests/integration/components/ui-nag-test.js | 2 +- tests/integration/components/ui-popup-test.js | 2 +- .../components/ui-progress-test.js | 2 +- tests/integration/components/ui-radio-test.js | 2 +- .../integration/components/ui-rating-test.js | 2 +- .../integration/components/ui-search-test.js | 2 +- tests/integration/components/ui-shape-test.js | 2 +- .../integration/components/ui-sidebar-test.js | 3 +- .../integration/components/ui-sticky-test.js | 2 +- 21 files changed, 66 insertions(+), 66 deletions(-) diff --git a/addon/components/ui-checkbox.js b/addon/components/ui-checkbox.js index 5b11fc8fd..5f2b8039c 100644 --- a/addon/components/ui-checkbox.js +++ b/addon/components/ui-checkbox.js @@ -5,8 +5,7 @@ export default Ember.Component.extend(CheckboxMixin, { type: 'checkbox', checked: false, - onChange: function() { - this._super(); + _onChange: function() { this.set('checked', this.$('input').prop('checked')); } }); diff --git a/addon/components/ui-dropdown.js b/addon/components/ui-dropdown.js index c8f282dec..bd75dfd44 100644 --- a/addon/components/ui-dropdown.js +++ b/addon/components/ui-dropdown.js @@ -6,8 +6,9 @@ export default Ember.Component.extend(Base, DataAttributes, { module: 'dropdown', classNames: [ 'ui', 'dropdown' ], tagName: 'div', + value: null, - onChange: function(value, text, $element) { + _onChange: function(value, text, $element) { this._super(); if (value === undefined) { // The initial set selected doesn't have an value. This is potentially a problem diff --git a/addon/components/ui-modal.js b/addon/components/ui-modal.js index 458312178..3649c523f 100644 --- a/addon/components/ui-modal.js +++ b/addon/components/ui-modal.js @@ -1,42 +1,9 @@ import Ember from 'ember'; import Base from '../mixins/base'; -// import DataAttributes from '../mixins/data-attributes'; export default Ember.Component.extend(Base, { module: 'modal', classNames: [ 'ui', 'modal' ], detachable: false, - name: null, - - /** - Passing approve through to the calling controller if it was passed in - */ - onApprove: function() { - return this.triggerPassedInEvent('approve', [ this.get('name') ]); - }, - - /** - Passing deny through to the calling controller if it was passed in - */ - onDeny: function() { - return this.triggerPassedInEvent('deny', [ this.get('name') ]); - }, - - /** - Helper to conditionally trigger a passed in action. - - @action String - @args Array - */ - triggerPassedInEvent: function(action, args) { - if (typeof this.attrs[action] !== "function") { - return true; - } - - if (this.attrs[action].apply(this, args)) { - return true; - } - - return false; - } + name: null }); diff --git a/addon/components/ui-radio.js b/addon/components/ui-radio.js index 6c39659a6..cf903d015 100644 --- a/addon/components/ui-radio.js +++ b/addon/components/ui-radio.js @@ -14,8 +14,7 @@ export default Ember.Component.extend(CheckboxMixin, { } }, - onChange: function() { - this._super(); + _onChange: function() { this.set('current', this.get('value')); }, diff --git a/addon/mixins/base.js b/addon/mixins/base.js index ad5a8175b..43561ffb8 100644 --- a/addon/mixins/base.js +++ b/addon/mixins/base.js @@ -26,7 +26,7 @@ Semantic.BaseMixin = Ember.Mixin.create({ for (key in component.settings) { prop = component.settings[key]; - if (window.$.inArray(key, Semantic.BaseMixin.DEBUG) >= 0) { + if (window.$.inArray(key, Semantic.BaseMixin.DEBUG) >= 0) { continue; } @@ -34,19 +34,23 @@ Semantic.BaseMixin = Ember.Mixin.create({ continue; } - if (typeof prop === 'function' && typeof this.get(key) !== 'function') { + if (typeof prop === 'function' && typeof (this.get(key) || this.get(`_${key}`)) !== 'function') { continue; } if (window.$.inArray(key, Semantic.BaseMixin.EMBER) >= 0) { - value = this.get("ui_" + key); + value = this.get(`ui_${key}`); } else { - value = this.get(key); + if (typeof this.get(key) !== 'undefined') { + value = this.get(key); + } else { + value = this.get(`_${key}`); + } } if (value != null) { if (typeof value === 'function') { - custom[key] = Ember.run.bind(this, value); + custom[key] = Ember.run.bind(this, this.updateFunctionWithParameters(key, value)); } else { custom[key] = value; } @@ -62,6 +66,23 @@ Semantic.BaseMixin = Ember.Mixin.create({ }; }, + updateFunctionWithParameters: function(key, fn) { + return function() { + var args = [].splice.call(arguments, 0); + var internal = this.get(`_${key}`); + + if (internal) { + internal.apply(this, args); + } + + if (internal !== fn) { + return fn.apply(this, [this].concat(args)); + } + + return true; + }; + }, + didInsertElement: function() { this.$()[this.get("module")](this.settings(this.get("module"))); diff --git a/tests/dummy/app/controllers/modules/checkbox.js b/tests/dummy/app/controllers/modules/checkbox.js index 20519e96a..adfd08280 100644 --- a/tests/dummy/app/controllers/modules/checkbox.js +++ b/tests/dummy/app/controllers/modules/checkbox.js @@ -1,5 +1,12 @@ import Ember from 'ember'; export default Ember.Controller.extend({ - checked: false + checked: false, + + actions: { + set_checked: function(value) { + this._super(); + console.log(value); + } + } }); diff --git a/tests/dummy/app/controllers/modules/dropdown.js b/tests/dummy/app/controllers/modules/dropdown.js index bc120b712..3fd3f0b11 100644 --- a/tests/dummy/app/controllers/modules/dropdown.js +++ b/tests/dummy/app/controllers/modules/dropdown.js @@ -25,7 +25,7 @@ export default Ember.Controller.extend({ this.set('dropdown_active', true); }, - update_gender: function(id /*, value*/) { + update_gender: function(component, id /*, value*/) { this.set('gender', id); return true; } diff --git a/tests/dummy/app/templates/modules/checkbox.hbs b/tests/dummy/app/templates/modules/checkbox.hbs index 5bdf63d28..e8eddf0c8 100644 --- a/tests/dummy/app/templates/modules/checkbox.hbs +++ b/tests/dummy/app/templates/modules/checkbox.hbs @@ -1,6 +1,8 @@

Checkbox

-{{ui-checkbox label="Make my profile visible" checked=checked}} +{{ui-checkbox label="Make my profile visible (checked binding)" checked=checked}} + +{{ui-checkbox label="Make my profile visible (onChange action)" onChange=(action 'set_checked')}}

Radio Box diff --git a/tests/integration/components/ui-accordion-test.js b/tests/integration/components/ui-accordion-test.js index d716b3398..957b6a3d6 100644 --- a/tests/integration/components/ui-accordion-test.js +++ b/tests/integration/components/ui-accordion-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui accordion', { +moduleForComponent('ui-accordion', 'Integration | Component | ui accordion', { integration: true }); diff --git a/tests/integration/components/ui-checkbox-test.js b/tests/integration/components/ui-checkbox-test.js index 6ae790543..3b84fbabd 100644 --- a/tests/integration/components/ui-checkbox-test.js +++ b/tests/integration/components/ui-checkbox-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui checkbox', { +moduleForComponent('ui-checkbox', 'Integration | Component | ui checkbox', { integration: true }); diff --git a/tests/integration/components/ui-embed-test.js b/tests/integration/components/ui-embed-test.js index 0a9b0672c..c7e2e6ca3 100644 --- a/tests/integration/components/ui-embed-test.js +++ b/tests/integration/components/ui-embed-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui embed', { +moduleForComponent('ui-embed', 'Integration | Component | ui embed', { integration: true }); diff --git a/tests/integration/components/ui-modal-test.js b/tests/integration/components/ui-modal-test.js index 36cd57760..7b2866a7c 100644 --- a/tests/integration/components/ui-modal-test.js +++ b/tests/integration/components/ui-modal-test.js @@ -2,7 +2,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui modal', { +moduleForComponent('ui-modal', 'Integration | Component | ui modal', { integration: true }); @@ -53,7 +53,8 @@ test('it will send approve back to controller and hide', function(assert) { }); }); - this.on('approve', function(name) { + this.on('approve', function(component) { + var name = component.get('name'); assert.equal('profile', name, 'approve is called'); setTimeout(function() { start(); @@ -67,7 +68,7 @@ test('it will send approve back to controller and hide', function(assert) { Open

- {{#ui-modal name='profile' approve=(action 'approve')}} + {{#ui-modal name='profile' onApprove=(action 'approve')}}
No
Yes
@@ -91,7 +92,8 @@ test('it will send approve back to controller and skip the hide', function(asser }); }); - this.on('approve', function(name) { + this.on('approve', function(component) { + var name = component.get('name'); assert.equal('profile', name, 'approve is called'); setTimeout(function() { start(); @@ -105,7 +107,7 @@ test('it will send approve back to controller and skip the hide', function(asser Open
- {{#ui-modal name='profile' approve=(action 'approve')}} + {{#ui-modal name='profile' onApprove=(action 'approve')}}
No
Yes
@@ -128,7 +130,8 @@ test('it will send deny back to controller', function(assert) { }); }); - this.on('deny', function(name) { + this.on('deny', function(component) { + var name = component.get('name'); start(); assert.equal('profile', name); }); @@ -138,7 +141,7 @@ test('it will send deny back to controller', function(assert) { Open
- {{#ui-modal name='profile' deny=(action 'deny')}} + {{#ui-modal name='profile' onDeny=(action 'deny')}}
No
Yes
diff --git a/tests/integration/components/ui-nag-test.js b/tests/integration/components/ui-nag-test.js index 14e7be043..e9cbace71 100644 --- a/tests/integration/components/ui-nag-test.js +++ b/tests/integration/components/ui-nag-test.js @@ -2,7 +2,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui nag', { +moduleForComponent('ui-nag', 'Integration | Component | ui nag', { integration: true }); diff --git a/tests/integration/components/ui-popup-test.js b/tests/integration/components/ui-popup-test.js index b2394105e..5304fca2f 100644 --- a/tests/integration/components/ui-popup-test.js +++ b/tests/integration/components/ui-popup-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui popup', { +moduleForComponent('ui-popup', 'Integration | Component | ui popup', { integration: true }); diff --git a/tests/integration/components/ui-progress-test.js b/tests/integration/components/ui-progress-test.js index e7b1cd45d..03eceec32 100644 --- a/tests/integration/components/ui-progress-test.js +++ b/tests/integration/components/ui-progress-test.js @@ -2,7 +2,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui progress', { +moduleForComponent('ui-progress', 'Integration | Component | ui progress', { integration: true }); diff --git a/tests/integration/components/ui-radio-test.js b/tests/integration/components/ui-radio-test.js index 5a085022e..ab58f478f 100644 --- a/tests/integration/components/ui-radio-test.js +++ b/tests/integration/components/ui-radio-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui radio', { +moduleForComponent('ui-radio', 'Integration | Component | ui radio', { integration: true }); diff --git a/tests/integration/components/ui-rating-test.js b/tests/integration/components/ui-rating-test.js index d4afe0629..0d5f864df 100644 --- a/tests/integration/components/ui-rating-test.js +++ b/tests/integration/components/ui-rating-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui rating', { +moduleForComponent('ui-rating', 'Integration | Component | ui rating', { integration: true }); diff --git a/tests/integration/components/ui-search-test.js b/tests/integration/components/ui-search-test.js index bcdbd9200..ef3f50a9e 100644 --- a/tests/integration/components/ui-search-test.js +++ b/tests/integration/components/ui-search-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui search', { +moduleForComponent('ui-search', 'Integration | Component | ui search', { integration: true }); diff --git a/tests/integration/components/ui-shape-test.js b/tests/integration/components/ui-shape-test.js index 6881581be..c300ef102 100644 --- a/tests/integration/components/ui-shape-test.js +++ b/tests/integration/components/ui-shape-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui shape', { +moduleForComponent('ui-shape', 'Integration | Component | ui shape', { integration: true }); diff --git a/tests/integration/components/ui-sidebar-test.js b/tests/integration/components/ui-sidebar-test.js index afb587623..7bfb78f9e 100644 --- a/tests/integration/components/ui-sidebar-test.js +++ b/tests/integration/components/ui-sidebar-test.js @@ -1,7 +1,8 @@ +/* global $ */ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui sidebar', { +moduleForComponent('ui-sidebar', 'Integration | Component | ui sidebar', { integration: true }); diff --git a/tests/integration/components/ui-sticky-test.js b/tests/integration/components/ui-sticky-test.js index 870f323ac..10475640a 100644 --- a/tests/integration/components/ui-sticky-test.js +++ b/tests/integration/components/ui-sticky-test.js @@ -1,7 +1,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -moduleForComponent('ui-dropdown', 'Integration | Component | ui sticky', { +moduleForComponent('ui-sticky', 'Integration | Component | ui sticky', { integration: true }); From 6c8929832c099af6f30a5f95fdbf3f400bd26be1 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Tue, 29 Sep 2015 14:30:17 -0400 Subject: [PATCH 44/51] Added the didInsertElement initialization for ui-dropdown so the bound value gets initially set --- addon/components/ui-dropdown.js | 7 +++++++ tests/dummy/app/controllers/modules/dropdown.js | 2 +- tests/dummy/app/templates/modules/dropdown.hbs | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/addon/components/ui-dropdown.js b/addon/components/ui-dropdown.js index bd75dfd44..6dfae192e 100644 --- a/addon/components/ui-dropdown.js +++ b/addon/components/ui-dropdown.js @@ -8,6 +8,13 @@ export default Ember.Component.extend(Base, DataAttributes, { tagName: 'div', value: null, + initialize: Ember.on('didInsertElement', function() { + var value = this.get('value'); + if (typeof value !== "undefined" && value !== null) { + this.execute('set selected', value); + } + }), + _onChange: function(value, text, $element) { this._super(); if (value === undefined) { diff --git a/tests/dummy/app/controllers/modules/dropdown.js b/tests/dummy/app/controllers/modules/dropdown.js index 3fd3f0b11..2a0baa8e0 100644 --- a/tests/dummy/app/controllers/modules/dropdown.js +++ b/tests/dummy/app/controllers/modules/dropdown.js @@ -7,7 +7,7 @@ export default Ember.Controller.extend({ 'Bedroom' ], - gender: null, + gender: 0, genders: [ { id: 1, text: 'Male' }, { id: 0, text: 'Female' } diff --git a/tests/dummy/app/templates/modules/dropdown.hbs b/tests/dummy/app/templates/modules/dropdown.hbs index fc6eae671..4a3acad3b 100644 --- a/tests/dummy/app/templates/modules/dropdown.hbs +++ b/tests/dummy/app/templates/modules/dropdown.hbs @@ -20,7 +20,7 @@
A dropdown can be used to select between choices in a form
- {{#ui-dropdown class="selection" onChange=(action 'update_gender')}} + {{#ui-dropdown class="selection" value=gender onChange=(action 'update_gender')}}
Gender
From fe1da14c81e753a16851cdef58a1db8ee4003970 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Tue, 29 Sep 2015 20:02:52 -0400 Subject: [PATCH 45/51] Added a test to make sure passed in values will set the selected option --- .../dummy/app/templates/modules/dropdown.hbs | 2 +- .../components/ui-dropdown-test.js | 25 +++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/tests/dummy/app/templates/modules/dropdown.hbs b/tests/dummy/app/templates/modules/dropdown.hbs index 4a3acad3b..7a155d93c 100644 --- a/tests/dummy/app/templates/modules/dropdown.hbs +++ b/tests/dummy/app/templates/modules/dropdown.hbs @@ -49,7 +49,7 @@
A dropdown can be used to select between choices in a form
- {{#ui-dropdown class="selection" value=gender2}} + {{#ui-dropdown class="selection" value=(mut gender2)}}
Gender
diff --git a/tests/integration/components/ui-dropdown-test.js b/tests/integration/components/ui-dropdown-test.js index 60b306b2c..0b85c9418 100644 --- a/tests/integration/components/ui-dropdown-test.js +++ b/tests/integration/components/ui-dropdown-test.js @@ -129,3 +129,28 @@ test('it binds to an object', function(assert) { this.$(".menu .item")[1].click(); assert.equal(this.get('value'), this.get('people')[1]); }); + +test('it sets the value from the binding', function(assert) { + assert.expect(2); + + this.set('people_id', 2); + this.set('people', [ + { id: 1, name: "Sherlock Homes" }, + { id: 2, name: "Patrick Bateman" } + ]); + + this.render(hbs` + {{#ui-dropdown value=people_id}} +
+ {{#each people as |person|}} +
+ {{person.name}} +
+ {{/each}} +
+ {{/ui-dropdown}} + `); + + assert.equal(this.$('.item').length, 2); + assert.equal(this.$('.item.selected').length, 1); +}); From f6d943e675ed8673f7c0c043698a800736cb0caf Mon Sep 17 00:00:00 2001 From: cresg820 Date: Tue, 6 Oct 2015 21:58:11 +0200 Subject: [PATCH 46/51] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 21b6baa4d..799bc5f50 100644 --- a/README.md +++ b/README.md @@ -284,13 +284,13 @@ export default Ember.Controller.extend({ Replace `
` with `{{ui-popup}}` and fill the inside content with standard Semantic-UI. ```handlebars -{{ui-popup content="The text you'd like to show"}} +{{#ui-popup content="The text you'd like to show"}}TEXT HERE{{/ui-popup}} ``` You can also create an icon version by specifying the tagName ```handlebars -{{ui-popup tagName="i" class="icon link" content="The text you'd like to show"}} +{{ui-popup tagName="i" class="info link" content="The text you'd like to show"}} ``` ## Progress From e9d319bb6cf3a50565119540d2ed2164d49722c2 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Wed, 7 Oct 2015 16:12:32 -0400 Subject: [PATCH 47/51] Changed the test usage of modals to reference onApprove and onDeny instead of approve and deny since those were removed --- tests/dummy/app/templates/modules/modal.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/dummy/app/templates/modules/modal.hbs b/tests/dummy/app/templates/modules/modal.hbs index c1751233a..dc7c7ae0c 100644 --- a/tests/dummy/app/templates/modules/modal.hbs +++ b/tests/dummy/app/templates/modules/modal.hbs @@ -18,7 +18,7 @@ Depending on whether you have an inherited component or not you can handle actio Open Inbox
-{{#ui-modal name="profile" class="profile" approve=(action 'approveModal') deny=(action 'denyModal')}} +{{#ui-modal name="profile" class="profile" onApprove=(action 'approveModal') onDeny=(action 'denyModal')}}
Profile Picture From 84c0ccb0dbb1b4b66bae2460d02b27bb48358984 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Wed, 7 Oct 2015 16:20:02 -0400 Subject: [PATCH 48/51] Added a ui-popup tag example in the dummy app --- tests/dummy/app/templates/modules/popup.hbs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tests/dummy/app/templates/modules/popup.hbs b/tests/dummy/app/templates/modules/popup.hbs index a9de6095f..c90d37e91 100644 --- a/tests/dummy/app/templates/modules/popup.hbs +++ b/tests/dummy/app/templates/modules/popup.hbs @@ -5,3 +5,7 @@
{{/ui-popup}} + +
+ +{{ui-popup tagName="i" class="info icon" content="The text you'd like to show"}} From 5fd06221e15bb5d43810a597bbe4e62414108d11 Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Wed, 7 Oct 2015 16:28:25 -0400 Subject: [PATCH 49/51] Updating the demo app to show the proper usage of sidebar - The ember application cannot have it's own div (tagName of blank) - The sidebar must be next to the content --- tests/dummy/app/templates/application.hbs | 14 +++++++++++++- tests/dummy/app/templates/modules/sidebar.hbs | 11 ----------- tests/dummy/app/views/application.js | 3 ++- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index e0ac8fb4f..f7db64726 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -1,4 +1,16 @@ -
+{{#ui-sidebar class="inverted vertical menu"}} + + 1 + + + 2 + + + 3 + +{{/ui-sidebar}} + +
{{partial "menu"}}
diff --git a/tests/dummy/app/templates/modules/sidebar.hbs b/tests/dummy/app/templates/modules/sidebar.hbs index d2e88d48e..598eb611b 100644 --- a/tests/dummy/app/templates/modules/sidebar.hbs +++ b/tests/dummy/app/templates/modules/sidebar.hbs @@ -4,14 +4,3 @@ Toggle
-{{#ui-sidebar class="inverted vertical menu"}} - - 1 - - - 2 - - - 3 - -{{/ui-sidebar}} diff --git a/tests/dummy/app/views/application.js b/tests/dummy/app/views/application.js index b12a96343..203beea3d 100644 --- a/tests/dummy/app/views/application.js +++ b/tests/dummy/app/views/application.js @@ -1,5 +1,6 @@ import Ember from 'ember'; export default Ember.Component.extend({ - classNames: [ 'pusher' ] + classNames: [ 'pusher' ], + tagName: '' }); From ef79a0b0a24d5ad6cdfc046a5d7364007508d9e4 Mon Sep 17 00:00:00 2001 From: cresg820 Date: Thu, 8 Oct 2015 00:27:58 +0200 Subject: [PATCH 50/51] Update README.md Correct Popup example --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 799bc5f50..ecdbc10c4 100644 --- a/README.md +++ b/README.md @@ -290,7 +290,7 @@ Replace `
` with `{{ui-popup}}` and fill the inside content You can also create an icon version by specifying the tagName ```handlebars -{{ui-popup tagName="i" class="info link" content="The text you'd like to show"}} +{{ui-popup tagName="i" class="icon info" content="The text you'd like to show"}} ``` ## Progress From 77410b1e7d3c2286e040d21761aa36ee6f086ddb Mon Sep 17 00:00:00 2001 From: Nathan Palmer Date: Wed, 7 Oct 2015 20:08:28 -0400 Subject: [PATCH 51/51] README updates that go along with the new version --- README.md | 84 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 45 insertions(+), 39 deletions(-) diff --git a/README.md b/README.md index ecdbc10c4..047d22fe2 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,12 @@ # Semantic-UI-Ember -We have ported our internal Ember Semantic-UI components for an official Semantic-UI integration. The code was original built for [CrowdOx](http://crowdox.com) and later [SpruceMail](http://sprucemail.com). This is officially in Alpha. We would appreciate any feedback that you might have. +This is the official Ember library for the Semantic-UI modules. The code was original built for [CrowdOx](http://crowdox.com) and other projects that we were building for clients. We would appreciate any feedback that you have. ## Project Philosophy -We feel that the Semantic-UI-Ember project should be an extension of Semantic-UI and not a complete rewrite. With that in mind, we will only be creating components to extend Semantic-UI modules, all other uses of Semantic-UI in your project should [follow the official documentation](http://semantic-ui.com/). +We feel that the Semantic-UI-Ember project should be an extension of Semantic-UI and not a complete rewrite. With that in mind, we will always be a very lightweight layer on top to make the integration a first-class Ember experience. Please [follow the official documentation](http://semantic-ui.com/) for futher information. -## Release Schedule - -As mentioned our goal is to let Semantic do most of the work and we will simply maintain small bits of code to make it native for Ember. We will release when there are new components or incompatibilities but otherwise the same version should continue to work. # Installation @@ -149,34 +146,41 @@ There isn't a corresponding Ember component for this since it isn't rendered to ## Dropdown * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/dropdown.html) - * **Ember.Select**: [Follows Ember.Select Style](http://emberjs.com/api/classes/Ember.Select.html#sts=Ember.Select Class packages/ember-handlebars/lib/controls/select.js:93) * **Class**: `ui dropdown` * **Component**: `ui-dropdown` * **Parameters** - * **content**: List of data that you want displayed. _Required_ * **value**: Bound value that is set to `optionValuePath` - * **prompt**: Text to display before an option has been chosen - * **icon**: Icon you want to use. _Default is `dropdown`_ - * **optionLabelPath**: Path to the label that is displayed for each item. _Default is`content`_ - * **optionValuePath**: Path to the value that is used when an item is selected. _Default is `content`_ - -Replace `
` with `{{ui-dropdown}}` and bind to a list and set a bound property. + * **onChange**: Event to bind changes too + +Replace `
` with `{{ui-dropdown}}` and fill in your content ### Controller ```javascript export default Ember.Controller.extend({ itemActions: [ "Edit", "Remove", "Hide"], - selectedAction: null + selectedAction: null, + + actions: { + update_selected: function(component, id, value) { + this.set('selectedAction', id); + } + } }); ``` ### Template ```handlebars -{{ui-dropdown - content=itemActions - value=selectedAction - prompt="Select" -}} +{{#ui-dropdown class="selection" onChange(action 'update_selected')}} +
Select an item
+ +
+ {{#each itemActions as |action|}} +
+ {{action}} +
+ {{/each}} +
+{{/ui-dropdown}} ``` ## Embed @@ -191,9 +195,9 @@ export default Ember.Controller.extend({ ### Template ```handlebars - {{ui-embed +{{ui-embed data-source="youtube" - data-id="pfdu_gTry8E"}} + data-id="pfdu_gTry8E"}} ``` ## Modal @@ -202,23 +206,12 @@ export default Ember.Controller.extend({ * **Class**: `ui modal` * **View**: `ui-modal` -In order to use the modal you must include Ember.Evented in your controller. - -### Controller - -```javascript -import Ember from 'ember'; - -export default Ember.Controller.extend(Ember.Evented, { - -}); -``` - Embed the Modal within your page's template, similar to the semantic-ui master documentation. Except instead of using `
` you can use `{{ui-modal}}`. Each modal MUST include a name so it knows which one you are referring too. ### Template + ```handlebars {{#ui-modal name="profile" class="profile" approve=(action 'approveModal') deny=(action 'denyModal')}} @@ -247,14 +240,14 @@ modal MUST include a name so it knows which one you are referring too. {{/ui-modal}} ``` -In order to open the modal you just need to create an action and fire the `showModal` event. +In order to open the modal you just need to execute the show command. -### Controller (no model) +### Controller ```javascript export default Ember.Controller.extend({ actions: { openModal: function(name) { - this.trigger('showModal', name); + $('.ui.modal').modal('show'); } } }); @@ -284,7 +277,9 @@ export default Ember.Controller.extend({ Replace `
` with `{{ui-popup}}` and fill the inside content with standard Semantic-UI. ```handlebars -{{#ui-popup content="The text you'd like to show"}}TEXT HERE{{/ui-popup}} +{{#ui-popup content="The text you'd like to show"}} +
BUTTON
+{{/ui-popup}} ``` You can also create an icon version by specifying the tagName @@ -363,7 +358,16 @@ export default Ember.Controller.extend(Ember.Evented, { * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/sidebar.html) * **Class**: `ui sidebar` -### Template +The sidebar, as per Semantic-UI's documentation, will need to be directly below the body element. Since Ember by default renders a container element you need to utilize a little trick to get rid of it. + +### Application View/Component +```javascript +export default Ember.Component.extend({ + tagName: '' +}); +``` + +### Application Template ```handlebars {{#ui-sidebar class="inverted vertical menu"}} @@ -376,8 +380,10 @@ export default Ember.Controller.extend(Ember.Evented, { 3 {{/ui-sidebar}} -``` +
+
+``` When you want to invoke the sidebar you simply use the semantic methods. ### Controller