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
# ビデオライブラリ - 動画カテゴリー別に記事を一覧表示するモジュール
ビデオライブラリ配下の動画カテゴリーごとに、記事を一覧表示させるモジュールです。
ビデオライブラリの運用手順につきましては、別途ドキュメントが有ります。
[ビデオライブラリドキュメント](https://docs.google.com/document/d/1Mv310DNpZQIXYQrS9QYY9q_uzCUZxF9K6jtkQOx7ouc/edit?usp=sharing)
## インストール手順
1. 管理画面ログイン
2. エクステンション配下の管理を選択
3. （フォルダからインストール）を選択
4. フォームにインストールするモジュールまたは、コンポーネントのフォルダを指定（例：/var/www/html/src/com/com_hoge）
5. チェックしてインストール
\ No newline at end of file
src/mod/mod_articles_category_custom/en-GB.mod_articles_category_custom.ini 0 → 100644
; Joomla! Project
; Copyright (C) 2005 - 2019 Open Source Matters. All rights reserved.
; License GNU General Public License version 2 or later; see LICENSE.txt
; Note : All ini files need to be saved as UTF-8
MOD_ARTICLES_CATEGORY_CUSTOM="Articles - Category"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEGROUPING_DESC="Select how you would like the articles to be grouped."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEGROUPING_LABEL="Article Grouping"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEGROUPINGDIR_DESC="Select the direction you would like the Article Groupings to be ordered by."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEGROUPINGDIR_LABEL="Grouping Direction"
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'."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEORDERING_LABEL="Article Field to Order By"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEORDERINGDIR_DESC="Select the direction you would like Articles to be ordered by."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ARTICLEORDERINGDIR_LABEL="Ordering Direction"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHOR_DESC="Select one or more authors from the list below."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHOR_LABEL="Authors"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORALIAS_DESC="Select one or more author aliases from the list below."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORALIAS_LABEL="Author Aliases"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORALIASFILTERING_DESC="Select Inclusive to Include the Selected Author Aliases, Exclusive to Exclude the Selected Author Aliases."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORALIASFILTERING_LABEL="Author Alias Filtering Type"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORFILTERING_DESC="Select Inclusive to Include the Selected Authors, Exclusive to Exclude the Selected Authors."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_AUTHORFILTERING_LABEL="Author Filtering Type"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATDEPTH_DESC="The number of child category levels to return."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATDEPTH_LABEL="Category Depth"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATEGORY_DESC="Please select one or more categories."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATFILTERINGTYPE_DESC="Select Inclusive to Include the Selected Categories, Exclusive to Exclude the Selected Categories."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_CATFILTERINGTYPE_LABEL="Category Filtering Type"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_COUNT_DESC="The number of items to display. The default value of 0 will display all articles."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_COUNT_LABEL="Count"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATERANGEFIELD_DESC="Select which date field you want the date range to be applied to."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATERANGEFIELD_LABEL="Date Range Field"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFIELD_DESC="Select which date field you want to display."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFIELD_LABEL="Date Field"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFIELDFORMAT_DESC="Please enter in a valid date format. See: https://php.net/date for formatting information."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFIELDFORMAT_LABEL="Date Format"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFILTERING_DESC="Select Date Filtering Type."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEFILTERING_LABEL="Date Filtering"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEGROUPINGFIELD_DESC="Select which date field you want the date grouping to be applied to."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_DATEGROUPINGFIELD_LABEL="Date Grouping Field"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ENDDATE_DESC="Please enter an End Date."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_ENDDATE_LABEL="To Date"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_EXCLUDEDARTICLES_DESC="Please enter each Article ID on a new line."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_EXCLUDEDARTICLES_LABEL="Article IDs to Exclude"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_DISPLAY_LABEL="Display Options"
; The following string is deprecated and will be removed with 4.0
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_DYNAMIC_LABEL="Dynamic Mode Options"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_FILTERING_LABEL="Filtering Options"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_GROUPING_LABEL="Grouping Options"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_GROUP_ORDERING_LABEL="Ordering Options"
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."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_INTROTEXTLIMIT_LABEL="Introtext Limit"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_LINKTITLES_LABEL="Linked Titles"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_LINKTITLES_DESC="Linked titles."
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."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_MODE_LABEL="Mode"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_MONTHYEARFORMAT_DESC="Please enter in a valid date format. See: https://php.net/date for formatting information."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_MONTHYEARFORMAT_LABEL="Month and Year Display Format"
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."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_RELATIVEDATE_LABEL="Relative Date"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWAUTHOR_DESC="Select Show if you would like the author (or author alias instead, if available) to be displayed."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWCATEGORY_DESC="Select Show if you would like the category name displayed."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWCHILDCATEGORYARTICLES_DESC="Include or Exclude Articles from Child Categories."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWCHILDCATEGORYARTICLES_LABEL="Child Category Articles"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWDATE_DESC="Select Show if you would like the date displayed."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWFEATURED_DESC="Select to Show, Hide, or Only display Featured Articles."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWFEATURED_LABEL="Featured Articles"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWHITS_DESC="Select Show if you would like the hits for each article to be displayed."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWHITS_LABEL="Hits"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWINTROTEXT_DESC="Select Show if you would like the introtext to be displayed."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWINTROTEXT_LABEL="Introtext"
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."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWONARTICLEPAGE_LABEL="Show on Article Page"
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_SHOWTAGS_DESC="Show the tags for each article."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_STARTDATE_DESC="Please enter a Starting Date."
MOD_ARTICLES_CATEGORY_CUSTOM_FIELD_STARTDATE_LABEL="Start Date Range"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ASCENDING_VALUE="Ascending"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_CREATED_VALUE="Created Date"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_DATERANGE_VALUE="Date Range"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_DESCENDING_VALUE="Descending"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_DYNAMIC_VALUE="Dynamic"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_EXCLUDE_VALUE="Exclude"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_EXCLUSIVE_VALUE="Exclusive"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_HITS_VALUE="Hits"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ID_VALUE="ID"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_INCLUDE_VALUE="Include"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_INCLUSIVE_VALUE="Inclusive"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_MODIFIED_VALUE="Modified Date"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_MONTHYEAR_VALUE="Month and Year"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_NORMAL_VALUE="Normal"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_OFF_VALUE="Off"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ONLYFEATURED_VALUE="Only"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ORDERING_VALUE="Article Order"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_ORDERINGFEATURED_VALUE="Featured Articles Order"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_RANDOM_VALUE="Random"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_RATING_VALUE="Rating"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_RELATIVEDAY_VALUE="Relative Date"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_STARTPUBLISHING_VALUE="Start Publishing Date"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_FINISHPUBLISHING_VALUE="Finish Publishing Date"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_VOTE_VALUE="Vote"
MOD_ARTICLES_CATEGORY_CUSTOM_OPTION_YEAR_VALUE="Year"
MOD_ARTICLES_CATEGORY_CUSTOM_READ_MORE="Read more: "
MOD_ARTICLES_CATEGORY_CUSTOM_READ_MORE_TITLE="Read More ..."
MOD_ARTICLES_CATEGORY_CUSTOM_REGISTER_TO_READ_MORE="Register to read more"
MOD_ARTICLES_CATEGORY_CUSTOM_UNTAGGED="Untagged"
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
; Joomla! Project
; Copyright (C) 2005 - 2019 Open Source Matters. All rights reserved.
; License GNU General Public License version 2 or later; see LICENSE.txt
; Note : All ini files need to be saved as UTF-8
MOD_ARTICLES_CATEGORY_CUSTOM="Articles - Category"
MOD_ARTICLES_CATEGORY_CUSTOM_XML_DESCRIPTION="This module displays a list of articles from one or more categories."
MOD_ARTICLES_CATEGORY_CUSTOM_LAYOUT_DEFAULT="Default"
src/mod/mod_articles_category_custom/ja-JP.mod_articles_category_custom.sys.ini 0 → 100644
; Joomla! Project
; Copyright (C) 2005 - 2017 Open Source Matters. All rights reserved.
; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
; Note : All ini files need to be saved as UTF-8
MOD_ARTICLES_CATEGORY_CUSTOM="ビデオライブラリ - カテゴリ"
MOD_ARTICLES_CATEGORY_CUSTOM_XML_DESCRIPTION="1つまたは複数のカテゴリから記事一覧を表示します。(ビデオライブラリ専用のモジュールです)"
MOD_ARTICLES_CATEGORY_CUSTOM_LAYOUT_DEFAULT="標準"
src/mod/mod_articles_category_custom/mod_articles_category_custom.php 0 → 100644
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category_custom
*
* @copyright Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
// Include the helper functions only once
JLoader::register('ModArticlesCategoryCustomHelper', __DIR__ . '/helper.php');
$input = JFactory::getApplication()->input;
// Prep for Normal or Dynamic Modes
$mode = $params->get('mode', 'normal');
$idbase = null;
switch ($mode)
{
case 'dynamic' :
$option = $input->get('option');
$view = $input->get('view');
if ($option === 'com_content')
{
switch ($view)
{
case 'category' :
$idbase = $input->getInt('id');
break;
case 'categories' :
$idbase = $input->getInt('id');
break;
case 'article' :
if ($params->get('show_on_article_page', 1))
{
$idbase = $input->getInt('catid');
}
break;
}
}
break;
case 'normal' :
default:
$idbase = $params->get('catid');
break;
}
$cacheid = md5(serialize(array ($idbase, $module->module, $module->id)));
$cacheparams = new stdClass;
$cacheparams->cachemode = 'id';
$cacheparams->class = 'ModArticlesCategoryCustomHelper';
$cacheparams->method = 'getList';
$cacheparams->methodparams = $params;
$cacheparams->modeparams = $cacheid;
$list = JModuleHelper::moduleCache($module, $params, $cacheparams);
if (!empty($list))
{
$grouped = false;
$article_grouping = $params->get('article_grouping', 'none');
$article_grouping_direction = $params->get('article_grouping_direction', 'ksort');
$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8');
$item_heading = $params->get('item_heading');
if ($article_grouping !== 'none')
{
$grouped = true;
switch ($article_grouping)
{
case 'year' :
case 'month_year' :
$list = ModArticlesCategoryCustomHelper::groupByDate(
$list,
$article_grouping,
$article_grouping_direction,
$params->get('month_year_format', 'F Y'),
$params->get('date_grouping_field', 'created')
);
break;
case 'author' :
case 'category_title' :
$list = ModArticlesCategoryCustomHelper::groupBy($list, $article_grouping, $article_grouping_direction);
break;
case 'tags' :
$list = ModArticlesCategoryCustomHelper::groupByTags($list, $article_grouping_direction);
break;
default:
break;
}
}
require JModuleHelper::getLayoutPath('mod_articles_category_custom', $params->get('layout', 'default'));
}
src/mod/mod_articles_category_custom/tmpl/default.php 0 → 100644
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category_custom
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
$catid = JRequest::getInt('catid');
?>
<!-- 記事カテゴリーの表示 -->
<h3><?php echo $list[0]->category_title; ?></h3>
<ul class="category-module-custom videos-custom-item-wrapper <?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
<li>
<p class="mod-articles-category-introtext">
<?php echo $item->displayIntrotext; ?>
</p>
</li>
<?php endforeach; ?>
</ul>
templates/protostar/css/style_org.css
......@@ -3582,81 +3582,93 @@ body.itemid-132 table {
/* -------------------------------------------------------------------------
　ビデオライブラリページ
------------------------------------------------------------------------- */
.videos-custom h5 {
padding-left: 0;
font-size: 1.125rem;
background: none;
#content .blog.videos-custom h3 {
margin-bottom: 0px;
margin-top: 10px;
}
.videos-custom-item-wrapper {
.blog.videos-custom .videos-custom-item-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
justify-content: space-between;
margin: 0 0 16px;
}
.videos-custom-item-wrapper:before {
.blog.videos-custom .videos-custom-item-wrapper:before {
content: "";
display: block;
min-width: 190px;
width: 30%;
width: calc(33% - 8px);
height: 0px;
order: 1;
}
.videos-custom-item-wrapper:after {
.blog.videos-custom .videos-custom-item-wrapper:after {
content: "";
display: block;
min-width: 190px;
width: 30%;
width: calc(33% - 8px);
height: 0px;
}
.videos-custom-item {
.blog.videos-custom .videos-custom-item-wrapper > li {
list-style: none;
min-width: 190px;
width: 30%;
width: calc(33% - 8px);
margin-bottom: 16px;
font-size: 1rem;
text-align: justify;
}
.videos-custom-item-title {
.blog.videos-custom .videos-custom-item-wrapper > li > h5 {
padding-left: 0;
font-size: 1.125rem;
}
.videos-custom-item-explanation {
font-size: 1rem;
background: none;
margin-top: 15px;
margin-bottom: 5px;
}
/* ビデオライブラリページ レスポンシブ*/
@media (max-width: 900px) {
.videos-custom-item {
width: 45%;
.blog.videos-custom-item-wrapper:before {
width: calc(50% - 8px);
}
.videos-custom-item-wrapper:before {
width: 45%;
.blog.videos-custom-item-wrapper:after {
width: calc(50% - 8px);
}
.videos-custom-item-wrapper:after {
width: 45%;
.blog.videos-custom .videos-custom-item-wrapper > li {
width: calc(50% - 8px);
}
}
@media (max-width: 550px) {
.videos-custom-item-wrapper {
#content .blog.videos-custom h3 {
margin-bottom: 10px;
margin-top: 0px;
margin-bottom: 0px;
margin-top: 10px;
}
.blog.videos-custom-item-wrapper {
display: block;
}
.videos-custom-item {
.blog.videos-custom .videos-custom-item-wrapper > li {
height: auto;
width: 100%;
padding-bottom: 8px;
border-bottom: #003894 4px solid;
margin-bottom: 24px;
padding-bottom: 2px;
border-bottom: #003894 2px solid;
margin-bottom: 10px;
font-size: 0.875rem;
}
.videos-custom-item-title {
.blog.videos-custom .videos-custom-item-wrapper > li > h5 {
font-size: 1rem;
}
.videos-custom-item-explanation {
font-size: 0.875rem;
.blog.videos-custom .videos-custom-item-wrapper > li > p {
margin-bottom: 0;
}
}
......@@ -3762,6 +3774,11 @@ body.itemid-132 table {
background-color: #fff;
}
.item-page.photos-custom > div p:hover {
cursor: pointer;
}
.item-page.photos-custom > div p img {
display: block;
/* 親要素の真ん中に表示 */
......@@ -3792,28 +3809,37 @@ body.itemid-132 table {
}
.item-page.photos-custom #photo-popup {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 220;
width: 90%;
height: 90%;
max-width: 1260px;
max-height: 90%;
overflow: auto;
}
.item-page.photos-custom #photo-popup.Vertical {
width: 60%;
.item-page.photos-custom #photo-popup.vertical {
display: flex;
align-items: center;
justify-content: center;
}
.item-page.photos-custom #photo-popup.horizontal {
width: 90%;
overflow: auto;
}
.item-page.photos-custom #photo-popup #photo-popup-img {
transition: opacity 0.5s;
}
.item-page.photos-custom #photo-popup.vertical #photo-popup-img {
max-height: 100%;
}
.item-page.photos-custom #photo-popup.horizontal #photo-popup-img {
width: 100%;
transition: all 0.5s;
}
.item-page.photos-custom #photo-popup-under {
......
templates/protostar/js/photo_popup.js
......@@ -23,29 +23,12 @@ jQuery(function($) {
for (let i = 0; i < $imgWrppers.length; i++) {
// 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
if ($imgWrppers[i]['children'].length === 0) {
$('.item-page.photos-custom > div p').eq(i).remove();
$imgWrppers[i].remove();
}
}
});
/**
* 画面サイズが4:3より縦長の場合は、写真を画面幅いっぱいに表示する。
*/
function setPopup() {
const winW = $(window).innerWidth();
const winH = $(window).innerHeight();
// 画面表示領域のアスペクト比を取得
const asp = winH / winW;
if (asp < 0.75) {
$('#photo-popup').removeClass('horizontal');
$('#photo-popup').addClass('Vertical');
} else {
$('#photo-popup').removeClass('Vertical');
$('#photo-popup').addClass('horizontal');
}
}
/**
* 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
* popupの制御を行う関数の実行。
*/
......@@ -60,19 +43,14 @@ jQuery(function($) {
const $img = $('#photo-popup-img');
// popupに画像URLをセット
$img.attr('src', src);
setPopup();
$(window).resize(function () {
setPopup();
});
// 画像URLのセットから時間をあけることで、表示がなめらかになる。
setTimeout(function () {
// popupの表示
$('#photo-popup-wrapper').fadeIn();
// popupのみスクロール可とする。
$('body').css('overflow','hidden');
addClassToImage($img);
}, 50);
setTimeout(function () {
popupScrollSet($img);
}, 100);
});
/**
......@@ -97,11 +75,12 @@ jQuery(function($) {
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきった時点で画像の差し替えを実行
// transitionで透明になりきるまでまって画像の差し替えを実行
$img.attr('src', src);
}, 400);
setTimeout(function () {
popupScrollSet($img);
// 画像URLのセットからすこし待つことで関数で正しい数値を取得できる。
addClassToImage($img);
}, 500);
setTimeout(function () {
$('#photo-popup').css('display','');
......@@ -126,7 +105,7 @@ jQuery(function($) {
$img.attr('src', src);
}, 400);
setTimeout(function () {
popupScrollSet($img);
addClassToImage($img);
}, 500);
setTimeout(function () {
$('#photo-popup').css('display','');
......@@ -146,18 +125,19 @@ jQuery(function($) {
}
/**
* 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
* 表示する画像のアスペクト比に応じたクラスを付与する。
* @param {*} $img ポップアップに表示している画像
*/
function popupScrollSet($img) {
function addClassToImage($img) {
const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
if (imgHeight > imgWidth) {
const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
$('#photo-popup').scrollTop(scrollTop);
console.log('test');
const asp = imgHeight / imgWidth;
if (asp < 1) {
$('#photo-popup').removeClass('horizontal');
$('#photo-popup').addClass('vertical');
} else {
$('#photo-popup').removeClass('vertical');
$('#photo-popup').addClass('horizontal');
}
}
});
\ 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!