前回の続きです。
独自に改造したライブラリについて書いてみたいと思います。
まずは、pikaday。
オリジナルでは、祝日やデータ入力のあった日について、
装飾を施すことができなかったので改造しました。
オリジナルのコードでは、
日付の表示は renderDay() という関数で行われています。
そこで、onRenderDay というオプションを新設し、
rendarDay() からcallbackされるように改造しました。
「年」、「月」、「日」を渡されたcallbackの結果から、
class および title 属性を設定することで、
個別に表示の装飾を施すことができるようになります。
class には見た目を、title には祝日の内容を設定するわけです。
コードを改造した所は以下の通りです。
︙
/**
* defaults and localisation
*/
defaults = {
︙
onDraw: null,
onRenderDay: null // ADD by katwat
},
︙
renderDay = function(opts)
{
var arr = [];
var ariaSelected = 'false';
var o,title; // ADD by katwat
if (opts.isEmpty) {
︙
}
if (opts.onRenderDay) { // ADD by katwat
o = opts.onRenderDay(opts.year,opts.month,opts.day);
if (o) {
if (o.class) {
arr.push(o.class);
}
if (o.title) {
title = o.title;
}
}
}
if (opts.isDisabled) {
︙
}
return '' +
'' +
' ';
},
︙
/**
* public Pikaday API
*/
Pikaday.prototype = {
︙
/**
* render HTML for a particular month
*/
render: function(year, month, randId)
{
︙
for (var i = 0, r = 0; i < cells; i++)
{
︙
var dayConfig = {
day: dayNumber,
︙
enableSelectionDaysInNextAndPreviousMonths: opts.enableSelectionDaysInNextAndPreviousMonths,
onRenderDay: opts.onRenderDay // ADD by katwat
};
︙
row.push(renderDay(dayConfig));
︙
}
return renderTable(opts, data, randId);
},
︙
};
return Pikaday;
︙ 続いては、handsontable。
autocomplete な機能を使うと、
既存と部分一致する選択候補を入力時に随時表示することができます。
そして一致した部分が強調表示されます。
オリジナルでは filteringCaseSensitive オプションを無効にすることで、
大文字小文字を区別なく選択できるようになっていますが、
残念ながら、というか当然ながら、
カタカナとひらがなを区別なく対処することができません。
そこで、matchFilter というオプションを追加して、
選択の抽出をより汎用的に対処できるように改造しました。
例えば↓こんな感じ。
function matchFilter(str) {
// 両端空白を削除、全角英数記号=>半角＆半角カタカナ=>全角、全角ひらがな=>全角カタカナ、半角英大文字=>小文字。
return jaconv.toKatakana(jaconv.normalize(str.trim())).toLowerCase();
}コードを改造した所は以下の通りです。
AutocompleteEditor.prototype.open = function () {
︙
choicesListHot.updateSettings({
︙
afterRenderer: function afterRenderer(TD, row, col, prop, value, cellProperties) {
var _this$cellProperties = _this.cellProperties,
filteringCaseSensitive = _this$cellProperties.filteringCaseSensitive,
allowHtml = _this$cellProperties.allowHtml,
matchFilter = _this$cellProperties.matchFilter; // ADD by katwat
︙
if (value && !allowHtml) {
// MOD by katwat
var _value = value,
_query = _this.query;
if (!filteringCaseSensitive) {
_value = _value.toLowerCase();
_query = _query.toLowerCase();
}
if (matchFilter) { // ADD by katwat
_value = matchFilter(_value);
_query = matchFilter(_query);
}
indexOfMatch = _value.indexOf(_query);
if (indexOfMatch !== -1) {
match = value.substr(indexOfMatch, _query.length); // MOD by katwat
value = value.replace(match, '' + match + '');
}
}
TD.innerHTML = value;
},
︙
});
︙
}; ところで、
handsontabale では numeric というタイプを使うと、
３桁毎のカンマ区切りとかで表示できたりします。
ただ、autocomplete の選択肢ではそれが適用されません。
なんでやねん！
ということでこれも改造します(^_^;)
コードを改造した所は以下の通りです。
function autocompleteRenderer(instance, TD, row, col, prop, value, cellProperties) {
︙
if (cellProperties.allowHtml) {
(0, _index.getRenderer)('html').apply(this, arguments);
} else if (cellProperties.dataType === 'number') { // ADD by katwat
(0, _index.getRenderer)('numeric').apply(this, arguments);
} else {
(0, _index.getRenderer)('text').apply(this, arguments);
}
︙
} ということで、
改造した部分は以上の通りです(^_^;)
