Merge pull request #11 from cotag/mixin

animations no longer rely on javascript to stitch animation together
cotag · Jul 14, 2014 · 1e08e6f · 1e08e6f
2 parents 6abdeec + 9fb6e90
commit 1e08e6f
Show file tree

Hide file tree

Showing 14 changed files with 333 additions and 759 deletions.
diff --git a/.travis.yml b/.travis.yml
diff --git a/Gruntfile.js b/Gruntfile.js
diff --git a/README.md b/README.md
@@ -1,55 +1,88 @@
 # CSS Circular Progress Bar
 
-[![Build Status](https://travis-ci.org/cotag/orbicular.svg?branch=master)](https://travis-ci.org/cotag/orbicular)
-
-
-Based on the technique used at http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
+Based on the techniques used at http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar and https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9
 
 For cool auto-scaling UI's that require circular progression
 
 ![image](https://cloud.githubusercontent.com/assets/368013/2675921/6a099290-c127-11e3-9643-29a8b7ec6a9d.png)
 
+Also have a look at this [fiddle](http://jsfiddle.net/jD74M/7/)
+
 
 ## Installation
 
 1. Open bower.json
-2. Add `"orbicular": "~2.0.0"` to your dependency list
+2. Add `"orbicular": "~3.0.0"` to your dependency list
 3. Run `bower install`
 4. In your application you can now add:
-   * `<script src="bower_components/orbicular/orbicular/orbicular.js"></script>`
-5. Copy / include the SCSS files into your project
-   * Customise the styles using `_orbicular_config.scss`
+   * `<script src="bower_components/orbicular/orbicular.js"></script>`
+5. Import the SCSS files into your SCSS using the `@import` directive i.e.
+   * `@import "../../bower_components/orbicular/orbicular.scss"`
+6. Include the CSS using the orbicular mixin
+   * `@include orbicular(options: opt-value, ..)`
 
 
 ## Usage
 
 ### Create your progress element
 
 ```html
-<orbicular progression="downloaded" total="size">Text / HTML in the circle</orbicular>
+<orbicular progression="downloaded" total="size" resize>Text / HTML in the circle</orbicular>
 ```
 
-Where `$scope.downloaded` (download progress) and `$scope.size` (total size of download) are the variables used in the example to track the progress of a download.
+Where `$scope.downloaded` (download progress) and `$scope.size` (total size of download) are the variables used in the example to track the progress of a download. `resize` is optional and the circle will resize on window resize / rotate etc
+
+
+Configure your circle using the mixin options
+
+```scss
+// All the defaults except shadow which isn't set by default
+@include orbicular(
+    $barColor:  #50a6d3,    // The completed progress color
+    $barBg:     #EEE,       // The remaining progress color
+    $barWidth:  8,          // The bar width is defined as a percentage of the width of the circle
+    $contentBg: #2b383f,    // The circle center
+    $fontSize:  8,          // Content font-size as a percentage of the circle size
+    $fontColor: #FFF,       // Content text color
+    $transTime: 0.3s,       // Time to animate the movement
+    $transFunc: linear,     // transition timing
+    $shadow: 6px 6px 10px rgba(0,0,0,0.2)  // optional shadow (not default)
+);
+
+// for further customizations to the circle content use:
+// You can add your own id's and classes to the element too
+div.co-circle-progress {
+    div.co-content > div > div > div {
+        font-weight: bold;
+        // and any other divs' etc.
+    }
+}
+```
 
 
 ### Element size
 
 The circles size is based on the width of the parent element.
-
 This size is static and is set at the following times:
 
-1. when the directive is linked
-2. on mobile device rotation
-3. when the browser window is resized
-4. on the $broadcast of `'orb width'` to the elements scope
+* when the directive is linked
+* on the $broadcast of `'orb width'` to the elements scope
+
+if you set the optional `resize` attribute on the element then it'll also resize on
+
+* on mobile device rotation
+* when the browser window is resized
 
 Broadcasting or emitting should be used to programmatically resize circles
 
 
-## Upgrading from version 1.x.x
+## Upgrading from version 2.x.x to 3.x.x
 
-There is a single breaking change: (resolving a conflict with bootstrap UI)
+* Change the SCSS to use the mixin
+* Add a `resize` attribute if it should resize automatically
 
-* `progress="downloaded"` changes to `progression="downloaded"`
+## Upgrading from version 1.x.x to 2.x.x
 
+There is a single breaking change: (resolving a conflict with bootstrap UI)
 
+* `progress="downloaded"` changes to `progression="downloaded"`
diff --git a/_orbicular.scss b/_orbicular.scss
@@ -0,0 +1,148 @@
+
+// Don't rely on Compass
+@mixin co-border-radius($radius) {
+    border-radius:$radius;
+    -webkit-border-radius:$radius;
+    -moz-border-radius:$radius;
+}
+
+@mixin co-transform($transform) {
+    -webkit-transform: $transform;
+    -moz-transform: $transform;
+    -ms-transform: $transform;
+    transform: $transform;
+}
+
+@mixin co-box-sizing($type) {
+    -webkit-box-sizing: $type;
+    -moz-box-sizing: $type;
+    box-sizing: $type;
+}
+
+// Use this mixin to add orbicular support to your css
+@mixin orbicular(
+    $barColor:  #50a6d3,    // The completed progress
+    $barBg:     #EEE,       // The remaining progress
+    $barWidth:  8,          // The bar width is defined as a percentage of the width of the circle
+    $contentBg: #2b383f,    // The circle center
+    $fontSize:  8,          // Content font-size as a percentage of the circle size
+    $fontColor: #FFF,
+    $transTime: 0.3s,
+    $transFunc: linear,
+    $shadow: ''
+    ) {
+
+    // This is the width of the progress bar itself.
+    // NOT the size of the circle which is definded by it's parent element.
+    //
+    // The bar width is defined as a percentage of the width of the circle
+    // (% of parent element width).
+    $calculatedWidth: $barWidth / 100;
+    $contentWidth: (1 - (2 * $calculatedWidth));
+
+    $actualBarWidth: $calculatedWidth + em;
+    $actualFontSize: $fontSize / 100 + em;
+
+    // this is the core progress class
+    div.co-circle-progress {
+        position: relative;
+        width: 100%;
+        height: 1em;
+        @include co-box-sizing(border-box);
+
+        *, *:after, *:before {
+            @include co-box-sizing(border-box);
+        }
+
+        // Provides the bars background
+        background-color: $barBg;
+        @include co-border-radius(0.5em);
+
+        // Common traits of all the circles
+        &> div.co-circle, div.co-fill {
+            position:absolute;
+            top: 0;
+            left: 0;
+            width: 1em;
+            height: 1em;
+            background: transparent;
+
+            @include co-border-radius(0.5em);
+
+            -webkit-transition: -webkit-transform $transTime $transFunc;
+            -moz-transition: -moz-transform $transTime $transFunc;
+            -ms-transition: -ms-transform $transTime $transFunc;
+            -o-transition: -o-transform $transTime $transFunc;
+            transition: -webkit-transform $transTime $transFunc;
+            transition: transform $transTime $transFunc;
+        }
+
+        &> div.co-circle {
+            // Hides half of the circle
+            clip: rect(0px, 1em, 1em, 0.5em);
+
+            &> div.co-fill {
+                clip: rect(0em, 0.5em, 1em, 0em);
+                background-color: $barColor;
+            }
+        }
+
+        // Optional Shadow (developer to style)
+        &> div.co-shadow {
+            @if $shadow == '' {
+                display: none;
+            } @else {
+                box-shadow: $shadow inset;
+            }
+
+            position:absolute;
+            width: 1em;
+            height: 1em;
+            background: transparent;
+
+            @include co-border-radius(0.5em);
+        }
+
+        // Centering of the transcluded content by default
+        &> div.co-content {
+            position:absolute;
+            overflow: hidden;
+
+            height: $contentWidth + em;
+            width: $contentWidth + em;
+            margin-left: $actualBarWidth;
+            margin-top: $actualBarWidth;
+
+            background-color: $contentBg;
+            @include co-border-radius($contentWidth / 2 + em);
+
+            @if $shadow != '' {
+                box-shadow: $shadow;
+            }
+
+            &> div {
+                display: table;
+                width: 100%;
+                height: 100%;
+
+                &> div {
+                    display: table-row;
+                    width: 100%;
+                    height: 100%;
+
+                    &> div {
+                        display: table-cell;
+
+                        font-size: $actualFontSize;
+                        color: $fontColor;
+                        line-height: 1em;
+                        text-align: center;
+                        vertical-align: middle;
+
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+} // END mixin
diff --git a/bower.json b/bower.json
@@ -1,20 +1,15 @@
 {
   "name": "orbicular",
-  "version": "2.0.1",
-  "main": ["orbicular/orbicular.js", "orbicular/orbicular.scss"],
+  "version": "3.0.0",
+  "main": ["orbicular.js"],
   "description": "A CSS based circular progress bar for AngularJS",
   "dependencies": {
-    "angular": "~1.2.0"
+    "angular": "1.x"
   },
   "keywords": [
     "circular",
     "progress",
     "bar",
     "AngularJS"
-  ],
-  "devDependencies": {
-    "jquery": "~2.1.0",
-    "angular-mocks": "~1.2.0",
-    "angular-scenario": "~1.2.0"
-  }
+  ]
 }