falsovsky /
idlerpg-site-ng
| Conditions | 1 |
| Paths | 2 |
| Total Lines | 157 |
| Code Lines | 80 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | /** |
||
| 8 | (function ($) {
|
||
| 9 | |||
| 10 | // dot helper class |
||
| 11 | var dot = function (_x, _y, _text, _color) {
|
||
| 12 | this.x = _x; |
||
| 13 | this.y = _y; |
||
| 14 | this.text = _text; |
||
| 15 | this.color = _color; |
||
| 16 | this.radius = 24; // hover event radius |
||
| 17 | |||
| 18 | this.render = function (context) {
|
||
| 19 | context.beginPath(); |
||
| 20 | context.arc(this.x, this.y, 4, 0, Math.PI * 2, true); |
||
| 21 | context.fillStyle = this.color; |
||
| 22 | context.fill(); |
||
| 23 | }; |
||
| 24 | }; |
||
| 25 | |||
| 26 | // register the plugin |
||
| 27 | $.fn.dotHover = function (dots, options) {
|
||
| 28 | |||
| 29 | // settings |
||
| 30 | var settings = $.extend({
|
||
| 31 | // defaults |
||
| 32 | |||
| 33 | // this should be a valid image url which will be used as background |
||
| 34 | img: "karte.png", |
||
| 35 | |||
| 36 | // whether to allow the user to place dots on click |
||
| 37 | setmode: false, |
||
| 38 | |||
| 39 | // a callback for when an event is created |
||
| 40 | setcallback: function (dot) {},
|
||
|
|
|||
| 41 | |||
| 42 | // default text for an unitialized dot |
||
| 43 | defaulttext: "Example Text" |
||
| 44 | |||
| 45 | }, options ); |
||
| 46 | |||
| 47 | // initialize dots |
||
| 48 | settings.dots = []; |
||
| 49 | $.each(dots, function (i, el) {
|
||
| 50 | settings.dots.push(new dot(el.x, el.y, el.text, el.color)); |
||
| 51 | }); |
||
| 52 | |||
| 53 | // |
||
| 54 | // create tooltip canvas |
||
| 55 | // |
||
| 56 | var tooltip = $('<div/>')
|
||
| 57 | .appendTo('body')
|
||
| 58 | .addClass('hoverDotTooltip')
|
||
| 59 | .css({
|
||
| 60 | backgroundColor: 'rgba(0,0,0,.8)', |
||
| 61 | border: '1px solid #fff', |
||
| 62 | padding: '5px', |
||
| 63 | position: 'absolute', |
||
| 64 | padding: '5px', |
||
| 65 | marginLeft: '-50px', |
||
| 66 | color:'#fff' |
||
| 67 | }) |
||
| 68 | .hide(); |
||
| 69 | |||
| 70 | var contexts = []; |
||
| 71 | |||
| 72 | var showHideTooltip = function (show) {
|
||
| 73 | if(show) |
||
| 74 | {
|
||
| 75 | tooltip.show(); |
||
| 76 | tooltip.get(0).style.marginLeft = ((-tooltip.width() / 2) + 3) + "px"; |
||
| 77 | } |
||
| 78 | else |
||
| 79 | {
|
||
| 80 | tooltip.hide(); |
||
| 81 | } |
||
| 82 | }; |
||
| 83 | |||
| 84 | // |
||
| 85 | // handle tooltip positioning on mouse move |
||
| 86 | // |
||
| 87 | var mouseMoveEvent = function(event, img, offsetX, offsetY) {
|
||
| 88 | var mouseX = parseInt(event.clientX - offsetX); |
||
| 89 | var mouseY = parseInt(event.clientY - offsetY + $(window).scrollTop()); |
||
| 90 | |||
| 91 | var hit = false; |
||
| 92 | for (var i = 0; i < settings.dots.length; i++) {
|
||
| 93 | var dot = settings.dots[i]; |
||
| 94 | var dx = mouseX - dot.x; |
||
| 95 | var dy = mouseY - dot.y; |
||
| 96 | |||
| 97 | if (dx * dx + dy * dy < dot.radius) {
|
||
| 98 | tooltip.get(0).style.top = ((dot.y - 40) + offsetY) + "px"; |
||
| 99 | tooltip.get(0).style.left = (dot.x + offsetX) + "px"; |
||
| 100 | |||
| 101 | tooltip.html(dot.text); |
||
| 102 | hit = true; |
||
| 103 | } |
||
| 104 | } |
||
| 105 | |||
| 106 | showHideTooltip(hit); |
||
| 107 | }; |
||
| 108 | |||
| 109 | // re-renders all dots |
||
| 110 | var render = function () {
|
||
| 111 | $.each(contexts, function (i, data) {
|
||
| 112 | $.each(settings.dots, function (j, dot) {
|
||
| 113 | dot.render(data.ctx); |
||
| 114 | }); |
||
| 115 | }); |
||
| 116 | }; |
||
| 117 | |||
| 118 | // |
||
| 119 | // places a new dot |
||
| 120 | // |
||
| 121 | var placedot = function (event, element) {
|
||
| 122 | var ndot = new dot(event.clientX - element.offsetLeft, event.clientY - element.offsetTop + $(window).scrollTop(), settings.defaulttext); // -7,-7 for cursor offset |
||
| 123 | |||
| 124 | settings.dots.push(ndot); |
||
| 125 | render(); |
||
| 126 | settings.setcallback(ndot); |
||
| 127 | }; |
||
| 128 | |||
| 129 | // |
||
| 130 | // removes a dot |
||
| 131 | // |
||
| 132 | this.removeDot = function(x, y) |
||
| 133 | {
|
||
| 134 | settings.dots = settings.dots.filter(function(el, index) {
|
||
| 135 | return dot.x != x && dot.y != y; |
||
| 136 | }); |
||
| 137 | }; |
||
| 138 | |||
| 139 | // init mouse move on each element |
||
| 140 | this.each(function(i, el) {
|
||
| 141 | el.style= 'background: url(' + settings.img + ');' +
|
||
| 142 | 'background-repeat: no-repeat; ' + |
||
| 143 | 'background-size: contain;' + |
||
| 144 | 'width: ' + settings.width + '; '; |
||
| 145 | //'height: ' + settings.height + '; ' |
||
| 146 | |||
| 147 | contexts.push( { el: el, ctx: el.getContext('2d') });
|
||
| 148 | |||
| 149 | $(el).mousemove (function (event) {
|
||
| 150 | mouseMoveEvent(event, el, el.offsetLeft, el.offsetTop); |
||
| 151 | }); |
||
| 152 | |||
| 153 | if(settings.setmode) $(el).click(function (e) {
|
||
| 154 | placedot(e, el); |
||
| 155 | }); |
||
| 156 | }); |
||
| 157 | |||
| 158 | // render initial dots |
||
| 159 | render(); |
||
| 160 | |||
| 161 | return this; |
||
| 162 | }; |
||
| 163 | |||
| 164 | })(jQuery); |
||
| 165 |
Loading history...
This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.