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/README.md b/README.md index f74efb876..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,125 +146,126 @@ 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}} ``` -## Modal +## Embed - * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/modal.html) - * **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/). - -### Application Template -You must add the `modal` outlet to the main application layout - - * templates/application.hbs OR - * pods/application/template.hbs +* **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 -{{outlet}} -{{outlet 'modal'}} +{{ui-embed + data-source="youtube" + data-id="pfdu_gTry8E"}} ``` -### 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 - -```javascript -import SemanticRouteMixin from 'semantic-ui-ember/mixins/application-route'; +## Modal -var ApplicationRoute = Ember.Route.extend(SemanticRouteMixin, {}); -``` + * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/modal.html) + * **Class**: `ui modal` + * **View**: `ui-modal` -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 +
+
+
+ +
+
+
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?

+
-
- Ok - +
+
+ Nope +
+
+ Yep, that's me + +
-
-``` - -Then you can fire `openModal` from any controller - -### Controller (no model) -```javascript -export default Ember.Controller.extend({ - actions: { - confirm: function() { - this.send('openModal', 'projects/confirm'); - } - } -}); +{{/ui-modal}} ``` -If you want to send a model in just use the third parameter +In order to open the modal you just need to execute the show command. -### Controller (model) +### Controller ```javascript export default Ember.Controller.extend({ actions: { - confirm: function() { - this.send('openModal', 'projects/confirm', this.get('model')); + openModal: function(name) { + $('.ui.modal').modal('show'); } } }); ``` -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. +## Nag -### View -```javascript -import Ember from 'ember'; -import SemanticModalMixin from 'semantic-ui-ember/mixins/modal'; +* **Documentation**: [Official Documentation](http://semantic-ui.com/modules/nag.html) +* **Class**: `ui nag` -export default Ember.View.extend(SemanticModalMixin, { - templateName: 'shared/modal' -}) +### Template +```handlebars + {{#ui-nag}} + + We use cookies to ensure you get the best experience on our website + + + {{/ui-nag}} ``` ## Popup @@ -279,13 +277,28 @@ export default Ember.View.extend(SemanticModalMixin, { 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"}} +
BUTTON
+{{/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="icon info" content="The text you'd like to show"}} +``` + +## Progress + + * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/progress.html) + * **Class**: `ui progress` + +### Template +```handlebars +{{#ui-progress percent=40 classNames="teal indicating"}} +
+
Completed
+{{/ui-progress}} ``` ## Rating @@ -293,26 +306,119 @@ You can also create an icon version by specifying the tagName * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/rating.html) * **Class**: `ui rating` -_NOT IMPLEMENTED_ +### Template +```handlebars +{{ui-rating initialRating=3 maxRating=7}} +``` + +## Search + +* **Documentation**: [Official Documentation](http://semantic-ui.com/modules/search.html) +* **Class**: `ui search` +* **Parameters** + * **url**: The url used for searching + +### Template +```handlebars +{{#ui-search url="/search"}} + +
+{{/ui-search}} +``` ## Shape * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/shape.html) * **Class**: `ui shape` -_NOT IMPLEMENTED_ +### Template +```handlebars +{{#ui-shape}} +

Content

+{{/ui-shape}} +``` + +### Controller +You control the shape through semantic's regular javascript code + +```javascript +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { + actions: { + flip: function(direction) { + $('.ui.shape').shape('flip ' + direction); + } + } +}); +``` ## Sidebar * **Documentation**: [Official Documentation](http://semantic-ui.com/modules/sidebar.html) * **Class**: `ui sidebar` -_NOT IMPLEMENTED_ +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"}} + + 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'); + } + } +}); +``` + +## 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) - * **Class**: `ui sidebar` + * **Class**: `ui transition` -There isn't a cooresponding Ember component for this since it isn't rendered to the screen but instead invoked. +You can invoke the semantic javascript directly. +### Controller +```javascript +import Ember from 'ember'; + +export default Ember.Controller.extend(Ember.Evented, { + actions: { + transition: function() { + $('img').transition('horizontal flip', '500ms'); + } + } +}); +``` 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-checkbox.js b/addon/components/ui-checkbox.js index e997119fc..5f2b8039c 100644 --- a/addon/components/ui-checkbox.js +++ b/addon/components/ui-checkbox.js @@ -5,11 +5,7 @@ export default Ember.Component.extend(CheckboxMixin, { type: 'checkbox', checked: false, - onChange: function() { + _onChange: function() { this.set('checked', this.$('input').prop('checked')); - this.sendAction('action', { - checked: this.get('checked'), - value: this.get('value') - }); } }); diff --git a/addon/components/ui-dropdown-item.js b/addon/components/ui-dropdown-item.js index e81160764..ab17b72da 100644 --- a/addon/components/ui-dropdown-item.js +++ b/addon/components/ui-dropdown-item.js @@ -1,24 +1,18 @@ import Ember from 'ember'; -export default Ember.SelectOption.extend({ +export default Ember.Component.extend({ + classNames: ['item'], tagName: 'div', - classNames: 'item', - bindData: Ember.on('didInsertElement', function() { - var valuePath = this.get('valuePath'); - - if (!valuePath) { - return; - } + initialize: Ember.on('init', function() { + Ember.run.scheduleOnce('afterRender', this, this.update_data); + }), - if (this.$() == null) { + update_data: function() { + if (this.$().data('value')) { return; } - - this.$().data('value', this.get(valuePath)); - }), - - unbindData: Ember.on('willDestroyElement', function() { - this.$().removeData('value'); - }) + + this.$().data('value', this.get('content')); + } }); diff --git a/addon/components/ui-dropdown.js b/addon/components/ui-dropdown.js index 542b5b636..6dfae192e 100644 --- a/addon/components/ui-dropdown.js +++ b/addon/components/ui-dropdown.js @@ -1,32 +1,22 @@ 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, { - classNames: ['ui', 'dropdown'], +export default Ember.Component.extend(Base, DataAttributes, { module: 'dropdown', + classNames: [ 'ui', 'dropdown' ], tagName: 'div', - defaultTemplate: null, - - optionView: Item, - - groupedView: null, - groupedContent: null, + value: null, initialize: Ember.on('didInsertElement', function() { var value = this.get('value'); if (typeof value !== "undefined" && value !== null) { this.execute('set selected', value); } - - var placeholder = this.get('prompt'); - if (typeof placeholder !== "undefined" && placeholder !== null) { - this.$().data('placeholderText', placeholder); - } }), - 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 // within the main Semantic library @@ -35,36 +25,5 @@ export default Ember.Select.extend(Base, DataAttributes, { value = $element.data('value'); } return this.set('value', 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')); - } } }); 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/addon/components/ui-modal.js b/addon/components/ui-modal.js new file mode 100644 index 000000000..3649c523f --- /dev/null +++ b/addon/components/ui-modal.js @@ -0,0 +1,9 @@ +import Ember from 'ember'; +import Base from '../mixins/base'; + +export default Ember.Component.extend(Base, { + module: 'modal', + classNames: [ 'ui', 'modal' ], + detachable: false, + name: null +}); diff --git a/addon/components/ui-nag.js b/addon/components/ui-nag.js new file mode 100644 index 000000000..fe1809eb7 --- /dev/null +++ b/addon/components/ui-nag.js @@ -0,0 +1,13 @@ +import Ember from 'ember'; +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(); + this.execute('show'); + } +}); 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 5a2658fb6..72262ee6e 100644 --- a/addon/components/ui-progress.js +++ b/addon/components/ui-progress.js @@ -3,7 +3,8 @@ import Base from '../mixins/base'; var Progress = Ember.Component.extend(Base,{ module: 'progress', - classNames: ['ui', 'progress'] + classNames: [ 'ui', 'progress' ], + attributeBindings: [ 'percent', 'total', 'value' ] }); export default Progress; diff --git a/addon/components/ui-radio.js b/addon/components/ui-radio.js index ef5d35fa8..cf903d015 100644 --- a/addon/components/ui-radio.js +++ b/addon/components/ui-radio.js @@ -2,26 +2,23 @@ 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() { this._super(); + if (!(this.get('name') && this.get('name') !== 'default')) { Ember.Logger.warn('Name was not passed into semantic radio component'); } }, + _onChange: function() { + this.set('current', this.get('value')); + }, + 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 a81341a6d..2dd1dbf03 100644 --- a/addon/components/ui-rating.js +++ b/addon/components/ui-rating.js @@ -3,7 +3,15 @@ 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')); + } + } }); export default Rating; 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/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/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/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/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/base.js b/addon/mixins/base.js index 5d5c0f305..43561ffb8 100644 --- a/addon/mixins/base.js +++ b/addon/mixins/base.js @@ -4,51 +4,101 @@ 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]; - if (window.$.inArray(key, Semantic.BaseMixin.DEBUG) >= 0) { + + for (key in component.settings) { + 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') { + + 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; } } } + return custom; }, + + updateProperty: function(property) { + return function() { + this.execute('set ' + property, this.get(property)); + }; + }, + + 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() { - 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 +107,7 @@ Semantic.BaseMixin = Ember.Mixin.create({ } } }, + execute: function() { var selector, module; if ((selector = this.$()) != null) { 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-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/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/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/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/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/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/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/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/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/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/bower.json b/bower.json index 9d1d3a256..a16d53d08 100644 --- a/bower.json +++ b/bower.json @@ -1,19 +1,17 @@ { "name": "semantic-ui-ember", "dependencies": { - "ember": "1.12.1", - "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-load-initializers": "ember-cli/ember-load-initializers#0.1.4", - "ember-qunit": "0.3.3", + "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.15", - "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-resolver": "~0.1.18", + "jquery": "^1.11.3", + "loader.js": "ember-cli/loader.js#3.2.1", + "qunit": "~1.18.0", + "semantic-ui": "^2.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/index.js b/index.js index 622e596e6..8b24d4198 100644 --- a/index.js +++ b/index.js @@ -1,23 +1,54 @@ /* jshint node: true */ 'use strict'; +var defaults = { + css: true, + javascript: true, + fonts: true, + images: 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' }); - }; + 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'])) { + app.import({ + development: 'bower_components/semantic-ui/dist/semantic.js', + production: 'bower_components/semantic-ui/dist/semantic.min.js' + }); + } else { + + } + + 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' }; + for (var i = fontExtensions.length - 1; i >= 0; i--) { + app.import('bower_components/semantic-ui/dist/themes/default/assets/fonts/icons'+fontExtensions[i], fontOptions); + }; + } } }; diff --git a/package.json b/package.json index 1b20240f0..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", @@ -19,8 +19,8 @@ "test": "tests" }, "scripts": { - "start": "ember server", "build": "ember build", + "start": "ember server", "test": "ember try:testall" }, "repository": { @@ -28,31 +28,35 @@ "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": "0.2.5", - "ember-cli-app-version": "0.3.3", + "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-htmlbars": "0.7.6", - "ember-cli-ic-ajax": "0.1.1", - "ember-cli-inject-live-reload": "^1.3.0", - "ember-cli-qunit": "0.3.13", - "ember-cli-uglify": "^1.0.1", - "ember-disable-proxy-controllers": "^0.7.0", - "ember-export-application-global": "^1.0.2", + "ember-cli-dependency-checker": "^1.0.1", + "ember-cli-htmlbars": "0.7.9", + "ember-cli-htmlbars-inline-precompile": "^0.2.0", + "ember-cli-ic-ajax": "0.2.1", + "ember-cli-inject-live-reload": "^1.3.1", + "ember-cli-qunit": "^1.0.0", + "ember-cli-release": "0.2.3", + "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.3", "ember-disable-prototype-extensions": "^1.0.0", - "ember-try": "0.0.4" + "ember-try": "0.0.6" }, "keywords": [ "ember-addon" ], "dependencies": { - "ember-cli-babel": "^5.0.0" + "ember-cli-babel": "^5.1.3" }, "ember-addon": { "configPath": "tests/dummy/config" 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/dummy/app/components/dimmer-example.js b/tests/dummy/app/components/dimmer-example.js new file mode 100644 index 000000000..e5e799c72 --- /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() { + this.$('.ui.segment').dimmer('show'); + }, + + hide: function() { + this.$('.ui.segment').dimmer('hide'); + } + } +}); diff --git a/tests/dummy/app/components/inbox-modal.js b/tests/dummy/app/components/inbox-modal.js new file mode 100644 index 000000000..838537363 --- /dev/null +++ b/tests/dummy/app/components/inbox-modal.js @@ -0,0 +1,18 @@ +/* global alert */ +import UiModal from 'semantic-ui-ember/components/ui-modal'; + +export default UiModal.extend({ + name: 'inbox', + classNames: [ 'inbox' ], + + actions: { + yes: function() { + alert('yes'); + this.execute('hide'); + }, + + no: function() { + alert('no'); + } + } +}); 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 c89945287..2a0baa8e0 100644 --- a/tests/dummy/app/controllers/modules/dropdown.js +++ b/tests/dummy/app/controllers/modules/dropdown.js @@ -7,9 +7,27 @@ export default Ember.Controller.extend({ 'Bedroom' ], - gender: null, + gender: 0, 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' } + ], + + actions: { + set_active: function() { + this.set('dropdown_active', true); + }, + + update_gender: function(component, id /*, value*/) { + this.set('gender', id); + return true; + } + } }); diff --git a/tests/dummy/app/controllers/modules/modal.js b/tests/dummy/app/controllers/modules/modal.js new file mode 100644 index 000000000..cb7b2e3bd --- /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) { + $('.ui.' + name + '.modal').modal('show'); + }, + + approveModal: function(name) { + alert('approve ' + name); + return false; + }, + + denyModal: function(name) { + alert('deny ' + name); + return true; + } + } +}); diff --git a/tests/dummy/app/controllers/modules/nag.js b/tests/dummy/app/controllers/modules/nag.js new file mode 100644 index 000000000..8b71e79ae --- /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() { + $('.cookie.nag').nag('clear'); + $('.cookie.nag').nag('show'); + } + } +}); 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/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/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/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 1f9860902..b768bdf2d 100644 --- a/tests/dummy/app/router.js +++ b/tests/dummy/app/router.js @@ -6,12 +6,23 @@ 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'); this.route('dropdown'); + this.route('embed'); + this.route('modal'); + this.route('nag'); + this.route('popup'); this.route('progress'); this.route('rating'); + this.route('search'); + this.route('shape'); + 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 24d069b18..196102aca 100644 --- a/tests/dummy/app/templates/_menu.hbs +++ b/tests/dummy/app/templates/_menu.hbs @@ -4,10 +4,20 @@
{{#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.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}} + {{#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}} + {{#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/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/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/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/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
diff --git a/tests/dummy/app/templates/modules/checkbox.hbs b/tests/dummy/app/templates/modules/checkbox.hbs index ec1656f46..e8eddf0c8 100644 --- a/tests/dummy/app/templates/modules/checkbox.hbs +++ b/tests/dummy/app/templates/modules/checkbox.hbs @@ -1,9 +1,8 @@ -

- Checkbox -
A standard checkbox
-

+

Checkbox

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

Radio Box 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}} diff --git a/tests/dummy/app/templates/modules/dropdown.hbs b/tests/dummy/app/templates/modules/dropdown.hbs index c7daa3cb0..7a155d93c 100644 --- a/tests/dummy/app/templates/modules/dropdown.hbs +++ b/tests/dummy/app/templates/modules/dropdown.hbs @@ -1,20 +1,103 @@ -

- Dropdown -
A dropdown
-

+
+
+
+

+ Dropdown +
A dropdown
+

+
+
+
Active
+
+
-{{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" value=gender onChange=(action 'update_gender')}} +
Gender
+ +
+ {{#each genders as |gender|}} +
+ {{gender.text}} +
+ {{/each}} +
+ {{/ui-dropdown}} +
+
+
+
+ + {{input value=gender readonly="true"}} +
+
+
+
-{{ui-dropdown class="selection" - content=genders - value=gender - prompt="Gender" - optionLabelPath="content.text" - optionValuePath="content.id"}} +
+
+

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

+ + {{#ui-dropdown class="selection" value=(mut 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"}} +
+
+
+
+ +
+
+

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

+ + {{#ui-dropdown class="fluid multiple selection" value=country}} + +
Select Country
+
+ {{#each countries as |country|}} +
+ + {{country.name}} +
+ {{/each}} +
+ {{/ui-dropdown}} +
+
+
+
+ + {{input value=country readonly="true"}} +
+
+
+
+
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/dummy/app/templates/modules/modal.hbs b/tests/dummy/app/templates/modules/modal.hbs new file mode 100644 index 000000000..dc7c7ae0c --- /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" onApprove=(action 'approveModal') onDeny=(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/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/app/templates/modules/popup.hbs b/tests/dummy/app/templates/modules/popup.hbs new file mode 100644 index 000000000..c90d37e91 --- /dev/null +++ b/tests/dummy/app/templates/modules/popup.hbs @@ -0,0 +1,11 @@ +

Popup

+ +{{#ui-popup content="Add users to your feed"}} +
+ +
+{{/ui-popup}} + +
+ +{{ui-popup tagName="i" class="info icon" content="The text you'd like to show"}} 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"}}
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/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/dummy/app/templates/modules/sidebar.hbs b/tests/dummy/app/templates/modules/sidebar.hbs new file mode 100644 index 000000000..598eb611b --- /dev/null +++ b/tests/dummy/app/templates/modules/sidebar.hbs @@ -0,0 +1,6 @@ +

Sidebar

+ +
+ Toggle +
+ 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/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.

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 +
+ + diff --git a/tests/dummy/app/views/application.js b/tests/dummy/app/views/application.js new file mode 100644 index 000000000..203beea3d --- /dev/null +++ b/tests/dummy/app/views/application.js @@ -0,0 +1,6 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + classNames: [ 'pusher' ], + tagName: '' +}); 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 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 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..546ffd940 100644 --- a/tests/index.html +++ b/tests/index.html @@ -13,22 +13,6 @@ - {{content-for 'head-footer'}} {{content-for 'test-head-footer'}} @@ -38,6 +22,7 @@ {{content-for 'body'}} {{content-for 'test-body'}} + diff --git a/tests/integration/components/ui-accordion-test.js b/tests/integration/components/ui-accordion-test.js new file mode 100644 index 000000000..957b6a3d6 --- /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-accordion', '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); +}); diff --git a/tests/integration/components/ui-checkbox-test.js b/tests/integration/components/ui-checkbox-test.js new file mode 100644 index 000000000..3b84fbabd --- /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-checkbox', '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')); +}); diff --git a/tests/integration/components/ui-dropdown-test.js b/tests/integration/components/ui-dropdown-test.js new file mode 100644 index 000000000..0b85c9418 --- /dev/null +++ b/tests/integration/components/ui-dropdown-test.js @@ -0,0 +1,156 @@ +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 value=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 value=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 value=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' value=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'); +}); + +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 value=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]); +}); + +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); +}); diff --git a/tests/integration/components/ui-embed-test.js b/tests/integration/components/ui-embed-test.js new file mode 100644 index 000000000..c7e2e6ca3 --- /dev/null +++ b/tests/integration/components/ui-embed-test.js @@ -0,0 +1,22 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-embed', 'Integration | Component | ui embed', { + integration: true +}); + +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); +}); diff --git a/tests/integration/components/ui-modal-test.js b/tests/integration/components/ui-modal-test.js new file mode 100644 index 000000000..7b2866a7c --- /dev/null +++ b/tests/integration/components/ui-modal-test.js @@ -0,0 +1,154 @@ +/* global stop, start */ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-modal', '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() { + _this.$('.ui.modal').modal('show', function() { + start(); + assert.equal(_this.$('.ui.modal.visible').length, 1, ".ui.modal is visible after showing"); + }); + }); + + 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"); + + stop(); + 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() { + _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(); + }); + }); + + this.on('approve', function(component) { + var name = component.get('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' onApprove=(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() { + _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(); + }); + }); + + this.on('approve', function(component) { + var name = component.get('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' onApprove=(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() { + _this.$('.ui.modal').modal('show', function() { + _this.$('.ui.modal.negative').click(); + }); + }); + + this.on('deny', function(component) { + var name = component.get('name'); + start(); + assert.equal('profile', name); + }); + + this.render(hbs` +
+ Open +
+ + {{#ui-modal name='profile' onDeny=(action 'deny')}} +
+
No
+
Yes
+
+ {{/ui-modal}} + `); + + stop(); + this.$('.ui.button').click(); +}); diff --git a/tests/integration/components/ui-nag-test.js b/tests/integration/components/ui-nag-test.js new file mode 100644 index 000000000..e9cbace71 --- /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-nag', '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'); + }, 1000); +}); diff --git a/tests/integration/components/ui-popup-test.js b/tests/integration/components/ui-popup-test.js new file mode 100644 index 000000000..5304fca2f --- /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-popup', '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); +}); diff --git a/tests/integration/components/ui-progress-test.js b/tests/integration/components/ui-progress-test.js new file mode 100644 index 000000000..03eceec32 --- /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-progress', '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); +}); diff --git a/tests/integration/components/ui-radio-test.js b/tests/integration/components/ui-radio-test.js new file mode 100644 index 000000000..ab58f478f --- /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-radio', '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')); +}); diff --git a/tests/integration/components/ui-rating-test.js b/tests/integration/components/ui-rating-test.js new file mode 100644 index 000000000..0d5f864df --- /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-rating', '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); +}); diff --git a/tests/integration/components/ui-search-test.js b/tests/integration/components/ui-search-test.js new file mode 100644 index 000000000..ef3f50a9e --- /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-search', '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); +}); diff --git a/tests/integration/components/ui-shape-test.js b/tests/integration/components/ui-shape-test.js new file mode 100644 index 000000000..c300ef102 --- /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-shape', '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); +}); diff --git a/tests/integration/components/ui-sidebar-test.js b/tests/integration/components/ui-sidebar-test.js new file mode 100644 index 000000000..7bfb78f9e --- /dev/null +++ b/tests/integration/components/ui-sidebar-test.js @@ -0,0 +1,20 @@ +/* global $ */ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('ui-sidebar', '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); +}); diff --git a/tests/integration/components/ui-sticky-test.js b/tests/integration/components/ui-sticky-test.js new file mode 100644 index 000000000..10475640a --- /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-sticky', '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); +}); diff --git a/tests/test-helper.js b/tests/test-helper.js index 804a7b2e3..909c561f5 100644 --- a/tests/test-helper.js +++ b/tests/test-helper.js @@ -3,4 +3,6 @@ import { setResolver } from 'ember-qunit'; -setResolver(resolver); \ No newline at end of file +setResolver(resolver); + +$.fn.modal.settings.context = "#ember-testing";