diff options
12 files changed, 409 insertions, 0 deletions
diff --git a/www/lib/ionic-content-banner/.bower.json b/www/lib/ionic-content-banner/.bower.json new file mode 100644 index 00000000..d23a9107 --- /dev/null +++ b/www/lib/ionic-content-banner/.bower.json @@ -0,0 +1,55 @@ +{ + "name": "ionic-content-banner", + "version": "1.0.0", + "description": "A content banner directive for Ionic apps that animates in on the active ion-content", + "author": "Devin Jett <djett41@gmail.com> (https://github.com/djett41)", + "main": [ + "dist/ionic.content.banner.css", + "dist/ionic.content.banner.js" + ], + "repository": { + "type": "git", + "url": "https://github.com/djett41/ionic-content-banner.git" + }, + "ignore": [ + "demo", + "js", + "test", + ".gitignore", + "gulpfile.js", + "karma.conf.js", + "LICENSE", + "package.json", + "README.md" + ], + "dependencies": {}, + "devDependencies": { + "ionic": "^1.0.0-rc.0", + "angular-mocks": "1.3.13" + }, + "keywords": [ + "mobile", + "html5", + "ionic", + "cordova", + "phonegap", + "banner", + "info", + "error", + "angularjs", + "angular" + ], + "license": "MIT", + "private": false, + "homepage": "https://github.com/djett41/ionic-content-banner", + "_release": "1.0.0", + "_resolution": { + "type": "version", + "tag": "v1.0.0", + "commit": "08f9779e742299e7dbe17e8481450f2763a1f6f5" + }, + "_source": "git://github.com/djett41/ionic-content-banner.git", + "_target": "~1.0.0", + "_originalSource": "ionic-content-banner", + "_direct": true +}
\ No newline at end of file diff --git a/www/lib/ionic-content-banner/.idea/.name b/www/lib/ionic-content-banner/.idea/.name new file mode 100644 index 00000000..72424e06 --- /dev/null +++ b/www/lib/ionic-content-banner/.idea/.name @@ -0,0 +1 @@ +ionic-content-banner
\ No newline at end of file diff --git a/www/lib/ionic-content-banner/.idea/ionic-content-banner.iml b/www/lib/ionic-content-banner/.idea/ionic-content-banner.iml new file mode 100644 index 00000000..dfda860c --- /dev/null +++ b/www/lib/ionic-content-banner/.idea/ionic-content-banner.iml @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<module type="WEB_MODULE" version="4"> + <component name="NewModuleRootManager"> + <content url="file://$MODULE_DIR$"> + <excludeFolder url="file://$MODULE_DIR$/demo/node_modules/gulp-jshint/node_modules/jshint/src/platforms" /> + <excludeFolder url="file://$MODULE_DIR$/demo/platforms" /> + </content> + <orderEntry type="inheritedJdk" /> + <orderEntry type="sourceFolder" forTests="false" /> + </component> +</module>
\ No newline at end of file diff --git a/www/lib/ionic-content-banner/.idea/misc.xml b/www/lib/ionic-content-banner/.idea/misc.xml new file mode 100644 index 00000000..19f74da8 --- /dev/null +++ b/www/lib/ionic-content-banner/.idea/misc.xml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<project version="4"> + <component name="ProjectLevelVcsManager" settingsEditedManually="false"> + <OptionsSetting value="true" id="Add" /> + <OptionsSetting value="true" id="Remove" /> + <OptionsSetting value="true" id="Checkout" /> + <OptionsSetting value="true" id="Update" /> + <OptionsSetting value="true" id="Status" /> + <OptionsSetting value="true" id="Edit" /> + <ConfirmationsSetting value="0" id="Add" /> + <ConfirmationsSetting value="0" id="Remove" /> + </component> + <component name="ProjectRootManager" version="2" /> +</project>
\ No newline at end of file diff --git a/www/lib/ionic-content-banner/.idea/modules.xml b/www/lib/ionic-content-banner/.idea/modules.xml new file mode 100644 index 00000000..a0a4aa02 --- /dev/null +++ b/www/lib/ionic-content-banner/.idea/modules.xml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8"?> +<project version="4"> + <component name="ProjectModuleManager"> + <modules> + <module fileurl="file://$PROJECT_DIR$/.idea/ionic-content-banner.iml" filepath="$PROJECT_DIR$/.idea/ionic-content-banner.iml" /> + </modules> + </component> +</project>
\ No newline at end of file diff --git a/www/lib/ionic-content-banner/.idea/vcs.xml b/www/lib/ionic-content-banner/.idea/vcs.xml new file mode 100644 index 00000000..94a25f7f --- /dev/null +++ b/www/lib/ionic-content-banner/.idea/vcs.xml @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="UTF-8"?> +<project version="4"> + <component name="VcsDirectoryMappings"> + <mapping directory="$PROJECT_DIR$" vcs="Git" /> + </component> +</project>
\ No newline at end of file diff --git a/www/lib/ionic-content-banner/bower.json b/www/lib/ionic-content-banner/bower.json new file mode 100644 index 00000000..10918b46 --- /dev/null +++ b/www/lib/ionic-content-banner/bower.json @@ -0,0 +1,44 @@ +{ + "name": "ionic-content-banner", + "version": "1.0.0", + "description": "A content banner directive for Ionic apps that animates in on the active ion-content", + "author": "Devin Jett <djett41@gmail.com> (https://github.com/djett41)", + "main": [ + "dist/ionic.content.banner.css", + "dist/ionic.content.banner.js" + ], + "repository": { + "type": "git", + "url": "https://github.com/djett41/ionic-content-banner.git" + }, + "ignore": [ + "demo", + "js", + "test", + ".gitignore", + "gulpfile.js", + "karma.conf.js", + "LICENSE", + "package.json", + "README.md" + ], + "dependencies": {}, + "devDependencies": { + "ionic": "^1.0.0-rc.0", + "angular-mocks": "1.3.13" + }, + "keywords": [ + "mobile", + "html5", + "ionic", + "cordova", + "phonegap", + "banner", + "info", + "error", + "angularjs", + "angular" + ], + "license": "MIT", + "private": false +} 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 diff --git a/www/lib/ionic-content-banner/scss/ionic.content.banner.scss b/www/lib/ionic-content-banner/scss/ionic.content.banner.scss new file mode 100644 index 00000000..af57ea9f --- /dev/null +++ b/www/lib/ionic-content-banner/scss/ionic.content.banner.scss @@ -0,0 +1,71 @@ +// Content Banner + +// Variables +//----------------------------------- + +$content-banner-height: 30px !default; +$content-banner-opacity: .7 !default; +$content-banner-error-bg: red !default; +$content-banner-info-bg: #333 !default; + +// Styles +//----------------------------------- + +.content-banner { + width: 100%; + color: white; + height: $content-banner-height; + line-height: $content-banner-height; + position: absolute; + top: 0; + opacity: $content-banner-opacity; + + &.error { + background-color: $content-banner-error-bg; + } + &.info { + background-color: $content-banner-info-bg; + } + .content-banner-text { + @include transition(opacity 500ms linear) ; + position: absolute; + top: 0; + right: ($button-padding * 2) + 5px + 12px; + left: ($button-padding * 2) + 5px + 12px; + text-align: center; + &.active { + opacity: 1; + } + &:not(.active){ + opacity: 0; + } + } + .content-banner-close { + position: absolute; + right: 5px; + top: 0; + padding: 0 $button-padding; + height: 100%; + line-height: $content-banner-height; + min-height: 0; + color: white; + &:before { + line-height: $content-banner-height; + } + } +} + +.content-banner-transition-vertical { + @include transition-transform(linear 250ms); + @include translate3d(0, -100%, 0); +} + +.content-banner-transition-fade { + @include transition(opacity 400ms linear) ; + opacity: 0; +} + +.content-banner-in { + @include translate3d(0, 0, 0); + opacity: $content-banner-opacity; +}
\ No newline at end of file |