diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee index ae81e538..a5fe8813 100644 --- a/app/coffee/app.coffee +++ b/app/coffee/app.coffee @@ -21,8 +21,7 @@ @taiga = taiga = {} -configure = ($routeProvider, $locationProvider, $httpProvider, $provide) -> - +configure = ($routeProvider, $locationProvider, $httpProvider, $provide, tgLoaderProvider) -> $routeProvider.when("/", {templateUrl: "/partials/projects.html"}) $routeProvider.when("/project/:pslug/", {templateUrl: "/partials/project.html"}) $routeProvider.when("/project/:pslug/backlog", {templateUrl: "/partials/backlog.html"}) @@ -152,6 +151,7 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide) -> $provide.factory("authHttpIntercept", ["$q", "$location", authHttpIntercept]) $httpProvider.responseInterceptors.push('authHttpIntercept') + $httpProvider.interceptors.push('loaderInterceptor'); init = ($log, $i18n, $config, $rootscope) -> @@ -196,7 +196,8 @@ module.config([ "$routeProvider", "$locationProvider", "$httpProvider", - '$provide', + "$provide", + "tgLoaderProvider", configure ]) diff --git a/app/coffee/modules/backlog/main.coffee b/app/coffee/modules/backlog/main.coffee index f2ca4102..0af456c0 100644 --- a/app/coffee/modules/backlog/main.coffee +++ b/app/coffee/modules/backlog/main.coffee @@ -52,6 +52,7 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F @showTags = false promise = @.loadInitialData() + promise.then null, => console.log "FAIL" diff --git a/app/coffee/modules/common/loader.coffee b/app/coffee/modules/common/loader.coffee new file mode 100644 index 00000000..6f5f8b95 --- /dev/null +++ b/app/coffee/modules/common/loader.coffee @@ -0,0 +1,122 @@ +taiga = @.taiga +sizeFormat = @.taiga.sizeFormat + +module = angular.module("taigaCommon") + +LoaderDirective = (tgLoader) -> + link = ($scope, $el, $attrs) -> + tgLoader.end () -> + $el.removeClass("active") + + $scope.$on "$routeChangeSuccess", () -> + tgLoader.start () -> + $el.addClass("active") + + + return { + link: link + } + +module.directive("tgLoader", ["tgLoader", LoaderDirective]) + +Loader = () -> + interval = null + onLoad = () -> + startLoadTime = 0 + + defaultLog = { + request: { + count: 0, + time: 0 + } + response: { + count: 0, + time: 0 + } + } + + defaultConfig = { + enabled: false, + minTime: 500, + auto: false + } + + log = _.merge({}, defaultLog); + config = _.merge({}, defaultConfig); + + reset = () -> + log = _.merge({}, defaultLog); + config = _.merge({}, defaultConfig); + + pageLoaded = () -> + reset() + + endTime = new Date().getTime() + diff = endTime - startLoadTime + + if diff < config.minTime + timeout = config.minTime - diff + else + timeout = 0 + + setTimeout ( -> + onLoad() + ), timeout + + autoCheckLoad = () -> + interval = setInterval ( -> + currentDate = new Date().getTime() + + if log.request.count == log.response.count && currentDate - log.response.time > 200 + clearInterval(interval) + pageLoaded() + + ), 100 + + @.add = (auto = false) -> + return () -> + config.enabled = true + config.auto = auto + + @.$get = () -> + return { + start: (callback) -> + if config.enabled + if config.auto + autoCheckLoad() + + startLoadTime = new Date().getTime() + callback() + + end: (fn) -> + onLoad = fn + + pageLoaded: () -> + pageLoaded() + + logRequest: () -> + log.request.count++ + log.request.time = new Date().getTime() + + logResponse: () -> + log.response.count++ + log.response.time = new Date().getTime() + } + + return + +module.provider("tgLoader", Loader) + +loaderInterceptor = (tgLoader) -> + return { + request: (config) -> + tgLoader.logRequest() + + return config + response: (response) -> + tgLoader.logResponse() + + return response + } + +module.factory('loaderInterceptor', ['tgLoader', loaderInterceptor]); diff --git a/app/index.jade b/app/index.jade index 73fd4631..4c279563 100644 --- a/app/index.jade +++ b/app/index.jade @@ -26,5 +26,7 @@ html(lang="en", ng-app="taiga") div.hidden.lightbox.lightbox-generic-error include partials/views/modules/lightbox-generic-error + include partials/views/modules/loader + script(src="/js/libs.js?v=#{v}") script(src="/js/app.js?v=#{v}") diff --git a/app/partials/views/modules/loader.jade b/app/partials/views/modules/loader.jade new file mode 100644 index 00000000..0aa4de5b --- /dev/null +++ b/app/partials/views/modules/loader.jade @@ -0,0 +1,3 @@ +.loader(tg-loader) + .bg + .info Loading ... \ No newline at end of file diff --git a/app/styles/components/loader.scss b/app/styles/components/loader.scss new file mode 100644 index 00000000..caab7060 --- /dev/null +++ b/app/styles/components/loader.scss @@ -0,0 +1,34 @@ +.loader { + bottom: 0; + display: none; + height: 100%; + left: 0; + position: fixed; + right: 0; + top: 0; + width: 100%; + .bg { + background-color: $black; + bottom: 0; + position: absolute; + right: 0; + top: 0; + width: 100%; + z-index: 20; + } + .info { + background-color: $black; + color: $white; + padding: .5rem 3rem; + position: absolute; + right: 20px; + top: 20px; + z-index: 25; + } + &.active { + display: block; + .bg { + opacity: .7; + } + } +} diff --git a/app/styles/main.scss b/app/styles/main.scss index 8871fbf2..42fbf00b 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -41,6 +41,7 @@ $prefix-for-spec: true; @import 'components/assigned-to'; @import 'components/wysiwyg'; @import 'components/select-color'; +@import 'components/loader'; //################################################# // Modules