[conditionformat2] Possible fix for Safari incompatibility with color picker

[theredspoon]

Hi there @masaya-chikamoto @MaedaAs @north-river:

As the English documentation on Kintone Dev Network says, "The color picker is only available in Firefox and Chrome. It may not work on other browsers."

However, Safari 11 (released Sept 18, 2017) reports support for <input type="color"> (the 'color picker'). See https://caniuse.com/#feat=input-color

When I tested Conditional Format 2 plugin in the latest version of Safari (11.0.1) I was unable to generate a color picker window on click of the paintbrush.

I reviewed config.js lines 450-487 and I understand that clicking on the paintbrush <i> element runs a jQuery function that clicks on a hidden <input type="color"> element.

When I comment out display: none in the stylesheet for .cf-plugin-column5-color and .cf-plugin-column6-color classes that are responsible for hiding that element, a tiny square appears to the right of the paintbrush. Clicking on the paintbrush now generates the color picker. The color picker pops up from out of the tiny square.

It makes sense that the input element is hidden in Chrome and Firefox--it's UGLY. But hiding it in Safari breaks the color picker.

I researched to find a good way to check if the user is browsing with Safari and to get the browser version number.

I'm thinking that in line 243, right before the setTextDefault function definition, we can add:

function isSafariAtLeastVersion11() {
  let isSafari = Boolean(navigator.vendor) && navigator.vendor.indexOf('Apple') > -1 &&
                 Boolean(navigator.userAgent) && !navigator.userAgent.match('CriOS');

  let nAgt = navigator.userAgent;
  
  let fullVersion = "" + parseFloat(navigator.appVersion); 
  let majorVersion = parseInt(navigator.appVersion, 10);
  let verOffset;

  if (nAgt.indexOf("Safari") !== -1 && nAgt.indexOf("Chrome") === -1) {
    verOffset = nAgt.indexOf("Safari");
    fullVersion = nAgt.substring(verOffset + 7);
    if (nAgt.indexOf("Version") !== -1) {
      verOffset = nAgt.indexOf("Version");
      fullVersion = nAgt.substring(verOffset + 8);
    }
  }

  majorVersion = parseInt("" + fullVersion, 10);

  return isSafari && majorVersion >= 11;
}

(I tested the following code in a codepen on a variety of different OSes and browsers to make sure it was getting the expected outcome.)

Then we can change the instances of the two classes .cf-plugin-column5-color and .cf-plugin-column6-color to variables whose value is an empty string when isSafariAtLeastVersion11() is true.

.cf-plugin-column5-color is referenced on lines 270, 309, 465.
.cf-plugin-column6-color is referenced on lines 273, 276, 313, 315, 475.

Thoughts?