[編集モード] DOM和属性革命プラグイン

すべてのDOMはDOM和属性、DOM和スタイルの辞書キーを得る

/*
 Object.definePropertyを初めて知ったのでウキウキしながら命令にしました
 js部分はcopilot作
 注意：取り込んだ時に革命が起きます（●DOM和属性革命が実行されます）
 
 効能：すべてのDOMはDOM和属性、DOM和スタイルの辞書キーを得る
 
 
 DOM和属性＠hogeをユーザー側で追加する場合は、追加後に「DOM和属性革命」命令を実行することで有効になります。
 
 
 //ゲッター・セッター命令
 ※ 注意：用法を誤ると無限ループが発生します
 ●値セットした時(funcでobjのkeyを|keyに)
 ●値ゲットした時(funcでobjのkeyを|keyから)
 
 //新DOM和属性命令　domに辞書キーを追加する
 ※ 注意：HTMLElement.prototypeに追加します
 ●DOM和属性追加（jpKeyをoriginalKeyに|originalKeyへ）
 ●DOM和スタイル追加（jpKeyをoriginalKeyに|originalKeyへ）
 
 ●DOM和属性革命()　　//すべてのDOMはDOM和属性、DOM和スタイルの辞書キーを得る
 
*/

//-----------------------
//objのkeyに値を出し入れするとoriginalKeyから出し入れする（変数エイリアス作成）
●defineProperty(obj,jpkey,originalKey)：
　『(function (obj, jpKey, originalKey) {
  Object.defineProperty(obj, jpKey, {
    get() {return this[originalKey]},
    set(v) {this[originalKey] = v;},
    enumerable: false,
    configurable: true
  });
})』を[obj, jpkey, originalKey]でJS関数実行
　objを戻す
/*
日本語名が決まらなかった
●呼称する(objのoriginalKeyをjpkeyと)：
　defineProperty(obj,jpkey,originalKey)
●代行する(objのjpkeyがoriginalKeyを)：
　defineProperty(obj,jpkey,originalKey)
●任命する(objのjpkeyをoriginalKeyに)：
　defineProperty(obj,jpkey,originalKey)
●業務委託(objのjpkeyにoriginalKeyを)：
　defineProperty(obj,jpkey,originalKey)
*/

//-----------------------
 //ゲッター・セッター命令
 ※ 注意：用法を誤ると無限ループが発生します
//-----------------------
//辞書型objのkeyに値を入れた時、funcを実行します
●値セットした時(funcでobjのkeyを|keyに|keyへ)：
　『(
function 値セット時(func, obj, key) {
  const desc = Object.getOwnPropertyDescriptor(obj, key) || {};
  Object.defineProperty(obj, key, {
    get: desc.get || function () {},
    set: function (value) {
      sys.__setSysVar('対象', this);
      func(value);
    },
    enumerable: true,
    configurable: true
  });
})』を[func, obj, key]でJS関数実行
　objを戻す

//辞書型objのkeyの値を取得した時、funcを実行します
●値ゲットした時(funcでobjのkeyを|keyに|keyへ|keyから)：
　『(
function 値ゲット時(func, obj, key) {
  const desc = Object.getOwnPropertyDescriptor(obj, key) || {};
  Object.defineProperty(obj, key, {
    get: function () {
      sys.__setSysVar('対象', this);
      return func();
    },
    set: desc.set || function (value) { obj[key] = value },
    enumerable: true,
    configurable: true
  });
})』を[func, obj, key]でJS関数実行
　objを戻す

//-----------------------
 //新DOM和属性命令
 ※ 注意：HTMLElement.prototypeに追加します
//-----------------------
//日本語名と英語名(domの属性名)を指定してDOMのプロパティに紐づけします
●DOM和属性追加（jpKeyをoriginalKeyに|originalKeyへ|originalKeyとして）：
　DOM和属性[jpKey] = originalKey //追加
　『(
function DOM和属性追加(jpKey, originalKey) {
  Object.defineProperty(HTMLElement.prototype, jpKey, {
    // domのプロパティを確認して存在すればその値を設定する #1392
    get() {
      if (originalKey in this) {
        return this[originalKey];
      } else {
        return this.getAttribute(originalKey);
      }
    },
    set(v) {
      if (originalKey in this) {
        this[originalKey] = v;
      } else {
        this.setAttribute(originalKey, v === true ? "" : String(v));
      }
    },
    enumerable: false,
    configurable: true
  });
})』を[jpKey, originalKey]でJS関数実行

//日本語名と英語名(domのcssプロパティ名)を指定してDOMのスタイルに紐づけします
●DOM和スタイル追加（jpKeyをoriginalKeyに|originalKeyへ|originalKeyとして）：
　DOM和スタイル[jpKey] = originalKey //追加
  『(function DOMスタイル追加(jpKey, originalKey) {

// kebab-case → camelCase 変換
  function toCamelCase(cssName) {
    return cssName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
  }

const camelKey = toCamelCase(originalKey);

Object.defineProperty(HTMLElement.prototype, jpKey, {
    get() {
      return this.style[camelKey];
    },
    set(v) {
      this.style[camelKey] = v;
    },
    enumerable: false,
    configurable: true
  });
})』を[jpKey, originalKey]でJS関数実行

//注意：取り込んだ時にDOM和属性革命が実行されます
//すべてのDOMはDOM和属性、DOM和スタイルの辞書キーを得る（クリアで消えません　あしからず）
●DOM和属性革命
　DOM和属性を反復：
　　　対象キーを対象へDOM和属性追加
　DOM和スタイルを反復：
　　　対象キーを対象へDOM和スタイル追加
　「ソース」を「src」へDOM和属性追加 //img、audio、video
　
　
　//DOMプロパティ情報がhookであるものは関数へ
　変数　HTMLElementprototype　= 『HTMLElement.prototype』をJS実行
　HTMLElementprototypeの"有効"を値セットした時には (v) DOM有効設定(対象,v)。。。
　HTMLElementprototypeの"有効"を値ゲットした時には  DOM有効取得(対象)。。。
　HTMLElementprototypeの"可視"を値セットした時には (v) DOM可視設定(対象,v)。。。
　HTMLElementprototypeの"可視"を値ゲットした時には  DOM可視取得(対象)。。。
　HTMLElementprototypeの"ポケット"を値セットした時には (v) DOMポケット設定(対象,v)。。。
　HTMLElementprototypeの"ポケット"を値ゲットした時には  DOMポケット取得(対象)。。。
　HTMLElementprototypeの"ヒント"を値セットした時には (v) DOMヒント設定(対象,v)。。。
　HTMLElementprototypeの"ヒント"を値ゲットした時には  DOMヒント取得(対象)。。。
　HTMLElementprototypeの"テキスト"を値セットした時には (v) DOMテキスト設定(対象,v)。。。
　HTMLElementprototypeの"テキスト"を値ゲットした時には  DOMテキスト取得(対象)。。。
　/*
//↑のスクリプト作成用
結果=「」
DOMプロパティ情報を反復：
　もし対象が「hook」ならば：
　　結果=結果に「HTMLElementprototypeの"{対象キー}"を値セットした時には (v) DOM{対象キー}設定(対象,v)。。。」を一行追加
　　結果=結果に「HTMLElementprototypeの"{対象キー}"を値ゲットした時には  DOM{対象キー}取得(対象)。。。」を一行追加
結果のテキストエリア作成
*/
　
　//セレクトボックス専用　
　変数　HTMLSelectElement = 『HTMLSelectElement.prototype』をJS実行
　{
　　"値":"selectedIndex",
　　"行":"size"
　}を反復：
　　　defineProperty(HTMLSelectElement,対象キー,対象)
　
　HTMLSelectElementの「アイテム」を値セットした時には (v)：
　　　vを対象へセレクトボックスアイテム設定
　HTMLSelectElementの「アイテム」を値ゲットした時には：
　　　配列マップ(関数(v)　それはv["label"]。。。,対象["options"])
　HTMLSelectElementの「テキスト」を値ゲットした時には　対象["value"]を戻す。。。
　
　//オーディオ、ビデオタグ共通
　変数　HTMLMediaElement = 『HTMLMediaElement.prototype』をJS実行
　{
　　"再生位置":"currentTime"
　　"シーク中","seeking"
　　"長さ","duration"
　　"完了","ended"
　　"ミュート","muted"
　　"ループ","loop"
　　"準備完了","readyState"
　　"自動再生","autoplay"
　}を反復：
　　　defineProperty(HTMLMediaElement,対象キー,対象)
　
　//ビデオタグ　上記も参照
　変数　HTMLVideoElement = 『HTMLVideoElement.prototype』をJS実行
　{
　　"ビデオ高","videoHeight"
　　"ビデオ幅","videoWidth"
　　"画像","poster"
　}を反復：
　　　defineProperty(HTMLVideoElement,対象キー,対象)
　
ここまで

/*
　//ちからつきました
　//キャンバス　　キャンバス＠「文字色」など
　//変数　HTMLCanvasElement = 『HTMLCanvasElement.prototype』をJS実行
　//{
　//　"文字色":""
　//　"文字サイズ":"font-size"
　//}を反復
　//　　canvas.getContext('2d').
*/

//-----------------------

もしプラグイン名が「メイン」ならば：
　　「使用方法は[https://n3s.nadesi.com/id.php?3148](https://n3s.nadesi.com/id.php?3148)を参照」をマークダウンHTML変換
　　それのラベル作成
違えば：
　　//取り込んだ時に革命が起きます
　　//現在・過去・未来のすべてのDOMはDOM和属性、DOM和スタイルの辞書キーを得る（クリアで消えません　あしからず）
　　DOM和属性革命

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] DOM和属性革命プラグイン

素材のアップロード