Permalink
Browse files

extra tools and better readme

  • Loading branch information...
kristianmandrup committed Aug 26, 2012
1 parent e1feb2b commit 7a7ccb39c65ec8d690e289c78b21277ebe57466f
View
@@ -0,0 +1,6 @@
+## Changelog
+
+*0.1.3*
+
+* Added KnobKnob and Fullscreen
+* Improved Readme
View
@@ -2,10 +2,16 @@
This gem is a Rails engine and is configured to integrate with Rails asset pipeline.
+This gem was extracted from the JQuery Tools project, v1.2.6
+
+## Install
+
Simply add to Gemfile and bundle:
`gem 'jqtools-rails'`
+## Add tools
+
You can choose to use either the minified js for all the tools:
```text
@@ -21,6 +27,56 @@ Or the tools individually
//= require dateinput/dateinput.js
```
+## Tools included
+
+* dateinput
+* overlay
+* rangeinput
+* tabs
+* toolbox
+* tooltip
+* validator
+
+In addition to the original toolset, the following have been added:
+
+* fullscreen
+* knobs
+
+## Fullscreen
+
+See [jQuery-FullScreen](https://github.com/martinaglv/jQuery-FullScreen)
+
+```javascript
+// The plugin sets the $.support.fullscreen flag:
+if($.support.fullscreen){
+
+ // Show your full screen button here
+
+ $('#fullScreen').click(function(e){
+ $('#content').fullScreen();
+ });
+}
+```
+
+## Knobs
+
+See [KnobKnob](https://github.com/martinaglv/KnobKnob)
+
+```javascript
+$('#elem').knobKnob({
+ snap : 10, // Snap to zero if less than this deg.
+ value: 154, // Default rotation
+ turn : function(ratio){
+ // Do what you want here. Ratio moves from 0 to 1
+ // relative to the knob rotation. 0 - off, 1 - max
+ }
+});
+``
+
+Demo [pretty-switches](http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/)
+
+Note: You also need to add `knobs.css` to your project, fx using your `application.css` manifest.
+
## Contributing to jqtools-rails
* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
View
@@ -1 +1 @@
-0.1.2
+0.1.3
View
@@ -1,6 +1,8 @@
module JQueryTools
module Rails
class Engine < ::Rails::Engine
+ initializer 'jq tools' do
+ end
end
end
end
@@ -0,0 +1,120 @@
+/**
+ * @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),
+ knobTop = knob.find('.top'),
+ startDeg = -1,
+ currentDeg = 0,
+ rotation = 0,
+ lastDeg = 0,
+ doc = $(document);
+
+ if(options.value > 0 && options.value <= 359){
+ rotation = lastDeg = currentDeg = options.value;
+ knobTop.css('transform','rotate('+(currentDeg)+'deg)');
+ options.turn(currentDeg/359);
+ }
+
+ knob.on('mousedown touchstart', 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 touchmove.rem',function(e){
+
+ e = (e.originalEvent.touches) ? e.originalEvent.touches[0] : 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/360);
+ });
+
+ doc.on('mouseup.rem touchend.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 7a7ccb3

Please sign in to comment.