addon/components/ui-progress.js

  1. import Component from '@ember/component';
  2. import { computed } from '@ember/object';
  3. import { observer } from '@ember/object';
  4. import layout from '../templates/components/ui-progress';
  5.  
  6.  
  7. /**
  8.  
  9. ui-progress component
  10.  
  11. @module components
  12. @namespace components
  13. @class UiProgress
  14. @constructor
  15. */
  16. export default Component.extend({
  17.     layout: layout,
  18.     classNameBindings: ['_uiClass', 'class', 'theme', 'loading:active:', '_componentClass', 'success:success:', 'error:error:'],
  19.     _uiClass: 'ui',
  20.     _componentClass: 'progress',
  21.  
  22.     /**
  23.      * progress theme, indicating
  24.      *
  25.      * @property {String} theme
  26.      * @default  ''
  27.      */
  28.     theme: '',
  29.  
  30.     /**
  31.      * progress theme
  32.      *
  33.      * @property {String} class
  34.      * @default  ''
  35.      */
  36.     class: '',
  37.  
  38.     /**
  39.      * progress loading status, by default false
  40.      *
  41.      * @property {Boolean} loading
  42.      * @default  false
  43.      */
  44.     loading: false,
  45.  
  46.     /**
  47.      * progress success status, by default false
  48.      *
  49.      * @property {Boolean} success
  50.      * @default  false
  51.      */
  52.     success: false,
  53.  
  54.     /**
  55.      * progress error status, by default false
  56.      *
  57.      * @property {Boolean} error
  58.      * @default  false
  59.      */
  60.     error: false,
  61.     /**
  62.      * progress percent
  63.      *
  64.      * @property {Number} percent
  65.      * @default  0
  66.      */
  67.     percent: 0,
  68.     didInsertElement() {
  69.         this.$().progress({
  70.             percent: this.get('_percent')
  71.         });
  72.     },
  73.     _percent: computed('percent', {
  74.         get(){
  75.             if(this.percent > 100){
  76.                 return 100;
  77.             }
  78.  
  79.             if(this.percent < 0){
  80.                 return 0;
  81.             }
  82.  
  83.             return this.percent;
  84.         }
  85.     }),
  86.     updateProgress: observer('percent', function(){
  87.         this.$().progress({
  88.             percent: this.get('_percent')
  89.         });
  90.     })
  91. });