Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic responsive support #238

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Basic responsive support #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3e09fe
Added responsive support for mobile, tablet and desctop; added update…
kadario Jan 26, 2016
b45e2b3
Added description for new options
kadario Jan 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion docs/Options.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,11 @@ var frame = new Sly('#frame', {
draggedClass: 'dragged', // Class for dragged elements (like SLIDEE or scrollbar handle).
activeClass: 'active', // Class for active items and pages.
disabledClass: 'disabled' // Class for disabled navigation elements.

// Responsive variables
visibleItems: null, // Array with numbers of visible items at once for different resolutions, like [3,2,1].
screen_sm: 768, // Breakpoint for mobile screens - more than 768 - tablets; less than 768 - mobile screens.
screen_md: 992 // Breakpoint for desctop screens - more than 992.
});
```

Expand Down Expand Up @@ -522,4 +527,31 @@ Class added to buttons when they are disabled.

Buttons are being disabled when there would be no action after pressing them. For example: the previous item button when the very first item is activated.

If a button is a `<button>` or `<input>` element, it will also be marked with `disabled="disabled"` attribute.
If a button is a `<button>` or `<input>` element, it will also be marked with `disabled="disabled"` attribute.

---

###### Responsive

---

### visibleItems

Type: `Array`
Default: `null`

Array with numbers of visible items at once for different resolutions, like [3,2,1] - [desctop, tablet, mobile]

### screen_sm

Type: `Integer`
Default: `768`

Breakpoint for mobile screens - more than 768 - tablets; less than 768 - mobile screens.

### screen_md

Type: `Integer`
Default: `992`

Breakpoint for desctop screens - more than 992.
187 changes: 129 additions & 58 deletions src/sly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

;(function ($, w, undefined) {
'use strict';

Expand Down Expand Up @@ -94,6 +93,7 @@
// Items
var $items = 0;
var items = [];
var item_w; //Item width
var rel = {
firstItem: 0,
lastItem: 0,
Expand Down Expand Up @@ -166,6 +166,100 @@
* @param {Boolean} [isInit] Whether load is called from within self.init().
* @return {Void}
*/
function countSizes(paddingStart, lastItemIndex, lastItem, paddingEnd, ignoredMargin, borderBox) {
frameSize = parallax ? 0 : $frame[o.horizontal ? 'width' : 'height']();
slideeSize = 0;

$items.each(function (i, element) {
var $item = $(element);
var rect = element.getBoundingClientRect();
var itemSize;

//Checking how many items to show in one time
if (o.visibleItems === null) {
//Using width added by css, or auto width
itemSize = round(o.horizontal ? rect.width || rect.right - rect.left : rect.height || rect.bottom - rect.top);
} else {

//Responsive views of items
if (Object.prototype.toString.call( o.visibleItems ) === '[object Array]') {
var w = $(window).width();
if(w >= o.screen_md) { itemSize = frameSize / o.visibleItems[0]; }
if((w < o.screen_md) && (w >= o.screen_sm)) { itemSize = frameSize / o.visibleItems[1]; }
if(w < o.screen_sm) { itemSize = frameSize / o.visibleItems[2]; }

}
else {
itemSize = frameSize / o.visibleItems;
}

}

var itemMarginStart = getPx($item, o.horizontal ? 'marginLeft' : 'marginTop');
var itemMarginEnd = getPx($item, o.horizontal ? 'marginRight' : 'marginBottom');
var itemSizeFull = itemSize + itemMarginStart + itemMarginEnd;
var singleSpaced = !itemMarginStart || !itemMarginEnd;
var item = {};

if (o.visibleItems !== null) {
$item.css('width', itemSizeFull); // this is for jQuert 1.7+
}

item.el = element;
item.size = singleSpaced ? itemSize : itemSizeFull;
item.half = item.size / 2;
item.start = slideeSize + (singleSpaced ? itemMarginStart : 0);
item.center = item.start - round(frameSize / 2 - item.size / 2);
item.end = item.start - frameSize + item.size;

// Account for slidee padding
if (!i) {
slideeSize += paddingStart;
}

// Increment slidee size for size of the active element
slideeSize += itemSizeFull;
item_w = itemSizeFull;


// Try to account for vertical margin collapsing in vertical mode
// It's not bulletproof, but should work in 99% of cases
if (!o.horizontal && !areFloated) {
// Subtract smaller margin, but only when top margin is not 0, and this is not the first element
if (itemMarginEnd && itemMarginStart && i > 0) {
slideeSize -= min(itemMarginStart, itemMarginEnd);
}
}

// Things to be done on last item
if (i === lastItemIndex) {
item.end += paddingEnd;
slideeSize += paddingEnd;
ignoredMargin = singleSpaced ? itemMarginEnd : 0;
}

// Add item object to items array
items.push(item);
lastItem = item;

});

// Resize SLIDEE to fit all items
$slidee[0].style[o.horizontal ? 'width' : 'height'] = (borderBox ? slideeSize: slideeSize - paddingStart - paddingEnd) + 'px';

// Adjust internal SLIDEE size for last margin
slideeSize -= ignoredMargin;

// Set limits
if (items.length) {
pos.start = items[0][forceCenteredNav ? 'center' : 'start'];
pos.end = forceCenteredNav ? lastItem.center : frameSize < slideeSize ? lastItem.end : pos.start;
} else {
pos.start = pos.end = 0;
}

}

function load(isInit) {
// Local variables
var lastItemsCount = 0;
Expand Down Expand Up @@ -205,66 +299,38 @@
// Reset slideeSize
slideeSize = 0;

// Iterate through items
$items.each(function (i, element) {
// Item
var $item = $(element);
var rect = element.getBoundingClientRect();
var itemSize = round(o.horizontal ? rect.width || rect.right - rect.left : rect.height || rect.bottom - rect.top);
var itemMarginStart = getPx($item, o.horizontal ? 'marginLeft' : 'marginTop');
var itemMarginEnd = getPx($item, o.horizontal ? 'marginRight' : 'marginBottom');
var itemSizeFull = itemSize + itemMarginStart + itemMarginEnd;
var singleSpaced = !itemMarginStart || !itemMarginEnd;
var item = {};
item.el = element;
item.size = singleSpaced ? itemSize : itemSizeFull;
item.half = item.size / 2;
item.start = slideeSize + (singleSpaced ? itemMarginStart : 0);
item.center = item.start - round(frameSize / 2 - item.size / 2);
item.end = item.start - frameSize + item.size;

// Account for slidee padding
if (!i) {
slideeSize += paddingStart;
//Check - if is responsive array was added and check when resize finished
if(o.visibleItems!==null) {

var rtime;
var timeout = false;
var delta = 200;

var resizeend = function () {
if (new Date() - rtime < delta) {
setTimeout(resizeend, delta);
} else {
timeout = false;
updateRelatives();
updateButtonsState();
syncPagesbar();
countSizes(paddingStart, lastItemIndex, lastItem, paddingEnd, ignoredMargin, borderBox);
self[centeredNav ? 'toCenter' : 'toStart'](o.startAt);
}
}

// Increment slidee size for size of the active element
slideeSize += itemSizeFull;

// Try to account for vertical margin collapsing in vertical mode
// It's not bulletproof, but should work in 99% of cases
if (!o.horizontal && !areFloated) {
// Subtract smaller margin, but only when top margin is not 0, and this is not the first element
if (itemMarginEnd && itemMarginStart && i > 0) {
slideeSize -= min(itemMarginStart, itemMarginEnd);
}
}

// Things to be done on last item
if (i === lastItemIndex) {
item.end += paddingEnd;
slideeSize += paddingEnd;
ignoredMargin = singleSpaced ? itemMarginEnd : 0;
}

// Add item object to items array
items.push(item);
lastItem = item;
});

// Resize SLIDEE to fit all items
$slidee[0].style[o.horizontal ? 'width' : 'height'] = (borderBox ? slideeSize: slideeSize - paddingStart - paddingEnd) + 'px';
$(window).resize(function() {
rtime = new Date();
if (timeout === false) {
timeout = true;
setTimeout(resizeend, delta);
}
});
}

// Adjust internal SLIDEE size for last margin
slideeSize -= ignoredMargin;
// Iterate through items
countSizes(paddingStart, lastItemIndex, lastItem, paddingEnd, ignoredMargin, borderBox);

// Set limits
if (items.length) {
pos.start = items[0][forceCenteredNav ? 'center' : 'start'];
pos.end = forceCenteredNav ? lastItem.center : frameSize < slideeSize ? lastItem.end : pos.start;
} else {
pos.start = pos.end = 0;
}
}

// Calculate SLIDEE center position
Expand Down Expand Up @@ -2198,6 +2264,11 @@
// Classes
draggedClass: 'dragged', // Class for dragged elements (like SLIDEE or scrollbar handle).
activeClass: 'active', // Class for active items and pages.
disabledClass: 'disabled' // Class for disabled navigation elements.
disabledClass: 'disabled', // Class for disabled navigation elements.

// Responsive variables
visibleItems: null, // Array with numbers of visible items at once for different resolutions, like [3,2,1].
screen_sm: 768, // Breakpoint for mobile screens - more than 768 - tablets; less than 768 - mobile screens.
screen_md: 992 // Breakpoint for desctop screens - more than 992.
};
}(jQuery, window));