thisislawatts /
coverimage
| Total Complexity | 43 |
| Complexity/F | 1.95 |
| Lines of Code | 215 |
| Function Count | 22 |
| Duplicated Lines | 25 |
| Ratio | 11.63 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Duplicate code is one of the most pungent code smells. A rule that is often used is to re-structure code once it is duplicated in three or more places.
Common duplication problems, and corresponding solutions are:
Complex classes like dist/coverimage.js often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | 'use strict'; |
||
| 2 | |||
| 3 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); |
||
|
|
|||
| 4 | |||
| 5 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } |
||
| 6 | |||
| 7 | var CoverImage = function () { |
||
| 8 | function CoverImage($el, cb) { |
||
| 9 | _classCallCheck(this, CoverImage); |
||
| 10 | |||
| 11 | var _this = this; |
||
| 12 | |||
| 13 | _this.$el = $el ? jQuery($el) : jQuery(window); |
||
| 14 | _this.$img = _this.getElementForSizing(); |
||
| 15 | _this.disableOnMobile = _this.$el.data('cover-image-mobile') === false; |
||
| 16 | _this.cb = cb || function () { |
||
| 17 | //DEBUG console.log("Default callback"); |
||
| 18 | }; |
||
| 19 | _this.positioning = { |
||
| 20 | x: 0.5, |
||
| 21 | y: 0.5 |
||
| 22 | }; |
||
| 23 | _this.options = { |
||
| 24 | parallax: _this.$el.data('coverImageParallax') === '' |
||
| 25 | }; |
||
| 26 | |||
| 27 | if (!_this.$img) { |
||
| 28 | console.log('Error:', 'no image found', _this.$img); |
||
| 29 | return; |
||
| 30 | } |
||
| 31 | |||
| 32 | _this.imageWidth = _this.$img.attr('width'); |
||
| 33 | _this.imageHeight = _this.$img.attr('height'); |
||
| 34 | |||
| 35 | // If the image doesn't have harcoded width|height |
||
| 36 | // attributes then load the image to calculate |
||
| 37 | // the dimensions |
||
| 38 | if (!_this.imageWidth || !_this.imageHeight) { |
||
| 39 | console.log('No dimensions found. Generating image'); |
||
| 40 | _this.img = new Image(); |
||
|
1 ignored issue
–
show
|
|||
| 41 | _this.img.src = _this.$img.attr('src'); |
||
| 42 | |||
| 43 | _this.imageWidth = _this.img.width; |
||
| 44 | _this.imageHeight = _this.img.height; |
||
| 45 | } |
||
| 46 | |||
| 47 | if (_this.disableOnMobile && window.innerWidth < 480) { |
||
| 48 | return; |
||
| 49 | } |
||
| 50 | |||
| 51 | _this.elementDimensions = { |
||
| 52 | height: _this.$el.outerHeight(), |
||
| 53 | width: _this.$el.outerWidth() |
||
| 54 | }; |
||
| 55 | |||
| 56 | _this.$el.css({ |
||
| 57 | overflow: 'hidden', |
||
| 58 | position: 'relative' |
||
| 59 | }); |
||
| 60 | |||
| 61 | if (!_this.$img.length) { |
||
| 62 | |||
| 63 | // TODO: Implement load |
||
| 64 | setTimeout(function () { |
||
| 65 | new CoverImage(_this.$el); |
||
| 66 | }, 1000); |
||
| 67 | } else { |
||
| 68 | _this.resizeImage(); |
||
| 69 | } |
||
| 70 | |||
| 71 | _this.$img.one('load', function () { |
||
| 72 | console.log('Image loaded:', 'resize'); |
||
| 73 | _this.resizeImage(); |
||
| 74 | }); |
||
| 75 | |||
| 76 | $(window).on('resize', function () { |
||
| 77 | _this.resizeImage(); |
||
| 78 | }); |
||
| 79 | |||
| 80 | $(window).on('ci.resize', function () { |
||
| 81 | _this.resizeImage(); |
||
| 82 | }); |
||
| 83 | |||
| 84 | if (_this.options.parallax) { |
||
| 85 | _this.draw(); |
||
| 86 | } |
||
| 87 | } |
||
| 88 | |||
| 89 | /** |
||
| 90 | * Parallax FX |
||
| 91 | * |
||
| 92 | */ |
||
| 93 | |||
| 94 | |||
| 95 | _createClass(CoverImage, [{ |
||
| 96 | key: 'draw', |
||
| 97 | View Code Duplication | value: function draw() { |
|
| 98 | var _this = this; |
||
| 99 | var friction = 0.5; |
||
| 100 | var imageOffsetX = document.body.scrollTop * friction; |
||
| 101 | var imageOffsetY = document.body.scrollTop * friction; |
||
| 102 | var maximumMovementY = (_this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y; |
||
| 103 | var maximumMovementX = (_this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x; |
||
| 104 | |||
| 105 | if (maximumMovementX > 0) { |
||
| 106 | if (imageOffsetX < maximumMovementX) { |
||
| 107 | // console.log('New position:', maximumMovementX - imageOffsetX); |
||
| 108 | _this.$img.css({ |
||
| 109 | 'transform': 'translateX(' + (maximumMovementX - imageOffsetX) + 'px)' |
||
| 110 | }); |
||
| 111 | } |
||
| 112 | } else { |
||
| 113 | if (imageOffsetY < maximumMovementY) { |
||
| 114 | _this.$img.css('transform', 'translateY(' + (maximumMovementY - imageOffsetY) + 'px)'); |
||
| 115 | } |
||
| 116 | } |
||
| 117 | |||
| 118 | window.requestAnimationFrame(function () { |
||
| 119 | _this.draw(); |
||
| 120 | }); |
||
| 121 | } |
||
| 122 | }, { |
||
| 123 | key: 'getElementForSizing', |
||
| 124 | value: function getElementForSizing() { |
||
| 125 | var _this = this; |
||
| 126 | var selector = _this.$el.data('coverImageEl'); |
||
| 127 | |||
| 128 | if (selector) { |
||
| 129 | |||
| 130 | console.log('Element selector Present', _this.$el.find(selector)); |
||
| 131 | |||
| 132 | return _this.$el.find(selector) ? _this.$el.find(selector) : _this.$el.find('img'); |
||
| 133 | } |
||
| 134 | |||
| 135 | return _this.$el.find('img').first(); |
||
| 136 | } |
||
| 137 | }, { |
||
| 138 | key: 'resizeImage', |
||
| 139 | value: function resizeImage() { |
||
| 140 | var _this = this; |
||
| 141 | var dimensions = _this.coverDimensions(_this.imageWidth, _this.imageHeight, _this.$el.outerWidth(), _this.$el.outerHeight()); |
||
| 142 | |||
| 143 | _this.imageDimensions = dimensions; |
||
| 144 | |||
| 145 | if (isNaN(dimensions.width)) { |
||
| 146 | console.log('Failed to calculate image sizes.'); |
||
| 147 | } |
||
| 148 | |||
| 149 | _this.setImageSize(); |
||
| 150 | } |
||
| 151 | }, { |
||
| 152 | key: 'setImageSize', |
||
| 153 | value: function setImageSize() { |
||
| 154 | var _this = this; |
||
| 155 | |||
| 156 | _this.$img.attr({ |
||
| 157 | 'width': _this.imageDimensions.width, |
||
| 158 | 'height': _this.imageDimensions.height |
||
| 159 | }).css({ |
||
| 160 | 'position': 'absolute', |
||
| 161 | 'width': _this.imageDimensions.width, |
||
| 162 | 'height': _this.imageDimensions.height, |
||
| 163 | 'transform': _this.getTransform((_this.$el.width() - _this.imageDimensions.width) * _this.positioning.y, (_this.$el.outerHeight() - _this.imageDimensions.height) * _this.positioning.x), |
||
| 164 | 'max-width': 'none' |
||
| 165 | }).data('resrc-width', _this.imageDimensions.width); |
||
| 166 | |||
| 167 | _this.$img.addClass('ci--sized'); |
||
| 168 | |||
| 169 | _this.cb(); |
||
| 170 | } |
||
| 171 | }, { |
||
| 172 | key: 'getTransform', |
||
| 173 | value: function getTransform(x, y) { |
||
| 174 | return 'translate3d(' + x + 'px,' + y + 'px,0)'; |
||
| 175 | } |
||
| 176 | }, { |
||
| 177 | key: 'coverDimensions', |
||
| 178 | value: function coverDimensions(child_w, child_h, container_w, container_h) { |
||
| 179 | var scale_factor = this.max(container_w / child_w, container_h / child_h); |
||
| 180 | |||
| 181 | return { |
||
| 182 | width: Math.ceil(child_w * scale_factor), |
||
| 183 | height: Math.ceil(child_h * scale_factor) |
||
| 184 | }; |
||
| 185 | } |
||
| 186 | }, { |
||
| 187 | key: 'containDimensions', |
||
| 188 | value: function containDimensions(child_w, child_h, container_w, container_h) { |
||
| 189 | var scale_factor = this.min(container_w / child_w, container_h / child_h); |
||
| 190 | |||
| 191 | return { |
||
| 192 | width: child_w * scale_factor, |
||
| 193 | height: child_h * scale_factor |
||
| 194 | }; |
||
| 195 | } |
||
| 196 | }, { |
||
| 197 | key: 'min', |
||
| 198 | value: function min(a, b) { |
||
| 199 | return a > b ? b : a; |
||
| 200 | } |
||
| 201 | }, { |
||
| 202 | key: 'max', |
||
| 203 | value: function max(a, b) { |
||
| 204 | return a > b ? a : b; |
||
| 205 | } |
||
| 206 | }]); |
||
| 207 | |||
| 208 | return CoverImage; |
||
| 209 | }(); |
||
| 210 | |||
| 211 | var elems = document.body.querySelectorAll('[data-cover-image]'); |
||
| 212 | |||
| 213 | elems.forEach(function (el) { |
||
| 214 | new CoverImage(jQuery(el)); |
||
| 215 | }); |
Loading history...
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 you or someone else later decides to put another statement in, only the first statement will be executed.
In this case the statement
b = 42will always be executed, while the logging statement will be executed conditionally.ensures that the proper code will be executed conditionally no matter how many statements are added or removed.