Skip to content

Commit

Permalink
use window width instead of slider viewport as breakpoint
Browse files Browse the repository at this point in the history
  • Loading branch information
@ganlanyuan
ganlanyuan committed Nov 9, 2017
1 parent 30fcfe4 commit 731af32
Show file tree
Hide file tree
Showing 6 changed files with 47 additions and 24 deletions.
1 change: 0 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,6 @@ The following options can be redefined in `responsive` field:
</script>
```
NOTE:
- `breakpoints` are based on **slider's view port** rather than window width.
- `fixedWidth` can only be changed to different positive integers. It can't be changed to different data type, 0 or negtive integer.
*[top↑](#tiny-slider-20)*

Expand Down
2 changes: 1 addition & 1 deletion dist/min/tiny-slider.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/sourcemaps/tiny-slider.js.map
View file

Large diffs are not rendered by default.

22 changes: 15 additions & 7 deletions dist/tiny-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -619,7 +619,8 @@ var tns = function(options) {
responsive = options.responsive,
responsiveItems = [],
breakpoints = false,
breakpointZone = 0;
breakpointZone = 0,
windowWidth = getWindowWidth();

if (responsive) {
breakpoints = Object.keys(responsive)
Expand Down Expand Up @@ -786,6 +787,10 @@ var tns = function(options) {
}

// === COMMON FUNCTIONS === //
function getWindowWidth () {
return win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth;
}

function checkOption (item) {
var result = options[item];
if (!result && breakpoints && responsiveItems.indexOf(item) >= 0) {
Expand All @@ -796,8 +801,8 @@ var tns = function(options) {
return result;
}

function getOption (item, view) {
view = view ? view : vpOuter;
function getOption (item, viewport) {
viewport = viewport ? viewport : windowWidth;

var obj = {
slideBy: 'page',
Expand All @@ -810,7 +815,7 @@ var tns = function(options) {
result = obj[item];
} else {
if (item === 'items' && getOption('fixedWidth')) {
result = Math.floor(view / (getOption('fixedWidth') + getOption('gutter')));
result = Math.floor(vpOuter / (getOption('fixedWidth') + getOption('gutter')));
} else if (item === 'autoHeight' && nested === 'outer') {
result = true;
} else {
Expand All @@ -819,7 +824,7 @@ var tns = function(options) {
if (breakpoints && responsiveItems.indexOf(item) >= 0) {
for (var i = 0, len = breakpoints.length; i < len; i++) {
var bp = breakpoints[i];
if (view >= bp) {
if (viewport >= bp) {
if (item in responsive[bp]) { result = responsive[bp][item]; }
} else { break; }
}
Expand Down Expand Up @@ -1299,7 +1304,10 @@ var tns = function(options) {

clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if (vpOuter !== outerWrapper.clientWidth) {
var newWW = getWindowWidth();
if (windowWidth !== newWW) {
windowWidth = newWW;

resizeTasks();

if (nested === 'outer') { events.emit('outerResized', info(e)); }
Expand Down Expand Up @@ -1551,7 +1559,7 @@ var tns = function(options) {
function setBreakpointZone () {
breakpointZone = 0;
breakpoints.forEach(function(bp, i) {
if (vpOuter >= bp) { breakpointZone = i + 1; }
if (windowWidth >= bp) { breakpointZone = i + 1; }
});
}

Expand Down
22 changes: 15 additions & 7 deletions src/tiny-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,8 @@ export var tns = function(options) {
responsive = options.responsive,
responsiveItems = [],
breakpoints = false,
breakpointZone = 0;
breakpointZone = 0,
windowWidth = getWindowWidth();

if (responsive) {
breakpoints = Object.keys(responsive)
Expand Down Expand Up @@ -406,6 +407,10 @@ export var tns = function(options) {
}

// === COMMON FUNCTIONS === //
function getWindowWidth () {
return win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth;
}

function checkOption (item) {
var result = options[item];
if (!result && breakpoints && responsiveItems.indexOf(item) >= 0) {
Expand All @@ -416,8 +421,8 @@ export var tns = function(options) {
return result;
}

function getOption (item, view) {
view = view ? view : vpOuter;
function getOption (item, viewport) {
viewport = viewport ? viewport : windowWidth;

var obj = {
slideBy: 'page',
Expand All @@ -430,7 +435,7 @@ export var tns = function(options) {
result = obj[item];
} else {
if (item === 'items' && getOption('fixedWidth')) {
result = Math.floor(view / (getOption('fixedWidth') + getOption('gutter')));
result = Math.floor(vpOuter / (getOption('fixedWidth') + getOption('gutter')));
} else if (item === 'autoHeight' && nested === 'outer') {
result = true;
} else {
Expand All @@ -439,7 +444,7 @@ export var tns = function(options) {
if (breakpoints && responsiveItems.indexOf(item) >= 0) {
for (var i = 0, len = breakpoints.length; i < len; i++) {
var bp = breakpoints[i];
if (view >= bp) {
if (viewport >= bp) {
if (item in responsive[bp]) { result = responsive[bp][item]; }
} else { break; }
}
Expand Down Expand Up @@ -919,7 +924,10 @@ export var tns = function(options) {

clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if (vpOuter !== outerWrapper.clientWidth) {
var newWW = getWindowWidth();
if (windowWidth !== newWW) {
windowWidth = newWW;

resizeTasks();

if (nested === 'outer') { events.emit('outerResized', info(e)); }
Expand Down Expand Up @@ -1171,7 +1179,7 @@ export var tns = function(options) {
function setBreakpointZone () {
breakpointZone = 0;
breakpoints.forEach(function(bp, i) {
if (vpOuter >= bp) { breakpointZone = i + 1; }
if (windowWidth >= bp) { breakpointZone = i + 1; }
});
}

Expand Down
22 changes: 15 additions & 7 deletions src/tiny-slider.module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,8 @@ export var tns = function(options) {
responsive = options.responsive,
responsiveItems = [],
breakpoints = false,
breakpointZone = 0;
breakpointZone = 0,
windowWidth = getWindowWidth();

if (responsive) {
breakpoints = Object.keys(responsive)
Expand Down Expand Up @@ -406,6 +407,10 @@ export var tns = function(options) {
}

// === COMMON FUNCTIONS === //
function getWindowWidth () {
return win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth;
}

function checkOption (item) {
var result = options[item];
if (!result && breakpoints && responsiveItems.indexOf(item) >= 0) {
Expand All @@ -416,8 +421,8 @@ export var tns = function(options) {
return result;
}

function getOption (item, view) {
view = view ? view : vpOuter;
function getOption (item, viewport) {
viewport = viewport ? viewport : windowWidth;

var obj = {
slideBy: 'page',
Expand All @@ -430,7 +435,7 @@ export var tns = function(options) {
result = obj[item];
} else {
if (item === 'items' && getOption('fixedWidth')) {
result = Math.floor(view / (getOption('fixedWidth') + getOption('gutter')));
result = Math.floor(vpOuter / (getOption('fixedWidth') + getOption('gutter')));
} else if (item === 'autoHeight' && nested === 'outer') {
result = true;
} else {
Expand All @@ -439,7 +444,7 @@ export var tns = function(options) {
if (breakpoints && responsiveItems.indexOf(item) >= 0) {
for (var i = 0, len = breakpoints.length; i < len; i++) {
var bp = breakpoints[i];
if (view >= bp) {
if (viewport >= bp) {
if (item in responsive[bp]) { result = responsive[bp][item]; }
} else { break; }
}
Expand Down Expand Up @@ -919,7 +924,10 @@ export var tns = function(options) {

clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
if (vpOuter !== outerWrapper.clientWidth) {
var newWW = getWindowWidth();
if (windowWidth !== newWW) {
windowWidth = newWW;

resizeTasks();

if (nested === 'outer') { events.emit('outerResized', info(e)); }
Expand Down Expand Up @@ -1171,7 +1179,7 @@ export var tns = function(options) {
function setBreakpointZone () {
breakpointZone = 0;
breakpoints.forEach(function(bp, i) {
if (vpOuter >= bp) { breakpointZone = i + 1; }
if (windowWidth >= bp) { breakpointZone = i + 1; }
});
}

Expand Down

0 comments on commit 731af32

Please sign in to comment.