Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 1436e7ff61e63ad88a71baec90adc5ced42b29d8 @martinaglv committed Nov 30, 2011
Showing with 719 additions and 0 deletions.
  1. BIN knobKnob/knob.png
  2. +52 −0 knobKnob/knobKnob.css
  3. +118 −0 knobKnob/knobKnob.jquery.js
  4. +532 −0 knobKnob/transform.js
  5. +17 −0 readme.md
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,52 @@
+/*----------------------------
+ knobKnob Styles
+-----------------------------*/
+
+
+.knob{
+ width:83px;
+ height:83px;
+ position:relative;
+}
+
+.knob .top{
+ position:absolute;
+ top:0;
+ left:0;
+ width:83px;
+ height:83px;
+ background:url('knob.png') no-repeat;
+ z-index:10;
+ cursor:default !important;
+}
+
+.knob .base{
+ width:83px;
+ height:83px;
+ border-radius:50%;
+ box-shadow:0 5px 0 #4a5056,5px 5px 5px #000;
+ position:absolute;
+ top:0;
+ left:0;
+ z-index:1;
+}
+
+.knob .top:after{
+ content:'';
+ width:10px;
+ height:10px;
+ background-color:#666;
+ position:absolute;
+ top:50%;
+ left:10px;
+ margin-top:-5px;
+ border-radius: 50%;
+ cursor:default !important;
+ box-shadow: 0 0 1px #5a5a5a inset;
+}
+
+.knob [draggable] {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+}
@@ -0,0 +1,118 @@
+/**
+ * @name jQuery KnobKnob plugin
+ * @author Martin Angelov
+ * @version 1.0
+ * @url http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
+ * @license MIT License
+ */
+
+(function($){
+
+ $.fn.knobKnob = function(props){
+
+ var options = $.extend({
+ snap: 0,
+ value: 0,
+ turn: function(){}
+ }, props || {});
+
+ var tpl = '<div class="knob">\
+ <div class="top"></div>\
+ <div class="base"></div>\
+ </div>';
+
+ return this.each(function(){
+
+ var el = $(this);
+ el.append(tpl);
+
+ var knob = $('.knob',el)
@alexmic

alexmic Dec 3, 2011

There's a comma missing here. It caused me endless amount of pain. Without the comma, everything after knob is declared global and things break when you use many knobs.

@martinaglv

martinaglv Dec 4, 2011

Owner

So sorry for that oversight! Fixing it at the moment.

+ knobTop = knob.find('.top'),
+ startDeg = -1,
+ currentDeg = 0,
+ rotation = 0,
+ lastDeg = 0,
+ doc = $(document);
+
+ if(options.value > 0 && options.value <= 359){
+ rotation = currentDeg = options.value;
+ knobTop.css('transform','rotate('+(currentDeg)+'deg)');
+ options.turn(currentDeg/359);
+ }
+
+ knob.on('mousedown', function(e){
+
+ e.preventDefault();
+
+ var offset = knob.offset();
+ var center = {
+ y : offset.top + knob.height()/2,
+ x: offset.left + knob.width()/2
+ };
+
+ var a, b, deg, tmp,
+ rad2deg = 180/Math.PI;
+
+ knob.on('mousemove.rem',function(e){
+
+ a = center.y - e.pageY;
+ b = center.x - e.pageX;
+ deg = Math.atan2(a,b)*rad2deg;
+
+ // we have to make sure that negative
+ // angles are turned into positive:
+ if(deg<0){
+ deg = 360 + deg;
+ }
+
+ // Save the starting position of the drag
+ if(startDeg == -1){
+ startDeg = deg;
+ }
+
+ // Calculating the current rotation
+ tmp = Math.floor((deg-startDeg) + rotation);
+
+ // Making sure the current rotation
+ // stays between 0 and 359
+ if(tmp < 0){
+ tmp = 360 + tmp;
+ }
+ else if(tmp > 359){
+ tmp = tmp % 360;
+ }
+
+ // Snapping in the off position:
+ if(options.snap && tmp < options.snap){
+ tmp = 0;
+ }
+
+ // This would suggest we are at an end position;
+ // we need to block further rotation.
+ if(Math.abs(tmp - lastDeg) > 180){
+ return false;
+ }
+
+ currentDeg = tmp;
+ lastDeg = tmp;
+
+ knobTop.css('transform','rotate('+(currentDeg)+'deg)');
+ options.turn(currentDeg/359);
+ });
+
+ doc.on('mouseup.rem',function(){
+ knob.off('.rem');
+ doc.off('.rem');
+
+ // Saving the current rotation
+ rotation = currentDeg;
+
+ // Marking the starting degree as invalid
+ startDeg = -1;
+ });
+
+ });
+ });
+ };
+
+})(jQuery);
Oops, something went wrong.

0 comments on commit 1436e7f

Please sign in to comment.