manabuyasuda

// @desc - `background-image`で破線を作ります
// @param {String} $height [1px] - 破線の高さを指定します。
// @param {String} $borderWidth [4px] - ボーダー（実線）の幅を指定します。
// @param {String} $borderColor [currentColor] - ボーダー（実線）の色を指定します。
// @param {String} $intervalWidth [2px] - 間隔の幅を指定します。
// @param {String} $intervalColor [transparent] - 間隔の色を指定します。
// @example scss - Usage
// .foo { @include dashed-line(1px, 4px, #000, 2px, transparent); }
//
// @example css - CSS output

manabuyasuda

require('dotenv').config({
  path: '.env.local',
})

const Client = require('node-rest-client').Client
const fs = require('fs')

const CMS_ROOT_ENDPOINT = `${process.env.CMS_ROOT_ENDPOINT}`
const CMC_API_KEY = `${process.env.CMC_API_KEY}`

manabuyasuda

// @desc - IE11だけを指定します。
// @example scss - Usage
// .ie {
//   @include onlyIE() {
//     color: red;
//   }
// }
//
// @example css - CSS output
// _:-ms-fullscreen, :root .ie {

manabuyasuda

/**
 * 要素の高さを取得します。
 * @param {HTMLElement} target 高さを取得する要素
 * @return {number} 小数点以下を含めた要素の高さ
 * @example
 * getHeight(document.querySelector('.foo'))
 */
const getHeight = target => {
  const el = target
  const isInvisibleElement =

manabuyasuda

/**
 * レスポンスに応じて例外を発生、またはレスポンスをそのまま返します。
 * @param {Response} response
 */
const handleErrors = (response) => {
  return new Promise((resolve) => {
    if (response.ok) {
      return resolve(response)
    }

manabuyasuda

// @desc  ボーダーで三角形を作ります。
// @param {String} $width
// @param {String} $height
// @param {String} $direction [right]
// @param {String} $color [currentColor]
// @param {Boolean} $baseStyles [true]
// @example scss - Usage
// .triangle {
//   &:before {
//     content: "";

manabuyasuda

// cubic-bezier() 関数で定義した、3次ベジェ曲線のタイミング関数です。
// `transition-timing-function`と`animation-timing-function`プロパティーに指定します。
// 実際の動きは、以下のサイトで確認できます。
// https://matthewlein.com/ceaser/
// easeは「ゆっくりと」、inは「始まる」、outは「終わる」に置き換えると想像しやすいです。
// IE9以上の対応ならフォールバックは不要です。

// linear：一定の速度で変化する
$linear: cubic-bezier(0.25, 0.25, 0.75, 0.75) !default;

manabuyasuda

const easing = {
  linear: 'cubic-bezier(0.25, 0.25, 0.75, 0.75)',
  // ease：開始時から急速に加速して、中盤から緩やかになる
  ease: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
  // ease-in：緩やかに始まり、次第に加速し、突然停止する
  easeIn: 'cubic-bezier(0.42, 0, 1, 1)',
  easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
  easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
  easeInQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
  easeInQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',

manabuyasuda

import { saveToClipboard } from './utils/saveToClipboard'

const keyword = document.getElementById('keyword')

document.getElementById('copyButton').addEventListener('click', (e) => {
  saveToClipboard(keyword)
  e.target.classList.add('-tooltip')
  setTimeout(() => {
    e.target.classList.remove('-tooltip')
  }, 1000)

manabuyasuda

/**
 * 指定された要素がイベントのターゲット要素に含まれているかどうかをチェックします。
 * @param {Event} event チェックしたい`click`などのイベント
 * @param {Array<string>} elements `DOMString`で指定した要素名の配列
 * @returns {boolean} ターゲット要素が指定された要素を含む場合はtrue、そうでない場合はfalse
 * @example
 * import { containsTargetElements } from '@utility/containsTargetElements'
 * document.addEventListener('click', (event) => {
 *   const elements = ['.foo', '#bar', '[data-baz]']
 *   const hasElements = containsTargetElements(event, elements) // => `true` or `false`