From 0b848aec956a7b40eafe3988d76b99e9c83d0a22 Mon Sep 17 00:00:00 2001 From: Jeremie Panzer Date: Wed, 27 Mar 2013 13:59:57 +0100 Subject: [PATCH] activity spinner --- .../commafeed/frontend/pages/HomePage.html | 3 +- src/main/webapp/css/app.css | 7 +++ src/main/webapp/directives/category.html | 2 +- src/main/webapp/directives/toolbar.html | 1 + src/main/webapp/js/controllers.js | 1 - src/main/webapp/js/directives.js | 49 ++++++++++++++++++- src/main/webapp/templates/feeds.html | 7 +-- src/main/webapp/vendor/spin.js/spin.min.js | 1 + 8 files changed, 64 insertions(+), 7 deletions(-) create mode 100644 src/main/webapp/vendor/spin.js/spin.min.js diff --git a/src/main/java/com/commafeed/frontend/pages/HomePage.html b/src/main/java/com/commafeed/frontend/pages/HomePage.html index 86bc2733..d287eb9e 100644 --- a/src/main/java/com/commafeed/frontend/pages/HomePage.html +++ b/src/main/java/com/commafeed/frontend/pages/HomePage.html @@ -10,7 +10,7 @@ -
+
@@ -45,6 +45,7 @@ + diff --git a/src/main/webapp/css/app.css b/src/main/webapp/css/app.css index 4fd20cbb..7fc751f3 100644 --- a/src/main/webapp/css/app.css +++ b/src/main/webapp/css/app.css @@ -2,6 +2,13 @@ margin-top: 10px; } +.main .spinner { + width: 50px; + height: 50px; + top: 14px; + left: 20px; +} + /* tree*/ .sidebar-nav-fixed { overflow-x: hidden; diff --git a/src/main/webapp/directives/category.html b/src/main/webapp/directives/category.html index 7a00373a..d10ac826 100644 --- a/src/main/webapp/directives/category.html +++ b/src/main/webapp/directives/category.html @@ -5,7 +5,7 @@
  • - +
    • Unsubscribe diff --git a/src/main/webapp/directives/toolbar.html b/src/main/webapp/directives/toolbar.html index efd68e83..3f432d15 100644 --- a/src/main/webapp/directives/toolbar.html +++ b/src/main/webapp/directives/toolbar.html @@ -1,4 +1,5 @@
      +
      diff --git a/src/main/webapp/js/controllers.js b/src/main/webapp/js/controllers.js index 73db6e49..ab4f07a5 100644 --- a/src/main/webapp/js/controllers.js +++ b/src/main/webapp/js/controllers.js @@ -132,7 +132,6 @@ module.controller('FeedListCtrl', function($scope, $routeParams, $http, offset : $scope.entryList.entries.length, limit : $scope.limit }, function(data) { - console.log(data) var entries = data.entries for ( var i = 0; i < entries.length; i++) { $scope.entryList.entries.push(entries[i]); diff --git a/src/main/webapp/js/directives.js b/src/main/webapp/js/directives.js index 20ae851b..7508922d 100644 --- a/src/main/webapp/js/directives.js +++ b/src/main/webapp/js/directives.js @@ -102,7 +102,17 @@ module.directive('toolbar', function($routeParams, $route, SettingsService, restrict : 'E', replace : true, templateUrl : 'directives/toolbar.html', - controller : function($scope, $route, SettingsService) { + controller : function($scope, $route, $http, SettingsService) { + + function totalActiveAjaxRequests() { + return ($http.pendingRequests.length + $.active); + } + + $scope.loading = true; + $scope.$watch(totalActiveAjaxRequests, function () { + $scope.loading = !(totalActiveAjaxRequests() === 0); + }); + $scope.settings = SettingsService.settings; $scope.refresh = function() { $route.reload(); @@ -125,4 +135,41 @@ module.directive('toolbar', function($routeParams, $route, SettingsService, }); } }; +}); + +module.directive('spinner', function() { + return { + scope : { + shown : '=', + }, + restrict : 'A', + link : function($scope, element) { + element.addClass('spinner'); + var opts = { + lines : 11, // The number of lines to draw + length : 5, // The length of each line + width : 3, // The line thickness + radius : 8, // The radius of the inner circle + corners : 1, // Corner roundness (0..1) + rotate : 0, // The rotation offset + color : '#000', // #rgb or #rrggbb + speed : 1.3, // Rounds per second + trail : 60, // Afterglow percentage + shadow : false, // Whether to render a shadow + hwaccel : true, // Whether to use hardware acceleration + zIndex : 2e9, // The z-index (defaults to 2000000000) + top : 50, // Top position relative to parent in px + left : 'auto' // Left position relative to parent in px + }; + var spinner = new Spinner(opts); + $scope.$watch('shown', function(shown) { + if (shown) { + spinner.spin(); + element.append(spinner.el); + } else { + spinner.stop(); + } + }); + } + } }); \ No newline at end of file diff --git a/src/main/webapp/templates/feeds.html b/src/main/webapp/templates/feeds.html index 2b0a4f94..dcd0a8ae 100644 --- a/src/main/webapp/templates/feeds.html +++ b/src/main/webapp/templates/feeds.html @@ -1,8 +1,9 @@
      -
      -

      {{entryList.name}} »

      -
      +
      +

      {{entryList.name}}  »

      +
      +
      diff --git a/src/main/webapp/vendor/spin.js/spin.min.js b/src/main/webapp/vendor/spin.js/spin.min.js new file mode 100644 index 00000000..efb4355d --- /dev/null +++ b/src/main/webapp/vendor/spin.js/spin.min.js @@ -0,0 +1 @@ +!function(t,e,i){var o=["webkit","Moz","ms","O"],r={},n;function a(t,i){var o=e.createElement(t||"div"),r;for(r in i)o[r]=i[r];return o}function s(t){for(var e=1,i=arguments.length;e>1):parseInt(i.left,10)+r)+"px",top:(i.top=="auto"?f.y-s.y+(t.offsetHeight>>1):parseInt(i.top,10)+r)+"px"})}o.setAttribute("aria-role","progressbar");e.lines(o,e.opts);if(!n){var l=0,p=i.fps,c=p/i.speed,h=(1-i.opacity)/(c*i.trail/100),m=c/i.lines;(function y(){l++;for(var t=i.lines;t;t--){var r=Math.max(1-(l+t*m)%c*h,i.opacity);e.opacity(o,i.lines-t,r,i)}e.timeout=e.el&&setTimeout(y,~~(1e3/p))})()}return e},stop:function(){var t=this.el;if(t){clearTimeout(this.timeout);if(t.parentNode)t.parentNode.removeChild(t);this.el=i}return this},lines:function(t,e){var i=0,o;function r(t,o){return u(a(),{position:"absolute",width:e.length+e.width+"px",height:e.width+"px",background:t,boxShadow:o,transformOrigin:"left",transform:"rotate("+~~(360/e.lines*i+e.rotate)+"deg) translate("+e.radius+"px"+",0)",borderRadius:(e.corners*e.width>>1)+"px"})}for(;i',e)}var e=u(a("group"),{behavior:"url(#default#VML)"});if(!p(e,"transform")&&e.adj){f.addRule(".spin-vml","behavior:url(#default#VML)");m.prototype.lines=function(e,i){var o=i.length+i.width,r=2*o;function n(){return u(t("group",{coordsize:r+" "+r,coordorigin:-o+" "+-o}),{width:r,height:r})}var a=-(i.width+i.length)*2+"px",f=u(n(),{position:"absolute",top:a,left:a}),l;function p(e,r,a){s(f,s(u(n(),{rotation:360/i.lines*e+"deg",left:~~r}),s(u(t("roundrect",{arcsize:i.corners}),{width:o,height:i.width,left:i.radius,top:-i.width>>1,filter:a}),t("fill",{color:i.color,opacity:i.opacity}),t("stroke",{opacity:0}))))}if(i.shadow)for(l=1;l<=i.lines;l++)p(l,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(l=1;l<=i.lines;l++)p(l);return s(e,f)};m.prototype.opacity=function(t,e,i,o){var r=t.firstChild;o=o.shadow&&o.lines||0;if(r&&e+o