Issues in gifr.js - All Issues - Inspection of "Adds Scrutinizer badge" - thisislawatts/gifr - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( 277a82...c84f48 )

by LA

created 2017-01-27 16:21 UTC

gifr.js (4 issues)

Labels

Severity

/**
 *
 */
(function(window, $) {

var Gfr = function(opts) {
  var _this = this;

  _this.options = $.extend({
    autoPlay: false,
    positioning: '50% 50%',
    preserveAspectRatio: true,
    sizeToFit: true
  }, opts);

  // Specifics
  _this.originalFrameWidth = _this.frameWidth = 1920,
var a,b,c;

a = 1, b = 1,  c= 3;
  _this.originalFrameHeight = _this.frameHeight = 698;
  _this.imgRatio = this.frameWidth / this.frameHeight;

  _this.$el = _this.options.$el || $('.gif');
  _this.imgSrc = _this.$el.data('src');
  _this.$filmStrip = $('<img src="' + _this.$el.data('src') +'"/>');

  _this.$el.append(_this.$filmStrip);

  // Bailout no image found!
  if ( !_this.imgSrc ) {
    return;
  }

  _this.containerHeight = _this.$el.outerHeight();
  _this.containerWidth = _this.$el.width();

  _this.counter = 0;
  _this.imgPointer = 0;

  if ( _this.options.preserveAspectRatio ) {
    _this.containerHeight = _this.containerWidth / _this.imgRatio;
  }

  _this.setup();

  _this.$el.on('mousemove', function(evt) {
      clearInterval(_this.timer);

      var pointer = Math.round( _this.map(evt.clientX, 0, _this.$el.outerWidth(), 0, _this.frameCount() ) );

      _this.positionFrame( pointer );

      clearTimeout( _this.activity );

      if (_this.options.autoPlay) {
        _this.activity = setTimeout(function() {
          _this.start();
        }, 500 );
      }
  });
}

Gfr.prototype.getFilmstripStyles = function() {
  var _this = this;
  var css = ['position:relative'];
  var positioning = this.options.positioning.split(' ');

  if (this.options.sizeToFit ){
    var coverDimensions = _this.coverDimensions(_this.frameWidth, _this.frameHeight, _this.$el.outerWidth(), _this.$el.outerHeight());

    console.log('Size to fit?', coverDimensions, this.$el.outerHeight() );

    // Increase frame
    _this.frameWidth = coverDimensions.width;
    _this.frameHeight = coverDimensions.height;
    console.log('New Width:', coverDimensions.width, _this.frameCount(), coverDimensions.width * _this.frameCount() );
    _this.$filmStrip.attr('width', coverDimensions.width * _this.frameCount())
    _this.$filmStrip.attr('height', coverDimensions.height)
  }

  // X
  css.push('margin-left: ' + (_this.$el.outerWidth() - _this.frameWidth) * (parseInt(positioning[0], 10) / 100) + 'px')

  // Y
  console.log(_this.$el.outerHeight(), _this.frameHeight);
  css.push('margin-top: ' + (_this.$el.outerHeight() - _this.frameHeight) * (parseInt(positioning[1], 10) / 100) + 'px')

  console.log(css.join(';'));

  return css.join(';');
}

Gfr.prototype.map = function(value, istart, istop, ostart, ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
  }

Gfr.prototype.frameCount = function() {
  // Normalize to allow for zeroIndex;
  return (this.img.width / this.frameWidth) - 1;
}

Gfr.prototype.setup = function() {
  var _this = this;

  _this.img = new Image();

  _this.is_landscape = ( _this.containerWidth > _this.containerHeight );
  _this.sizing = _this.is_landscape ? _this.containerWidth : _this.containerHeight ;
  _this.assignImage( _this.imgSrc );
  _this.$filmStrip.attr('style', _this.getFilmstripStyles() );
}

Gfr.prototype.assignImage = function(src) {
  var _this = this;

  _this.img.src = src;

  this.img.onload = function() {

    setTimeout(function() {
      _this.$el.fadeIn(100);
    }, 500);

    _this.gifHeight = _this.sizing;
    _this.gifWidth = _this.frameWidth * _this.frameCount();

    if (_this.options.autoPlay) {
      _this.start();
    }
  }

}

Gfr.prototype.start = function() {
  var _this = this;

  clearInterval(_this.timer);

  _this.timer = setInterval( function() {
    _this.progressFrame();
  }, 1000 / 12 );
}

Gfr.prototype.positionFrame = function( numberOfFrames ) {
  var _this = this;

  _this.counter = numberOfFrames;
  _this.$filmStrip.css('transform', 'translateX(' + ((( _this.frameWidth * numberOfFrames )) * -1) +'px)' );
}

Gfr.prototype.progressFrame = function() {
  var _this = this;

  _this.positionFrame( _this.counter );

  if (_this.counter < _this.frameCount() ){
      _this.counter++;
  } else {
      _this.counter = 0;
  }
}

Gfr.prototype.coverDimensions = function (childWidth, childHeight, containerWidth, containerHeight ) {
  var scaleFactor = this.max( containerWidth / childWidth, containerHeight / childHeight );

  return {
    height: Math.ceil(childHeight * scaleFactor),
    width: Math.ceil(childWidth * scaleFactor)
  };
};

Gfr.prototype.max = function( a, b) {
  return a > b ? a : b;
};


  var g = new Gfr();

  console.log(g);


}(window, window.jQuery))

1			/**
2			*
3			*/
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,
			0 ignored issues – show Comprehensibility introduced 2017-01-27 16:15 UTC by Report Bug Copy Issue Report Show Similar Issues like this Usage of the sequence operator is discouraged, since it may lead to obfuscated code. 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 `for` statements. 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. var a,b,c; a = 1, b = 1, c= 3; could just as well be written as: var a,b,c; a = 1; b = 1; c = 3; To learn more about the sequence operator, please refer to the MDN. Loading history...
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() );
			0 ignored issues – show Debugging Code introduced 2017-01-27 16:15 UTC by Report Bug Copy Issue Report Show Similar Issues like this `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
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();
			0 ignored issues – show Bug introduced 2017-01-27 16:15 UTC by Report Bug Copy Issue Report Show Similar Issues like this The variable `Image` seems to be never declared. If this is a global, consider adding a `/** global: Image */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
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);
			0 ignored issues – show Debugging Code introduced 2017-01-27 16:15 UTC by Report Bug Copy Issue Report Show Similar Issues like this `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
176
177			}(window, window.jQuery))

thisislawatts / gifr

Push — master ( 277a82...c84f48 )

gifr.js (4 issues)

Labels

Severity

Introduced By

Duplication Side-by-Side

Filter issues like