thisislawatts /
gifr
| Conditions | 1 |
| Paths | 4 |
| Total Lines | 174 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 4 | ||
| Bugs | 0 | Features | 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 | /** |
||
| 4 | (function(window, $) { |
||
| 5 | |||
| 6 | var Gfr = function(opts) { |
||
| 7 | var _this = this; |
||
| 8 | |||
| 9 | _this.options = $.extend({ |
||
| 10 | autoPlay: false, |
||
| 11 | positioning: '50% 50%', |
||
| 12 | preserveAspectRatio: true, |
||
| 13 | sizeToFit: true |
||
| 14 | }, opts); |
||
| 15 | |||
| 16 | // Specifics |
||
| 17 | _this.originalFrameWidth = _this.frameWidth = 1920, |
||
|
|
|||
| 18 | _this.originalFrameHeight = _this.frameHeight = 698; |
||
| 19 | _this.imgRatio = this.frameWidth / this.frameHeight; |
||
| 20 | |||
| 21 | _this.$el = _this.options.$el || $('.gif'); |
||
| 22 | _this.imgSrc = _this.$el.data('src'); |
||
| 23 | _this.$filmStrip = $('<img src="' + _this.$el.data('src') +'"/>'); |
||
| 24 | |||
| 25 | _this.$el.append(_this.$filmStrip); |
||
| 26 | |||
| 27 | // Bailout no image found! |
||
| 28 | if ( !_this.imgSrc ) { |
||
| 29 | return; |
||
| 30 | } |
||
| 31 | |||
| 32 | _this.containerHeight = _this.$el.outerHeight(); |
||
| 33 | _this.containerWidth = _this.$el.width(); |
||
| 34 | |||
| 35 | _this.counter = 0; |
||
| 36 | _this.imgPointer = 0; |
||
| 37 | |||
| 38 | if ( _this.options.preserveAspectRatio ) { |
||
| 39 | _this.containerHeight = _this.containerWidth / _this.imgRatio; |
||
| 40 | } |
||
| 41 | |||
| 42 | _this.setup(); |
||
| 43 | |||
| 44 | _this.$el.on('mousemove', function(evt) { |
||
| 45 | clearInterval(_this.timer); |
||
| 46 | |||
| 47 | var pointer = Math.round( _this.map(evt.clientX, 0, _this.$el.outerWidth(), 0, _this.frameCount() ) ); |
||
| 48 | |||
| 49 | _this.positionFrame( pointer ); |
||
| 50 | |||
| 51 | clearTimeout( _this.activity ); |
||
| 52 | |||
| 53 | if (_this.options.autoPlay) { |
||
| 54 | _this.activity = setTimeout(function() { |
||
| 55 | _this.start(); |
||
| 56 | }, 500 ); |
||
| 57 | } |
||
| 58 | }); |
||
| 59 | } |
||
| 60 | |||
| 61 | Gfr.prototype.getFilmstripStyles = function() { |
||
| 62 | var _this = this; |
||
| 63 | var css = ['position:relative']; |
||
| 64 | var positioning = this.options.positioning.split(' '); |
||
| 65 | |||
| 66 | if (this.options.sizeToFit ){ |
||
| 67 | var coverDimensions = _this.coverDimensions(_this.frameWidth, _this.frameHeight, _this.$el.outerWidth(), _this.$el.outerHeight()); |
||
| 68 | |||
| 69 | console.log('Size to fit?', coverDimensions, this.$el.outerHeight() ); |
||
| 70 | // Increase frame |
||
| 71 | _this.frameWidth = coverDimensions.width; |
||
| 72 | _this.frameHeight = coverDimensions.height; |
||
| 73 | console.log('New Width:', coverDimensions.width, _this.frameCount(), coverDimensions.width * _this.frameCount() ); |
||
| 74 | _this.$filmStrip.attr('width', coverDimensions.width * _this.frameCount()) |
||
| 75 | _this.$filmStrip.attr('height', coverDimensions.height) |
||
| 76 | } |
||
| 77 | |||
| 78 | // X |
||
| 79 | css.push('margin-left: ' + (_this.$el.outerWidth() - _this.frameWidth) * (parseInt(positioning[0], 10) / 100) + 'px') |
||
| 80 | |||
| 81 | // Y |
||
| 82 | console.log(_this.$el.outerHeight(), _this.frameHeight); |
||
| 83 | css.push('margin-top: ' + (_this.$el.outerHeight() - _this.frameHeight) * (parseInt(positioning[1], 10) / 100) + 'px') |
||
| 84 | |||
| 85 | console.log(css.join(';')); |
||
| 86 | |||
| 87 | return css.join(';'); |
||
| 88 | } |
||
| 89 | |||
| 90 | Gfr.prototype.map = function(value, istart, istop, ostart, ostop) { |
||
| 91 | return ostart + (ostop - ostart) * ((value - istart) / (istop - istart)); |
||
| 92 | } |
||
| 93 | |||
| 94 | Gfr.prototype.frameCount = function() { |
||
| 95 | // Normalize to allow for zeroIndex; |
||
| 96 | return (this.img.width / this.frameWidth) - 1; |
||
| 97 | } |
||
| 98 | |||
| 99 | Gfr.prototype.setup = function() { |
||
| 100 | var _this = this; |
||
| 101 | |||
| 102 | _this.img = new Image(); |
||
| 103 | _this.is_landscape = ( _this.containerWidth > _this.containerHeight ); |
||
| 104 | _this.sizing = _this.is_landscape ? _this.containerWidth : _this.containerHeight ; |
||
| 105 | _this.assignImage( _this.imgSrc ); |
||
| 106 | _this.$filmStrip.attr('style', _this.getFilmstripStyles() ); |
||
| 107 | } |
||
| 108 | |||
| 109 | Gfr.prototype.assignImage = function(src) { |
||
| 110 | var _this = this; |
||
| 111 | |||
| 112 | _this.img.src = src; |
||
| 113 | |||
| 114 | this.img.onload = function() { |
||
| 115 | |||
| 116 | setTimeout(function() { |
||
| 117 | _this.$el.fadeIn(100); |
||
| 118 | }, 500); |
||
| 119 | |||
| 120 | _this.gifHeight = _this.sizing; |
||
| 121 | _this.gifWidth = _this.frameWidth * _this.frameCount(); |
||
| 122 | |||
| 123 | if (_this.options.autoPlay) { |
||
| 124 | _this.start(); |
||
| 125 | } |
||
| 126 | } |
||
| 127 | |||
| 128 | } |
||
| 129 | |||
| 130 | Gfr.prototype.start = function() { |
||
| 131 | var _this = this; |
||
| 132 | |||
| 133 | clearInterval(_this.timer); |
||
| 134 | |||
| 135 | _this.timer = setInterval( function() { |
||
| 136 | _this.progressFrame(); |
||
| 137 | }, 1000 / 12 ); |
||
| 138 | } |
||
| 139 | |||
| 140 | Gfr.prototype.positionFrame = function( numberOfFrames ) { |
||
| 141 | var _this = this; |
||
| 142 | |||
| 143 | _this.counter = numberOfFrames; |
||
| 144 | _this.$filmStrip.css('transform', 'translateX(' + ((( _this.frameWidth * numberOfFrames )) * -1) +'px)' ); |
||
| 145 | } |
||
| 146 | |||
| 147 | Gfr.prototype.progressFrame = function() { |
||
| 148 | var _this = this; |
||
| 149 | |||
| 150 | _this.positionFrame( _this.counter ); |
||
| 151 | |||
| 152 | if (_this.counter < _this.frameCount() ){ |
||
| 153 | _this.counter++; |
||
| 154 | } else { |
||
| 155 | _this.counter = 0; |
||
| 156 | } |
||
| 157 | } |
||
| 158 | |||
| 159 | Gfr.prototype.coverDimensions = function (childWidth, childHeight, containerWidth, containerHeight ) { |
||
| 160 | var scaleFactor = this.max( containerWidth / childWidth, containerHeight / childHeight ); |
||
| 161 | |||
| 162 | return { |
||
| 163 | height: Math.ceil(childHeight * scaleFactor), |
||
| 164 | width: Math.ceil(childWidth * scaleFactor) |
||
| 165 | }; |
||
| 166 | }; |
||
| 167 | |||
| 168 | Gfr.prototype.max = function( a, b) { |
||
| 169 | return a > b ? a : b; |
||
| 170 | }; |
||
| 171 | |||
| 172 | |||
| 173 | var g = new Gfr(); |
||
| 174 | |||
| 175 | console.log(g); |
||
| 176 | |||
| 177 | }(window, window.jQuery)) |
Loading history...
The sequence or comma operator allows the inclusion of multiple expressions where only is permitted. The result of the sequence is the value of the last expression.
This operator is most often used in
forstatements.Used in another places it can make code hard to read, especially when people do not realize it even exists as a seperate operator.
This check looks for usage of the sequence operator in locations where it is not necessary and could be replaced by a series of expressions or statements.
could just as well be written as:
To learn more about the sequence operator, please refer to the MDN.