コメント機能では、ユーザーID、投稿日時、内容などの条件を指定してコメントをフィルタリングできます。これにより、特定の条件に合致するコメントのみを抽出して表示することが可能です。
フィルタ
Filterコマンドが追加されました。コマンドを実行する際は、以下のパラメータを指定してフィルタ条件を設定します。
プロパティ
説明
デフォルト値
filter（必須）
フィルタ条件（複数の条件の場合は配列で指定）
なし
condition
複数条件の結合方法（And/Or）
And
filterMode
条件に一致したコメントの表示範囲を制御
MatchOnly
フィルタ条件
filterプロパティには、comparatorプロパティでGcCommentFilterComparatorの値、2番目の引数に対応しているパラメータを設定します。
GC.InputMan.GcCommentFilterComparatorの値
説明
パラメータ
CommentIdIs
指定IDのコメントだけ表示
id: string | string[]
CommentIdIsNot
指定IDのコメントを除外
id: string | string[]
UserIdIs
指定ユーザーのコメントだけ表示
id: string | string[]
UserIdIsNot
指定ユーザーのコメントを除外
id: string | string[]
HasReplies
返信コメントがあるコメントのみ表示
なし
HasNoReplies
返信コメントがないコメントのみ表示
なし
HasReactions
リアクションがあるコメントのみ表示
なし
HasNoReactions
リアクションがないコメントのみ表示
なし
PostTimeBefore
指定日時より前に投稿されたコメント
time: Date
PostTimeAfter
指定日時より後に投稿されたコメント
time: Date
UpdateTimeBefore
指定日時より前に更新されたコメント
time: Date
UpdateTimeAfter
指定日時より後に更新されたコメント
time: Date
ContentHas
コメント内容に指定文字列が含まれるコメント
filterString: string
CustomFilter
任意の関数で条件指定
filterFunc: (comment: IComment) => boolean
フィルタモード
filterModeプロパティを利用して表示するコメントの範囲を制御します。filterModeプロパティには、GcCommentFilterMode列挙体の次の値を設定することができます。
GcCommentFilterModeの値
説明
MatchOnly
条件に一致したコメントのみを表示します。
WithParent
条件に一致したコメントと、その親コメントを表示します。
FullBranch
条件に一致したコメントと、その親コメントおよび返信コメントも表示します。
次のサンプルコードでは、特定のユーザーID（1, 2, 3）によるコメントのみを抽出し、条件に一致したコメントと、その親コメントおよび返信コメントを表示する例です。
import './styles.css';
import '@mescius/inputman.comment/CSS/gc.inputman.comment.css';
import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman.comment';
import * as GcCommon from '@mescius/inputman';
import { users, postedComments } from './data.js';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const filterModes = [
{
displayValue: 'MatchOnly',
name: InputMan.GcCommentFilterMode.MatchOnly,
description: '一致するコメントのみを表示します。',
},
{
displayValue: 'WithParent',
name: InputMan.GcCommentFilterMode.WithParent,
description: 'マッチングされたコメントとその親コメントが表示されます。',
},
{
displayValue: 'FullBranch',
name: InputMan.GcCommentFilterMode.FullBranch,
description:
'マッチングされたコメントとその親コメント、返信が表示されます。',
},
];
const filterModeSelect = new GcCommon.InputMan.GcComboBox(document.getElementById('filter-mode'),
{
items: filterModes,
displayMemberPath: 'displayValue',
valueMemberPath: 'name',
value: InputMan.GcCommentFilterMode.MatchOnly,
width: 300,
editable: false
}
);
filterModeSelect.addEventListener(
GcCommon.InputMan.GcComboBoxEvent.SelectedChanged,
() => {
execFilter();
}
);
filterModeSelect.selectedValue = InputMan.GcCommentFilterMode.MatchOnly;
const userBox = new GcCommon.InputMan.GcTagBox(document.getElementById('users'), {
items: users,
tagTextMemberPath: 'name',
tagImageMemberPath: 'avatar',
dropDownDisplayMemberPath: 'name',
showImage: true,
dropDownItemHeight: 30,
value: users,
width: 500,
height: 60,
displayMode: InputMan.TagBoxDisplayMode.Multiline,
showClearButton: true
});
const gcComment = new InputMan.GcComment(document.getElementById('gcComment'),
{
userInfo: users[0],
loadComments: (args) => {
return {
comments: postedComments,
hasMore: false
};
},
editorConfig: {},
header: [],
}
);
const execFilter = () => {
gcComment.execCommand(InputMan.GcCommentCommand.Filter, {
filter: {
comparator: InputMan.GcCommentFilterComparator.UserIdIs,
id: userBox.value.map((u) => u.id),
},
filterMode: filterModeSelect.selectedValue,
});
};
userBox.addEventListener(GcCommon.InputMan.GcTagBoxEvent.ValueChanged, (s, e) => {
execFilter();
});
document.getElementById('reset-filter').addEventListener('click', () => {
userBox.value = users;
filterModeSelect.selectedValue = InputMan.GcCommentFilterMode.MatchOnly;
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="コメントコンポーネント 使い方" lang="ja" xml:lang="ja" />
<title>コメントコンポーネント - フィルター</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function () {
System.import('./src/app');
}
</script>
</head>
<body>
<table class="sample">
<tr>
<th>ユーザー</th>
<td>
<div id="users"></div>
</td>
</tr>
<tr>
<th>表示モード</th>
<td>
<select id="filter-mode"></select>
</td>
</tr>
<tr>
<th>フィルターをリセット</th>
<td>
<button id="reset-filter">フィルターをリセットします</button>
</td>
</tr>
</table>
<div id="gcComment"></div>
</body>
</html>
body {
box-sizing: content-box !important;
height: 551px !important;
padding-bottom: 10rem;
}
.viewport {
line-height: 1.3;
}
.flexbox {
display: flex;
gap: 20px;
}
table.sample {
border-collapse: collapse;
margin-top: 1rem;
}
table.sample tr>* {
padding: 0.25rem 0.5rem;
border: 1px solid #d2d2d2;
}
table.sample tr>th {
text-align: left;
background: #f0f0f0;
font-weight: normal;
}
export const users = [
{
id: '1',
name: '森上 偉久馬',
avatar: '$IMDEMOROOT$/ja/samples/comment/filter/img/avatar1.png',
},
{
id: '2',
name: '葛城 孝史',
avatar: '$IMDEMOROOT$/ja/samples/comment/filter/img/avatar2.png',
},
{
id: '3',
name: '加藤 泰江',
avatar: '$IMDEMOROOT$/ja/samples/comment/filter/img/avatar3.png',
},
{
id: '4',
name: '川村 匡',
avatar: '$IMDEMOROOT$/ja/samples/comment/filter/img/avatar4.png',
},
{
id: '5',
name: '松沢 誠一',
avatar: '$IMDEMOROOT$/ja/samples/comment/filter/img/avatar5.png',
},
{
id: '6',
name: '成宮 真紀',
avatar: '$IMDEMOROOT$/ja/samples/comment/filter/img/avatar6.png',
},
];
export const postedComments = [
{
id: '1',
userInfo: users[2],
content:
'GcCommentはcommentのフィルタリングをサポートしています。<br>この機能を使うと、特定のユーザーのコメントだけを表示することができます。',
postTime: new Date(2024, 1, 1, 8, 0, 0),
updateTime: new Date(2024, 1, 1, 8, 0, 0),
},
{
id: '2',
userInfo: users[0],
content: `複数のフィルター条件を組み合わせて、より高度なフィルタリングも可能です。`,
postTime: new Date(2024, 1, 1, 8, 0, 0),
updateTime: new Date(2024, 1, 1, 8, 0, 0),
parentCommentId: '1',
},
{
id: '3',
userInfo: users[0],
content: `GcListBoxと同じFilterの使い方にも対応しています!`,
postTime: new Date(2024, 1, 1, 8, 0, 0),
updateTime: new Date(2024, 1, 1, 8, 0, 0),
},
{
id: '4',
userInfo: users[1],
content: `フィルター条件をクリアして、すべてのコメントを再表示することもできます。`,
postTime: new Date(2024, 1, 1, 8, 0, 0),
updateTime: new Date(2024, 1, 1, 8, 0, 0),
},
{
id: '5',
userInfo: users[3],
content: `返信のあるコメントをフィルターする際に、親コメントも表示することができます。`,
postTime: new Date(2024, 1, 1, 8, 0, 0),
updateTime: new Date(2024, 1, 1, 8, 0, 0),
},
];
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
