oroinc /
platform
| Total Complexity | 15 |
| Complexity/F | 1.36 |
| Lines of Code | 109 |
| Function Count | 11 |
| Duplicated Lines | 0 |
| Ratio | 0 % |
| Changes | 3 | ||
| Bugs | 0 | Features | 0 |
| 1 | define(function(require) { |
||
| 2 | 'use strict'; |
||
| 3 | |||
| 4 | /** |
||
| 5 | * This component display line loader when page is loading and ajax request sending |
||
| 6 | */ |
||
| 7 | var LoadingBarView; |
||
| 8 | var BaseView = require('oroui/js/app/views/base/view'); |
||
| 9 | var $ = require('jquery'); |
||
| 10 | var _ = require('underscore'); |
||
| 11 | |||
| 12 | LoadingBarView = BaseView.extend({ |
||
| 13 | autoRender: true, |
||
| 14 | |||
| 15 | optionNames: BaseView.prototype.optionNames.concat([ |
||
| 16 | 'ajaxLoading', 'pageLoading' |
||
| 17 | ]), |
||
| 18 | |||
| 19 | /** @property {string} */ |
||
| 20 | className: 'loading-bar', |
||
| 21 | |||
| 22 | /** @property {string} */ |
||
| 23 | container: 'body', |
||
| 24 | |||
| 25 | /** |
||
| 26 | * @property {Object} |
||
| 27 | */ |
||
| 28 | ajaxLoading: false, |
||
| 29 | |||
| 30 | /** |
||
| 31 | * @property {Object} |
||
| 32 | */ |
||
| 33 | pageLoading: false, |
||
| 34 | |||
| 35 | /** |
||
| 36 | * @property {Boolean} |
||
| 37 | */ |
||
| 38 | active: false, |
||
| 39 | |||
| 40 | /** |
||
| 41 | * @inheritDoc |
||
| 42 | */ |
||
| 43 | constructor: function LoadingBarView() { |
||
| 44 | LoadingBarView.__super__.constructor.apply(this, arguments); |
||
| 45 | }, |
||
| 46 | |||
| 47 | /** |
||
| 48 | * @constructor |
||
| 49 | */ |
||
| 50 | initialize: function() { |
||
| 51 | this.bindEvents(this); |
||
| 52 | }, |
||
| 53 | |||
| 54 | /** |
||
| 55 | * Bind ajaxStart, ajaxComplete, ready and load listeners |
||
| 56 | */ |
||
| 57 | bindEvents: function() { |
||
| 58 | var self = this; |
||
| 59 | |||
| 60 | if (this.pageLoading) { |
||
| 61 | $(document).ready(function() { |
||
| 62 | self.showLoader(); |
||
| 63 | }); |
||
| 64 | |||
| 65 | $(window).on('load', function() { |
||
| 66 | self.hideLoader(); |
||
| 67 | }); |
||
| 68 | } |
||
| 69 | |||
| 70 | if (this.ajaxLoading) { |
||
| 71 | $(document).ajaxStart(function() { |
||
| 72 | self.showLoader(); |
||
| 73 | }); |
||
| 74 | |||
| 75 | $(document).ajaxComplete(function() { |
||
| 76 | self.hideLoader(); |
||
| 77 | }); |
||
| 78 | } |
||
| 79 | }, |
||
| 80 | |||
| 81 | showLoader: function() { |
||
| 82 | if (this.active) { |
||
| 83 | return; |
||
| 84 | } |
||
| 85 | |||
| 86 | this.$el.show(); |
||
| 87 | this.active = true; |
||
| 88 | }, |
||
| 89 | |||
| 90 | hideLoader: function() { |
||
| 91 | if (!this.active) { |
||
| 92 | return; |
||
| 93 | } |
||
| 94 | |||
| 95 | var loaderWidth = this.$el.width(); |
||
| 96 | |||
| 97 | this.$el.width(loaderWidth).css({animation: 'none'}).width('100%'); |
||
| 98 | this.$el.delay(200).fadeOut(300, _.bind(function() { |
||
| 99 | this.$el.css({ |
||
| 100 | width: '', |
||
| 101 | animation: '' |
||
| 102 | }); |
||
| 103 | }, this)); |
||
| 104 | this.active = false; |
||
| 105 | } |
||
| 106 | }); |
||
| 107 | |||
| 108 | return LoadingBarView; |
||
| 109 | }); |
||
| 110 |
