Fix the color picker in Chrome and hide the buttons when not supported

This commit is contained in:
yflory 2016-10-10 18:21:18 +02:00
parent 91b4446c0b
commit b23fe783e3
2 changed files with 20 additions and 6 deletions

View File

@ -136,6 +136,9 @@
background-position: bottom; background-position: bottom;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
#colorPicker_check {
display: block;
}
</style> </style>
</head> </head>
<body> <body>
@ -147,6 +150,7 @@
<div id="content"></div> <div id="content"></div>
</div> </div>
<div id="nope"></div> <div id="nope"></div>
<div id="colorPicker_check"></div>
</body> </body>
</html> </html>

View File

@ -458,21 +458,31 @@ define([
'style': 'font-family: FontAwesome; font-weight: bold; color: #fff; background: #000;', 'style': 'font-family: FontAwesome; font-weight: bold; color: #fff; background: #000;',
title: Messages.colorButton + '\n' + Messages.colorButtonTitle title: Messages.colorButton + '\n' + Messages.colorButtonTitle
}); });
$testColor = $('<input>', { type: 'color' }); $testColor = $('<input>', { type: 'color', value: '!' });
if ($testColor.attr('type') !== "color") {alert('not supported'); return;} var $check = $pad.contents().find("#colorPicker_check");
if ($testColor.attr('type') !== "color" || $testColor.val() === '!') { return; } // TODO
$back.on('click', function() { $back.on('click', function() {
$('<input>', { type: 'color', value: backColor }) var $picker = $('<input>', { type: 'color', value: backColor })
.on('change', function() { .on('change', function() {
updateColors(undefined, this.value); updateColors(undefined, this.value);
onLocal(); onLocal();
}).click(); });
$check.append($picker);
setTimeout(function() {
$picker.click();
}, 0);
}); });
$text.on('click', function() { $text.on('click', function() {
$('<input>', { type: 'color', value: textColor }) var $picker = $('<input>', { type: 'color', value: textColor })
.on('change', function() { .on('change', function() {
updateColors(this.value, undefined); updateColors(this.value, undefined);
onLocal(); onLocal();
}).click(); $check.html('');
});
$check.append($picker);
setTimeout(function() {
$picker.click();
}, 0);
}); });
$rightside.append($back).append($text); $rightside.append($back).append($text);