Skip to content

Yokihito Oki / kanoya-univercity-prod

Go to a project
Toggle navigation
Toggle navigation pinning
126e9a80 by Yokihito Oki
Options

Merge branch 'video_liblary' into 'master' 

Video liblary

See merge request !35
2 parents 67839487 3b3cd770
Expand all
Inline Side-by-side
Showing 11 changed files with 339 additions and 75 deletions
src/mod/mod_articles_category_custom/README.md 0 → 100644
1 # ビデオライブラリ - 動画カテゴリー別に記事を一覧表示するモジュール
2 ビデオライブラリ配下の動画カテゴリーごとに、記事を一覧表示させるモジュールです。
3
4 ビデオライブラリの運用手順につきましては、別途ドキュメントが有ります。
5 [ビデオライブラリドキュメント](https://docs.google.com/document/d/1Mv310DNpZQIXYQrS9QYY9q_uzCUZxF9K6jtkQOx7ouc/edit?usp=sharing)
6
7 ## インストール手順
8 1. 管理画面ログイン
9 2. エクステンション配下の管理を選択
10 3. （フォルダからインストール）を選択
11 4. フォームにインストールするモジュールまたは、コンポーネントのフォルダを指定（例：/var/www/html/src/com/com_hoge）
12 5. チェックしてインストール
...\ No newline at end of file ...\ No newline at end of file
src/mod/mod_articles_category_custom/en-GB.mod_articles_category_custom.ini 0 → 100644
1 ; Joomla! Project
2 ; Copyright (C) 2005 - 2019 Open Source Matters. All rights reserved.
3 ; License GNU General Public License version 2 or later; see LICENSE.txt
4 ; Note : All ini files need to be saved as UTF-8
5
6 MOD_ARTICLES_CATEGORY_CUSTOM="Articles - Category"
7 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEGROUPING_DESC="Select how you would like the articles to be grouped."
8 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEGROUPING_LABEL="Article Grouping"
9 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEGROUPINGDIR_DESC="Select the direction you would like the Article Groupings to be ordered by."
10 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEGROUPINGDIR_LABEL="Grouping Direction"
11 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEORDERING_DESC="Select which field you would like Articles to be ordered by. Featured Ordering should only be used when Filtering Option for Featured Articles is set to 'Only'."
12 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEORDERING_LABEL="Article Field to Order By"
13 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEORDERINGDIR_DESC="Select the direction you would like Articles to be ordered by."
14 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEORDERINGDIR_LABEL="Ordering Direction"
15 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHOR_DESC="Select one or more authors from the list below."
16 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHOR_LABEL="Authors"
17 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORALIAS_DESC="Select one or more author aliases from the list below."
18 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORALIAS_LABEL="Author Aliases"
19 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORALIASFILTERING_DESC="Select Inclusive to Include the Selected Author Aliases, Exclusive to Exclude the Selected Author Aliases."
20 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORALIASFILTERING_LABEL="Author Alias Filtering Type"
21 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORFILTERING_DESC="Select Inclusive to Include the Selected Authors, Exclusive to Exclude the Selected Authors."
22 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORFILTERING_LABEL="Author Filtering Type"
23 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATDEPTH_DESC="The number of child category levels to return."
24 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATDEPTH_LABEL="Category Depth"
25 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATEGORY_DESC="Please select one or more categories."
26 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATFILTERINGTYPE_DESC="Select Inclusive to Include the Selected Categories, Exclusive to Exclude the Selected Categories."
27 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATFILTERINGTYPE_LABEL="Category Filtering Type"
28 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_COUNT_DESC="The number of items to display. The default value of 0 will display all articles."
29 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_COUNT_LABEL="Count"
30 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATERANGEFIELD_DESC="Select which date field you want the date range to be applied to."
31 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATERANGEFIELD_LABEL="Date Range Field"
32 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFIELD_DESC="Select which date field you want to display."
33 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFIELD_LABEL="Date Field"
34 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFIELDFORMAT_DESC="Please enter in a valid date format. See: https://php.net/date for formatting information."
35 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFIELDFORMAT_LABEL="Date Format"
36 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFILTERING_DESC="Select Date Filtering Type."
37 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFILTERING_LABEL="Date Filtering"
38 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEGROUPINGFIELD_DESC="Select which date field you want the date grouping to be applied to."
39 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEGROUPINGFIELD_LABEL="Date Grouping Field"
40 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ENDDATE_DESC="Please enter an End Date."
41 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ENDDATE_LABEL="To Date"
42 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_EXCLUDEDARTICLES_DESC="Please enter each Article ID on a new line."
43 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_EXCLUDEDARTICLES_LABEL="Article IDs to Exclude"
44 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_DISPLAY_LABEL="Display Options"
45 ; The following string is deprecated and will be removed with 4.0
46 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_DYNAMIC_LABEL="Dynamic Mode Options"
47 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_FILTERING_LABEL="Filtering Options"
48 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_GROUPING_LABEL="Grouping Options"
49 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_ORDERING_LABEL="Ordering Options"
50 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_INTROTEXTLIMIT_DESC="Please enter in a numeric character limit value. The introtext will be trimmed to the number of characters you enter."
51 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_INTROTEXTLIMIT_LABEL="Introtext Limit"
52 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_LINKTITLES_LABEL="Linked Titles"
53 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_LINKTITLES_DESC="Linked titles."
54 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_MODE_DESC="Please select the mode you would like to use. If Normal Mode is chosen, then configure the module and it will display a static list of Articles on the menu items you assign the module to. If Dynamic Mode is chosen, then you can still configure the module normally, however now the Category option will no longer be used. Instead, the module will dynamically detect if you are on a Category view and will display the list of articles within that Category. When Dynamic Mode is chosen, it is best to leave the module set to display on all pages, as it will decide to display anything dynamically."
55 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_MODE_LABEL="Mode"
56 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_MONTHYEARFORMAT_DESC="Please enter in a valid date format. See: https://php.net/date for formatting information."
57 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_MONTHYEARFORMAT_LABEL="Month and Year Display Format"
58 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_RELATIVEDATE_DESC="Please enter a numeric value. Results will be retrieved relative to the current date and the value you enter."
59 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_RELATIVEDATE_LABEL="Relative Date"
60 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWAUTHOR_DESC="Select Show if you would like the author (or author alias instead, if available) to be displayed."
61 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWCATEGORY_DESC="Select Show if you would like the category name displayed."
62 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWCHILDCATEGORYARTICLES_DESC="Include or Exclude Articles from Child Categories."
63 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWCHILDCATEGORYARTICLES_LABEL="Child Category Articles"
64 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWDATE_DESC="Select Show if you would like the date displayed."
65 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWFEATURED_DESC="Select to Show, Hide, or Only display Featured Articles."
66 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWFEATURED_LABEL="Featured Articles"
67 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWHITS_DESC="Select Show if you would like the hits for each article to be displayed."
68 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWHITS_LABEL="Hits"
69 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWINTROTEXT_DESC="Select Show if you would like the introtext to be displayed."
70 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWINTROTEXT_LABEL="Introtext"
71 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWONARTICLEPAGE_DESC="Select to Show or hide Article List from Article Pages. This means that the module will only display itself dynamically on Category Pages."
72 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWONARTICLEPAGE_LABEL="Show on Article Page"
73 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWTAGS_DESC="Show the tags for each article."
74 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_STARTDATE_DESC="Please enter a Starting Date."
75 MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_STARTDATE_LABEL="Start Date Range"
76 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ASCENDING_VALUE="Ascending"
77 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_CREATED_VALUE="Created Date"
78 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_DATERANGE_VALUE="Date Range"
79 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_DESCENDING_VALUE="Descending"
80 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_DYNAMIC_VALUE="Dynamic"
81 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_EXCLUDE_VALUE="Exclude"
82 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_EXCLUSIVE_VALUE="Exclusive"
83 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_HITS_VALUE="Hits"
84 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ID_VALUE="ID"
85 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_INCLUDE_VALUE="Include"
86 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_INCLUSIVE_VALUE="Inclusive"
87 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_MODIFIED_VALUE="Modified Date"
88 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_MONTHYEAR_VALUE="Month and Year"
89 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_NORMAL_VALUE="Normal"
90 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_OFF_VALUE="Off"
91 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ONLYFEATURED_VALUE="Only"
92 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ORDERING_VALUE="Article Order"
93 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ORDERINGFEATURED_VALUE="Featured Articles Order"
94 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_RANDOM_VALUE="Random"
95 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_RATING_VALUE="Rating"
96 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_RELATIVEDAY_VALUE="Relative Date"
97 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_STARTPUBLISHING_VALUE="Start Publishing Date"
98 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_FINISHPUBLISHING_VALUE="Finish Publishing Date"
99 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_VOTE_VALUE="Vote"
100 MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_YEAR_VALUE="Year"
101 MOD_ARTICLES_CATEGORY_CUSTOM_READ_MORE="Read more: "
102 MOD_ARTICLES_CATEGORY_CUSTOM_READ_MORE_TITLE="Read More ..."
103 MOD_ARTICLES_CATEGORY_CUSTOM_REGISTER_TO_READ_MORE="Register to read more"
104 MOD_ARTICLES_CATEGORY_CUSTOM_UNTAGGED="Untagged"
105 MOD_ARTICLES_CATEGORY_CUSTOM_XML_DESCRIPTION="This module displays a list of articles from one or more categories."
src/mod/mod_articles_category_custom/en-GB.mod_articles_category_custom.sys.ini 0 → 100644
1 ; Joomla! Project
2 ; Copyright (C) 2005 - 2019 Open Source Matters. All rights reserved.
3 ; License GNU General Public License version 2 or later; see LICENSE.txt
4 ; Note : All ini files need to be saved as UTF-8
5
6 MOD_ARTICLES_CATEGORY_CUSTOM="Articles - Category"
7 MOD_ARTICLES_CATEGORY_CUSTOM_XML_DESCRIPTION="This module displays a list of articles from one or more categories."
8 MOD_ARTICLES_CATEGORY_CUSTOM_LAYOUT_DEFAULT="Default"
9
src/mod/mod_articles_category_custom/ja-JP.mod_articles_category_custom.sys.ini 0 → 100644
1 ; Joomla! Project
2 ; Copyright (C) 2005 - 2017 Open Source Matters. All rights reserved.
3 ; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
4 ; Note : All ini files need to be saved as UTF-8
5
6 MOD_ARTICLES_CATEGORY_CUSTOM="ビデオライブラリ - カテゴリ"
7 MOD_ARTICLES_CATEGORY_CUSTOM_XML_DESCRIPTION="1つまたは複数のカテゴリから記事一覧を表示します。(ビデオライブラリ専用のモジュールです)"
8 MOD_ARTICLES_CATEGORY_CUSTOM_LAYOUT_DEFAULT="標準"
src/mod/mod_articles_category_custom/mod_articles_category_custom.php 0 → 100644
1 <?php
2 /**
3 * @package Joomla.Site
4 * @subpackage mod_articles_category_custom
5 *
6 * @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
7 * @license GNU General Public License version 2 or later; see LICENSE.txt
8 */
9
10 defined('_JEXEC') or die;
11
12 // Include the helper functions only once
13 JLoader::register('ModArticlesCategoryCustomHelper', __DIR__ . '/helper.php');
14
15 $input = JFactory::getApplication()->input;
16
17 // Prep for Normal or Dynamic Modes
18 $mode = $params->get('mode', 'normal');
19 $idbase = null;
20
21 switch ($mode)
22 {
23 case 'dynamic' :
24 $option = $input->get('option');
25 $view = $input->get('view');
26
27 if ($option === 'com_content')
28 {
29 switch ($view)
30 {
31 case 'category' :
32 $idbase = $input->getInt('id');
33 break;
34 case 'categories' :
35 $idbase = $input->getInt('id');
36 break;
37 case 'article' :
38 if ($params->get('show_on_article_page', 1))
39 {
40 $idbase = $input->getInt('catid');
41 }
42 break;
43 }
44 }
45 break;
46 case 'normal' :
47 default:
48 $idbase = $params->get('catid');
49 break;
50 }
51
52 $cacheid = md5(serialize(array ($idbase, $module->module, $module->id)));
53
54 $cacheparams = new stdClass;
55 $cacheparams->cachemode = 'id';
56 $cacheparams->class = 'ModArticlesCategoryCustomHelper';
57 $cacheparams->method = 'getList';
58 $cacheparams->methodparams = $params;
59 $cacheparams->modeparams = $cacheid;
60
61 $list = JModuleHelper::moduleCache($module, $params, $cacheparams);
62
63 if (!empty($list))
64 {
65 $grouped = false;
66 $article_grouping = $params->get('article_grouping', 'none');
67 $article_grouping_direction = $params->get('article_grouping_direction', 'ksort');
68 $moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8');
69 $item_heading = $params->get('item_heading');
70
71 if ($article_grouping !== 'none')
72 {
73 $grouped = true;
74
75 switch ($article_grouping)
76 {
77 case 'year' :
78 case 'month_year' :
79 $list = ModArticlesCategoryCustomHelper::groupByDate(
80 $list,
81 $article_grouping,
82 $article_grouping_direction,
83 $params->get('month_year_format', 'F Y'),
84 $params->get('date_grouping_field', 'created')
85 );
86 break;
87 case 'author' :
88 case 'category_title' :
89 $list = ModArticlesCategoryCustomHelper::groupBy($list, $article_grouping, $article_grouping_direction);
90 break;
91 case 'tags' :
92 $list = ModArticlesCategoryCustomHelper::groupByTags($list, $article_grouping_direction);
93 break;
94 default:
95 break;
96 }
97 }
98
99 require JModuleHelper::getLayoutPath('mod_articles_category_custom', $params->get('layout', 'default'));
100 }
src/mod/mod_articles_category_custom/tmpl/default.php 0 → 100644
1 <?php
2
3 /**
4 * @package Joomla.Site
5 * @subpackage mod_articles_category_custom
6 *
7 * @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
8 * @license GNU General Public License version 2 or later; see LICENSE.txt
9 */
10
11 defined('_JEXEC') or die;
12 $catid = JRequest::getInt('catid');
13 ?>
14 <!-- 記事カテゴリーの表示 -->
15 <h3><?php echo $list[0]->category_title; ?></h3>
16 <ul class="category-module-custom videos-custom-item-wrapper <?php echo $moduleclass_sfx; ?>">
17 <?php foreach ($list as $item) : ?>
18 <li>
19 <p class="mod-articles-category-introtext">
20 <?php echo $item->displayIntrotext; ?>
21 </p>
22 </li>
23 <?php endforeach; ?>
24 </ul>
templates/protostar/css/style_org.css
...@@ -3582,81 +3582,93 @@ body.itemid-132 table { ...@@ -3582,81 +3582,93 @@ body.itemid-132 table {
3582 /* ------------------------------------------------------------------------- 3582 /* -------------------------------------------------------------------------
3583 　ビデオライブラリページ 3583 　ビデオライブラリページ
3584 ------------------------------------------------------------------------- */ 3584 ------------------------------------------------------------------------- */
3585 .videos-custom h5 { 3585 #content .blog.videos-custom h3 {
3586 padding-left: 0; 3586 margin-bottom: 0px;
3587 font-size: 1.125rem; 3587 margin-top: 10px;
3588 background: none;
3589 } 3588 }
3590 3589
3591 .videos-custom-item-wrapper { 3590 .blog.videos-custom .videos-custom-item-wrapper {
3592 display: flex; 3591 display: flex;
3593 flex-wrap: wrap; 3592 flex-wrap: wrap;
3594 justify-content: space-around; 3593 justify-content: space-between;
3594 margin: 0 0 16px;
3595
3595 } 3596 }
3596 3597
3597 .videos-custom-item-wrapper:before { 3598 .blog.videos-custom .videos-custom-item-wrapper:before {
3598 content: ""; 3599 content: "";
3599 display: block; 3600 display: block;
3600 min-width: 190px; 3601 min-width: 190px;
3601 width: 30%; 3602 width: calc(33% - 8px);
3602 height: 0px; 3603 height: 0px;
3603 order: 1; 3604 order: 1;
3604 } 3605 }
3605 .videos-custom-item-wrapper:after { 3606
3607 .blog.videos-custom .videos-custom-item-wrapper:after {
3606 content: ""; 3608 content: "";
3607 display: block; 3609 display: block;
3608 min-width: 190px; 3610 min-width: 190px;
3609 width: 30%; 3611 width: calc(33% - 8px);
3610 height: 0px; 3612 height: 0px;
3611 } 3613 }
3612 3614
3613 .videos-custom-item { 3615 .blog.videos-custom .videos-custom-item-wrapper > li {
3616 list-style: none;
3614 min-width: 190px; 3617 min-width: 190px;
3615 width: 30%; 3618 width: calc(33% - 8px);
3616 margin-bottom: 16px; 3619 margin-bottom: 16px;
3620 font-size: 1rem;
3621 text-align: justify;
3617 } 3622 }
3618 3623
3619 .videos-custom-item-title { 3624 .blog.videos-custom .videos-custom-item-wrapper > li > h5 {
3625 padding-left: 0;
3620 font-size: 1.125rem; 3626 font-size: 1.125rem;
3621 } 3627 background: none;
3622 3628 margin-top: 15px;
3623 .videos-custom-item-explanation { 3629 margin-bottom: 5px;
3624 font-size: 1rem;
3625 } 3630 }
3626 3631
3627 /* ビデオライブラリページ レスポンシブ*/ 3632 /* ビデオライブラリページ レスポンシブ*/
3628 @media (max-width: 900px) { 3633 @media (max-width: 900px) {
3629 .videos-custom-item { 3634 .blog.videos-custom-item-wrapper:before {
3630 width: 45%; 3635 width: calc(50% - 8px);
3631 } 3636 }
3632 .videos-custom-item-wrapper:before { 3637 .blog.videos-custom-item-wrapper:after {
3633 width: 45%; 3638 width: calc(50% - 8px);
3634 } 3639 }
3635 .videos-custom-item-wrapper:after { 3640 .blog.videos-custom .videos-custom-item-wrapper > li {
3636 width: 45%; 3641 width: calc(50% - 8px);
3637 } 3642 }
3638 } 3643 }
3639 3644
3640 @media (max-width: 550px) { 3645 @media (max-width: 550px) {
3641 .videos-custom-item-wrapper { 3646 #content .blog.videos-custom h3 {
3647 margin-bottom: 10px;
3648 margin-top: 0px;
3649 margin-bottom: 0px;
3650 margin-top: 10px;
3651 }
3652
3653 .blog.videos-custom-item-wrapper {
3642 display: block; 3654 display: block;
3643 } 3655 }
3644 3656
3645 .videos-custom-item { 3657 .blog.videos-custom .videos-custom-item-wrapper > li {
3646 height: auto; 3658 height: auto;
3647 width: 100%; 3659 width: 100%;
3648 padding-bottom: 8px; 3660 padding-bottom: 2px;
3649 border-bottom: #003894 4px solid; 3661 border-bottom: #003894 2px solid;
3650 margin-bottom: 24px; 3662 margin-bottom: 10px;
3663 font-size: 0.875rem;
3651 } 3664 }
3652 3665
3653 3666 .blog.videos-custom .videos-custom-item-wrapper > li > h5 {
3654 .videos-custom-item-title {
3655 font-size: 1rem; 3667 font-size: 1rem;
3656 } 3668 }
3657 3669
3658 .videos-custom-item-explanation { 3670 .blog.videos-custom .videos-custom-item-wrapper > li > p {
3659 font-size: 0.875rem; 3671 margin-bottom: 0;
3660 } 3672 }
3661 } 3673 }
3662 3674
...@@ -3762,6 +3774,11 @@ body.itemid-132 table { ...@@ -3762,6 +3774,11 @@ body.itemid-132 table {
3762 background-color: #fff; 3774 background-color: #fff;
3763 } 3775 }
3764 3776
3777 .item-page.photos-custom > div p:hover {
3778 cursor: pointer;
3779 }
3780
3781
3765 .item-page.photos-custom > div p img { 3782 .item-page.photos-custom > div p img {
3766 display: block; 3783 display: block;
3767 /* 親要素の真ん中に表示 */ 3784 /* 親要素の真ん中に表示 */
...@@ -3792,28 +3809,37 @@ body.itemid-132 table { ...@@ -3792,28 +3809,37 @@ body.itemid-132 table {
3792 } 3809 }
3793 3810
3794 .item-page.photos-custom #photo-popup { 3811 .item-page.photos-custom #photo-popup {
3795 display: block;
3796 position: fixed; 3812 position: fixed;
3797 top: 50%; 3813 top: 50%;
3798 left: 50%; 3814 left: 50%;
3799 transform: translate(-50%, -50%); 3815 transform: translate(-50%, -50%);
3800 z-index: 220; 3816 z-index: 220;
3817 width: 90%;
3818 height: 90%;
3801 max-width: 1260px; 3819 max-width: 1260px;
3802 max-height: 90%;
3803 overflow: auto;
3804 } 3820 }
3805 3821
3806 .item-page.photos-custom #photo-popup.Vertical { 3822 .item-page.photos-custom #photo-popup.vertical {
3807 width: 60%; 3823 display: flex;
3824 align-items: center;
3825 justify-content: center;
3808 } 3826 }
3809 3827
3810 .item-page.photos-custom #photo-popup.horizontal { 3828 .item-page.photos-custom #photo-popup.horizontal {
3811 width: 90%; 3829 overflow: auto;
3812 } 3830 }
3813 3831
3814 .item-page.photos-custom #photo-popup #photo-popup-img { 3832 .item-page.photos-custom #photo-popup #photo-popup-img {
3833 transition: opacity 0.5s;
3834 }
3835
3836
3837 .item-page.photos-custom #photo-popup.vertical #photo-popup-img {
3838 max-height: 100%;
3839 }
3840
3841 .item-page.photos-custom #photo-popup.horizontal #photo-popup-img {
3815 width: 100%; 3842 width: 100%;
3816 transition: all 0.5s;
3817 } 3843 }
3818 3844
3819 .item-page.photos-custom #photo-popup-under { 3845 .item-page.photos-custom #photo-popup-under {
......
templates/protostar/js/photo_popup.js
...@@ -23,29 +23,12 @@ jQuery(function($) { ...@@ -23,29 +23,12 @@ jQuery(function($) {
23 for (let i = 0; i < $imgWrppers.length; i++) { 23 for (let i = 0; i < $imgWrppers.length; i++) {
24 // 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない) 24 // 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
25 if ($imgWrppers[i]['children'].length === 0) { 25 if ($imgWrppers[i]['children'].length === 0) {
26 $('.item-page.photos-custom > div p').eq(i).remove(); 26 $imgWrppers[i].remove();
27 } 27 }
28 } 28 }
29 }); 29 });
30 30
31 /** 31 /**
32 * 画面サイズが4:3より縦長の場合は、写真を画面幅いっぱいに表示する。
33 */
34 function setPopup() {
35 const winW = $(window).innerWidth();
36 const winH = $(window).innerHeight();
37 // 画面表示領域のアスペクト比を取得
38 const asp = winH / winW;
39 if (asp < 0.75) {
40 $('#photo-popup').removeClass('horizontal');
41 $('#photo-popup').addClass('Vertical');
42 } else {
43 $('#photo-popup').removeClass('Vertical');
44 $('#photo-popup').addClass('horizontal');
45 }
46 }
47
48 /**
49 * 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、 32 * 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
50 * popupの制御を行う関数の実行。 33 * popupの制御を行う関数の実行。
51 */ 34 */
...@@ -60,19 +43,14 @@ jQuery(function($) { ...@@ -60,19 +43,14 @@ jQuery(function($) {
60 const $img = $('#photo-popup-img'); 43 const $img = $('#photo-popup-img');
61 // popupに画像URLをセット 44 // popupに画像URLをセット
62 $img.attr('src', src); 45 $img.attr('src', src);
63 setPopup(); 46 // 画像URLのセットから時間をあけることで、表示がなめらかになる。
64 $(window).resize(function () {
65 setPopup();
66 });
67 setTimeout(function () { 47 setTimeout(function () {
68 // popupの表示 48 // popupの表示
69 $('#photo-popup-wrapper').fadeIn(); 49 $('#photo-popup-wrapper').fadeIn();
70 // popupのみスクロール可とする。 50 // popupのみスクロール可とする。
71 $('body').css('overflow','hidden'); 51 $('body').css('overflow','hidden');
52 addClassToImage($img);
72 }, 50); 53 }, 50);
73 setTimeout(function () {
74 popupScrollSet($img);
75 }, 100);
76 }); 54 });
77 55
78 /** 56 /**
...@@ -97,11 +75,12 @@ jQuery(function($) { ...@@ -97,11 +75,12 @@ jQuery(function($) {
97 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); 75 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
98 } 76 }
99 setTimeout(function () { 77 setTimeout(function () {
100 // transitionで透明になりきった時点で画像の差し替えを実行 78 // transitionで透明になりきるまでまって画像の差し替えを実行
101 $img.attr('src', src); 79 $img.attr('src', src);
102 }, 400); 80 }, 400);
103 setTimeout(function () { 81 setTimeout(function () {
104 popupScrollSet($img); 82 // 画像URLのセットからすこし待つことで関数で正しい数値を取得できる。
83 addClassToImage($img);
105 }, 500); 84 }, 500);
106 setTimeout(function () { 85 setTimeout(function () {
107 $('#photo-popup').css('display',''); 86 $('#photo-popup').css('display','');
...@@ -126,7 +105,7 @@ jQuery(function($) { ...@@ -126,7 +105,7 @@ jQuery(function($) {
126 $img.attr('src', src); 105 $img.attr('src', src);
127 }, 400); 106 }, 400);
128 setTimeout(function () { 107 setTimeout(function () {
129 popupScrollSet($img); 108 addClassToImage($img);
130 }, 500); 109 }, 500);
131 setTimeout(function () { 110 setTimeout(function () {
132 $('#photo-popup').css('display',''); 111 $('#photo-popup').css('display','');
...@@ -146,18 +125,19 @@ jQuery(function($) { ...@@ -146,18 +125,19 @@ jQuery(function($) {
146 } 125 }
147 126
148 /** 127 /**
149 * 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。 128 * 表示する画像のアスペクト比に応じたクラスを付与する。
150 * @param {*} $img ポップアップに表示している画像 129 * @param {*} $img ポップアップに表示している画像
151 */ 130 */
152 function popupScrollSet($img) { 131 function addClassToImage($img) {
153 const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ 132 const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
154 const imgWidth = $img[0].naturalWidth; // 画像の本来の幅 133 const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
155 if (imgHeight > imgWidth) { 134 const asp = imgHeight / imgWidth;
156 const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅 135 if (asp < 1) {
157 const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率 136 $('#photo-popup').removeClass('horizontal');
158 const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%) 137 $('#photo-popup').addClass('vertical');
159 $('#photo-popup').scrollTop(scrollTop); 138 } else {
160 console.log('test'); 139 $('#photo-popup').removeClass('vertical');
140 $('#photo-popup').addClass('horizontal');
161 } 141 }
162 } 142 }
163 }); 143 });
...\ No newline at end of file ...\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!