Why I can’t scroll to select a value in my Sheet picker?
Here’s the code:
// Accent color
function color() {
}
var colors = [
{ name: ‘Default’, value: ‘#3E84F6’ },
{ name: ‘Red’, value: ‘#FF6347’ },
{ name: ‘Green’, value: ‘#32CD32’ },
{ name: ‘Orange’, value: ‘orange’ },
{ name: ‘Pink’, value: ‘pink’ },
{ name: ‘Grey’, value: ‘grey’ }
];
var colorButton = document.querySelector(‘.open-color-picker’);
var colorPicker = null;
function initializeColorPicker() {
colorPicker = app.picker.create({
openIn: ‘auto’,
inputEl: colorButton,
rotateEffect: true,
sheetPush: true,
sheetSwipeToClose: true,
cols: [
{
textAlign: ‘center’,
values: colors.map(function (color) {
return color.name;
}),
displayValues: colors.map(function (color) {
return color.name;
})
}
],
on: {
change: function (picker, values) {
var selectedColor = colors.find(function (color) {
return color.name === values[0];
});
if (selectedColor) {
document.documentElement.style.setProperty('--f7-ios-primary', selectedColor.value);
document.documentElement.style.setProperty('--f7-ios-primary-shade', selectedColor.value);
document.documentElement.style.setProperty('--f7-ios-primary-tint', selectedColor.value);
localStorage.setItem('colorPreference', selectedColor.value);
}
}
}
});
var savedColor = localStorage.getItem(‘colorPreference’);
if (savedColor) {
document.documentElement.style.setProperty(‘–f7-ios-primary’, savedColor);
document.documentElement.style.setProperty(‘–f7-ios-primary-shade’, savedColor);
document.documentElement.style.setProperty(‘–f7-ios-primary-tint’, savedColor);
colorPicker.setValue([colors.find(function (color) { return color.value === savedColor; }).name]);
}
}
function color() {
if (colorPicker === null) {
initializeColorPicker();
} else {
colorPicker.open();
}
}
colorButton.addEventListener(‘click’, color);
initializeColorPicker();