Last active
August 29, 2015 14:17
-
-
Save sio4/a18c2272b75d74907c88 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
### | |
# Namespace | |
### | |
Semantic = window.Semantic = Ember.Namespace.create | |
UI_DEBUG: false | |
UI_PERFORMANCE: false | |
UI_VERBOSE: false | |
### | |
# Mixin | |
### | |
Semantic.DataAttributes = Ember.Mixin.create | |
attributeBindings: ['data-test'] | |
Semantic.Base = Ember.Mixin.create Semantic.DataAttributes, | |
init: -> | |
@_super() | |
unless @get('module') | |
console.error('Module was not declared on semantic extended type') | |
settings: (module) -> | |
component = $.fn[module] | |
unless component | |
throw new Error("Unable to find semantic module: #{module}") | |
custom = { | |
debug: Semantic.UI_DEBUG | |
performance: Semantic.UI_PERFORMANCE | |
verbose: Semantic.UI_VERBOSE | |
} | |
for key, prop of component.settings | |
# Only getting settings | |
continue if key in Semantic.Base.DEBUG | |
continue if key in Semantic.Base.STANDARD | |
continue if typeof prop == 'function' and typeof @get(key) != 'function' | |
if key in Semantic.Base.EMBER | |
# Have to prefix with ui_ instead of just _, because ember has private variables name with and without _ | |
value = @get("ui_#{key}") | |
else | |
value = @get(key) | |
if value? | |
if typeof value == 'function' | |
custom[key] = Em.run.bind(@, value) | |
else | |
custom[key] = value | |
custom | |
didInsertElement: -> | |
@$()[@get("module")]( | |
@settings(@get("module")) | |
) | |
willDestroyElement: -> | |
@$()?[@get("module")]?('destroy') | |
execute: -> | |
@$()?[@get('module')]?.apply(@$(), arguments) | |
# Static properties to ignore | |
Semantic.Base.DEBUG = ['debug', 'performance', 'verbose'] | |
Semantic.Base.STANDARD = ['name', 'namespace', 'className', 'error', 'metadata', 'selector'] | |
Semantic.Base.EMBER = ['context', 'on', 'template', 'execute'] | |
### | |
# Accordion Components | |
### | |
Semantic.UiAccordionComponent = Ember.Component.extend Semantic.Base, | |
module: 'accordion' | |
classNames: ['ui', 'accordion'] | |
onChange: -> | |
@sendAction('changed') | |
Ember.Handlebars.helper 'ui-accordion', Semantic.UiAccordionComponent | |
### | |
# Transition Components | |
### | |
Semantic.UiTransitionComponent = Ember.Component.extend Semantic.Base, | |
module: 'transition' | |
Ember.Handlebars.helper 'ui-transition', Semantic.UiTransitionComponent | |
### | |
# Popup Components | |
### | |
Semantic.UiPopupComponent = Ember.Component.extend Semantic.Base, | |
module: 'popup' | |
contentChanges: (-> | |
@didInsertElement() | |
).observes('content') | |
Ember.Handlebars.helper 'ui-popup', Semantic.UiPopupComponent | |
Semantic.UiPopupIconComponent = Semantic.UiPopupComponent.extend | |
tagName: 'i' | |
classNames: ['icon', 'link'] | |
Ember.Handlebars.helper 'ui-popup-icon', Semantic.UiPopupIconComponent | |
### | |
# Checkbox Components | |
### | |
# Need to convert to a ember checkbox select | |
Semantic.UiCheckboxMixin = Ember.Mixin.create Semantic.Base, | |
module: 'checkbox' | |
classNames: ['ui', 'checkbox'] | |
layout: Ember.Handlebars.compile(""" | |
<input {{bind-attr type=type name=name checked=checked disabled=readonly data-id=data-id}} /> | |
<label>{{text}}</label> | |
""") | |
didInsertElement: -> | |
return if @get("disabled") | |
@_super() | |
willDestroyElement: -> | |
return if @get("disabled") | |
@_super() | |
Semantic.UiCheckboxComponent = Ember.Component.extend Semantic.UiCheckboxMixin, | |
type: 'checkbox' | |
checked: false | |
onChange: -> | |
@set('checked', @$('input').prop('checked')) | |
@sendAction("action", | |
checked: @get('checked') | |
value: @get('value') | |
) | |
Ember.Handlebars.helper 'ui-checkbox', Semantic.UiCheckboxComponent | |
Semantic.UiRadioComponent = Ember.Component.extend Semantic.UiCheckboxMixin, | |
classNames: ['radio'] | |
type: 'radio' | |
name: 'default' | |
init: -> | |
@_super() | |
unless @get('name') and @get("name") != "default" | |
console.warn('Name was not passed into semantic radio component') | |
checked: (-> | |
@get('current') == @get('value') | |
).property('current', 'value') | |
onChange: -> | |
@set('current', @get('value')) | |
@sendAction("action", | |
checked: @get('checked') | |
value: @get('value') | |
) | |
Ember.Handlebars.helper 'ui-radio', Semantic.UiRadioComponent | |
Semantic.UiFieldComponent = Ember.Component.extend Semantic.DataAttributes, | |
classNames: ['field'] | |
classNameBindings: ['isError:error'] | |
showError: true | |
error: null | |
customError: false | |
isError: (-> | |
@get("showError") and !Ember.isEmpty(@get("error")) | |
).property("error", "showError") | |
genericError: (-> | |
@get("isError") and not @get("customError") | |
).property("isError", "customError") | |
layout: Ember.Handlebars.compile(""" | |
{{yield}} | |
{{#if genericError}} | |
<div class="ui red pointing label"> | |
{{error}} | |
</div> | |
{{/if}} | |
""") | |
Ember.Handlebars.helper 'ui-field', Semantic.UiFieldComponent | |
Semantic.UiErrorComponent = Ember.Component.extend | |
showError: true | |
error: null | |
labeled: true | |
isError: (-> | |
@get("showError") and !Ember.isEmpty(@get("error")) | |
).property("error", "showError") | |
layout: Ember.Handlebars.compile(""" | |
{{#if isError}} | |
<div {{bind-attr class=":ui :red :message labeled:pointing labeled:label"}}> | |
{{error}} | |
</div> | |
{{/if}} | |
""") | |
Ember.Handlebars.helper 'ui-error', Semantic.UiErrorComponent | |
Semantic.UiSelectOption = Ember.SelectOption.extend | |
tagName: 'div' | |
classNames: 'item' | |
initialized: false | |
initialize: (-> | |
Ember.run.scheduleOnce('afterRender', @, @set_value) | |
).on('init') | |
set_value: -> | |
valuePath = @get('parentView.optionValuePath') | |
return unless valuePath | |
return unless @$()? | |
@$().data('value', @get(valuePath)) | |
@set('initialized',true) | |
Semantic.UiSelect = Ember.Select.extend Semantic.Base, Semantic.DataAttributes, | |
classNames: ['ui', 'selection', 'dropdown'] | |
module: 'dropdown' | |
tagName: 'div' | |
defaultTemplate: null | |
layout: Ember.Handlebars.compile(""" | |
<div class="text">{{view.prompt}}</div> | |
{{#if view.icon}} | |
<i {{bind-attr class="view.icon :icon"}}></i> | |
{{else}} | |
<i class="dropdown icon"></i> | |
{{/if}} | |
<div class="menu"> | |
{{#if view.optionGroupPath}} | |
{{#each group in view.groupedContent}} | |
{{view view.groupView content=group.content label=group.label}} | |
{{/each}} | |
{{else}} | |
{{#each item in view.content}} | |
{{view view.optionView content=item}} | |
{{/each}} | |
{{/if}} | |
</div> | |
{{#if view.template}} | |
{{yield}} | |
{{/if}} | |
""") | |
optionView: Semantic.UiSelectOption | |
groupedView: null | |
groupedContent: null | |
onChildViewsChanged: (-> | |
length = @get('childViews.length') | |
if length > 0 | |
Ember.run.scheduleOnce('afterRender', @, @initialize) | |
).observes('childViews.@each.initialized') | |
initialize: (-> | |
value = @get('value') | |
if value? | |
@execute('set selected', value) | |
# Reinitialize the dropdown when the childviews change | |
@$()[@get("module")]( | |
@settings(@get("module")) | |
) | |
) | |
onChange: (value) -> | |
@set('value', value) | |
onUpdate: (-> | |
Ember.run.scheduleOnce('afterRender', @, @set_value) | |
).observes('value') | |
set_value: -> | |
inputValue = @get('value')?.toString() | |
dropdownValue = @execute("get value") | |
unless inputValue? | |
@execute("restore defaults") | |
else if inputValue != dropdownValue | |
@execute("set selected",@get('value')) | |
Ember.Handlebars.helper 'ui-select', Semantic.UiSelect | |
Semantic.UiMenuDropdown = Ember.Component.extend Semantic.Base, | |
module: 'dropdown' | |
classNames: ['ui', 'dropdown', 'item'] | |
ui_on: 'hover' | |
Ember.Handlebars.helper 'ui-menu-dropdown', Semantic.UiMenuDropdown | |
Semantic.UiModal = Ember.View.extend Semantic.Base, | |
module: 'modal' | |
classNames: [ 'ui', 'modal' ] | |
init: -> | |
# We need to set the context specifically for testing where | |
# it shows up under a namespaced element. In other cases | |
# the rootElement is body and should behave the same as without | |
# this set. | |
@set('ui_context', $(App.rootElement)) | |
@_super() | |
@set('hidding', false) | |
onHide: -> | |
@set('hidding', true) | |
@get('controller').send('closeModal') | |
onDeny: -> | |
if (@get('controller')._actions||{})['cancel']? | |
@get('controller').send('cancel') | |
return true | |
onApprove: -> | |
if (@get('controller')._actions||{})['approve']? | |
@get('controller').send('approve') | |
return true | |
return false | |
closable: false | |
didInsertElement: -> | |
@_super() | |
@execute('show') | |
willDestroyElement: -> | |
@execute('hide') unless @get('hidding') | |
@_super() | |
Semantic.SidebarComponent = Ember.Component.extend Semantic.Base, | |
module: 'sidebar' | |
classNames: [ 'ui', 'sidebar' ] | |
# overlay: true | |
didInsertElement: -> | |
@_super() | |
@execute('toggle') | |
Ember.Application.initializer | |
name: 'semantic-ui' | |
initialize: (container, application) -> | |
container.register('view:ui-modal', Semantic.UiModal, { singleton: false }) | |
container.register('component:ui-sidebar', Semantic.SidebarComponent) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment