Instantly share code, notes, and snippets.

@tinybeans tinybeans/user.js
Created Feb 8, 2019

Embed
What would you like to do?
サイトに埋め込むパーツを「MTAppjQuery 2 +コンテンツデータ」で管理してみよう
(function($){
// 特定のコンテンツタイプだけにカスタマイズを適用する
if (mtappVars.type.indexOf('content_data') !== -1 && mtappVars.content_type_id == 5) {
// コンテンツフィールドのIDを指定します。
// ブラウザの開発者ツールで入力欄(今回は「オススメ書籍一覧」」フィールドのテキストエリア)を確認し、
// <input type="text" name="content-field-47" となっている 47 部分が該当します。
const contentFieldId = '47';
// オススメ書籍コンテンツタイプのエンドポイントを指定します。1, 4 部分は適宜変更してください。
const endPoint = '<mt:CGIPath /><mt:DataAPIScript />/v4/sites/1/contentTypes/4/data';
const tempId = mtapp.temporaryId();
$('#contentField' + contentFieldId).append('<div id="' + tempId + '"></div>');
const listingLabels = new Vue ({
el: '#' + tempId,
data: {
items: []
},
template: '<ul class="mt-5 w-100"><li v-for="item in items">{{ item.label }}</li></ul>'
});
$('[name="content-field-' + contentFieldId + '"]')
.on('MTAppShowSelectedItems', function () {
const value = $(this).val();
if (!value) {
return;
}
mtapp.loadingImage('show');
const ids = value.replace(/^,+|,+$/g, '').split(',');
$.ajax({
url: endPoint,
dataType: 'json',
cache: false
}).done(function (res) {
listingLabels.items = [];
const items = res.items;
for (let i = 0; i < items.length; i++) {
const id = '' + items[i].id;
if (ids.indexOf(id) !== -1) {
listingLabels.items.push(items[i]);
}
}
mtapp.loadingImage('hide');
});
})
.MTAppListing({
url: endPoint,
dialogTitle: '書籍を選択',
cbAfterOK: function (cb, $container, $field) {
$field.trigger('MTAppShowSelectedItems');
},
jsontable: {
header: {id: 'ID', label: '書籍名'},
headerOrder: ['id', 'label'],
itemsRootKey: 'items',
listingTargetKey: 'id',
listingCheckboxType: 'checkbox',
listingTargetEscape: false
}
}).prop('readonly', true).trigger('MTAppShowSelectedItems').nextAll('small').hide();
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment