$.fn.dotHover - Code Metrics - Inspection of "Remove image generation. Use JS for map points" - falsovsky/idlerpg-site-ng - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — master ( 39edd6...47e6f5 )

by Pedro

created 2018-07-09 01:57 UTC

$.fn.dotHover B

↳ Parent: public/js/hoverDot.js

Complexity

Conditions	1
Paths	2

Size

Total Lines	136
Code Lines	68

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	68
dl	0
loc	136
rs	8.0472
c	0
b	0
f	0
cc	1
nc	2
nop	2

How to fix Long Method

/**
 * Created by (c) Sebastian Kaim, 2016
 *
 * This file is licensed under the MIT License.
 */
"use strict";

(function ($) {

    // dot helper class
    var dot = function (_x, _y, _text, _color) {
        this.x = _x;
        this.y = _y;
        this.text = _text;
        this.color = _color;
        this.radius = 24; // hover event radius

        this.render = function (context) {
            context.beginPath();
            context.arc(this.x, this.y, 4, 0, Math.PI * 2, true);
            context.fillStyle = this.color;
            context.fill();
        };
    };

    // register the plugin
    $.fn.dotHover = function (dots, options) {

        // settings
        var settings = $.extend({
            // defaults

            // this should be a valid image url which will be used as background
            img: "karte.png",

            // whether to allow the user to place dots on click
            setmode: false,

            // a callback for when an event is created
            setcallback: function (dot) {},


            // default text for an unitialized dot
            defaulttext: "Example Text"

        }, options );

        // initialize dots
        settings.dots = [];
        $.each(dots, function (i, el) {
            settings.dots.push(new dot(el.x, el.y, el.text, el.color));

        });

        //
        // create tooltip canvas
        //
        var tooltip = $('<div/>')
            .appendTo('body')
            .addClass('hoverDotTooltip')
            .css({
                backgroundColor: 'rgba(0,0,0,.8)',
                border: '1px solid #fff',
				padding: '5px',

                position: 'absolute',
                padding: '5px',
                marginLeft: '-50px',
				color:'#fff'
            })
            .hide();

        var contexts = [];

        var showHideTooltip = function (show) {
            if(show)
            {
                tooltip.show();
                tooltip.get(0).style.marginLeft = ((-tooltip.width() / 2) + 3) + "px";
            }
            else
            {
                tooltip.hide();
            }
        };

        //
        // handle tooltip positioning on mouse move
        //
        var mouseMoveEvent = function(event, img, offsetX, offsetY) {
            var mouseX = parseInt(event.clientX - offsetX);
            var mouseY = parseInt(event.clientY - offsetY + $(window).scrollTop());

            var hit = false;
            for (var i = 0; i < settings.dots.length; i++) {
                var dot = settings.dots[i];
                var dx = mouseX - dot.x;
                var dy = mouseY - dot.y;

                if (dx * dx + dy * dy < dot.radius) {
                    tooltip.get(0).style.top = ((dot.y - 40) + offsetY) + "px";
                    tooltip.get(0).style.left = (dot.x + offsetX) + "px";

                    tooltip.html(dot.text);
                    hit = true;
                }
            }

            showHideTooltip(hit);
        };

        // re-renders all dots
        var render = function () {
            $.each(contexts, function (i, data) {
                $.each(settings.dots, function (j, dot) {
                    dot.render(data.ctx);
                });
            });
        };

        //
        // places a new dot
        //
        var placedot = function (event, element) {
            var ndot = new dot(event.clientX - element.offsetLeft, event.clientY - element.offsetTop + $(window).scrollTop(), settings.defaulttext); // -7,-7 for cursor offset


            settings.dots.push(ndot);
            render();
            settings.setcallback(ndot);
        };

        //
        // removes a dot
        //
        this.removeDot = function(x, y)
        {
            settings.dots = settings.dots.filter(function(el, index) {

                return dot.x != x && dot.y != y;
            });
        };

        // init mouse move on each element
        this.each(function(i, el) {
            el.style= 'background: url(' + settings.img + ');' +
            'background-repeat: no-repeat; ' +
            'background-size: contain;' +
            'width: ' + settings.width + '; ';
            //'height: ' + settings.height + '; '

            contexts.push( { el: el, ctx: el.getContext('2d') });

            $(el).mousemove (function (event) {
                mouseMoveEvent(event, el, el.offsetLeft, el.offsetTop);
            });

            if(settings.setmode) $(el).click(function (e) {
if (a > 0)
    b = 42;
                placedot(e, el);
            });
        });

        // render initial dots
        render();

        return this;
    };

})(jQuery);


1			/**
2			* Created by (c) Sebastian Kaim, 2016
3			*
4			* This file is licensed under the MIT License.
5			*/
6			"use strict";
7
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) {},
			0 ignored issues – show Unused Code introduced 2018-07-09 01:59 UTC by Report Bug Copy Issue Report The parameter `dot` is not used and could be removed. 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. Loading history...
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));
			0 ignored issues – show Coding Style Best Practice introduced 2018-07-09 01:59 UTC by Report Bug Copy Issue Report By convention, constructors like `dot` should be capitalized. Loading history...
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',
			0 ignored issues – show Unused Code Bug introduced 2018-07-09 01:59 UTC by Report Bug Copy Issue Report The key `padding` is used more than once in this object expression. Loading history...
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
			0 ignored issues – show Coding Style Best Practice introduced 2018-07-09 01:59 UTC by Report Bug Copy Issue Report By convention, constructors like `dot` should be capitalized. Loading history...
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) {
			0 ignored issues – show Unused Code introduced 2018-07-09 01:59 UTC by Report Bug Copy Issue Report The parameter `index` is not used and could be removed. 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. Loading history... Unused Code introduced 2018-07-09 01:59 UTC by Report Bug Copy Issue Report The parameter `el` is not used and could be removed. 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. Loading history...
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) {
			0 ignored issues – show Coding Style Best Practice introduced 2018-07-09 01:59 UTC by Report Bug Copy Issue Report Curly braces around statements make for more readable code and help prevent bugs when you add further statements. Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later. Consider: if (a > 0) b = 42; If you or someone else later decides to put another statement in, only the first statement will be executed. if (a > 0) console.log("a > 0"); b = 42; In this case the statement `b = 42` will always be executed, while the logging statement will be executed conditionally. if (a > 0) { console.log("a > 0"); b = 42; } ensures that the proper code will be executed conditionally no matter how many statements are added or removed. Loading history...
154			placedot(e, el);
155			});
156			});
157
158			// render initial dots
159			render();
160
161			return this;
162			};
163
164			})(jQuery);
165

falsovsky / idlerpg-site-ng

Push — master ( 39edd6...47e6f5 )

$.fn.dotHover B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like