window.CMI or= {}
class CMI.LoadingIndicator extends Backbone.View
className: 'cmi-loading-indicator' initialize: (options = {}) -> @_options = _.extend(@_defaultOptions(), options) @render() render: -> @.$el.html(@_getInnerHtml()) if @_options.background == 'dark' @.$el.addClass('cmi-loading-indicator-background-dark') else if @_options.background == 'light' @.$el.addClass('cmi-loading-indicator-background-light') else if @_options.background? == true && @_options.background.length > 0 @.$el.addClass(@_options.background) @ domElement: -> @.$el fadeIn: -> @_attach() if @_isAttached() == false @.$el.addClass('cmi-loading-fade') @ fadeOut: -> @.$el.removeClass('cmi-loading-fade') _.delay($.proxy(@, '_detach'), 300) if @_options.detachAfterFadeOut @ # --------------------------------------------- # private methods _getInnerHtml: -> $('<div class="cmi-loading-indicator-inside"> <svg class="cmi-circular"> <circle class="cmi-path" cx="50" cy="50" fill="none" r="20" stroke-miterlimit="10" stroke-width="3"></circle> </svg> </div>') _detach: -> @.$el.detach() @_attached = false _attach: -> return if @_options.parent? == false @_options.parent.append(@.$el) @_attached = true _isAttached: -> @_attached or= false _defaultOptions: -> { background: null parent: null detachAfterFadeOut: true }