feat: opacity settings about mouse and touch event

[EYHN]

默认 opacity 最好为 1，透明的不好看。

或者默认 opacity 比较低，鼠标放上去 opacity 增加。

[xiazeyu]

~~Failure using jQuery: ~~

$(document).ready(function(){
document.getElementById("${config.id}").mouseover(function(){
$(this).fadeTo(600,0.95);
});

document.getElementById("${config.id}").mouseleave(function(){
$(this).fadeTo(500,0.7);
});
${config.opacity}
${config.fadeToOpacity}
});

Object doesn't support property or method 'mouseover'

Author:

Don't use jQuery!

[xiazeyu]

http://www.w3school.com.cn/css3/css3_transition.asp
http://www.w3school.com.cn/cssref/selector_hover.asp
http://www.w3school.com.cn/cssref/pr_transition.asp
Trying to use CSS3 transition to achieve it
Failed to use CSS3 transition

  <div id="hexo-helper-live2d">
      <canvas id="${config.id}" width="${config.width * config.scaling}" height="${config.height * config.scaling}" class="${config.className}"></canvas>
  </div>
    <style>
      #${config.id}{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: fixed;
        width: ${config.width}px;
        height: ${config.height}px;
        opacity:${config.opacityDefault};
        ${config.opacityDefault != config.opacityHover ? `transition:opacity 0.95s ease-out;
        -moz-transition:opacity 0.95s ease-out; /* Firefox 4 */
        -webkit-transition:opacity 0.95s ease-out; /* Safari and Chrome */
        -o-transition:opacity 0.95s ease-out; /* Opera */`: ``}
        ${config.position}: ${config.horizontalOffset}px;
        z-index: 999;
        pointer-events: none;
        bottom: ${config.verticalOffset}px;
      }
     ${config.opacityDefault != config.opacityHover ? `#${config.id}:hover{
        opacity:${config.opacityHover};
      }`: ``}
    </style>
    <script src="/live2d/device.min.js"></script>
    <script type="text/javascript">
    (function(){
    if(device.mobile()){
      ${config.mobileShow ? `document.getElementById("${config.id}").style.width = '${config.width * config.mobileScaling}px';
      document.getElementById("${config.id}").style.height = '${config.height * config.mobileScaling}px';
      document.write('<script type="text/javascript" src="/live2d/script.js"><\\/script>');
      document.write('<script>loadlive2d(${JSON.stringify(config.id)}, ${JSON.stringify(url.resolve("/live2d/assets/", config.model + ".model.json"))}, 0.5)<\\/script>');` : ``}
    }else{
      document.write('<script type="text/javascript" src="/live2d/script.js"><\\/script>');
      document.write('<script>loadlive2d(${JSON.stringify(config.id)}, ${JSON.stringify(url.resolve("/live2d/assets/", config.model + ".model.json"))}, 0.5)<\\/script>');
    }
    })();
    </script>

pointer-events: none; will conflict with hover, because if pointer-events: none; exists, no event can the canvas received.

[EYHN]

应该在 bundle.js 中。
那个 device.js 也是 包含在bundle中

https://www.npmjs.com/package/device.js

import { device } from 'device.js';

[xiazeyu]

• Now trying to added it into clientJs
  http://m.jb51.net/article/63841.htm
  http://m.jb51.net/article/45354.htm
  https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects
  https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
  监听onmousemove事件再获取一个鼠标位置算出是否hover
• maxinumDelay: 300ms

[xiazeyu]

Migrated to xiazeyu/live2d-widget.js#17