manabuyasuda

@use '@root/common/styles/index.scss' as *;

.tooltip_content {
  z-index: 1;
  width: 510px;
  max-width: 100%;
  padding: 8px;
  border-radius: 8px;
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;

manabuyasuda

.bordering {
  position: relative;
  color: #fff;
  -webkit-text-stroke: 4px #000; // デザインデータ上の縁取り×2

  &::before {
    content: attr(data-text);
    position: absolute;
    -webkit-text-stroke: 0;
  }

manabuyasuda

import SweetScroll from 'sweet-scroll'

/**
 * スムーススクロールの共通処理です。
 * https://github.com/tsuyoshiwada/sweet-scroll
 * @example
 * import { scroller } from '@utility/scroller'
 * const element = document.getElementById('element')
 * scroller.toElement(element)
 * element.setAttribute('tabindex', '-1')

manabuyasuda

/**
 * 配列を比較して、1つでも重複があれば`true`を返す
 * @param {Array} arr1
 * @param {Array} arr2
 * @returns {Boolean}
 */
const isDuplicateArray = (arr1, arr2) => {
  return (
    [...arr1, ...arr2].filter(item => arr1.includes(item) && arr2.includes(item)).length > 0
  )

manabuyasuda

/**
 * @classdesc 対象要素内の見出しを検索して目次を生成します。
 * @author Manabu Yasuda <info@manabuyasuda.com>
 * @example
 * import Toc from '@lib/Toc'
 * const toc = new Toc({
 *   tocSelector: '.toc',
 *   contentSelector: '.content',
 *   headingSelector: 'h2',
 *   listClass: 'list',

manabuyasuda

import { debounce } from '@utility/debounce'
import { throttle } from '@utility/throttle'

/**
 * @classdesc 指定した要素までスクロールしたかを検知してコールバック関数で処理を実行します。
 * @author Manabu Yasuda <info@manabuyasuda.com>
 * @example
 * import ScrollFixed from '@lib/ScrollFixed'
 *
 * const fixed = new ScrollFixed({

manabuyasuda

//- @param {Object} params
//- @param {String} params.width [null] セルの横幅
//- @param {String} params.parentWidth [null] テーブル全体の横幅
//- 
//- @examples Input
//- colgroup
//-   +Col({ width: 300, parentWidth: 900 })
//-   +Col({ width: "300", parentWidth: "900" })
//-   +Col({ width: "300px", parentWidth: "900px" })
//-

manabuyasuda

// `npm i -D glob js-beautify`
const fs = require('fs')
const glob = require('glob')
const beautify = require('js-beautify')
const beautifyOptions = {
  indent_size: 2,
  end_with_newline: true,
  preserve_newlines: false,
  max_preserve_newlines: 0,
  wrap_line_length: 0,

manabuyasuda

/**
 * 要素の幅と高さを取得します。
 * @param {HTMLElement} target 幅と高さを取得する要素
 * @return {{width: Number, height: Number}}
 * @example
 * const foo = getSize(document.querySelector('.foo'))
 * console.log(foo) // => {width: 300, height: 200}
 * console.log(foo.width) // => 300
 * console.log(foo.height) // => 200
 */

manabuyasuda

/**
 * 仕様としてフォーカス可能な要素。
 */
const focusableElementsString =
  'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), input[type="search"]:not([disabled]), select:not([disabled])'

/**
 * 仕様としてフォーカス可能、かつ`tabindex="-1"`が指定されていない要素。
 */
const currentFocusableElementsString =