HtmlTs

概要

TypeScript製のHTML要素を作成を支援するライブラリです。 コードでHTMLを作成したい人向けのライブラリです。 一見jQueryみたいな感じで使えますが、必要ないメソッドは省略しています。(jQueryフリー) decoratorを切り替えることによって様々なCSS Frameworkに対応できます。（デフォルトではプレーンなものです） SampleとしてBootstrap4を実装しています。

使い方

<script src="./htmlts.js"></script>

destにあるJSファイルを読み込むだけです。

bootstrap4で使う場合は下記も追記してください。

<script src="./htmltsBootstrap4.js"></script>

module

htmlts - Coreライブラリです.
htmlts.table - テーブル作成系です。
htmlts.input - input系です。(validatorもついてます)

Module Sample

htmls

htmlts.create

下記の様にしてHTML要素を作成します。

// objには HtmlTs要素が返ります。HtmlTsオブジェクトがどんなメソッドを持っているかは後述します。
var obj = htmlts.create(`${TagName}`);

第二引数にはいろんなものをとることができます。簡単にHTML要素を作成できるようになっています。

// 空のdiv要素を作成
var div = htmlts.create("div");

// テキストを指定しながらP要素を作成
var p = htmlts.create("p", "なにかのテキスト");

// 中身に色々指定しながらdiv要素を作成
var div2 = htmlts.create("div", {
  class: "some class to add", // 要素に追加したいclass。 string | string[]
  // Attributeも設定できます。jQueryのattrをまとめて設定する感じです。
  attr: {
    "id": "id_div",
    "title": "Title属性です",
  },
  // cssも設定できます。jQueryのcssをまとめて設定する感じです。
  css: {
    "height": "5rem",
    "width": "10rem",
  },
  // 要素に追加したい中身
  content: [
    123, // numberはspan要素でwrapされます
    "なにかの文字列", // numberはspan要素でwrapされます
		htmlts.create("p", ""), // HtmlTsオブジェクトもネストできます。この例ではdiv要素の下にp要素を追加します。
  ],
  click: (element) => {
    // 要素をクリックした時の動作もまとめて設定できます。
    console.log("clicked!");
	},
});

// もちろん設定したくない場合は空でも作成できます。
var div3 = htmlts.create("div", {});

第二引数をObjectで渡したときに使用できるパラメータ

param	type(型)	備考
class	string | string[]	作成した
attr	{[key: string]: string}	適用したい属性
css	{[key: string]: string}	適用したいCSS
content	string | number | HtmlTs | Array<string | number | HtmlTs>	中身。
click	function(elemnt)	clickした時のfunction。第一引数にHtmlElementがきます。

それぞれのパラメータはなくても大丈夫です。

htmlts.createById

idを指定して既存のHtml要素をHtmlTsオブジェクト化します。作成したHtmlTs要素をHtmlに反映するときなどに使ってください。

var obj = htmlts.create("p", "こんにちは");
htmlts.createById("some_id").appen(
	obj
).append(
	htmlts.create("p", "HtmlTs!")
);

HtmlTsオブジェクト

持っているパラメータは下記です。

name	type	備考
parent	HtmlTs | undefind	親要素です。 厳密に構造化しにいません。 appendで作成された時だけあります。 なのでHtmlにあってもundefinedの時があります。
children	HtmlTs[]	appendで追加されたものが入ります。
htmlElement	Element	実際のhtmlElementです。 jQueryでいうところのget(0)でとれるやつです。

下記のメソッドが使えます。

method	引数	返り値	備考
append	HtmlTs | HtmlTs[]	HtmlTs	子要素を最後尾に追加します。 jQueryのappendと一緒でメソッドチェーンできます。
prepend	HtmlTs | HtmlTs[]	HtmlTs	子要素を先頭に追加します。 jQueryのappendと一緒でメソッドチェーンできます。
empty		HtmlTs	子要素を削除します。 jQueryのappendと一緒でメソッドチェーンできます。
remove		HtmlTs	自身を削除します。 jQueryのremoveと一緒。
setText	string	HtmlTs	テキストノードを設定します。 メソッドチェーンできます。
getText		string	テキストノードの中身を返します。
addClass	string | string[]	HtmlTs	クラスを追加します。 jQueryのaddClassと一緒でメソッドチェーンできます。
hasClass	string	boolean	指定したクラスを持っているかbooleanを返します。
removeClass	string | string[]	HtmlTs	指定したクラスを削除します。 jQueryのremoveClassと一緒でメソッドチェーンできます。
setCss	備考を参照	HtmlTs	cssを設定します。 jQueryのcss()と一緒で css(param, value)や css({param: vlue, ...})の様にかけます。 メソッドチェーンできます。
setAttr	備考を参照	HtmlTs	属性を設定します。 jQueryのattr()と一緒で attr(param, value)や attr({param: vlue, ...})の様にかけます。 メソッドチェーンできます。
setAttr	備考を参照	HtmlTs	指定したクラスを削除します。 jQueryのremoveClassと一緒でメソッドチェーンできます。
getAttr	string	string	指定した属性の値が返ります。
on	string | string[], function	HtmlTs	色々イベントにフックをかけます。 jQueryのonといっしょです。 メソッドチェーンできます。
click	string | string[]	HtmlTs	clickした時のfunctionを設定するか、clickイベントをおこします。 jQueryのclickと一緒です。 メソッドチェーンできます。
change	string | string[]	HtmlTs	changeした時のfunctionを設定するか、changeイベントをおこします。 jQueryのchangeと一緒です。 メソッドチェーンできます

htmlts.table

テーブルを簡単に作成するためのモジュールです。

// sample
var tableObj = htmlts.table.create({
	thead: ["No.", "名前", "趣味"],
	tbody: [
		["1", "John", "walking"],
		["2", "Mary", "running"],
		["3", "Mike", "touring"]
  ]
});

htmlts.createById("id").append(tableObj);

みたいにやると下記の様なテーブルができます。

No.	名前	趣味
1	John	walking
2	Mary	running
3	Mike	touring

指定できるオプションは色々あるのでSampleを見てみてください。

htmlts.input

input要素の作成を簡単にするモジュールです。

値の一括取得、validateの実行などが主な機能です。

流れとしては

1. controllerを作成する
2. inputオブジェクトを作成する × N回
3. controllerに登録する
4. controllerで一括validate
5. 必要であればcontrollerで一括して値を取得

という感じです。

// Sample

var inputController = htmlts.input.controller();

// input type=text な要素
var inputText = htmlts.input.text({
  name: "user_name", // inputのname属性
  value: "", // 初期値
  placeHolder: "ユーザー名を入力", // inputのplaceHoler属性
  validate: {
    isNotNull: true, // 入力必須項目にする。
    // 他にもvalidateの種類は色々あるのでサンプルやソースをみてください。
    // また外からカスタムなvalidateルールを入れることもできます。
    custom: [
      // customなルール。booleanを返してください
      test: (value) => {
    		return value !== "よくないユーザー名";
  		},
  		message: "それはよくないです" // エラーだった時に表示されるメッセージ
    ]
  }
});

// コントローラーに登録
inputController.subscribe(inputText);

// validate
if (inputController.validate()) {
  // ok
  console.log(inputController.value());
}

作成できるinputのリストです。

type	return
hidden	string
text	string
textarea	string
checkbox	string[]
radio	string
selectOne	string
selectMulti	string[]
password	string

Decorator

自作するのは簡単だと思いますのでBootstrap4のsrcを見て実装してみてください。

今後なにかついかするかもしれません。