Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
###
# 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