JavaScriptのよくやる処理を関数にまとめた

一番下にコードだけまとめてあります

要素の関数 (JQuery)

一時的にクラスをつける

jQuery.prototype.setTmpClass = function(_class, _ms) {
    this.addClass(_class);
    return setTimeout(
        (() => { this.removeClass(_class); }),
        _ms
    );
}

一番下にスクロールする

jQuery.prototype.scrolToBottom = function() {
    this.scrollTop(this[0].scrollHeight);
}

上下左右中央にスクロールする

jQuery.prototype.scrolToCenter = function() {
    let maxScrollLeft = this[0].scrollWidth - this[0].clientWidth;
    let maxScrollTop = this[0].scrollHeight - this[0].clientHeight;
    this.scrollLeft(maxScrollLeft / 2);
    this.scrollTop(maxScrollTop / 2);
}

その座標が要素上に存在しているか

let p = {x:100, y:200};

jQuery.prototype.containsPoint = function(_p) {
    let offset = this.offset();
    let x = _p.x - offset.left;
    let y = _p.y - offset.top;
    return (0 <= x && 0 <= y && x <= this.width() && y <= this.height());
}

要素上の中央座標(要素の左上を(0, 0)として)

jQuery.prototype.offsetCenter = function() {
    let left = this.offset().left;
    let top = this.offset().top;
    let x = Math.round(left + (this.width() / 2));
    let y = Math.round(top + (this.height() / 2));
    return { x, y }
}

数値の関数

範囲内であるかどうか

Number.prototype.inRange = function (_min, _max) {
  return _min <= this && this < _max;
};

clamp (min/max範囲に押さえつける)

Number.prototype.clamp = function (_min, _max) {
  return Math.min(Math.max(this, _min), _max);
};

パーセンテージ

Number.prototype.percentage = ( _min, _max) => {
    let p = Math.round(100 * (this - _min) / (_max - _min));
    if (p < 0) {
        return 0;
    } else if (100 < p) {
        return 100;
    } else {
        return p;
    }
}

二次元ベクトルの関数

二点間の距離

let p0 = {x:100, y:200};
let p1 = {x:300, y:400};

function distance(_p0, _p1) {
  return Math.sqrt(Math.pow(_p1.x - _p0.x, 2) + Math.pow(_p1.y - _p0.y, 2));
}

合成 (点p0から点p1へのベクトル)

let p0 = {x:100, y:200};
let p1 = {x:300, y:400};

function composite(_p0, _p1) {
  return {
    x: _p1.x - _p0.x,
    y: _p1.y - _p0.y,
  };
}

ベクトルの大きさ (線分の長さ)

let p = {x:100, y:200};

function magnitude(_p) {
  return Math.sqrt(_p.x *_p.x + _p.y* _p.y);
}

正規化

let p = {x:100, y:200};

function normalize(_p) {
  let mag = magnitude(_p);
  if (mag === 0) {
    return {
      x: 0,
      y: 0,
    };
  } else {
    return {
      x: _p.x / mag,
      y: _p.y / mag,
    };
  }
}

コードまとめ

jQuery.prototype.setTmpClass = function(_class, _ms) {
    this.addClass(_class);
    return setTimeout(
        (() => { this.removeClass(_class); }),
        _ms
    );
}

jQuery.prototype.scrolToBottom = function() {
    this.scrollTop(this[0].scrollHeight);
}

jQuery.prototype.scrolToCenter = function() {
    let maxScrollLeft = this[0].scrollWidth - this[0].clientWidth;
    let maxScrollTop = this[0].scrollHeight - this[0].clientHeight;
    this.scrollLeft(maxScrollLeft / 2);
    this.scrollTop(maxScrollTop / 2);
}

jQuery.prototype.containsPoint = function(_p) {
    let offset = this.offset();
    let x = _p.x - offset.left;
    let y = _p.y - offset.top;
    return (0 <= x && 0 <= y && x <= this.width() && y <= this.height());
}

jQuery.prototype.offsetCenter = function() {
    let left = this.offset().left;
    let top = this.offset().top;
    let x = Math.round(left + (this.width() / 2));
    let y = Math.round(top + (this.height() / 2));
    return { x, y }
}

Number.prototype.inRange = function (_min, _max) {
  return _min <= this && this < _max;
};

Number.prototype.clamp = function (_min, _max) {
  return Math.min(Math.max(this, _min), _max);
};

Number.prototype.percentage = ( _min, _max) => {
    let p = Math.round(100 * (this - _min) / (_max - _min));
    if (p < 0) {
        return 0;
    } else if (100 < p) {
        return 100;
    } else {
        return p;
    }
}

function distance(_p0, _p1) {
  return Math.sqrt(Math.pow(_p1.x - _p0.x, 2) + Math.pow(_p1.y - _p0.y, 2));
}

function composite(_p0, _p1) {
  return {
    x: _p1.x - _p0.x,
    y: _p1.y - _p0.y,
  };
}

function magnitude(_p) {
  return Math.sqrt(_p.x *_p.x + _p.y* _p.y);
}

function normalize(_p) {
  let mag = magnitude(_p);
  if (mag === 0) {
    return {
      x: 0,
      y: 0,
    };
  } else {
    return {
      x: _p.x / mag,
      y: _p.y / mag,
    };
  }
}