├── CHANGELOG.md ├── LICENSE.txt ├── README.md ├── bower.json ├── isteven-omni-bar.css └── isteven-omni-bar.js /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### v1.0.1 2 | Ensure a number to number comparison instead in current bar width calculation 3 | 4 | ### v1.0.0 5 | First release 6 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Ignatius Steven (https://github.com/isteven) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | AngularJS Omni Bar 2 | ================ 3 | A native AngularJS bar you can use to display progress, completion, percentage, etc. 4 | 5 | 6 | ### Demo & How To 7 | Go to http://isteven.github.io/angular-omni-bar 8 | 9 | ### Current Version 10 | 1.0.1 11 | 12 | ### Change Log 13 | See CHANGELOG.md 14 | 15 | ### Bug Reporting 16 | - Search in the issue section first. Somebody might have reported the same bug and/or asked similar question. If there's none, then please create a new issue. 17 | - Try to reproduce the problem in JSFiddle or Plunker (or any other online JS collaboration tool), and include the URL in the issue you are creating. 18 | 19 | 20 | ### Note 21 | - This directive is a practical solution, not a performance champion. It will not win any code efficiency competition. 22 | - As for the moment, developments are on going, so I am not accepting pull requests. I will choose & add them manually instead. 23 | - If you like / use this directive in your awesome projects, star this repo. It's a huge motivation for me. Would also love to hear from you if you use it in an open source project. Thanks! 24 | 25 | ### Licence 26 | Released under the MIT license: 27 | 28 | The MIT License (MIT) 29 | 30 | Copyright (c) 2014 Ignatius Steven (https://github.com/isteven) 31 | 32 | Permission is hereby granted, free of charge, to any person obtaining a copy 33 | of this software and associated documentation files (the "Software"), to deal 34 | in the Software without restriction, including without limitation the rights 35 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 36 | copies of the Software, and to permit persons to whom the Software is 37 | furnished to do so, subject to the following conditions: 38 | 39 | The above copyright notice and this permission notice shall be included in all 40 | copies or substantial portions of the Software. 41 | 42 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 43 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 44 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 45 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 46 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 47 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 48 | SOFTWARE. 49 | 50 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name" : "isteven-angular-omni-bar", 3 | "version" : "v1.0.1", 4 | "main" : [ 5 | "isteven-omni-bar.js", 6 | "isteven-omni-bar.css" 7 | ], 8 | "ignore" : [ 9 | ".git", 10 | ".gitignore", 11 | "bower.json", 12 | "README.md" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /isteven-omni-bar.css: -------------------------------------------------------------------------------- 1 | .containerBar { 2 | display: inline-block; 3 | width: 100%; 4 | border-radius: 5px; 5 | height: 30px; 6 | } 7 | 8 | .maxValue { 9 | position: relative; 10 | height: 100%; 11 | width: 100%; 12 | border-radius: 5px; 13 | background-color: #555; 14 | overflow: hidden; 15 | } 16 | 17 | .currentValue { 18 | position: absolute; 19 | left: 0px; 20 | z-index: 1; 21 | height: 100%; 22 | border-radius: 5px; 23 | background-color: #99cc00; 24 | } 25 | 26 | /* Sub value bar animation on change. You need to include ngAnimate module for this */ 27 | .currentValue { 28 | -webkit-transition:all ease-out 0.8s; 29 | transition:all ease-out 0.8s; 30 | } 31 | 32 | .infoText { 33 | font-weight: bold; 34 | position: absolute; 35 | width: 100%; 36 | text-align: center; 37 | color: #fff; 38 | z-index: 2; 39 | padding-top: 5px; 40 | text-shadow: 1px 1px #444; 41 | } 42 | -------------------------------------------------------------------------------- /isteven-omni-bar.js: -------------------------------------------------------------------------------- 1 | /* 2 | * AngularJS Omni Bar Directive 3 | * 4 | * Creates a simple bar to display a comparison of sub-value over the total-value. 5 | * 6 | * Project started on: Thu, 21 Aug 2014 - 15:30:31 7 | * Current version: 1.0.1 8 | * 9 | * Released under the MIT License 10 | * -------------------------------------------------------------------------------- 11 | * The MIT License (MIT) 12 | * 13 | * Copyright (c) 2014 Ignatius Steven (https://github.com/isteven) 14 | * 15 | * Permission is hereby granted, free of charge, to any person obtaining a copy 16 | * of this software and associated documentation files (the "Software"), to deal 17 | * in the Software without restriction, including without limitation the rights 18 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 19 | * copies of the Software, and to permit persons to whom the Software is 20 | * furnished to do so, subject to the following conditions: 21 | * 22 | * The above copyright notice and this permission notice shall be included in all 23 | * copies or substantial portions of the Software. 24 | * 25 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 26 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 27 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 28 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 29 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 30 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 31 | * SOFTWARE. 32 | * -------------------------------------------------------------------------------- 33 | */ 34 | 35 | angular.module( 'isteven-omni-bar', ['ng'] ).directive( 'istevenOmniBar' , [ '$timeout', function ( $timeout ) { 36 | return { 37 | restrict: 38 | 'AE', 39 | 40 | replace: 41 | true, 42 | 43 | transclude: 44 | true, 45 | 46 | scope: 47 | { 48 | // bars 49 | currentValue : '=', 50 | currentStyle : '=', 51 | maxValue : '=', 52 | maxStyle : '=', 53 | 54 | // bar container 55 | containerStyle : '=', 56 | 57 | // callbacks 58 | onClick : '&' 59 | }, 60 | 61 | template: 62 | '
' + 63 | '
' + 64 | '
' + 65 | '
' + 66 | '' + 67 | '
' + 68 | '
', 69 | 70 | link: function ( $scope, element, attrs ) { 71 | 72 | var currentValueBar = element.children().children()[ 0 ]; 73 | var maxValueBar = element.children()[ 0 ]; 74 | var containerBar = element; 75 | 76 | $scope.drawBar = function( currentVal, maxVal ) { 77 | 78 | // if max-value is not specified, we use the current value as the width % 79 | // else we calculate using the formula 80 | if ( 81 | typeof attrs.maxValue === 'undefined' || 82 | attrs.maxValue === null || 83 | typeof maxVal === 'undefined' || 84 | maxVal === null 85 | ) { 86 | var calculatedWidth = currentVal; 87 | } 88 | // Just to make sure it's a number 89 | else if ( maxVal * 1 === 0 ) { 90 | var calculatedWidth = 100; 91 | } 92 | else { 93 | var calculatedWidth = ( currentVal / maxVal ) * 100; 94 | } 95 | 96 | // set the width here.. just plain ol' javascript 97 | currentValueBar.setAttribute( 'style', 'width:' + calculatedWidth + '%' ); 98 | 99 | // Somehow ng-style is removed after we change the width, so to make it persistant: 100 | if ( typeof $scope.currentStyle !== 'undefined' ) { 101 | angular.element( currentValueBar ).css( $scope.currentStyle ); 102 | } 103 | 104 | if ( typeof $scope.maxStyle !== 'undefined' ) { 105 | angular.element( maxValueBar ).css( $scope.maxStyle ); 106 | } 107 | 108 | if ( typeof $scope.containerStyle !== 'undefined' ) { 109 | angular.element( containerBar ).css( $scope.containerStyle ); 110 | } 111 | } 112 | 113 | // initial draw (0%) so we can see a nice animation when the current-value is actually loaded by $watch below 114 | $scope.drawBar( 0 , null ); 115 | 116 | // watches.. nothing unusual here. 117 | // timeout is used for the loading animation 118 | $timeout( function() { 119 | 120 | $scope.$watch( 'currentValue' , function( newVal, oldVal ) { 121 | if ( typeof newVal !== 'undefined' ) { 122 | $scope.drawBar( newVal, $scope.maxValue ); 123 | } 124 | }); 125 | 126 | $scope.$watch( 'maxValue', function( newVal, oldVal ) { 127 | if ( typeof newVal !== 'undefined' ) { 128 | $scope.drawBar( $scope.currentValue , newVal ); 129 | } 130 | }); 131 | 132 | $scope.$watch( 'currentStyle', function( newVal, oldVal ) { 133 | if ( typeof newVal !== 'undefined' ) { 134 | angular.element( currentValueBar ).css( newVal ); 135 | } 136 | }); 137 | 138 | $scope.$watch( 'maxStyle', function( newVal, oldVal ) { 139 | if ( typeof newVal !== 'undefined' ) { 140 | angular.element( maxValueBar ).css( newVal ); 141 | } 142 | }); 143 | 144 | $scope.$watch( 'containerStyle', function( newVal, oldVal ) { 145 | if ( typeof newVal !== 'undefined' ) { 146 | angular.element( containerBar ).css( newVal ); 147 | } 148 | }); 149 | 150 | }, 250 ); 151 | } 152 | } 153 | }]); 154 | --------------------------------------------------------------------------------