Skip to content

Commit

Permalink
Merge pull request #491 from twbs/js-fixes
Browse files Browse the repository at this point in the history 
JS fixes
  • Loading branch information
@XhmikosR
XhmikosR committed Feb 4, 2015
2 parents 5d2f864 + 07a236d commit 1fcd663
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 47 deletions.
62 changes: 47 additions & 15 deletions dist/js/ratchet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,9 @@
delete cacheMapping[cacheBackStack.shift()];
}

window.history.pushState(null, '', getCached(PUSH.id).url);
if (getCached(PUSH.id).url) {
window.history.pushState(null, '', getCached(PUSH.id).url);
}

cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
Expand Down Expand Up @@ -740,6 +742,23 @@
var scrollableArea;
var startedMoving;

// Original script from http://davidwalsh.name/vendor-prefix
var getBrowserCapabilities = (function () {
var styles = window.getComputedStyle(document.documentElement, '');
var pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1];
return {
prefix: '-' + pre + '-',
transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
};
})();

var transformPrefix = getBrowserCapabilities.prefix;
var transformProperty = getBrowserCapabilities.transform;

var getSlider = function (target) {
var i;
var sliders = document.querySelectorAll('.slider > .slide-group');
Expand All @@ -754,11 +773,9 @@
};

var getScroll = function () {
if ('webkitTransform' in slider.style) {
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
var ret = translate3d ? translate3d[1] : 0;
return parseInt(ret, 10);
}
var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
var ret = translate3d ? translate3d[1] : 0;
return parseInt(ret, 10);
};

var setSlideNumber = function (offset) {
Expand Down Expand Up @@ -791,7 +808,7 @@

setSlideNumber(0);

slider.style['-webkit-transition-duration'] = 0;
slider.style[transformPrefix + 'transition-duration'] = 0;
};

var onTouchMove = function (e) {
Expand Down Expand Up @@ -824,7 +841,7 @@
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;

slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';

// started moving
startedMoving = true;
Expand All @@ -842,8 +859,8 @@

offsetX = slideNumber * sliderWidth;

slider.style['-webkit-transition-duration'] = '.2s';
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
slider.style[transformPrefix + 'transition-duration'] = '.2s';
slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';

e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) },
Expand Down Expand Up @@ -877,6 +894,21 @@
var distanceX = false;
var toggle = false;

// Original script from http://davidwalsh.name/vendor-prefix
var getBrowserCapabilities = (function () {
var styles = window.getComputedStyle(document.documentElement, '');
var pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1];
return {
transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
};
})();

var transformProperty = getBrowserCapabilities.transform;

var findToggle = function (target) {
var i;
var toggles = document.querySelectorAll('.toggle');
Expand Down Expand Up @@ -935,13 +967,13 @@
e.preventDefault();

if (distanceX < 0) {
return (handle.style.webkitTransform = 'translate3d(0,0,0)');
return (handle.style[transformProperty] = 'translate3d(0,0,0)');
}
if (distanceX > offset) {
return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)');
return (handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)');
}

handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
handle.style[transformProperty] = 'translate3d(' + distanceX + 'px,0,0)';

toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
});
Expand All @@ -958,9 +990,9 @@
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));

if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)';
} else {
handle.style.webkitTransform = 'translate3d(0,0,0)';
handle.style[transformProperty] = 'translate3d(0,0,0)';
}

toggle.classList[slideOn ? 'add' : 'remove']('active');
Expand Down
2 changes: 1 addition & 1 deletion dist/js/ratchet.min.js
View file

Large diffs are not rendered by default.

62 changes: 47 additions & 15 deletions docs/dist/js/ratchet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,9 @@
delete cacheMapping[cacheBackStack.shift()];
}

window.history.pushState(null, '', getCached(PUSH.id).url);
if (getCached(PUSH.id).url) {
window.history.pushState(null, '', getCached(PUSH.id).url);
}

cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
Expand Down Expand Up @@ -740,6 +742,23 @@
var scrollableArea;
var startedMoving;

// Original script from http://davidwalsh.name/vendor-prefix
var getBrowserCapabilities = (function () {
var styles = window.getComputedStyle(document.documentElement, '');
var pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1];
return {
prefix: '-' + pre + '-',
transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
};
})();

var transformPrefix = getBrowserCapabilities.prefix;
var transformProperty = getBrowserCapabilities.transform;

var getSlider = function (target) {
var i;
var sliders = document.querySelectorAll('.slider > .slide-group');
Expand All @@ -754,11 +773,9 @@
};

var getScroll = function () {
if ('webkitTransform' in slider.style) {
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
var ret = translate3d ? translate3d[1] : 0;
return parseInt(ret, 10);
}
var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
var ret = translate3d ? translate3d[1] : 0;
return parseInt(ret, 10);
};

var setSlideNumber = function (offset) {
Expand Down Expand Up @@ -791,7 +808,7 @@

setSlideNumber(0);

slider.style['-webkit-transition-duration'] = 0;
slider.style[transformPrefix + 'transition-duration'] = 0;
};

var onTouchMove = function (e) {
Expand Down Expand Up @@ -824,7 +841,7 @@
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;

slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';

// started moving
startedMoving = true;
Expand All @@ -842,8 +859,8 @@

offsetX = slideNumber * sliderWidth;

slider.style['-webkit-transition-duration'] = '.2s';
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
slider.style[transformPrefix + 'transition-duration'] = '.2s';
slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';

e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) },
Expand Down Expand Up @@ -877,6 +894,21 @@
var distanceX = false;
var toggle = false;

// Original script from http://davidwalsh.name/vendor-prefix
var getBrowserCapabilities = (function () {
var styles = window.getComputedStyle(document.documentElement, '');
var pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1];
return {
transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
};
})();

var transformProperty = getBrowserCapabilities.transform;

var findToggle = function (target) {
var i;
var toggles = document.querySelectorAll('.toggle');
Expand Down Expand Up @@ -935,13 +967,13 @@
e.preventDefault();

if (distanceX < 0) {
return (handle.style.webkitTransform = 'translate3d(0,0,0)');
return (handle.style[transformProperty] = 'translate3d(0,0,0)');
}
if (distanceX > offset) {
return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)');
return (handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)');
}

handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
handle.style[transformProperty] = 'translate3d(' + distanceX + 'px,0,0)';

toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
});
Expand All @@ -958,9 +990,9 @@
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));

if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)';
} else {
handle.style.webkitTransform = 'translate3d(0,0,0)';
handle.style[transformProperty] = 'translate3d(0,0,0)';
}

toggle.classList[slideOn ? 'add' : 'remove']('active');
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/js/ratchet.min.js
View file

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion js/push.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@
delete cacheMapping[cacheBackStack.shift()];
}

window.history.pushState(null, '', getCached(PUSH.id).url);
if (getCached(PUSH.id).url) {
window.history.pushState(null, '', getCached(PUSH.id).url);
}

cacheMapping.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
Expand Down
33 changes: 24 additions & 9 deletions js/sliders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,23 @@
var scrollableArea;
var startedMoving;

// Original script from http://davidwalsh.name/vendor-prefix
var getBrowserCapabilities = (function () {
var styles = window.getComputedStyle(document.documentElement, '');
var pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1];
return {
prefix: '-' + pre + '-',
transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
};
})();

var transformPrefix = getBrowserCapabilities.prefix;
var transformProperty = getBrowserCapabilities.transform;

var getSlider = function (target) {
var i;
var sliders = document.querySelectorAll('.slider > .slide-group');
Expand All @@ -39,11 +56,9 @@
};

var getScroll = function () {
if ('webkitTransform' in slider.style) {
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/);
var ret = translate3d ? translate3d[1] : 0;
return parseInt(ret, 10);
}
var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
var ret = translate3d ? translate3d[1] : 0;
return parseInt(ret, 10);
};

var setSlideNumber = function (offset) {
Expand Down Expand Up @@ -76,7 +91,7 @@

setSlideNumber(0);

slider.style['-webkit-transition-duration'] = 0;
slider.style[transformPrefix + 'transition-duration'] = 0;
};

var onTouchMove = function (e) {
Expand Down Expand Up @@ -109,7 +124,7 @@
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1;

slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';

// started moving
startedMoving = true;
Expand All @@ -127,8 +142,8 @@

offsetX = slideNumber * sliderWidth;

slider.style['-webkit-transition-duration'] = '.2s';
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)';
slider.style[transformPrefix + 'transition-duration'] = '.2s';
slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';

e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) },
Expand Down
25 changes: 20 additions & 5 deletions js/toggles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,21 @@
var distanceX = false;
var toggle = false;

// Original script from http://davidwalsh.name/vendor-prefix
var getBrowserCapabilities = (function () {
var styles = window.getComputedStyle(document.documentElement, '');
var pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1];
return {
transform: pre[0].toUpperCase() + pre.substr(1) + 'Transform'
};
})();

var transformProperty = getBrowserCapabilities.transform;

var findToggle = function (target) {
var i;
var toggles = document.querySelectorAll('.toggle');
Expand Down Expand Up @@ -73,13 +88,13 @@
e.preventDefault();

if (distanceX < 0) {
return (handle.style.webkitTransform = 'translate3d(0,0,0)');
return (handle.style[transformProperty] = 'translate3d(0,0,0)');
}
if (distanceX > offset) {
return (handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)');
return (handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)');
}

handle.style.webkitTransform = 'translate3d(' + distanceX + 'px,0,0)';
handle.style[transformProperty] = 'translate3d(' + distanceX + 'px,0,0)';

toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
});
Expand All @@ -96,9 +111,9 @@
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));

if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)';
handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)';
} else {
handle.style.webkitTransform = 'translate3d(0,0,0)';
handle.style[transformProperty] = 'translate3d(0,0,0)';
}

toggle.classList[slideOn ? 'add' : 'remove']('active');
Expand Down

0 comments on commit 1fcd663

Please sign in to comment.