Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
MTAppAssetFields.js
(function($){
// ---------------------------------------------------------------------
// $(foo).MTAppAssetFields();
// ---------------------------------------------------------------------
// Latest update: 2016/07/01
//
// input:text で MT 標準の「アイテム」ダイアログを利用できるようにします。
// id, filename, url, thumnail(imageのみ)の値を JSON で保存します。
// ---------------------------------------------------------------------
$.fn.MTAppAssetFields = function(options, words){
var op = $.extend({}, $.fn.MTAppAssetFields.defaults, options);
var language = mtappVars.language === 'ja' ? 'ja' : 'en';
var words = words || {};
var l10n = $.extend({}, $.fn.MTAppAssetFields.l10n[language], words);
// フィールド保存用スクリプト(MT標準のスクリプト)
var insertScriptHTML = [
'<scr' + 'ipt type="text/javascript">',
'function insertCustomFieldAsset(html, id, preview_html) {',
' getByID(id).value = html;',
' if ( !preview_html )',
' preview_html = html ? html : \'\';',
' try {',
' /* remove the form enclosure from the preview */',
' var enc = document.createElement( "div" );',
' enc.innerHTML = preview_html;',
' var form = enc.getElementsByTagName( "form" )[ 0 ];',
' getByID(id + \'_preview\').innerHTML = form ? form.innerHTML : preview_html;',
' } catch(e) { ',
' log.error(e);',
' };',
' var remove_button = getByID(id + \'_remove_asset\');',
' if (remove_button && html) {',
' TC.removeClassName(getByID(id + \'_remove_asset\'), \'hidden\');',
' }',
' else if (remove_button) {',
' TC.addClassName(getByID(id + \'_remove_asset\'), \'hidden\');',
' }',
'}',
'</scr' + 'ipt>'
];
$('body').append(insertScriptHTML.join(''));
// MTAppAssetFields を適用したフィールドの ID を保存する
if (!$('body').data('MTAppAssetFieldsIDs')) {
$('body').data('MTAppAssetFieldsIDs',[]);
}
// 保存時に form タグを置換する
var MTAppAssetFieldsSubmit = function(){
var ids = $('body').data('MTAppAssetFieldsIDs');
for (var i = 0, l = ids.length; i < l; i++) {
var $field = $('#' + ids[i]);
var value = $field.val();
if (/<form mt:asset-id/.test(value)) {
value = value.replace(/<form mt:asset-id="(\d+)".+?href="([^"]+)">([^<]+).+/gi, '{"id":"$1","filename":"$3","url":"$2"}');
var $customfieldPreviewImage = $field.next().find('img');
if ($customfieldPreviewImage.length > 0) {
var thumbURL = $customfieldPreviewImage.attr('src');
value = value.replace(/\}$/, ',"thumbnail":' + '"' + thumbURL + '"}');
}
$field.val(value);
if ($field.hasClass('jsontable-input')) {
$field.closest('div.mtapp-json-table').prev().trigger('MTAppJSONTableSave');
}
}
}
return true;
};
this.closest('form').off('submit.MTAppAssetFieldsSubmit').on('submit.MTAppAssetFieldsSubmit', MTAppAssetFieldsSubmit);
return this.each(function(){
var $this = $(this);
if (!op.debug) {
$this.hide();
}
if ($this.hasClass('isMTAppAssetFields')) {
return;
} else {
$this.addClass('isMTAppAssetFields')
}
// 要素のidを取得。ない場合はTemporary idを作成
var thisId = $this.attr('id') || $.temporaryId();
thisId = 'customfield_mtappassetfields_' + thisId;
// id を body の data に保存
var bodyData = $('body').data('MTAppAssetFieldsIDs');
bodyData.push(thisId);
$this.attr('id', thisId);
// アイテム用 HTML を作成
var assetTypeLabel = '';
if (op.assetTypeLabel !== '') {
assetTypeLabel = op.assetTypeLabel;
} else {
assetTypeLabel = l10n[op.assetType];
}
// - 保存されている値を取得(JSON)
var json = $this.val();
if (json) {
try {
json = JSON.parse(json);
}
catch(e) {
alert(e.message);
}
}
var itemThumbHTML = '';
var removeLinkHidden = 'hidden'
if (json.url) {
if (op.assetType === 'image') {
itemThumbHTML = '<a href="' + json.url + '" target="_blank"><img src="' + json.thumbnail + '" alt=""></a>';
} else if (op.assetType === 'file') {
itemThumbHTML = '<a href="' + json.url + '" target="_blank">' + json.filename + '</a>';
}
removeLinkHidden = '';
}
var html = [
'<div id="' + thisId +'_preview" class="customfield_preview">',
itemThumbHTML,
'</div>',
'<div class="actions-bar" style="clear: none;">',
'<div class="actions-bar-inner pkg actions">',
'<a href="' + ScriptURI + '?__mode=list_asset&amp;_type=asset&amp;blog_id=' + mtappVars.blog_id + '&amp;dialog_view=1&amp;filter=class&amp;filter_val=' + op.assetType + '&amp;require_type=' + op.assetType + '&amp;edit_field=' + thisId +'&amp;asset_select=1" class="mtapp-open-dialog">',
assetTypeLabel + l10n.select,
'</a>&nbsp;',
'<a href="#" id="' + thisId +'_remove_asset" class="' + removeLinkHidden + '" type="submit" onclick="insertCustomFieldAsset(\'\', \'' + thisId +'\'); return false;">',
assetTypeLabel + l10n.remove,
'</a>',
'</div>',
'</div>'
].join('');
// アイテム用 HTML を挿入
$this.after(html);
$this.next().next().find('.mtapp-open-dialog').mtDialog();
return true;
});
};
$.fn.MTAppAssetFields.l10n = {
en: {
image: 'Image',
file: 'File',
select: ' Select',
remove: ' Remove'
},
ja: {
image: '画像',
file: 'ファイル',
select: 'を選択',
remove: 'を削除'
}
};
$.fn.MTAppAssetFields.defaults = {
// Set a blog ID which is a target to upload files.
blogId: mtappVars.blog_id,
// You can set either 'image' or 'file'
assetType: 'image',
// Set a text of <a> tag if you want to change.
assetTypeLabel: '',
// If set to true, you can edit images in a dialog.
edit: false,
// If set to true, the original field is shown.
debug: false
};
// end - $.MTAppAssetFields();
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment