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

8 years ago · b23fe783e3
parent 91b4446c0b
commit b23fe783e3
2 changed files with 20 additions and 6 deletions
--- a/www/slide/inner.html
+++ b/www/slide/inner.html
@ -136,6 +136,9 @@
        background-position: bottom;
        background-repeat: repeat-x;
      }
+      #colorPicker_check {
+        display: block;
+      }
    </style>
 </head>
 <body>
@ -147,6 +150,7 @@
        <div id="content"></div>
    </div>
    <div id="nope"></div>
+    <div id="colorPicker_check"></div>
 </body>
 </html>

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

                    $rightside.append($back).append($text);