codepunter-react-wheelpicker
Version:
A customizable React wheel picker bringing iOS-like functionality to the web, maintained by CodePunter.
130 lines (126 loc) • 9.46 kB
JavaScript
;
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
value: true
});
exports.applyStyle = applyStyle;
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
function applyStyle(scrollerId, itemInSelectorArea, dataLen) {
var style = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "flat";
return function (style, _context3, _context12, _context13, _context14, _context15, _context16, _context17, _context18) {
var style = style || 'flat';
switch (style) {
case 'flat':
console.log('flat applied');
var topShadeItem = itemInSelectorArea;
var topFade = 1;
while (topShadeItem >= 0) {
var _context, _context2;
console.log('shading');
document.getElementById((0, _concat["default"])(_context = "".concat(scrollerId, "-scroll-item--")).call(_context, topShadeItem)).style.transition = "all 0.3s";
document.getElementById((0, _concat["default"])(_context2 = "".concat(scrollerId, "-scroll-item--")).call(_context2, topShadeItem)).style.opacity = "".concat(topFade);
topFade -= 0.333333;
topShadeItem--;
}
document.getElementById((0, _concat["default"])(_context3 = "".concat(scrollerId, "-scroll-item--")).call(_context3, itemInSelectorArea)).style.opacity = "1";
var bottomFade = 0.66666;
var bottomShade = itemInSelectorArea + 1;
for (var i = bottomShade; i < dataLen; i++) {
var _context4, _context5;
document.getElementById((0, _concat["default"])(_context4 = "".concat(scrollerId, "-scroll-item--")).call(_context4, i)).style.transition = "all 0.3s";
document.getElementById((0, _concat["default"])(_context5 = "".concat(scrollerId, "-scroll-item--")).call(_context5, i)).style.opacity = "".concat(bottomFade);
bottomFade -= 0.33333;
}
break;
case 'wheel':
console.log('wheel applied');
var scrollSelectorArea = document.getElementById(scrollerId + "--scroll-selector-area");
scrollSelectorArea.style.border = 'unset';
var topShadeItem = itemInSelectorArea - 1;
var topFade = 0.6666;
var topRotate = 45;
var topWidth = 97;
var topMarginBottom = 5;
var topBackground = 255;
while (topShadeItem >= 0) {
var _context6, _context7, _context8, _context9, _context10, _context11;
// scroller.style.paddingTop = `${paddingTop+ (10*itemInSelectorArea)}px`
console.log('shading');
document.getElementById((0, _concat["default"])(_context6 = "".concat(scrollerId, "-scroll-item--")).call(_context6, topShadeItem)).style.transition = "all 0.3s";
// document.getElementById(`${scrollerId}-scroll-item--${topShadeItem}`).style.transition = `color 0.5s`
// document.getElementById(`${scrollerId}-scroll-item--${topShadeItem}`).style.transition = `opacity 0.5s`
// document.getElementById(`${scrollerId}-scroll-item--${topShadeItem}`).style.transition = `font-weight 0.2s ease-in-out`
document.getElementById((0, _concat["default"])(_context7 = "".concat(scrollerId, "-scroll-item--")).call(_context7, topShadeItem)).classList.add('wheel-item');
document.getElementById((0, _concat["default"])(_context8 = "".concat(scrollerId, "-scroll-item--")).call(_context8, topShadeItem)).style.transform = "rotateX(".concat(topRotate, "deg)");
document.getElementById((0, _concat["default"])(_context9 = "".concat(scrollerId, "-scroll-item--")).call(_context9, topShadeItem)).style.width = "calc(".concat(topWidth, "% - 10px)");
document.getElementById((0, _concat["default"])(_context10 = "".concat(scrollerId, "-scroll-item--")).call(_context10, topShadeItem)).style.marginTop = "".concat(topMarginBottom, "px");
document.getElementById((0, _concat["default"])(_context11 = "".concat(scrollerId, "-scroll-item--")).call(_context11, topShadeItem)).style.opacity = "".concat(topFade);
topRotate += 20;
topWidth -= 3;
topMarginBottom += 19;
topFade -= 0.333333;
topShadeItem--;
}
// reset middle element =======
document.getElementById((0, _concat["default"])(_context12 = "".concat(scrollerId, "-scroll-item--")).call(_context12, itemInSelectorArea)).classList.add('wheel-item');
document.getElementById((0, _concat["default"])(_context13 = "".concat(scrollerId, "-scroll-item--")).call(_context13, itemInSelectorArea)).style.transform = "rotateX(0deg)";
document.getElementById((0, _concat["default"])(_context14 = "".concat(scrollerId, "-scroll-item--")).call(_context14, itemInSelectorArea)).style.width = "calc(99% - 10px)";
document.getElementById((0, _concat["default"])(_context15 = "".concat(scrollerId, "-scroll-item--")).call(_context15, itemInSelectorArea)).style.marginTop = "unset";
document.getElementById((0, _concat["default"])(_context16 = "".concat(scrollerId, "-scroll-item--")).call(_context16, itemInSelectorArea)).style.marginBottom = "unset";
document.getElementById((0, _concat["default"])(_context17 = "".concat(scrollerId, "-scroll-item--")).call(_context17, itemInSelectorArea)).style.opacity = "1";
document.getElementById((0, _concat["default"])(_context18 = "".concat(scrollerId, "-scroll-item--")).call(_context18, itemInSelectorArea)).style.transition = "all 0.3s";
// document.getElementById(`${scrollerId}-scroll-item--${itemInSelectorArea}`).style.transition = `color 0.5s`
// document.getElementById(`${scrollerId}-scroll-item--${itemInSelectorArea}`).style.transition = `opacity 0.5s`
// document.getElementById(`${scrollerId}-scroll-item--${itemInSelectorArea}`).style.transition = `font-weight 0.2s ease-in-out`
// ----------------------
var bottomRotateItem = itemInSelectorArea + 1;
var bottomFade = 1;
var bottomRotate = 45;
var bottomWidth = 97;
var bottomMarginTop = 5;
for (var i = bottomRotateItem; i < dataLen; i++) {
var _context19, _context20, _context21, _context22, _context23, _context24;
console.log('bottom item = ', i);
document.getElementById((0, _concat["default"])(_context19 = "".concat(scrollerId, "-scroll-item--")).call(_context19, i)).style.transition = "all 0.3s";
// document.getElementById(`${scrollerId}-scroll-item--${i}`).style.transition = `color 0.5s`
// document.getElementById(`${scrollerId}-scroll-item--${i}`).style.transition = `opacity 0.5s`
// document.getElementById(`${scrollerId}-scroll-item--${i}`).style.transition = `font-weight 0.2s ease-in-out`
document.getElementById((0, _concat["default"])(_context20 = "".concat(scrollerId, "-scroll-item--")).call(_context20, i)).classList.add('wheel-item');
document.getElementById((0, _concat["default"])(_context21 = "".concat(scrollerId, "-scroll-item--")).call(_context21, i)).style.transform = "rotateX(-".concat(bottomRotate, "deg)");
document.getElementById((0, _concat["default"])(_context22 = "".concat(scrollerId, "-scroll-item--")).call(_context22, i)).style.width = "calc(".concat(bottomWidth, "% - 10px)");
document.getElementById((0, _concat["default"])(_context23 = "".concat(scrollerId, "-scroll-item--")).call(_context23, i)).style.marginTop = "-".concat(bottomMarginTop, "px");
document.getElementById((0, _concat["default"])(_context24 = "".concat(scrollerId, "-scroll-item--")).call(_context24, i)).style.opacity = "".concat(bottomFade);
bottomRotate += 20;
bottomWidth -= 3;
bottomMarginTop += 19;
bottomFade -= 0.33333;
}
break;
default:
// flat
// color fade
var topShadeItem = itemInSelectorArea;
var topFade = 1;
var topRotate = 50;
while (topShadeItem >= 0) {
var _context25, _context26, _context27;
// console.log('shading')
document.getElementById((0, _concat["default"])(_context25 = "".concat(scrollerId, "-scroll-item--")).call(_context25, topShadeItem)).style.transition = "all 0.3s";
document.getElementById((0, _concat["default"])(_context26 = "".concat(scrollerId, "-scroll-item--")).call(_context26, topShadeItem)).style.opacity = "".concat(topFade);
document.getElementById((0, _concat["default"])(_context27 = "".concat(scrollerId, "-scroll-item--")).call(_context27, topShadeItem)).style.transform = "rotateY()";
topFade -= 0.333333;
topShadeItem--;
}
var bottomFade = 0.66666;
var bottomShade = itemInSelectorArea + 1;
for (i = bottomShade; i < dataLen; i++) {
var _context28, _context29;
document.getElementById((0, _concat["default"])(_context28 = "".concat(scrollerId, "-scroll-item--")).call(_context28, i)).style.transition = "all 0.3s";
document.getElementById((0, _concat["default"])(_context29 = "".concat(scrollerId, "-scroll-item--")).call(_context29, i)).style.opacity = "".concat(bottomFade);
bottomFade -= 0.33333;
}
break;
}
}(style);
}