updated bindings for progress component and demo (#59)

IdanCo · Aug 11, 2017 · 362b24a · 362b24a
1 parent b2dd158
commit 362b24a
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 47 deletions.
diff --git a/src/docs/demos/progress/progress-demo.html b/src/docs/demos/progress/progress-demo.html
@@ -6,13 +6,13 @@ <h6>Side-By-Side HTML5 and Bootstrap 4</h6>
 
 <div class="mb-3">
   <progress ng-attr-value="{{$ctrl.value}}" max="{{$ctrl.max}}" style="height: {{$ctrl.height}}px;">{{$ctrl.value}} perc.</progress>
-  <ngbs-progress ng-attr-value="$ctrl.value"
-                 max="$ctrl.max"
-                 auto-label="$ctrl.label === 'auto'"
-                 animated-progress="$ctrl.animatedProgress"
-                 animated-stripes="$ctrl.animatedStripes"
-                 background="$ctrl.background"
-                 striped="$ctrl.striped"
+  <ngbs-progress progress-value="$ctrl.value"
+                 progress-max="$ctrl.max"
+                 progress-auto-label="$ctrl.label === 'auto'"
+                 progress-animated-progression="$ctrl.animatedProgression"
+                 progress-animated-stripes="$ctrl.animatedStripes"
+                 progress-background="$ctrl.background"
+                 progress-striped="$ctrl.striped"
                  style="height: {{$ctrl.height}}px;">{{$ctrl.label === 'custom' ? $ctrl.value + ' perc.' : ''}}</ngbs-progress>
 </div>
 
@@ -69,7 +69,7 @@ <h6>Side-By-Side HTML5 and Bootstrap 4</h6>
     </div>
     <div class="form-check mr-3">
       <label class="form-check-label pl-0">
-            <input type="checkbox" ng-model="$ctrl.animatedProgress">&nbsp;Animated Progress
+            <input type="checkbox" ng-model="$ctrl.animatedProgression">&nbsp;Animated Progress
       </label>
     </div>
     <div class="form-check mr-3">

diff --git a/src/docs/demos/progress/progress-demo.md b/src/docs/demos/progress/progress-demo.md
@@ -2,16 +2,16 @@
 
 This component merges the simplicity of HTML5's `<progress>` with the beauty of Bootstrap 4's Progress component. In addition to the attributes below, the component's `height` style can be set for a taller (or shorter) progress indicator.
 
-**max** (*number*, optional) - Represents how much of a particular task needs to be done before it is considered complete. If provided, the number must be greater than zero.
+**progress-max** (*number*, optional) - Represents how much of a particular task needs to be done before it is considered complete. If provided, the number must be greater than zero.
 
-**value** (*number*, optional) - Represents how much of a particular task has been done. If provided, the number must be greater than or equal to 0 and less than or equal to `max`. This attribute is optional, which allows you to illustrate that a particular task is ongoing with no indication of how long it is expected to take.
+**progress-value** (*number*, optional) - Represents how much of a particular task has been done. If provided, the number must be greater than or equal to 0 and less than or equal to `progress-max`. This attribute is optional, which allows you to illustrate that a particular task is ongoing with no indication of how long it is expected to take.
 
-**animated-progress** (*boolean*, optional) - Whether or not changes to the `value` should be animated. Defaults to `false`.
+**progress-animated-progress** (*boolean*, optional) - Whether or not changes to the `progress-value` should be animated. Defaults to `false`.
 
-**auto-label** (*boolean*, optional) - Automatically displays a label inside of the progress indicator (e.g.- 25%). You can also specify your own custom label via `innerHTML`. Defaults to `false`.
+**progress-auto-label** (*boolean*, optional) - Automatically displays a label inside of the progress indicator (e.g.- 25%). You can also specify your own custom label via `innerHTML`. Defaults to `false`.
 
-**striped** (*boolean*, optional) - The display style of the progress indicator. Defaults to `false`.
+**progress-striped** (*boolean*, optional) - The display style of the progress indicator. Defaults to `false`.
 
-**animated-striped** (*boolean*, optional) - Used in conjunction with the `striped` attribute. Defaults to `false`.
+**progress-animated-striped** (*boolean*, optional) - Used in conjunction with the `progress-striped` attribute. Defaults to `false`.
 
-**background** (*string*, optional) - This maps to Bootstrap 4's colors. Values can be `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`, `'inverse'`, or `'faded'`. Defaults to `'primary'`.
+**progress-background** (*string*, optional) - This maps to Bootstrap 4's colors. Values can be `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`, `'inverse'`, or `'faded'`. Defaults to `'primary'`.
diff --git a/src/library/progress/progress.component.js b/src/library/progress/progress.component.js
@@ -16,37 +16,37 @@ class controller {
 
   $onChanges(changesObj) {
     // (re)validate bindings
-    if (this.max && (typeof this.max !== 'number' || isFinite(this.max) === false)) {
-      this.$log.error('invalid ngbsProgress::max:', JSON.stringify(this.max), 'expecting a number');
+    if (this.progressMax && (typeof this.progressMax !== 'number' || isFinite(this.progressMax) === false)) {
+      this.$log.error('invalid ngbsProgress::progressMax:', JSON.stringify(this.progressMax), 'expecting a number');
     }
 
-    if (this.value && (typeof this.value !== 'number' || isFinite(this.value) === false)) {
-      this.$log.error('invalid ngbsProgress::value:', JSON.stringify(this.value), 'expecting a number');
+    if (this.progressValue && (typeof this.progressValue !== 'number' || isFinite(this.progressValue) === false)) {
+      this.$log.error('invalid ngbsProgress::progressValue:', JSON.stringify(this.progressValue), 'expecting a number');
     }
 
-    if (this.animatedProgress && typeof this.animatedProgress !== 'boolean') {
-      this.$log.error('invalid ngbsProgress::animatedProgress:', JSON.stringify(this.animatedProgress), 'expecting a boolean');
+    if (this.progressAnimatedProgression && typeof this.progressAnimatedProgression !== 'boolean') {
+      this.$log.error('invalid ngbsProgress::progressAnimatedProgression:', JSON.stringify(this.progressAnimatedProgression), 'expecting a boolean');
     }
 
-    if (this.autoLabel && typeof this.autoLabel !== 'boolean') {
-      this.$log.error('invalid ngbsProgress::autoLabel:', JSON.stringify(this.autoLabel), 'expecting a boolean');
+    if (this.progressAutoLabel && typeof this.progressAutoLabel !== 'boolean') {
+      this.$log.error('invalid ngbsProgress::progressAutoLabel:', JSON.stringify(this.progressAutoLabel), 'expecting a boolean');
     }
 
-    if (this.striped && typeof this.striped !== 'boolean') {
-      this.$log.error('invalid ngbsProgress::striped:', JSON.stringify(this.striped), 'expecting a boolean');
+    if (this.progressStriped && typeof this.progressStriped !== 'boolean') {
+      this.$log.error('invalid ngbsProgress::progressStriped:', JSON.stringify(this.progressStriped), 'expecting a boolean');
     }
 
-    if (this.animatedStripes && typeof this.animatedStripes !== 'boolean') {
-      this.$log.error('invalid ngbsProgress::animatedStripes:', JSON.stringify(this.animatedStripes), 'expecting a boolean');
+    if (this.progressAnimatedStripes && typeof this.progressAnimatedStripes !== 'boolean') {
+      this.$log.error('invalid ngbsProgress::progressAnimatedStripes:', JSON.stringify(this.progressAnimatedStripes), 'expecting a boolean');
     }
 
-    if (this.background && SUPPORTED_BACKGROUNDS.includes(this.background) === false) {
-      this.$log.error('invalid ngbsProgress::background:', JSON.stringify(this.background), 'expecting one of the following', SUPPORTED_BACKGROUNDS);
+    if (this.progressBackground && SUPPORTED_BACKGROUNDS.includes(this.progressBackground) === false) {
+      this.$log.error('invalid ngbsProgress::progressBackground:', JSON.stringify(this.progressBackground), 'expecting one of the following', SUPPORTED_BACKGROUNDS);
     }
 
-    // recalculate percentage if max/value change
-    if (changesObj.value || changesObj.max) {
-      this.percentage = this.value / this.max * 100;
+    // recalculate percentage if progressMax/progressValue change
+    if (changesObj.progressValue || changesObj.progressMax) {
+      this.percentage = this.progressValue / this.progressMax * 100;
       this.roundedPercentage = Math.round(this.percentage);
     }
   }
@@ -55,13 +55,13 @@ class controller {
 // Define and export component
 export default {
   bindings: {
-    animatedProgress: '<',
-    animatedStripes: '<',
-    autoLabel: '<',
-    background: '<',
-    max: '<',
-    striped: '<',
-    value: '<',
+    progressAnimatedProgression: '<',
+    progressAnimatedStripes: '<',
+    progressAutoLabel: '<',
+    progressBackground: '<',
+    progressMax: '<',
+    progressStriped: '<',
+    progressValue: '<',
   },
   transclude: true,
   template,

diff --git a/src/library/progress/progress.html b/src/library/progress/progress.html
@@ -1,17 +1,17 @@
 <div class="progress">
   <div class="progress-bar" role="progressbar"
-       ng-if="$ctrl.value || $ctrl.value === 0"
-       ng-attr-aria-valuenow="{{$ctrl.value}}"
-       ng-attr-aria-valuemax="{{$ctrl.max}}"
+       ng-if="$ctrl.progressValue || $ctrl.progressValue === 0"
+       ng-attr-aria-valuenow="{{$ctrl.progressValue}}"
+       ng-attr-aria-valuemax="{{$ctrl.progressMax}}"
        ng-attr-style="width: {{$ctrl.percentage}}%"
-       ng-class="[$ctrl.background ? 'bg-' + $ctrl.background : '', { 'animated-progress': $ctrl.animatedProgress, 'progress-bar-animated': $ctrl.animatedStripes, 'progress-bar-striped': $ctrl.striped }]">
-        <span ng-if="$ctrl.autoLabel">{{$ctrl.roundedPercentage}}%</span>
-        <span ng-if="!$ctrl.autoLabel" ng-transclude></span>
+       ng-class="[$ctrl.progressBackground ? 'bg-' + $ctrl.progressBackground : '', { 'animated-progress': $ctrl.progressAnimatedProgression, 'progress-bar-animated': $ctrl.progressAnimatedStripes, 'progress-bar-striped': $ctrl.progressStriped }]">
+        <span ng-if="$ctrl.progressAutoLabel">{{$ctrl.roundedPercentage}}%</span>
+        <span ng-if="!$ctrl.progressAutoLabel" ng-transclude></span>
       </div>
 
   <div class="progress-bar indeterminate" role="progressbar"
-       ng-if="!$ctrl.value && $ctrl.value !== 0"
+       ng-if="!$ctrl.progressValue && $ctrl.progressValue !== 0"
        aria-valuenow="Unknown"
        aria-valuemax="Unknown"
-       ng-class="[$ctrl.background ? 'bg-' + $ctrl.background : '', { 'progress-bar-animated': $ctrl.animatedStripes, 'progress-bar-striped': $ctrl.striped }]"></div>
+       ng-class="[$ctrl.progressBackground ? 'bg-' + $ctrl.progressBackground : '', { 'progress-bar-animated': $ctrl.progressAnimatedStripes, 'progress-bar-striped': $ctrl.progressStriped }]"></div>
 </div>