using ionic content banners to display timed status messages

4 files changed, 199 insertions, 0 deletions

diff --git a/www/lib/ionic-content-banner/dist/ionic.content.banner.css b/www/lib/ionic-content-banner/dist/ionic.content.banner.css
new file mode 100644
index 00000000..79519cb9
--- /dev/null
+++ b/www/lib/ionic-content-banner/dist/ionic.content.banner.css
@@ -0,0 +1,53 @@
+@charset "UTF-8";
+
+.content-banner {
+  width: 100%;
+  color: white;
+  height: 30px;
+  line-height: 30px;
+  position: absolute;
+  top: 0;
+  opacity: 0.7; }
+.content-banner.error {
+  background-color: red; }
+.content-banner.info {
+  background-color: #333; }
+.content-banner .content-banner-text {
+  -webkit-transition: opacity 500ms linear;
+  transition: opacity 500ms linear;
+  position: absolute;
+  top: 0;
+  right: 41px;
+  left: 41px;
+  text-align: center; }
+.content-banner .content-banner-text.active {
+  opacity: 1; }
+.content-banner .content-banner-text:not(.active) {
+  opacity: 0; }
+.content-banner .content-banner-close {
+  position: absolute;
+  right: 5px;
+  top: 0;
+  padding: 0 12px;
+  height: 100%;
+  line-height: 30px;
+  min-height: 0;
+  color: white; }
+.content-banner .content-banner-close:before {
+  line-height: 30px; }
+
+.content-banner-transition-vertical {
+  -webkit-transition: -webkit-transform linear 250ms;
+  transition: transform linear 250ms;
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0); }
+
+.content-banner-transition-fade {
+  -webkit-transition: opacity 400ms linear;
+  transition: opacity 400ms linear;
+  opacity: 0; }
+
+.content-banner-in {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  opacity: 0.7; }
diff --git a/www/lib/ionic-content-banner/dist/ionic.content.banner.js b/www/lib/ionic-content-banner/dist/ionic.content.banner.js
new file mode 100644
index 00000000..0dec733b
--- /dev/null
+++ b/www/lib/ionic-content-banner/dist/ionic.content.banner.js
@@ -0,0 +1,144 @@
+angular.module('jett.ionic.content.banner', ['ionic']);
+/* global angular */
+(function (angular) {
+  'use strict';
+
+  angular.module('jett.ionic.content.banner')
+    .directive('ionContentBanner', [
+      '$interval',
+      function ($interval) {
+        return {
+          restrict: 'E',
+          scope: true,
+          link: function ($scope, $element) {
+            var stopInterval;
+
+            $scope.currentIndex = 0;
+
+            if ($scope.text.length > 1) {
+              stopInterval = $interval(function () {
+                $scope.currentIndex = ($scope.currentIndex < $scope.text.length - 1) ? $scope.currentIndex + 1 : 0;
+              }, $scope.interval);
+            }
+
+            $scope.$on('$destroy', function() {
+              $element.remove();
+              if (stopInterval) {
+                $interval.cancel(stopInterval);
+              }
+            });
+          },
+          template:
+          '<div class="content-banner-text-wrapper">' +
+            '<div ng-repeat="item in text track by $index" ng-class="{active: $index === currentIndex}" class="content-banner-text" ng-bind="item"></div>' +
+          '</div>' +
+          '<button class="content-banner-close button button-icon icon {{::icon}}" ng-click="close()"></button>'
+        };
+      }]);
+
+})(angular);
+
+/* global angular,ionic */
+/**
+ * @ngdoc service
+ * @name $ionicContentBanner
+ * @module ionic
+ * @description The Content Banner is an animated banner that will show specific information to a user.
+ */
+(function (angular, ionic) {
+  'use strict';
+
+  angular.module('jett.ionic.content.banner')
+    .factory('$ionicContentBanner', [
+      '$document',
+      '$rootScope',
+      '$compile',
+      '$timeout',
+      '$ionicPlatform',
+      function ($document, $rootScope, $compile, $timeout, $ionicPlatform) {
+
+        /**
+         * @ngdoc method
+         * @name $ionicContentBanner#show
+         * @description
+         * Load and show a new content banner.
+         */
+        function contentBanner (opts) {
+          var scope = $rootScope.$new(true);
+
+          angular.extend(scope, {
+            icon: 'ion-ios-close-empty',
+            transition: 'vertical',
+            interval: 7000,
+            type: 'info',
+            $deregisterBackButton: angular.noop,
+            closeOnStateChange: true
+          }, opts);
+
+          // Compile the template
+          var classes = 'content-banner ' + scope.type + ' content-banner-transition-' + scope.transition;
+          var element = scope.element = $compile('<ion-content-banner class="' + classes + '"></ion-content-banner>')(scope);
+          var body = $document[0].body;
+
+          var stateChangeListenDone = scope.closeOnStateChange ?
+            $rootScope.$on('$stateChangeSuccess', function() { scope.close(); }) :
+            angular.noop;
+
+          scope.$deregisterBackButton = $ionicPlatform.registerBackButtonAction(
+            function() {
+              $timeout(scope.close);
+            }, 300
+          );
+
+          scope.close = function() {
+            if (scope.removed) {
+              return;
+            }
+            scope.removed = true;
+
+            ionic.requestAnimationFrame(function () {
+              element.removeClass('content-banner-in');
+
+              $timeout(function () {
+                scope.$destroy();
+                element.remove();
+                body = stateChangeListenDone = null;
+              }, 400);
+            });
+
+            scope.$deregisterBackButton();
+            stateChangeListenDone();
+          };
+
+          scope.show = function() {
+            if (scope.removed) {
+              return;
+            }
+
+            body.querySelector('ion-view[nav-view="active"] .scroll-content').appendChild(element[0]);
+
+            ionic.requestAnimationFrame(function () {
+              $timeout(function () {
+                element.addClass('content-banner-in');
+              }, 20, false);
+            });
+          };
+
+          //set small timeout to let ionic set the active/cached view
+          $timeout(function () {
+            scope.show();
+          }, 10, false);
+
+          // Expose the scope on $ionContentBanner's return value for the sake of testing it.
+          scope.close.$scope = scope;
+
+          return scope.close;
+        }
+
+        return {
+          show: contentBanner
+        };
+      }]);
+
+
+})(angular, ionic);
diff --git a/www/lib/ionic-content-banner/dist/ionic.content.banner.min.css b/www/lib/ionic-content-banner/dist/ionic.content.banner.min.css
new file mode 100644
index 00000000..04d37d1f
--- /dev/null
+++ b/www/lib/ionic-content-banner/dist/ionic.content.banner.min.css
@@ -0,0 +1 @@
+@charset "UTF-8";.content-banner{width:100%;color:#fff;height:30px;line-height:30px;position:absolute;top:0;opacity:.7}.content-banner.error{background-color:red}.content-banner.info{background-color:#333}.content-banner .content-banner-text{-webkit-transition:opacity 500ms linear;transition:opacity 500ms linear;position:absolute;top:0;right:41px;left:41px;text-align:center}.content-banner .content-banner-text.active{opacity:1}.content-banner .content-banner-text:not(.active){opacity:0}.content-banner .content-banner-close{position:absolute;right:5px;top:0;padding:0 12px;height:100%;line-height:30px;min-height:0;color:#fff}.content-banner .content-banner-close:before{line-height:30px}.content-banner-transition-vertical{-webkit-transition:-webkit-transform linear 250ms;transition:transform linear 250ms;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.content-banner-transition-fade{-webkit-transition:opacity 400ms linear;transition:opacity 400ms linear;opacity:0}.content-banner-in{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:.7}
\ No newline at end of file
diff --git a/www/lib/ionic-content-banner/dist/ionic.content.banner.min.js b/www/lib/ionic-content-banner/dist/ionic.content.banner.min.js
new file mode 100644
index 00000000..d293e517
--- /dev/null
+++ b/www/lib/ionic-content-banner/dist/ionic.content.banner.min.js
@@ -0,0 +1 @@
+angular.module("jett.ionic.content.banner",["ionic"]),function(n){"use strict";n.module("jett.ionic.content.banner").directive("ionContentBanner",["$interval",function(n){return{restrict:"E",scope:!0,link:function(e,t){var o;e.currentIndex=0,e.text.length>1&&(o=n(function(){e.currentIndex=e.currentIndex<e.text.length-1?e.currentIndex+1:0},e.interval)),e.$on("$destroy",function(){t.remove(),o&&n.cancel(o)})},template:'<div class="content-banner-text-wrapper"><div ng-repeat="item in text track by $index" ng-class="{active: $index === currentIndex}" class="content-banner-text" ng-bind="item"></div></div><button class="content-banner-close button button-icon icon {{::icon}}" ng-click="close()"></button>'}}])}(angular),function(n,e){"use strict";n.module("jett.ionic.content.banner").factory("$ionicContentBanner",["$document","$rootScope","$compile","$timeout","$ionicPlatform",function(t,o,c,i,r){function a(a){var s=o.$new(!0);n.extend(s,{icon:"ion-ios-close-empty",transition:"vertical",interval:7e3,type:"info",$deregisterBackButton:n.noop,closeOnStateChange:!0},a);var u="content-banner "+s.type+" content-banner-transition-"+s.transition,l=s.element=c('<ion-content-banner class="'+u+'"></ion-content-banner>')(s),d=t[0].body,v=s.closeOnStateChange?o.$on("$stateChangeSuccess",function(){s.close()}):n.noop;return s.$deregisterBackButton=r.registerBackButtonAction(function(){i(s.close)},300),s.close=function(){s.removed||(s.removed=!0,e.requestAnimationFrame(function(){l.removeClass("content-banner-in"),i(function(){s.$destroy(),l.remove(),d=v=null},400)}),s.$deregisterBackButton(),v())},s.show=function(){s.removed||(d.querySelector('ion-view[nav-view="active"] .scroll-content').appendChild(l[0]),e.requestAnimationFrame(function(){i(function(){l.addClass("content-banner-in")},20,!1)}))},i(function(){s.show()},10,!1),s.close.$scope=s,s.close}return{show:a}}])}(angular,ionic);
\ No newline at end of file