Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: fixermark/slider.js
base: c57a8aff9d
...
head fork: fixermark/slider.js
compare: 4b60a89810
  • 2 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Showing with 51 additions and 31 deletions.
  1. +29 −17 lib/slider.js
  2. +22 −14 slider.coffee
View
46 lib/slider.js
@@ -330,6 +330,10 @@
return this;
};
+ Slider.prototype.getSize = function() {
+ return [this.node.width(), this.node.find(".slide-images").height()];
+ };
+
Slider.prototype.setSize = function(w, h) {
this.w = w;
this.h = h;
@@ -364,21 +368,27 @@
};
Slider.prototype._aspectSizing = function(width, height) {
- var scaled_height, scaled_width;
- if (width < height) {
- scaled_width = this.h * width / height;
- return [(this.w - scaled_width) / 2, 0, scaled_width, this.h];
+ var heightScaleFactor, newHeight, newWidth, scaleFactor, sliderHeight, sliderWidth, widthScaleFactor, _ref;
+ _ref = this.getSize(), sliderWidth = _ref[0], sliderHeight = _ref[1];
+ widthScaleFactor = sliderWidth / width;
+ heightScaleFactor = sliderHeight / height;
+ if (widthScaleFactor < heightScaleFactor) {
+ scaleFactor = widthScaleFactor;
} else {
- scaled_height = this.w * height / width;
- return [0, (this.h - scaled_height) / 2, this.w, scaled_height];
+ scaleFactor = heightScaleFactor;
}
+ newWidth = width * scaleFactor;
+ newHeight = height * scaleFactor;
+ return [(sliderWidth - newWidth) / 2, (sliderHeight - newHeight) / 2, newWidth, newHeight];
};
Slider.prototype._sizeAllImgs = function() {
var _this = this;
return this.node.find(".slide-image img").each(function(idx, image_node) {
- var css_settings, height, left, top, width, _ref;
- _ref = _this._aspectSizing(image_node.width, image_node.height), left = _ref[0], top = _ref[1], width = _ref[2], height = _ref[3];
+ var css_settings, height, left, top, unstyledImage, width, _ref;
+ unstyledImage = new Image();
+ unstyledImage.src = image_node.src;
+ _ref = _this._aspectSizing(unstyledImage.width, unstyledImage.height), left = _ref[0], top = _ref[1], width = _ref[2], height = _ref[3];
css_settings = {
position: "absolute",
left: left,
@@ -514,6 +524,14 @@
return SliderWithCanvas.__super__.start.apply(this, arguments);
};
+ SliderWithCanvas.prototype.getSize = function() {
+ if (this.renderMode === 'canvas') {
+ return [this.canvas.width(), this.canvas.height()];
+ } else {
+ return SliderWithCanvas.__super__.getSize.call(this);
+ }
+ };
+
SliderWithCanvas.prototype.setSize = function(w, h) {
SliderWithCanvas.__super__.setSize.call(this, w, h);
if (this.canvas) this.canvas.attr("height", h).attr("width", w);
@@ -566,15 +584,9 @@
};
SliderWithCanvas.prototype.drawImage = function(img) {
- var height, scaled_height, scaled_width, width, _ref;
- _ref = this.canvas[0], width = _ref.width, height = _ref.height;
- if (img.width >= img.height) {
- scaled_height = width * img.height / img.width;
- return this.ctx.drawImage(img, 0, (height - scaled_height) / 2, width, scaled_height);
- } else {
- scaled_width = height * img.width / img.height;
- return this.ctx.drawImage(img, (width - scaled_width) / 2, 0, scaled_width, height);
- }
+ var height, left, top, width, _ref;
+ _ref = this._aspectSizing(img.width, img.height), left = _ref[0], top = _ref[1], width = _ref[2], height = _ref[3];
+ return this.ctx.drawImage(img, left, top, width, height);
};
SliderWithCanvas.prototype._renderId = 0;
View
36 slider.coffee
@@ -324,17 +324,27 @@ class Slider
_aspectSizing: (width, height) ->
[sliderWidth, sliderHeight] = @getSize()
- if width < height
- scaled_width = sliderHeight * width / height
- [(sliderWidth - scaled_width) / 2, 0, scaled_width, sliderHeight]
+ widthScaleFactor = sliderWidth / width
+ heightScaleFactor = sliderHeight / height
+ if widthScaleFactor < heightScaleFactor
+ scaleFactor = widthScaleFactor
else
- scaled_height = sliderWidth * height / width
- [0, (sliderHeight - scaled_height) / 2, sliderWidth, scaled_height]
+ scaleFactor = heightScaleFactor
+ newWidth = width * scaleFactor
+ newHeight = height * scaleFactor
+ [
+ (sliderWidth - newWidth) / 2,
+ (sliderHeight - newHeight) / 2,
+ newWidth,
+ newHeight
+ ]
_sizeAllImgs: ->
@node.find(".slide-image img").each( (idx, image_node) =>
+ unstyledImage = new Image()
+ unstyledImage.src = image_node.src
[left, top, width, height] = @_aspectSizing(
- image_node.width, image_node.height)
+ unstyledImage.width, unstyledImage.height)
css_settings =
position: "absolute",
left: left,
@@ -431,7 +441,10 @@ class SliderWithCanvas extends Slider
# Get the slider size
getSize: ->
- [@canvas.width(), @canvas.height()]
+ if @renderMode is 'canvas'
+ [@canvas.width(), @canvas.height()]
+ else
+ super()
# The `setSize` method should update the canvas size
setSize: (w, h) ->
@@ -480,13 +493,8 @@ class SliderWithCanvas extends Slider
# draw an image on the all canvas with the correct ratio
drawImage: (img) ->
- {width, height} = @canvas[0]
- if img.width >= img.height
- scaled_height = width * img.height / img.width
- @ctx.drawImage img, 0, (height - scaled_height) / 2, width, scaled_height
- else
- scaled_width = height * img.width / img.height
- @ctx.drawImage img, (width - scaled_width) / 2, 0, scaled_width, height
+ [left, top, width, height] = @_aspectSizing(img.width, img.height)
+ @ctx.drawImage img, left, top, width, height
# `_renderId` help to make sure once transition is running
_renderId: 0

No commit comments for this range

Something went wrong with that request. Please try again.