{% extends '@admin/default_frame.twig' %}
{% set menus = ['blogs', 'blogs_edit'] %}
{% block title %}{{'admin.blogs.edit'|trans}}{% endblock %}
{% block sub_title %}{{'admin.blogs.manager'|trans}}{% endblock %}
{% block javascript %}
<link rel="stylesheet" href="{{ asset('Blogs42/assets/summernote/summernote-lite.min.css', 'plugin') }}">
<script src="{{ asset('Blogs42/assets/summernote/summernote-lite.js', 'plugin') }}"></script>
<script src="{{ asset('Blogs42/assets/summernote/summernote-image-attributes.js', 'plugin') }}"></script>
<script src="{{ asset('Blogs42/assets/summernote/lang/summernote-ja-JP.min.js', 'plugin') }}"></script>
<script src="{{ asset('Blogs42/assets/summernote/lang/ja-JP.js', 'plugin') }}"></script>
<script src="{{ asset('Blogs42/assets/js/fileupload/vendor/jquery.ui.widget.js', 'plugin') }}"></script>
<script src="{{ asset('Blogs42/assets/js/fileupload/jquery.iframe-transport.js', 'plugin') }}"></script>
<script src="{{ asset('Blogs42/assets/js/fileupload/jquery.fileupload.js', 'plugin') }}"></script>
<script src="{{ asset('Blogs42/assets/js/fileupload/jquery.fileupload-process.js', 'plugin') }}"></script>
<script src="{{ asset('Blogs42/assets/js/fileupload/jquery.fileupload-validate.js', 'plugin') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
var hideThumbnail = function() {
if ($('#thumb div').length > 0) {
$('#icon_no_image').css('display', 'none');
} else {
$('#icon_no_image').css('display', '');
}
};
var proto_img = '<div class="c-form__fileUploadThumbnail" style="background-image:url(\'__path__\');">' +
'<a class="delete-image"><i class="fa fa-times" aria-hidden="true"></i></a>' +
'</div>';
var eyecatch_image = $('#{{ form.eyecatch_image.vars.id }}').val();
if (eyecatch_image != '') {
var filename = $('#{{ form.eyecatch_image.vars.id }}').val();
if (eyecatch_image == '{{ oldEyecatchImage }}') {
var path = '{{ asset('', 'save_image') }}' + filename;
} else {
var path = '{{ asset('', 'temp_image') }}' + filename;
}
var $img = $(proto_img.replace(/__path__/g, path));
$('#{{ form.eyecatch_image.vars.id }}').val(filename);
$('#thumb').append($img);
hideThumbnail();
}
hideThumbnail();
$('.file-upload').fileupload({
url: "{{ url('eyecatch_image_add') }}",
type: 'post',
dataType: 'json',
dropZone: $('#upload-zone'),
done: function(e, data) {
$('.progress', $(this).parent()).hide();
var path = '{{ asset('', 'temp_image') }}' + data.result.filename;
var $img = $(proto_img.replace(/__path__/g, path));
$('.eyecatch-image', $(this).parent()).val(data.result.filename);
$('.upload-image', $(this).parent()).append($img);
$('img', $(this).parent()).remove();
hideThumbnail();
},
fail: function(e, data) {
alert('{{ 'admin.common.upload_error'|trans }}');
},
always: function(e, data) {
$('.progress').hide();
$('.progress .progress-bar').width('0%');
},
start: function(e, data) {
if ($('.c-form__fileUploadThumbnail').length >= 1) {
$.each($('.delete-image'), function(index, delete_image) {
delete_image.click();
});
}
$('.progress', $(this).parent()).show();
$('#thumb', $(this).parent()).find('div').remove();
$('#{{ form.eyecatch_image.vars.id }}').val('');
},
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|webp)$/i,
maxFileSize: 10000000,
maxNumberOfFiles: 1,
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .progress-bar', $(this).parent()).css(
'width',
progress + '%'
);
},
processalways: function(e, data) {
if (data.files.error) {
alert("{{ 'admin.common.upload_error'|trans }}");
}
}
});
$('#thumb').on('click', '.delete-image', function() {
$('#{{ form.eyecatch_image.vars.id }}').val('');
var thumbnail = $(this).parents('div.c-form__fileUploadThumbnail');
$(thumbnail).remove();
hideThumbnail();
});
$(document).on('click', '.delete-image', function() {
var thumbnail = $(this).parents('div.c-form__fileUploadThumbnail');
$(thumbnail).remove();
$(this).parent().find('img').remove();
$(this).parent().find('.eyecatch-image').val('');
$(this).hide();
});
// summernote処理
$('#plugin_blogs_blog_description').summernote({
lang: 'ja-JP',
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['fullscreen', 'codeview', 'help']]
],
popover: {
image: [
['custom', ['imageAttributes']],
['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']]
],
},
imageAttributes:{
icon:'<i class="note-icon-pencil"/>',
removeEmpty:false,
disableUpload: true
},
height: 300,
callbacks: {
onImageUpload : function(files, editor, welEditable) {
for(var i = files.length - 1; i >= 0; i--) {
sendFile(files[i], this);
}
}
}
});
});
function sendFile(file, el) {
var form_data = new FormData();
form_data.append('imageFile', file);
$.ajax({
data: form_data,
dataType: 'json',
type: "POST",
url: '{{ url('wysiwyg_image_add') }}',
headers: {'Authorization': $('meta[name="eccube-csrf-token"]').attr('content')},
cache: false,
contentType: false,
processData: false,
success: function(data) {
var result = data.data[0]['result'];
var filePath = data.data[0]['filePath'];
if(result == 'success'){
$(el).summernote('editor.insertImage', filePath);
}else{
alert("画像アップロードできませんでした。");
}
}
});
}
// searchWordの実行
$('#search-category').on('input', function () {
searchWord($(this).val(), $('.category-li'));
});
</script>
{% endblock javascript %}
{% block stylesheet %}
<style>
.note-editable{
background: #fff;
}
.dropdown-toggle::after {
display: none;
}
</style>
{% endblock stylesheet %}
{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}
{% block main %}
<form role="form" class="form-horizontal" name="form1" id="form1" method="post" action="" novalidate enctype="multipart/form-data">
{{ form_widget(form._token) }}
<div class="c-contentsArea__cols">
<div class="c-contentsArea__primaryCol">
<div class="c-primaryCol">
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<span class="card-title">{{ 'admin.content.blogs.blogs_registration'|trans }}</span></div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#blogsForm"
aria-expanded="true" aria-controls="blogsForm"><i class="fa fa-lg fa-angle-up"></i></a></div>
</div>
</div>
<div class="ec-cardCollapse collapse show" id="blogsForm" style="">
<div class="card-body">
<div class="row">
<div class="col-3"><span>{{ 'admin.content.blogs.publish_date'|trans }}</span>
<span class="badge bg-primary ms-1">
{{ 'admin.common.required'|trans }}
</span>
</div>
<div class="col mb-2">
{{ form_widget(form.publish_date) }}
{{ form_errors(form.publish_date) }}
</div>
</div>
<div class="row">
<div class="col-3"><span>{{ 'admin.content.blogs.title'|trans }}</span>
<span class="badge bg-primary ms-1">
{{ 'admin.common.required'|trans }}
</span>
</div>
<div class="col mb-2">
{{ form_widget(form.title) }}
{{ form_errors(form.title) }}
</div>
</div>
<div id="upload_box__file" class="row mb-2">
<div class="col-3" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.blogs.eyeccatch.file.upload_file'|trans }}">
<span>{{ 'admin.blogs.eyeccatch.file.add_file'|trans }}</span><i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
<div class="col mb-2">
<div class="progress" style="display: none;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div id="thumb" class="c-form__fileUploadThumbnails clearfix"></div>
<div class="upload-image"></div>
{{ form_widget(form.eyecatch_image, { attr : {'class': 'eyecatch-image', style : 'display:none;' } }) }}
{{ form_widget(form.eyecatch_file, { attr : {'class': 'file-upload', accept : 'image/*', style : 'display:none;' } }) }}
<div class="mb-2">
<a class="btn btn-ec-regular mb-2" onclick="$('#plugin_blogs_eyecatch_file').click()">
{{ 'admin.common.file_select'|trans }}
</a>
{{ form_errors(form.eyecatch_file) }}
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.content.blogs.url'|trans }}">
<span>{{ 'admin.content.blogs.url'|trans }}</span><i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col mb-2">
{{ form_widget(form.url) }}
{{ form_errors(form.url) }}
</div>
</div>
<div class="row">
<div class="col-3"> </div>
<div class="col mb-2">
{{ form_widget(form.link_method) }}
{{ form_errors(form.link_method) }}
</div>
</div>
<div class="row">
<div class="col-3">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.content.blogs.body'|trans }}">
<span>{{ 'admin.content.blogs.body'|trans }}</span><i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col mb-2">
{{ form_widget(form.blog_description) }}
{{ form_errors(form.blog_description) }}
</div>
</div>
{# エンティティ拡張の自動出力 #}
{% for f in form|filter(f => f.vars.eccube_form_options.auto_render) %}
{% if f.vars.eccube_form_options.form_theme %}
{% form_theme f f.vars.eccube_form_options.form_theme %}
{{ form_row(f) }}
{% else %}
<div class="row mb-2">
<div class="col-3">
<span>{{ f.vars.label|trans }}</span>
</div>
<div class="col">
{{ form_widget(f) }}
{{ form_errors(f) }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<!-- メタ設定 -->
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.content.page_meta'|trans }}">
<span class="card-title">{{ 'admin.content.page_meta__card_title'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#pageMeta" aria-expanded="false" aria-controls="pageMeta">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="pageMeta">
<div class="card-body">
<!-- author -->
<div class="row mb-2">
<div class="col-2"><span>{{ 'admin.content.page_meta_author'|trans }}</span></div>
<div class="col-10">
{{ form_widget(form.author) }}
{{ form_errors(form.author) }}
</div>
</div>
<!-- description -->
<div class="row mb-2">
<div class="col-2"><span>{{ 'admin.content.page_meta_description'|trans }}</span></div>
<div class="col-10">
{{ form_widget(form.description) }}
{{ form_errors(form.description) }}
</div>
</div>
<!-- keyword -->
<div class="row mb-2">
<div class="col-2"><span>{{ 'admin.content.page_meta_keyword'|trans }}</span></div>
<div class="col-10">
{{ form_widget(form.keyword) }}
{{ form_errors(form.keyword) }}
</div>
</div>
<!-- robot -->
<div class="row mb-2">
<div class="col-2"><span>{{ 'admin.content.page_meta_robot'|trans }}</span></div>
<div class="col-10">
{{ form_widget(form.meta_robots) }}
{{ form_errors(form.meta_robots) }}
</div>
</div>
<!-- metatag -->
<div class="row">
<div class="col-2">
<div class="d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ 'tooltip.content.page_meta_tags'|trans }}">
<span>{{ 'admin.content.page_meta_metatag'|trans }}</span>
<i class="fa fa-question-circle fa-lg ms-1"></i>
</div>
</div>
<div class="col-10">
{{ form_widget(form.meta_tags) }}
{{ form_errors(form.meta_tags) }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-conversionArea">
<div class="c-conversionArea__container">
<div class="row justify-content-between align-items-center">
<div class="col-6">
<div class="c-conversionArea__leftBlockItem">
<a class="c-baseLink" href="{{ url('blogs_list') }}">
<i class="fa fa-backward" aria-hidden="true"></i>
<span>{{ 'admin.content.blogs_management'|trans }}</span></a>
</div>
</div>
<div class="col-6">
<div id="ex-conversion-action" class="row align-items-center justify-content-end">
<div class="col-auto">
{{ form_widget(form.visible) }}
{{ form_errors(form.visible) }}
</div>
<div class="col-auto">
<button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="c-contentsArea__secondaryCol">
<div class="c-secondaryCol">
{# プレビュー #}
{% if blogs.id is not null %}
<div class="card rounded border-0 mb-4">
<div class="collapse show ec-cardCollapse" id="preview">
<div class="card-body">
<div class="d-block text-center">
<a class="btn w-100 btn-ec-regular"
target="_blank"
href="{{ url('blogs42_detail', {'id': blogs.id}) }}"
title="プレビュー">プレビュー</a>
</div>
</div>
</div>
</div>
{% endif %}
{# カテゴリー #}
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<div class="d-inline-block">
<span class="card-title">{{ 'admin.blogs.category__blogs_card_title'|trans }}</span>
</div>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#category" aria-expanded="false"
aria-controls="category">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="category">
<div class="card-body">
<div class="mb-3">
<div class="row">
<div class="col">
<div class="input-group">
<div class="input-group-text">
<span id="basic-addon1">
<i class="fa fa-search"></i>
</span>
</div>
<input id="search-category" class="form-control" type="search"
placeholder="{{ 'admin.blogs.search_category'|trans }}"
aria-label="Search">
</div>
</div>
</div>
</div>
{% macro tree(ChoicedIds, Category, form) %}
{% import _self as selfMacro %}
<li class="c-directoryTree--registerItem category-li">
<input type="checkbox" id="plugin_blogs_category_{{ Category.id }}" name="plugin_blogs[Category][]" value="{{ Category.id }}" {% if Category.id in ChoicedIds %}checked{% endif %}>
<label for="plugin_blogs_category_{{ Category.id }}">{{ Category.name }}</label>
<ul class="list-unstyled">
{% for child,ChildCategory in Category.children %}
{{ selfMacro.tree(ChoicedIds, ChildCategory, form) }}
{% endfor %}
</ul>
</li>
{% endmacro %}
<div class="c-directoryTree--register rounded border mb-3 p-3">
{% import _self as renderMacro %}
{% for TopCategory in TopCategories %}
<ul class="list-unstyled">
{{ renderMacro.tree(ChoicedCategoryIds, TopCategory, form.Category) }}
</ul>
{% endfor %}
{{ form_errors(form.Category) }}
</div>
<div class="d-block text-center">
<a class="btn w-100 btn-ec-regular"
data-action="confirm"
href="{{ path('blogs_category') }}"
title="{{ 'admin.common.move_to_confirm_message'|trans({
'%name%' : 'admin.blogs.category_management'|trans}) }}">{{ 'admin.blogs.move_to_category'|trans }}</a>
</div>
</div>
</div>
</div>
{# 登録日・更新日 #}
<div class="card rounded border-0 mb-4">
<div class="card-header">
<div class="row">
<div class="col-8">
<span class="card-title">{{ 'admin.product.create_date__card_title'|trans }}</span>
</div>
<div class="col-4 text-end">
<a data-bs-toggle="collapse" href="#update" aria-expanded="false"
aria-controls="update">
<i class="fa fa-angle-up fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="collapse show ec-cardCollapse" id="update">
<div class="card-body">
<div class="row mb-2">
<div class="col">
<i class="fa fa-flag me-1"></i>
<span>{{ 'admin.common.create_date'|trans }}</span>
</div>
<div class="col">
<span>:{{ blogs.create_date|date_min }}</span>
</div>
</div>
<div class="row mb-2">
<div class="col">
<i class="fa fa-refresh me-1"></i>
<span>{{ 'admin.common.update_date'|trans }}</span>
</div>
<div class="col">
<span>:{{ blogs.update_date|date_min }}</span>
</div>
</div>
<div class="row mb-2">
<div class="col">
<i class="fa fa-user me-1"></i>
<span>{{ 'admin.common.last_updater'|trans }}</span>
</div>
<div class="col">
<span>:{{ blogs.Creator ? blogs.Creator.name }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
{% endblock %}