codelation_ui 1.0.1 → 1.0.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9a98b2212a1e28f925270f4e234717bdf9f3f415
-  data.tar.gz: 4e61ca901af94887763d19ff8594c2c997a2fdf0
+  metadata.gz: f5509d439e28984c350955f88462af5b9cc5a6b7
+  data.tar.gz: 97c05ad5a4b99aa4df39847535eeeebe663ed9ba
 SHA512:
-  metadata.gz: 27c23d7701ab559fa3e0f5b143b19a67eccd68ffae4358a5ed7de51f698e4fe792526f57ccbf0e93598fa5abe7de2b2506c2a724d1d606ab01e14bf81ff32738
-  data.tar.gz: fbd2d3fae242de14167833c8b69c02a61948596add8dbaefebb6a15466201c984e84b8b819f68c2c2ec1a766ec9d695987f72b4ba3502c9e3e7938f5f2797436
+  metadata.gz: 9ec45bec284dc5b73e9d8196b6472dc1d4113fc95c1be73057c2083be89862aac92442389858a77983e7b5080a0baa696e14c6d0007078dd5f53a50dbe1bef09
+  data.tar.gz: 838960e2773a581d024d335df4cdc30d0de1d4f4f2f5c91f988cc5bd4b974e23f5cc6a17472f1c53f42174d658bc3a5679157b81350baafbebac073c39f121b7

data/app/assets/javascripts/codelation_ui/_base_resources/app.js

@@ -2,14 +2,19 @@
   "use strict";
 
   var app = window.App;
-  var bodyClass, bodyElement;
+  var bodyClass,
+    bodyElement;
 
   if (app === undefined) {
     app = window.App = {};
   }
 
-  app.enterFunctions = { component: [] };
-  app.exitFunctions  = { component: [] };
+  app.enterFunctions = {
+    component: []
+  };
+  app.exitFunctions = {
+    component: []
+  };
 
   // Register functions to run when any page or specific pages are loaded.
   //
@@ -61,21 +66,49 @@
     bodyElement = $('body');
 
     // Determine which functions should be fired
+    var fireConfigFunctions = [];
+    var fireFirstFunctions = [];
     var fireFunctions = [];
+    var fireLastFunctions = [];
     $.each(app.enterFunctions, function(key, functions) {
       bodyClass = key.split('.').join(' ');
       if (bodyClass === 'component' || bodyElement.hasClass(bodyClass)) {
         fireFunctions = fireFunctions.concat(functions);
       }
+
+      if (bodyClass === 'last') {
+        fireLastFunctions = fireLastFunctions.concat(functions);
+      }
+
+      if (bodyClass === 'first') {
+        fireFirstFunctions = fireFirstFunctions.concat(functions);
+      }
+
+      if (bodyClass === 'config') {
+        fireConfigFunctions = fireConfigFunctions.concat(functions);
+      }
     });
 
     // Fire off each function
-    $.each(fireFunctions, function() { this.call(); });
+    $.each(fireConfigFunctions, function() {
+      this.call();
+    });
+    $.each(fireFirstFunctions, function() {
+      this.call();
+    });
+    $.each(fireFunctions, function() {
+      this.call();
+    });
+    $.each(fireLastFunctions, function() {
+      this.call();
+    });
   });
 
   // Fires off any callbacks registered for exit, ONLY if using Turbolinks.
   $(document).on('page:before-unload', function() {
+    var fireFirstFunctions = [];
     var fireFunctions = [];
+    var fireLastFunctions = [];
 
     // Determine which functions should be fired
     $.each(app.exitFunctions, function(key, functions) {
@@ -83,9 +116,25 @@
       if (bodyClass === 'component' || bodyElement.hasClass(bodyClass)) {
         fireFunctions = fireFunctions.concat(functions);
       }
+
+      if (bodyClass === 'last') {
+        fireLastFunctions = fireLastFunctions.concat(functions);
+      }
+
+      if (bodyClass === 'first') {
+        fireFirstFunctions = fireFirstFunctions.concat(functions);
+      }
     });
 
     // Fire off each function
-    $.each(fireFunctions, function() { this.call(); });
+    $.each(fireFirstFunctions, function() {
+      this.call();
+    });
+    $.each(fireFunctions, function() {
+      this.call();
+    });
+    $.each(fireLastFunctions, function() {
+      this.call();
+    });
   });
 })();

data/app/assets/javascripts/codelation_ui/base.js

@@ -3,6 +3,7 @@
 //= require turbolinks
 //= require moment
 //= require numeral
+//= require pluralize
 //= require ./_base_resources/app
 //= require ./_base_resources/progress_bar
 //= require_tree ./_base_resources/components

data/app/assets/javascripts/codelation_ui/extended/checkmark.js

@@ -0,0 +1,31 @@
+(function() {
+  "use strict";
+
+  App.vue.components.vueCheckmark = Vue.extend({
+    template: '<div :style="styles">\
+    <svg class="vue-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\
+      <circle class="vue-checkmark-circle" cx="26" cy="26" r="25" fill="none" :stroke-width="stroke"/>\
+      <path class="vue-checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" :stroke-width="stroke"/>\
+    </svg></div>\
+    ',
+    props: {
+      size: {
+        type: Number,
+        default: 50
+      },
+      stroke: {
+        type: Number,
+        default: 3.5
+      }
+    },
+    computed: {
+      styles: function() {
+        var newSize = this.size + 'px';
+        return {
+          width: newSize,
+          height: newSize
+        };
+      }
+    }
+  });
+})();

data/app/assets/javascripts/codelation_ui/extended/code.js

@@ -0,0 +1,64 @@
+//= require highlight.pack
+
+// NORMAL
+//      <vue-code lang="javascript">
+//        function name(){
+//          return 'jake';
+//        }
+//
+//        //comment
+//        var test = '12' + ' days';
+//      </vue-code>
+
+// DARK UI
+//      <vue-code lang="javascript" dark>
+//        function name(){
+//          return 'jake';
+//        }
+//
+//        //comment
+//        var test = '12' + ' days';
+//      </vue-code>
+
+// INLINE
+//      <vue-code lang="javascript" inline>
+//        function name(){
+//          return 'jake';
+//        }
+//
+//        //comment
+//        var test = '12' + ' days';
+//      </vue-code>
+
+(function() {
+  "use strict";
+
+   App.vue.config.code = {
+     'dark': false 
+   }
+
+
+  var template = '<div class="vue-code" :class="[inline ? \'vue-code-inline\' : \'vue-code-block\', dark ? \'vue-code-dark\' : \'\']">\
+                    <pre v-if="!inline"><code v-el:code :class="lang"><slot></slot></code></pre>\
+                    <span v-else><code v-el:code :class="lang"><slot></slot></code></span>\
+                  </div>';
+
+  App.vue.components.vueCode = Vue.extend({
+    template: template,
+    props: {
+      lang: String,
+      inline: {
+        type: Boolean,
+        default: false
+      },
+      dark: {
+        type: Boolean,
+        default: App.vue.config.code.dark
+      }
+    },
+    ready: function() {
+      var code = this.$els.code;
+      hljs.highlightBlock(code);
+    }
+  });
+})();

data/app/assets/javascripts/codelation_ui/extended/fail.js

@@ -0,0 +1,31 @@
+(function() {
+  "use strict";
+
+  App.vue.components.vueFail = Vue.extend({
+    template: '<div :style="styles">\
+    <svg class="vue-fail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">\
+      <circle class="vue-fail-circle" cx="26" cy="26" r="25" fill="none" :stroke-width="stroke"/>\
+      <path class="vue-fail-check" fill="none" d="M16 16 36 36 M36 16 16 36" :stroke-width="stroke"/>\
+    </svg></div>\
+    ',
+    props: {
+      size: {
+        type: Number,
+        default: 50
+      },
+      stroke: {
+        type: Number,
+        default: 3.5
+      }
+    },
+    computed: {
+      styles: function() {
+        var newSize = this.size + 'px';
+        return {
+          width: newSize,
+          height: newSize
+        };
+      }
+    }
+  });
+})();

data/app/assets/javascripts/codelation_ui/extended/radial_progress_bar.js

@@ -0,0 +1,267 @@
+// # Use
+
+// <vue-radial-progress-bar :total-steps="10" :completed-steps="5"><h4>Inner content</h4></vue-radial-progress-bar>
+
+// # Props
+
+// Name | Default value | Description
+// ---|:---:|---
+// `diameter` | `200` | Diameter of the progress bar circle in pixels.
+// `totalSteps` | `10` | Total number of steps to complete progress bar.
+// `completedSteps` | `0` | Number of completed steps in the progress bar.
+// `startColor` | `#bbff42` | The color of the leading edge of the progress bar gradient.
+// `stopColor` | `#429321` | The secondary color of the progress bar gradient.
+// `innerStrokeColor` | `#323232` | Background color of the progress bar.
+// `strokeWidth` | `10` | The width of the progress bar.
+// `animateSpeed` | `1000` | The amount of time in milliseconds to animate one step.
+// `fps` | `60` | The frames per second that the animation should run.
+// `timingFunc` | `linear` | The transition timing function to use for the CSS transition. See [transition-timing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function).
+
+
+(function(){
+  "use strict"
+  
+  var template = '<div class="vue-radial-progress-bar-container" :class="[over ? \'vue-radial-progress-bar-over\' : \'\', complete ? \'vue-radial-progress-bar-complete\' : \'\']" :style="containerStyle">\
+                    <div class="vue-radial-progress-bar-inner" :style="innerCircleStyle">\
+                      <slot></slot>\
+                    </div>\
+                    <svg class="vue-radial-progress-bar-bar"\
+                         :width="diameter"\
+                         :height="diameter"\
+                         version="1.1"\
+                         xmlns="http://www.w3.org/2000/svg">\
+                      <defs>\
+                        <radialGradient :id="\'radial-gradient\' + _uid"\
+                                        :fx="gradient.fx"\
+                                        :fy="gradient.fy"\
+                                        :cx="gradient.cx"\
+                                        :cy="gradient.cy"\
+                                        :r="gradient.r">\
+                          <stop class="vue-radial-progress-bar-start-color" offset="30%"/>\
+                          <stop class="vue-radial-progress-bar-stop-color" offset="100%"/>\
+                        </radialGradient>\
+                      </defs>\
+                      <circle class="vue-radial-progress-bar-circle" :r="innerCircleRadius"\
+                              :cx="radius"\
+                              :cy="radius"\
+                              fill="transparent"\
+                              :stroke-dasharray="circumference"\
+                              stroke-dashoffset="0"\
+                              stroke-linecap="round"\
+                              :style="strokeStyle"></circle>\
+                      <circle :transform="\'rotate(270, \' + radius + \',\' + radius + \')\'"\
+                              :r="innerCircleRadius"\
+                              :cx="radius"\
+                              :cy="radius"\
+                              fill="transparent"\
+                              :stroke="\'url(#radial-gradient\' + _uid + \')\'"\
+                              :stroke-dasharray="circumference"\
+                              :stroke-dashoffset="circumference"\
+                              stroke-linecap="round"\
+                              :style="progressStyle"></circle>\
+                    </svg>\
+                  </div>';
+
+   App.vue.components.vueRadialProgressBar = Vue.extend({
+    template: template,
+    props: {
+      diameter: {
+        type: Number,
+        required: false,
+        default: 200
+      },
+      totalSteps: {
+        type: Number,
+        required: true,
+        default: 10
+      },
+      completedSteps: {
+        type: Number,
+        required: true,
+        default: 0
+      },
+      strokeWidth: {
+        type: Number,
+        required: false,
+        default: 10
+      },
+      animateSpeed: {
+        type: Number,
+        required: false,
+        default: 1000
+      },
+      fps: {
+        type: Number,
+        required: false,
+        default: 60
+      },
+      timingFunc: {
+        type: String,
+        required: false,
+        default: 'linear'
+      }
+    },
+    data: function() {
+      return {
+        gradient: {
+          fx: 0.99,
+          fy: 0.5,
+          cx: 0.5,
+          cy: 0.5,
+          r: 0.65
+        },
+        gradientAnimation: null,
+        currentAngle: 0,
+        strokeDashoffset: 0
+      }
+    },
+    computed: {
+      over: function() {
+        if (this.completedSteps > this.totalSteps) {
+         return true; 
+        }
+
+        return false;
+      },
+      complete: function() {
+        if (this.completedSteps === this.totalSteps) {
+         return true; 
+        }
+
+        return false;
+      },
+      radius: function() {
+        return this.diameter / 2
+      },
+      circumference: function() {
+        return Math.PI * this.innerCircleDiameter
+      },
+      stepSize: function() {
+        if (this.totalSteps === 0) {
+          return 0
+        }
+        return 100 / this.totalSteps
+      },
+      finishedPercentage: function() {
+        return this.stepSize * this.completedSteps
+      },
+      circleSlice: function() {
+        return 2 * Math.PI / this.totalSteps
+      },
+      animateSlice: function() {
+        return this.circleSlice / this.totalPoints
+      },
+      innerCircleDiameter: function() {
+        return this.diameter - (this.strokeWidth * 2)
+      },
+      innerCircleRadius: function() {
+        return this.innerCircleDiameter / 2
+      },
+      totalPoints: function() {
+        return this.animateSpeed / this.animationIncrements
+      },
+      animationIncrements: function() {
+        return 1000 / this.fps
+      },
+      hasGradient: function() {
+        return true;
+      },
+      containerStyle: function() {
+        return {
+          height: this.diameter + 'px',
+          width: this.diameter + 'px'
+        }
+      },
+      progressStyle: function() {
+        return {
+          height: this.diameter + 'px',
+          width: this.diameter + 'px',
+          strokeWidth: this.strokeWidth + 'px',
+          strokeDashoffset: this.strokeDashoffset,
+          transition: 'stroke-dashoffset ' + this.animateSpeed + 'ms ' + this.timingFunc
+        }
+      },
+      strokeStyle: function() {
+        return {
+          height: this.diameter + 'px',
+          width: this.diameter + 'px',
+          strokeWidth: this.strokeWidth + 'px'
+        }
+      },
+      innerCircleStyle: function() {
+        return {
+          width: this.innerCircleDiameter + 'px'
+        }
+      }
+    },
+    methods: {
+      getStopPointsOfCircle: function(steps) {
+        var points = []
+        for (var i = 0; i < steps; i++) {
+          var angle = this.circleSlice * i
+          points.push(this.getPointOfCircle(angle))
+        }
+        return points
+      },
+      getPointOfCircle: function(angle) {
+        var radius = 0.5
+        var x = radius + (radius * Math.cos(angle))
+        var y = radius + (radius * Math.sin(angle))
+        return { x: x, y: y }
+      },
+      gotoPoint: function() {
+        var point = this.getPointOfCircle(this.currentAngle)
+        this.gradient.fx = point.x
+        this.gradient.fy = point.y
+      },
+      changeProgress: function(args) {
+        var ops = args || {};
+        var isAnimate = ops.isAnimate;
+        this.strokeDashoffset = ((100 - this.finishedPercentage) / 100) * this.circumference
+        if (this.gradientAnimation) {
+          clearInterval(this.gradientAnimation)
+        }
+        if (!isAnimate) {
+          this.gotoNextStep()
+          return
+        }
+        var angleOffset = (this.completedSteps - 1) * this.circleSlice
+        var i = (this.currentAngle - angleOffset) / this.animateSlice
+        var incrementer = Math.abs(i - this.totalPoints) / this.totalPoints
+        var isMoveForward = i < this.totalPoints
+        var self = this;
+        this.gradientAnimation = setInterval(function() {
+          if (isMoveForward && i >= self.totalPoints ||
+              !isMoveForward && i < self.totalPoints) {
+            clearInterval(self.gradientAnimation);
+            return;
+          }
+          self.currentAngle = angleOffset + (self.animateSlice * i);
+          self.gotoPoint();
+          i += isMoveForward ? incrementer : -incrementer;
+        }, self.animationIncrements)
+      },
+      gotoNextStep: function() {
+        this.currentAngle = this.completedSteps * this.circleSlice
+        this.gotoPoint();
+      }
+    },
+    watch: {
+      totalSteps: function() {
+        this.changeProgress({ isAnimate: true })
+      },
+      completedSteps: function() {
+        this.changeProgress({ isAnimate: true })
+      },
+      diameter: function() {
+        this.changeProgress({ isAnimate: true })
+      },
+      strokeWidth: function() {
+        this.changeProgress({ isAnimate: true })
+      }
+    },
+    created: function() {
+      this.changeProgress({ isAnimate: false })
+    }
+  });
+})()