playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge pull request #491 from twbs/js-fixes 

JS fixes
pull/606/merge
XhmikosR 10 years ago
parent
5d2f864c31 07a236dd9a
commit
1fcd66348f
7 changed files with 143 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      dist/js/ratchet.js
  2. 2
      dist/js/ratchet.min.js
  3. 62
      docs/dist/js/ratchet.js
  4. 2
      docs/dist/js/ratchet.min.js
  5. 4
      js/push.js
  6. 33
      js/sliders.js
  7. 25
      js/toggles.js

62
dist/js/ratchet.js vendored
Unescape View File

@ -198,7 +198,9 @@
delete cacheMapping[cacheBackStack.shift()]; 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.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
@ -740,6 +742,23 @@
var scrollableArea; var scrollableArea;
var startedMoving; 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 getSlider = function (target) {
var i; var i;
var sliders = document.querySelectorAll('.slider > .slide-group'); var sliders = document.querySelectorAll('.slider > .slide-group');
@ -754,11 +773,9 @@
}; };
var getScroll = function () { var getScroll = function () {
if ('webkitTransform' in slider.style) { var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/); var ret = translate3d ? translate3d[1] : 0;
var ret = translate3d ? translate3d[1] : 0; return parseInt(ret, 10);
return parseInt(ret, 10);
}
}; };
var setSlideNumber = function (offset) { var setSlideNumber = function (offset) {
@ -791,7 +808,7 @@
setSlideNumber(0); setSlideNumber(0);
slider.style['-webkit-transition-duration'] = 0; slider.style[transformPrefix + 'transition-duration'] = 0;
}; };
var onTouchMove = function (e) { var onTouchMove = function (e) {
@ -824,7 +841,7 @@
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 : resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1; 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 // started moving
startedMoving = true; startedMoving = true;
@ -842,8 +859,8 @@
offsetX = slideNumber * sliderWidth; offsetX = slideNumber * sliderWidth;
slider.style['-webkit-transition-duration'] = '.2s'; slider.style[transformPrefix + 'transition-duration'] = '.2s';
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
e = new CustomEvent('slide', { e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) }, detail: { slideNumber: Math.abs(slideNumber) },
@ -877,6 +894,21 @@
var distanceX = false; var distanceX = false;
var toggle = 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 findToggle = function (target) {
var i; var i;
var toggles = document.querySelectorAll('.toggle'); var toggles = document.querySelectorAll('.toggle');
@ -935,13 +967,13 @@
e.preventDefault(); e.preventDefault();
if (distanceX < 0) { if (distanceX < 0) {
return (handle.style.webkitTransform = 'translate3d(0,0,0)'); return (handle.style[transformProperty] = 'translate3d(0,0,0)');
} }
if (distanceX > offset) { 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'); toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
}); });
@ -958,9 +990,9 @@
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2))); var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));
if (slideOn) { if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)';
} else { } else {
handle.style.webkitTransform = 'translate3d(0,0,0)'; handle.style[transformProperty] = 'translate3d(0,0,0)';
} }
toggle.classList[slideOn ? 'add' : 'remove']('active'); toggle.classList[slideOn ? 'add' : 'remove']('active');

2
dist/js/ratchet.min.js vendored
View File

File diff suppressed because one or more lines are too long

62
docs/dist/js/ratchet.js vendored
Unescape View File

@ -198,7 +198,9 @@
delete cacheMapping[cacheBackStack.shift()]; 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.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);
@ -740,6 +742,23 @@
var scrollableArea; var scrollableArea;
var startedMoving; 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 getSlider = function (target) {
var i; var i;
var sliders = document.querySelectorAll('.slider > .slide-group'); var sliders = document.querySelectorAll('.slider > .slide-group');
@ -754,11 +773,9 @@
}; };
var getScroll = function () { var getScroll = function () {
if ('webkitTransform' in slider.style) { var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/); var ret = translate3d ? translate3d[1] : 0;
var ret = translate3d ? translate3d[1] : 0; return parseInt(ret, 10);
return parseInt(ret, 10);
}
}; };
var setSlideNumber = function (offset) { var setSlideNumber = function (offset) {
@ -791,7 +808,7 @@
setSlideNumber(0); setSlideNumber(0);
slider.style['-webkit-transition-duration'] = 0; slider.style[transformPrefix + 'transition-duration'] = 0;
}; };
var onTouchMove = function (e) { var onTouchMove = function (e) {
@ -824,7 +841,7 @@
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 : resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1; 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 // started moving
startedMoving = true; startedMoving = true;
@ -842,8 +859,8 @@
offsetX = slideNumber * sliderWidth; offsetX = slideNumber * sliderWidth;
slider.style['-webkit-transition-duration'] = '.2s'; slider.style[transformPrefix + 'transition-duration'] = '.2s';
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
e = new CustomEvent('slide', { e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) }, detail: { slideNumber: Math.abs(slideNumber) },
@ -877,6 +894,21 @@
var distanceX = false; var distanceX = false;
var toggle = 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 findToggle = function (target) {
var i; var i;
var toggles = document.querySelectorAll('.toggle'); var toggles = document.querySelectorAll('.toggle');
@ -935,13 +967,13 @@
e.preventDefault(); e.preventDefault();
if (distanceX < 0) { if (distanceX < 0) {
return (handle.style.webkitTransform = 'translate3d(0,0,0)'); return (handle.style[transformProperty] = 'translate3d(0,0,0)');
} }
if (distanceX > offset) { 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'); toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
}); });
@ -958,9 +990,9 @@
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2))); var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));
if (slideOn) { if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)';
} else { } else {
handle.style.webkitTransform = 'translate3d(0,0,0)'; handle.style[transformProperty] = 'translate3d(0,0,0)';
} }
toggle.classList[slideOn ? 'add' : 'remove']('active'); toggle.classList[slideOn ? 'add' : 'remove']('active');

2
docs/dist/js/ratchet.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
js/push.js
Unescape View File

@ -60,7 +60,9 @@
delete cacheMapping[cacheBackStack.shift()]; 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.cacheForwardStack = JSON.stringify(cacheForwardStack);
cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack); cacheMapping.cacheBackStack = JSON.stringify(cacheBackStack);

33
js/sliders.js
Unescape View File

@ -25,6 +25,23 @@
var scrollableArea; var scrollableArea;
var startedMoving; 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 getSlider = function (target) {
var i; var i;
var sliders = document.querySelectorAll('.slider > .slide-group'); var sliders = document.querySelectorAll('.slider > .slide-group');
@ -39,11 +56,9 @@
}; };
var getScroll = function () { var getScroll = function () {
if ('webkitTransform' in slider.style) { var translate3d = slider.style[transformProperty].match(/translate3d\(([^,]*)/);
var translate3d = slider.style.webkitTransform.match(/translate3d\(([^,]*)/); var ret = translate3d ? translate3d[1] : 0;
var ret = translate3d ? translate3d[1] : 0; return parseInt(ret, 10);
return parseInt(ret, 10);
}
}; };
var setSlideNumber = function (offset) { var setSlideNumber = function (offset) {
@ -76,7 +91,7 @@
setSlideNumber(0); setSlideNumber(0);
slider.style['-webkit-transition-duration'] = 0; slider.style[transformPrefix + 'transition-duration'] = 0;
}; };
var onTouchMove = function (e) { var onTouchMove = function (e) {
@ -109,7 +124,7 @@
resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 : resistance = slideNumber === 0 && deltaX > 0 ? (pageX / sliderWidth) + 1.25 :
slideNumber === lastSlide && deltaX < 0 ? (Math.abs(pageX) / sliderWidth) + 1.25 : 1; 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 // started moving
startedMoving = true; startedMoving = true;
@ -127,8 +142,8 @@
offsetX = slideNumber * sliderWidth; offsetX = slideNumber * sliderWidth;
slider.style['-webkit-transition-duration'] = '.2s'; slider.style[transformPrefix + 'transition-duration'] = '.2s';
slider.style.webkitTransform = 'translate3d(' + offsetX + 'px,0,0)'; slider.style[transformProperty] = 'translate3d(' + offsetX + 'px,0,0)';
e = new CustomEvent('slide', { e = new CustomEvent('slide', {
detail: { slideNumber: Math.abs(slideNumber) }, detail: { slideNumber: Math.abs(slideNumber) },

25
js/toggles.js
Unescape View File

@ -15,6 +15,21 @@
var distanceX = false; var distanceX = false;
var toggle = 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 findToggle = function (target) {
var i; var i;
var toggles = document.querySelectorAll('.toggle'); var toggles = document.querySelectorAll('.toggle');
@ -73,13 +88,13 @@
e.preventDefault(); e.preventDefault();
if (distanceX < 0) { if (distanceX < 0) {
return (handle.style.webkitTransform = 'translate3d(0,0,0)'); return (handle.style[transformProperty] = 'translate3d(0,0,0)');
} }
if (distanceX > offset) { 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'); toggle.classList[(distanceX > (toggleWidth / 2 - handleWidth / 2)) ? 'add' : 'remove']('active');
}); });
@ -96,9 +111,9 @@
var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2))); var slideOn = (!touchMove && !toggle.classList.contains('active')) || (touchMove && (distanceX > (toggleWidth / 2 - handleWidth / 2)));
if (slideOn) { if (slideOn) {
handle.style.webkitTransform = 'translate3d(' + offset + 'px,0,0)'; handle.style[transformProperty] = 'translate3d(' + offset + 'px,0,0)';
} else { } else {
handle.style.webkitTransform = 'translate3d(0,0,0)'; handle.style[transformProperty] = 'translate3d(0,0,0)';
} }
toggle.classList[slideOn ? 'add' : 'remove']('active'); toggle.classList[slideOn ? 'add' : 'remove']('active');

Write Preview
Loading…
Cancel
Save