並べ替えのレイアウト修正

JSの変数宣言を最適化
This commit is contained in:
2021-12-12 18:07:35 +09:00
parent bc37f8ac26
commit f96800dc9e
5 changed files with 83 additions and 77 deletions
+27 -21
View File
@@ -52,16 +52,18 @@ h3 {
.list-orders-outer {
width: 100%;
display: flex;
margin-bottom: 1em;
flex-wrap: wrap;
justify-content: space-between;
}
.list-orders-inner {
width: calc((100% / 2) - 20px);
padding: .5em;
width: calc(100% - 60px);
margin: 1em auto;
padding: .5em 1em;
position: relative;
background: #eee;
border-radius: 12px;
}
.sort-menu-list {
@@ -146,15 +148,19 @@ dl.apop-setting-list-dd .sort-custom-field-input {
.drag-sort .product-list {
border: 1px solid #ccc;
border-radius: 6px;
}
.enable-box .product-list {
padding: 1em .3em;
background: #eee;
width: calc((50%) - 30px);
padding: 1em;
background: #fff;
border: 1px solid #bbb;
border-radius: 6px;
}
.enable-box .product-list:hover {
border: 1px solid #bbb;
border: 1px solid #999;
}
.custom_field_key_select,
@@ -172,10 +178,6 @@ dl.apop-setting-list-dd .sort-custom-field-input {
width: calc((100%) - 60px);
}
.enable-box .product-list-type-label {
width: calc(100% / 2);
}
.search-normal-sort .product-list-sort-type {
width: 100%;
display: flex;
@@ -196,6 +198,7 @@ dl.apop-setting-list-dd .sort-custom-field-input {
.product-list.no-order {
background: #ababab;
border-radius: 6px;
}
.list-order {
@@ -256,7 +259,6 @@ dl.apop-setting-list-dd .sort-custom-field-input {
.disable-normal-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: .5em 1em 1em 0;
}
@@ -267,7 +269,7 @@ dl.apop-setting-list-dd .sort-custom-field-input {
}
.disable-box .product-list {
width: calc((100% / 2) - 15px);
width: calc((25%) - 15px);
display: flex;
cursor: default;
}
@@ -291,7 +293,7 @@ dl.apop-setting-list-dd .sort-custom-field-input {
.enable-box,
.disable-box {
padding: .5em;
border: 1px solid #ccc;
/*border-bottom: 1px solid #ccc;*/
}
.enable-box h4 {
@@ -311,9 +313,9 @@ dl.apop-setting-list-dd .sort-custom-field-input {
@media only screen and (max-width: 1264px) {
.enable-box .product-list,
.disable-box .product-list {
display: block;
.enable-box .product-list {
width: calc((100%) - 15px);
}
.search-normal-sort .product-list {
@@ -351,13 +353,9 @@ dl.apop-setting-list-dd .sort-custom-field-input {
width: 98%;
}
.list-orders-outer {
display: block;;
}
.list-orders-inner {
width: auto;
margin: 1.5em 0 0 0;
margin: 1.5em 1em 0;
}
dl.apop-setting-list dt {
@@ -379,4 +377,12 @@ dl.apop-setting-list-dd .sort-custom-field-input {
width: auto;
white-space: normal;
}
.disable-normal-list {
display: block;
}
.disable-box .product-list {
width: 100%;
}
}
+50 -50
View File
@@ -21,15 +21,15 @@ jQuery(function ($) {
custom_field_select();
function change_tab_menu() {
let apop_submit_type = $('#apop_submit_type');
let order_nav_list = $('.post-order-nav li');
let order_box = $('.post-order-box');
const apop_submit_type = $('#apop_submit_type');
const order_nav_list = $('.post-order-nav li');
const order_box = $('.post-order-box');
init();
click_menu();
function init() {
let submit_type = apop_submit_type.val();
const submit_type = apop_submit_type.val();
order_nav_list.removeClass('en');
order_box.hide();
$('.post-order-nav li:eq(' + submit_type + ')').addClass('en');
@@ -39,7 +39,7 @@ jQuery(function ($) {
function click_menu() {
order_nav_list.on('click', function () {
if (!$(this).hasClass('en')) {
let target_index = $(this).index();
const target_index = $(this).index();
order_nav_list.removeClass('en');
$(this).addClass('en');
order_box.hide();
@@ -51,13 +51,13 @@ jQuery(function ($) {
}
function order_list() {
let cat_ul_count = $('.post-order-list').length; //カテゴリ総数
const cat_ul_count = $('.post-order-list').length; //カテゴリ総数
for (let i = 0; i < cat_ul_count; i++) {
let my_list = $('.post-order-list:eq(' + i + ')');
const my_list = $('.post-order-list:eq(' + i + ')');
my_list.sortable(
{
update: function () {
let list_count = $('.product-list', my_list).length;
const list_count = $('.product-list', my_list).length;
for (let j = 0; j < list_count; j++) {
let list_order_num = j + 1;
$('.list-order:eq(' + j + ')', my_list).val(list_order_num);
@@ -71,38 +71,38 @@ jQuery(function ($) {
}
function change_sort_box() {
let s_radio = $('.sort_menu');
let sort_menu_size = $('.sort-menu-list').length;
const s_radio = $('.sort_menu');
const sort_menu_size = $('.sort-menu-list').length;
$('.sort_box').hide();
for (let i = 0; i < sort_menu_size; i++) {
let type_index = $('.sort-menu-list:eq(' + i + ')').data('order_target') - 1;
$('.sort-menu-list:eq(' + i + ')').siblings('.sort_box:eq(' + type_index + ')').show();
const elm = $('.sort-menu-list:eq(' + i + ')');
const type_index = elm.data('order_target') - 1;
elm.siblings('.sort_box:eq(' + type_index + ')').show();
}
s_radio.on('click', function () {
let target_index = $(this).val() - 1;
const target_index = $(this).val() - 1;
$(this).parents('.list-orders-inner').find('.sort_box').hide();
$(this).parents('.list-orders-inner').find('.sort_box:eq(' + target_index + ')').show();
})
}
function select_tax() {
let select_cat_checkbox = $('.select_cat_checkbox');
let input_chk_size = select_cat_checkbox.length;
let i = 0;
for (i; i < input_chk_size; i++) {
let chk = $('.select_cat_checkbox:eq(' + i + '):checked').length;
if (chk == 1) {
$('.select_cat:eq(' + i + ')').siblings('.select-per-page').show();
const select_cat_checkbox = $('.select_cat_checkbox');
const input_chk_size = select_cat_checkbox.length;
for (let i = 0; i < input_chk_size; i++) {
const chk = $('.select_cat_checkbox:eq(' + i + '):checked').length;
const elm = $('.select_cat:eq(' + i + ')');
if (chk === 1) {
elm.siblings('.select-per-page').show();
} else {
$('.select_cat:eq(' + i + ')').siblings('.select-per-page').hide();
elm.siblings('.select-per-page').hide();
}
}
select_cat_checkbox.on('click', function () {
let checked = $(this).prop('checked');
const checked = $(this).prop('checked');
if (checked) {
$(this).parent().parent().siblings('.select-per-page').show(200);
} else {
@@ -113,17 +113,17 @@ jQuery(function ($) {
}
function change_search_per_page() {
let per_page_cat = $('.per_page_search');
let per_page_input = $('.per_page_search_input');
const per_page_cat = $('.per_page_search');
const per_page_input = $('.per_page_search_input');
if (per_page_input.val() == '') {
if (per_page_input.val() === '') {
per_page_input.prop('disabled', true);
} else {
per_page_input.prop('disabled', false);
}
per_page_cat.on('click', function () {
if ($(this).val() != 'default' && $(this).val() != '-1' && $(this).val() != 'all') {
if ($(this).val() !== 'default' && $(this).val() !== '-1' && $(this).val() !== 'all') {
per_page_input.prop('disabled', false);
} else {
per_page_input.val('');
@@ -133,11 +133,11 @@ jQuery(function ($) {
}
function change_tax_per_page() {
let set_number = $('.set_number');
let input_chk_size = set_number.length;
const set_number = $('.set_number');
const input_chk_size = set_number.length;
for (let i = 0; i < input_chk_size; i++) {
let input_num_box = $('.set_number:eq(' + i + ')').siblings('.per_page_cat_input');
if (input_num_box.val() == '') {
const input_num_box = $('.set_number:eq(' + i + ')').siblings('.per_page_cat_input');
if (input_num_box.val() === '') {
input_num_box.prop('disabled', true);
} else {
input_num_box.prop('disabled', false);
@@ -154,57 +154,57 @@ jQuery(function ($) {
}
function change_normal_field_sort() {
let s_box = $('.sort_box');
let targets = '.sort_date_check, .sort_title_check, .sort_ID_check, .sort_modified_check';
const s_box = $('.sort_box');
const targets = '.sort_date_check, .sort_title_check, .sort_ID_check, .sort_modified_check';
s_box.find(targets).each(function () {
if ($(this).prop('checked') == false) {
if ($(this).prop('checked') === false) {
$(this).parents('.product-list-sort-type').find('.order_param').prop('disabled', true);
let disable_list = $(this).parents('.sort_box').find('.disable-normal-list');
const disable_list = $(this).parents('.sort_box').find('.disable-normal-list');
$(this).parents('li').appendTo(disable_list);
}
});
$(targets).on('click', function () {
if ($(this).prop('checked') == true) {
if ($(this).prop('checked') === true) {
$(this).parents('.product-list-sort-type').find('.order_param').prop('disabled', false);
let enable_list = $(this).parents('.sort_box').find('.post-order-list');
const enable_list = $(this).parents('.sort_box').find('.post-order-list');
$(this).parents('li').appendTo(enable_list).removeClass('no-order').hide().fadeIn(200);
} else {
$(this).parents('.product-list-sort-type').find('.order_param').prop('disabled', true);
let disable_list = $(this).parents('.sort_box').find('.disable-normal-list');
const disable_list = $(this).parents('.sort_box').find('.disable-normal-list');
$(this).parents('li').appendTo(disable_list).addClass('no-order').hide().fadeIn(200);
}
});
}
function custom_field_select() {
let s_box = $('.sort_box');
let targets = $('.custom-field-type');
let en_dis_check = $('.custom_field_check');
const s_box = $('.sort_box');
const targets = $('.custom-field-type');
const en_dis_check = $('.custom_field_check');
// カスタムフィールドソートの有効・無効を判定する。
// 有効の場合はカスタムフィールド選択or追加のステータスに応じてテキストエリアとセレクトタグenableに変更し表示を切り替える。
// 無効の場合はカスタムフィールドのテキストエリアとセレクトタグをDisableにし無効ボックスに移動する。
s_box.find('.custom_field_check').each(function () {
if ($(this).prop('checked') == false) {
let disable_list = $(this).parents('.sort_box').find('.disable-normal-list');
if ($(this).prop('checked') === false) {
const disable_list = $(this).parents('.sort_box').find('.disable-normal-list');
$(this).parents('li').appendTo(disable_list);
dis_list($(this));
} else {
let target_type = $(this).parents('.product-list-sort-type').find('.custom-field-type').filter(':checked').val();
const target_type = $(this).parents('.product-list-sort-type').find('.custom-field-type').filter(':checked').val();
en_dis_list($(this), target_type);
}
});
//有効・無効チェックボックスクリック時
en_dis_check.on('click', function () {
if ($(this).prop('checked') == true) {
let enable_list = $(this).parents('.sort_box').find('.post-order-list');
let target_type = $(this).parents('.product-list-sort-type').find('.custom-field-type').filter(':checked').val();
if ($(this).prop('checked') === true) {
const enable_list = $(this).parents('.sort_box').find('.post-order-list');
const target_type = $(this).parents('.product-list-sort-type').find('.custom-field-type').filter(':checked').val();
$(this).parents('.product-list-sort-type').find('.order_param').prop('disabled', false);
$(this).parents('li').appendTo(enable_list).removeClass('no-order').hide().fadeIn(200);
en_dis_list($(this), target_type);
} else {
let disable_list = $(this).parents('.sort_box').find('.disable-normal-list');
const disable_list = $(this).parents('.sort_box').find('.disable-normal-list');
$(this).parents('.product-list-sort-type').find('.order_param').prop('disabled', true);
$(this).parents('li').appendTo(disable_list).addClass('no-order').hide().fadeIn(200);
dis_list($(this));
@@ -228,11 +228,11 @@ jQuery(function ($) {
select_msg = '既存のカスタムフィールドから選択';
add_msg = 'APOP専用カスタムフィールドを追加';
}
if (type == 1) {
if (type === 1) {
obj.parents('.product-list-sort-type').find('.custom_field_key_select').prop('disabled', false).show();
obj.parents('.product-list-sort-type').find('.custom_field_key').prop('disabled', true).hide();
obj.parents('.product-list-sort-type').find('.custom-field-select-alert').text(select_msg);
} else if (type == 2) {
} else if (type === 2) {
obj.parents('.product-list-sort-type').find('.custom_field_key').prop('disabled', false).show();
obj.parents('.product-list-sort-type').find('.custom_field_key_select').prop('disabled', true).hide();
obj.parents('.product-list-sort-type').find('.custom-field-select-alert').text(add_msg);
+6 -2
View File
@@ -18,6 +18,7 @@ $submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
<?php wp_nonce_field( 'sh_options' ); ?>
<input id="apop_submit_type" type="hidden" name="apop_submit_type"
value="<?php echo esc_attr( $submit_type ); ?>">
<!-- 最新の投稿の設定 -->
<div class="post-order-box">
<div class="list-orders-outer">
<div class="list-orders-inner">
@@ -27,7 +28,6 @@ $submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
$order_target = APOP_UI::get_order_type( $order_target_type );
?>
<?php include APOP_PLUGIN_PATH . 'template/order_parts_menu.php'; ?>
<hr>
<p><?php _e( 'Click "Save Changes" to register the sort.', APOP_DOMAIN ); ?></p>
<div class="sort_box">
<div class="enable-box">
@@ -49,6 +49,7 @@ $submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
</div>
</div>
</div>
<!-- 検索の設定 -->
<div class="post-order-box">
<div class="list-orders-outer">
<div class="list-orders-inner">
@@ -58,7 +59,6 @@ $submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
$order_target = APOP_UI::get_order_type( $order_target_type );
?>
<?php include APOP_PLUGIN_PATH . 'template/order_parts_menu.php'; ?>
<hr>
<p><?php _e( 'Click "Save Changes" to register the sort.', APOP_DOMAIN ); ?></p>
<div class="sort_box">
<div class="enable-box">
@@ -80,6 +80,7 @@ $submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
</div>
</div>
</div>
<!-- カテゴリーの設定 -->
<div class="post-order-box">
<div class="tax_sort_box">
<?php
@@ -89,6 +90,7 @@ $submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
?>
</div>
</div>
<!-- タグの設定 -->
<div class="post-order-box">
<div class="tax_sort_box">
<?php
@@ -98,6 +100,7 @@ $submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
?>
</div>
</div>
<!-- カスタム分類の設定 -->
<div class="post-order-box">
<div class="tax_sort_box">
<?php
@@ -106,6 +109,7 @@ $submit_type = APOP_UI::input_post_filter( 'apop_submit_type', 'str' );
include APOP_PLUGIN_PATH . 'template/order_parts_taxonomy.php'; ?>
</div>
</div>
<!-- カスタム投稿アーカイブの設定 -->
<div class="post-order-box">
<div class="tax_sort_box">
<?php
-2
View File
@@ -32,7 +32,6 @@
</ul>
<div class="sort_box">
<hr>
<p><?php _e( 'Click "Save Changes" to register the sort.', APOP_DOMAIN ); ?></p>
<ul class="post-order-list drag-sort">
<?php echo APOP_UI::create_custompost_archive_order_list( $custom_post['slug'] ); ?>
@@ -40,7 +39,6 @@
</div>
<div class="sort_box">
<hr>
<p><?php _e( 'Click "Save Changes" to register the sort.', APOP_DOMAIN ); ?></p>
<div class="enable-box">
<h4><?php _e( 'Enabled', APOP_DOMAIN ); ?></h4>
-2
View File
@@ -32,7 +32,6 @@
</ul>
<div class="sort_box">
<hr>
<p><?php _e( 'Click "Save Changes" to register the sort.', APOP_DOMAIN ); ?></p>
<ul class="post-order-list drag-sort">
<?php echo APOP_UI::create_order_list( $tax_data, $tax_key ); ?>
@@ -40,7 +39,6 @@
</div>
<div class="sort_box">
<hr>
<p><?php _e( 'Click "Save Changes" to register the sort.', APOP_DOMAIN ); ?></p>
<div class="enable-box">
<h4><?php _e( 'Enabled', APOP_DOMAIN ); ?></h4>