Wixにmikan.jsを無理やり突っ込んでみた

wix.com で作ったサイトを、スマホでも美しくしたい。

ということで、日本語文章の折り返し位置を気にするとき、
普通のHTMLならinline-blockを使うなどしてある程度うまくコントロールできますが、
Wixではそういうことができないのですね。不便！

ということで、 mikan.js を使ってみます。

Wixはscriptの読み込みができないので、開発モードでmikan.jsのコードを直接入れて動かしてみました。

エディタを開く

1. Wixで開発モードを有効にする

1. 左側のページ一覧の中から masterPage.js を選択する（全ページで動かすため）
   

2. するとエディタにこんなコードが表示されました。

masterPage.js

// このファイルのコードはサイトの各ページで読み込まれます

$w.onReady(function () {
	// Write your code here
});

mikan.jsを突っ込む

まず$w.onReady()の前に Mikan を定義します。

masterPage.js

// このファイルのコードはサイトの各ページで読み込まれます

/*! mikan.js v1.0.13 | MIT License | https://github.com/trkbt10/mikan.js/blob/master/LICENSE */
const Mikan = (function (root, factory) {
  return factory(); // ←← 最初の無名関数はこれを返すだけにして、戻り値をMikanに代入する
})(this, function () {

  var joshi = /(でなければ|について|かしら|くらい|けれど|なのか|ばかり|ながら|ことよ|こそ|こと|さえ|しか|した|たり|だけ|だに|だの|つつ|ても|てよ|でも|とも|から|など|なり|ので|のに|ほど|まで|もの|やら|より|って|で|と|な|に|ね|の|も|は|ば|へ|や|わ|を|か|が|さ|し|ぞ|て)/g;
  var numbers = /([0-9０-９零一二三四五六七八九十]+)/;
  /* 中略 */

  Mikan.split = SimpleAnalyze;
  return Mikan;
});
// mikan.js ここまで

$w.onReady(function () {
	// Write your code here
});

次に、$w.onReady()でMikanを呼び出します。

masterPage.js

    ...
});
// mikan.js ここまで

$w.onReady(function () {
	const elements = $w('Text'); // 全Text要素を取得する
	if (Array.isArray(elements)) {
		elements.forEach(function(el){
            // Repeaterの中のTextはそっとしておく
			let ignore = false;
			for (let parent = el.parent; parent; parent = parent.parent) {
				if (parent.type === '$w.Repeater') {
					ignore = true;
				}
			}

            // innerHTML中のテキスト部分を' 'で分割し、それぞれにMikanをかけて、再び結合する
			if (!ignore) {
                const re = /(^|>)([^<]*)($|<([^>]*))/g;
				el.html = [...el.html.matchAll(re)]
					.map(n => n[1] + (n[2].length > 0 ? n[2].split(' ').map(s => s.match(/^(|\\n)$/) ? s : Mikan(s)).join(' ') : '') + n[3]).join('');
			}
		});
	}
});

補足

Mikanの対象にする要素を簡単に指定する方法がちょっと分からなかったので全Text要素を対象にしましたが、
Repeaterの中のTextはぶっ壊れたので処理対象外にしました。
他もこういうのあるかも。