8186a094 by TaishiTokudome

Merge branch 'master' into 'deployment/production'

Master

See merge request !33
2 parents 302c4dcb 58f2c7b1
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
6 ・キャッシュ 6 ・キャッシュ
7 ・ログ 7 ・ログ
8 ・アップロードファイル 8 ・アップロードファイル
9 ・htaccess
9 詳しくは.gitignoreを参照 10 詳しくは.gitignoreを参照
10 11
11 ### 開発環境 12 ### 開発環境
......
...@@ -1238,6 +1238,63 @@ class WFFileBrowser extends JObject ...@@ -1238,6 +1238,63 @@ class WFFileBrowser extends JObject
1238 throw new InvalidArgumentException(JText::_('WF_MANAGER_FILE_LIMIT_ERROR')); 1238 throw new InvalidArgumentException(JText::_('WF_MANAGER_FILE_LIMIT_ERROR'));
1239 } 1239 }
1240 } 1240 }
1241 /**
1242 * 画像リサイズ処理
1243 */
1244 $fieldid = (string) $app->input->get('fieldid', '', 'STRING');
1245 // ファイルがイントロ画像としてアップロードされていることを確認
1246 if ($fieldid === 'jform_images_image_intro') {
1247
1248 // tmpディレクトリに一時保存されているupload予定のファイルパスを取得
1249 $tmp_file = $file['tmp_name'];
1250
1251 // 画像情報を取得
1252 $image_info = getimagesize($tmp_file);
1253 // 画像情報から画像の幅を取得
1254 $width = (int) $image_info[0];
1255 // リサイズ後の幅を定義
1256 $new_width = 1600;
1257
1258 // 登録する画像の幅がリサイズ後の幅(1600px)より大きいことを確認(1600px以上でリサイズ処理)
1259 // 記事詳細ページでの画像表示と、サムネイル画像としての画像表示両方に対応できるように1600でリサイズ
1260 if ($width > $new_width) {
1261 // 画像情報から画像の高さを取得
1262 $height = (int) $image_info[1];
1263 // 画像タイプを取得
1264 $image_type = $image_info['mime'];
1265 // アスペクト比(縦横比を取得)
1266 $aspect_ratio = $height / $width;
1267 // リサイズ後の高さを定義(アスペクト比を維持して定義)
1268 $new_height = $new_width * $aspect_ratio;
1269
1270 switch ($image_type) {
1271 // 画像タイプがPNGの場合の処理
1272 case 'image/png':
1273 // 元の画像から新しい画像を作る準備
1274 $base_image = imagecreatefrompng($tmp_file);
1275 // サイズを指定して新しい画像のキャンバスを作成
1276 $new_image = imagecreatetruecolor($new_width, $new_height);
1277 // 画像のコピーと伸縮
1278 imagecopyresampled($new_image, $base_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
1279 // コピーした画像を出力
1280 imagepng($new_image, $tmp_file);
1281 break;
1282 // 画像タイプがJPEGの場合の処理
1283 case 'image/jpeg':
1284 // 元の画像から新しい画像を作る準備
1285 $base_image = imagecreatefromjpeg($tmp_file);
1286 // サイズを指定して新しい画像のキャンバスを作成
1287 $new_image = imagecreatetruecolor($new_width, $new_height);
1288 // 画像のコピーと伸縮
1289 imagecopyresampled($new_image, $base_image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
1290 // コピーした画像を出力
1291 imagejpeg($new_image, $tmp_file);
1292 break;
1293 default:
1294 break;
1295 }
1296 }
1297 }
1241 1298
1242 // Check total file size limit 1299 // Check total file size limit
1243 if (!empty($upload['total_size'])) { 1300 if (!empty($upload['total_size'])) {
......
...@@ -3431,6 +3431,122 @@ body.itemid-132 table { ...@@ -3431,6 +3431,122 @@ body.itemid-132 table {
3431 } 3431 }
3432 3432
3433 /* ------------------------------------------------------------------------- 3433 /* -------------------------------------------------------------------------
3434  OB・OGインタビューページに対するスタイル指定
3435 ------------------------------------------------------------------------- */
3436 .interview .items-leading > div {
3437 border-top: 2px solid #003894;
3438 display: flex;
3439 flex-direction: row-reverse;
3440 align-items: center;
3441 position: relative;
3442 }
3443
3444 /* イントロテキストを表示しない設定ができないので、以下の設定で、一旦全てを非表示にする */
3445 .interview .items-leading > div > * {
3446 display: none;
3447 }
3448
3449 .interview .items-leading div .page-header {
3450 display: block;
3451 width: 100%;
3452 padding: 0;
3453 margin: 32px 0;
3454 }
3455
3456 .interview .items-leading div .page-header h2 {
3457 /* .blogに対して指定されているスタイルを取り消し */
3458 border-top: none;
3459 border-bottom: none;
3460 margin: 0;
3461 padding: 0;
3462 font-size: 100%;
3463 }
3464
3465 /* 記事情報(公開日など)にデフォルトでかかっているスタイルを取り消し */
3466 .interview .items-leading div .article-info > * {
3467 margin-bottom: 0;
3468 }
3469
3470 .interview .items-leading div .article-info {
3471 /* 記事情報が一つ以上表示された場合に横並びにする */
3472 display: block;
3473 /* 記事情報のpositionを右下に指定 */
3474 position: absolute;
3475 margin: 0;
3476 bottom: 8px;
3477 right: 0;
3478 }
3479
3480 .interview .items-leading div .item-image {
3481 display: flex;
3482 /* flexによる圧縮をさせない */
3483 flex-shrink: 0;
3484 /* 配下のimage要素とa要素を縦方向にセンタリング */
3485 align-items: center;
3486 width: 140px;
3487 height: 105px;
3488 /* デフォルトでかかっているfloatプロパティの解除 */
3489 float: none;
3490 /* 配下の画像のはみ出した部分は非表示にし、トリミングする */
3491 overflow: hidden;
3492 margin: 12px 24px 12px 0;
3493 }
3494 .interview .items-leading div .item-image a {
3495 width: 100%;
3496 }
3497
3498 .interview .items-leading div .item-image img {
3499 /* 画像ごとによって縦横幅が自動設定。最大値以上にはならないように指定 */
3500 width: 100%;
3501 }
3502
3503 /* 記事装飾スタイル */
3504 .interview-first {
3505 padding: 12px;
3506 background-color: #e9f1ff;
3507 }
3508 .interview-profile {
3509 padding: 12px;
3510 border: 1px solid #ccc;
3511 }
3512 .interview-profile::before {
3513 display: block;
3514 content: "【プロフィール】";
3515 }
3516 /* 記事装飾スタイルここまで */
3517
3518
3519 /* レスポンシブ */
3520 @media (max-width: 500px) {
3521 .interview .items-leading > div {
3522 /* 縦並びに変更 */
3523 flex-direction: column-reverse;
3524 }
3525
3526 .interview .items-leading div .page-header {
3527 /* 記事情報が入るのでmargin-bottomは大きめにする */
3528 margin: 16px 0 32px;
3529 }
3530
3531 .interview .items-leading div .item-image {
3532 width: 100%;
3533 /*max-height = 画面幅 - 両サイドのpadding * 0.75として4(幅):3(高さ)とする*/
3534 max-height: calc((100vw - 30px) * 0.75);
3535 height: auto;
3536 margin: 20px 0 0;
3537 }
3538 }
3539
3540
3541 /* OB・OGインタビューページタイトル */
3542 .interview .category-desc {
3543 margin-bottom: 8px;
3544 }
3545 .interview .category-desc p {
3546 margin-bottom: 6px;
3547 }
3548
3549 /* -------------------------------------------------------------------------
3434  app/modules/mod_information_articles_archive_custom/tmpl/default.phpのスタイルを変更 3550  app/modules/mod_information_articles_archive_custom/tmpl/default.phpのスタイルを変更
3435 ------------------------------------------------------------------------- */ 3551 ------------------------------------------------------------------------- */
3436 .archive-module-custom { 3552 .archive-module-custom {
...@@ -3462,3 +3578,311 @@ body.itemid-132 table { ...@@ -3462,3 +3578,311 @@ body.itemid-132 table {
3462 bottom: 47px; 3578 bottom: 47px;
3463 } 3579 }
3464 } 3580 }
3581
3582 /* -------------------------------------------------------------------------
3583  ビデオライブラリページ
3584 ------------------------------------------------------------------------- */
3585 .videos-custom h5 {
3586 padding-left: 0;
3587 font-size: 1.125rem;
3588 background: none;
3589 }
3590
3591 .videos-custom-item-wrapper {
3592 display: flex;
3593 flex-wrap: wrap;
3594 justify-content: space-around;
3595 }
3596
3597 .videos-custom-item-wrapper:before {
3598 content: "";
3599 display: block;
3600 min-width: 190px;
3601 width: 30%;
3602 height: 0px;
3603 order: 1;
3604 }
3605 .videos-custom-item-wrapper:after {
3606 content: "";
3607 display: block;
3608 min-width: 190px;
3609 width: 30%;
3610 height: 0px;
3611 }
3612
3613 .videos-custom-item {
3614 min-width: 190px;
3615 width: 30%;
3616 margin-bottom: 16px;
3617 }
3618
3619 .videos-custom-item-title {
3620 font-size: 1.125rem;
3621 }
3622
3623 .videos-custom-item-explanation {
3624 font-size: 1rem;
3625 }
3626
3627 /* ビデオライブラリページ レスポンシブ*/
3628 @media (max-width: 900px) {
3629 .videos-custom-item {
3630 width: 45%;
3631 }
3632 .videos-custom-item-wrapper:before {
3633 width: 45%;
3634 }
3635 .videos-custom-item-wrapper:after {
3636 width: 45%;
3637 }
3638 }
3639
3640 @media (max-width: 550px) {
3641 .videos-custom-item-wrapper {
3642 display: block;
3643 }
3644
3645 .videos-custom-item {
3646 height: auto;
3647 width: 100%;
3648 padding-bottom: 8px;
3649 border-bottom: #003894 4px solid;
3650 margin-bottom: 24px;
3651 }
3652
3653
3654 .videos-custom-item-title {
3655 font-size: 1rem;
3656 }
3657
3658 .videos-custom-item-explanation {
3659 font-size: 0.875rem;
3660 }
3661 }
3662
3663 /* -------------------------------------------------------------------------
3664  フォトライブラリ (メニュー(記事一覧))
3665 ------------------------------------------------------------------------- */
3666 .blog.photos-custom .items-leading {
3667 display: flex;
3668 align-items: flex-start;
3669 flex-wrap: wrap;
3670 justify-content: space-between;
3671 }
3672
3673 .blog.photos-custom .items-leading > div {
3674 position: relative;
3675 width: calc(50% - 16px);
3676 box-sizing: border-box;
3677 margin: 0 auto 16px 0;
3678 }
3679
3680 /* 記事本文が表示されないようにdisplay: none; */
3681 .blog.photos-custom .items-leading > div > * {
3682 display: none;
3683 }
3684
3685 /* 記事一覧に必要な要素をdisplay: block; */
3686 .blog.photos-custom .items-leading > div .page-header {
3687 display: block;
3688 }
3689
3690 /* 記事一覧に必要な要素をdisplay: block; */
3691 .blog.photos-custom .items-leading > div .article-info {
3692 display: block;
3693 position: absolute;
3694 bottom: -56px;
3695 right: 0;
3696 margin: 0;
3697 padding: 0;
3698 }
3699
3700 /* 記事一覧に必要な要素をdisplay: block; */
3701 .blog.photos-custom .items-leading > div .item-image {
3702 display: block;
3703 float: none;
3704 margin: 0;
3705 overflow: hidden;
3706 }
3707
3708 .blog.photos-custom .items-leading > div .item-image a {
3709 transition: all 1s;
3710 }
3711
3712 .blog.photos-custom .items-leading > div .item-image a img {
3713 transition: all 0.5s;
3714 }
3715
3716 .blog.photos-custom .items-leading > div .item-image:hover a img {
3717 transform: scale3d(1.1, 1.1, 1.1);
3718 }
3719
3720 /* レスポンシブ */
3721 @media (max-width: 500px) {
3722 .blog.photos-custom .items-leading {
3723 display: block;
3724 }
3725
3726 .blog.photos-custom .items-leading > div {
3727 width: 100%;
3728 margin-bottom: 24px;
3729 }
3730
3731 .blog.photos-custom .items-leading > div .article-info {
3732 right: 6px;
3733 }
3734 }
3735
3736 /* -------------------------------------------------------------------------
3737  フォトライブラリ (記事)
3738 ------------------------------------------------------------------------- */
3739 .item-page.photos-custom .page-header {
3740 display: block;
3741 }
3742
3743 .item-page.photos-custom > div {
3744 display: flex;
3745 align-items: center;
3746 justify-content: space-between;
3747 flex-wrap: wrap;
3748 }
3749
3750 .item-page.photos-custom > div p {
3751 position: relative;
3752 /* 親要素が最大の幅である840pxのときに幅268pxになる */
3753 width: calc(268/840*100%);
3754 height: 0;
3755 /* paddingで高さを用意する */
3756 /* 自分自身の幅が(840*100%)を基準にしているので、それに対して3:4のアスペクト比になるように高さを用意する */
3757 padding-bottom: calc(201/840*100%);
3758 box-sizing: border-box;
3759 margin-bottom: calc(16/840*100%);
3760 overflow: hidden;
3761 /* border: 2px solid #999999; */
3762 background-color: #fff;
3763 }
3764
3765 .item-page.photos-custom > div p img {
3766 display: block;
3767 /* 親要素の真ん中に表示 */
3768 position: absolute;
3769 top: 50%;
3770 left: 50%;
3771 transform: translate(-50%, -50%);
3772 width: 100%;
3773 transition: all 0.5s;
3774 }
3775
3776 .item-page.photos-custom > div p:hover img {
3777 transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1);
3778 }
3779
3780 @media (max-width: 500px) {
3781 .item-page.photos-custom > div p {
3782 width: calc(228/470*100%);
3783 padding-bottom: calc(171/470*100%);
3784 }
3785 }
3786
3787 /* -------------------------------------------------------------------------
3788 フォトライブラリポップアップ
3789 ------------------------------------------------------------------------- */
3790 .item-page.photos-custom #photo-popup-wrapper {
3791 display: none;
3792 }
3793
3794 .item-page.photos-custom #photo-popup {
3795 display: block;
3796 position: fixed;
3797 top: 50%;
3798 left: 50%;
3799 transform: translate(-50%, -50%);
3800 z-index: 220;
3801 max-width: 1260px;
3802 max-height: 90%;
3803 overflow: auto;
3804 }
3805
3806 .item-page.photos-custom #photo-popup.Vertical {
3807 width: 60%;
3808 }
3809
3810 .item-page.photos-custom #photo-popup.horizontal {
3811 width: 90%;
3812 }
3813
3814 .item-page.photos-custom #photo-popup #photo-popup-img {
3815 width: 100%;
3816 transition: all 0.5s;
3817 }
3818
3819 .item-page.photos-custom #photo-popup-under {
3820 display: block;
3821 position: fixed;
3822 top: 0;
3823 left: 0;
3824 z-index: 210;
3825 width: 100vw;
3826 height: 100vh;
3827 background-color: rgba(255, 255, 255, 0.8);
3828 }
3829
3830 .item-page.photos-custom .popup-button {
3831 display: flex;
3832 align-items: center;
3833 justify-content: center;
3834 width: 40px;
3835 height: 40px;
3836 background-color: rgba(255, 255, 255, 0.6);
3837 color: #222;
3838 text-decoration: none;
3839 z-index: 230;
3840 border: 1px solid #999;
3841 transition: all 0.2s;
3842 }
3843
3844 .item-page.photos-custom .popup-button:hover {
3845 box-shadow: #222 0px 0px 3px 1px;
3846 margin-bottom: 1px;
3847 font-weight: bold;
3848 }
3849
3850 .item-page.photos-custom .popup-button:active {
3851 box-shadow: #222 0px 0px 0px 0px;
3852 margin: 0;
3853 font-weight: normal;
3854 }
3855
3856 .item-page.photos-custom #photo-popup-close {
3857 position: fixed;
3858 top: 5%;
3859 right: 5%;
3860 }
3861
3862 .item-page.photos-custom #photo-popup-pre {
3863 position: fixed;
3864 top: 50%;
3865 left: 5%;
3866 transform: translate(0, -50%);
3867 }
3868
3869 .item-page.photos-custom #photo-popup-next {
3870 position: fixed;
3871 top: 50%;
3872 right: 5%;
3873 transform: translate(0, -50%);
3874 }
3875
3876 @media (max-width: 800px) {
3877 .item-page.photos-custom #photo-popup-close {
3878 right: 0;
3879 }
3880
3881 .item-page.photos-custom #photo-popup-pre {
3882 left: 0;
3883 }
3884
3885 .item-page.photos-custom #photo-popup-next {
3886 right: 0;
3887 }
3888 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) { ...@@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) {
198 <link rel="stylesheet" href="/templates/protostar/css/print.css" media="print"> 198 <link rel="stylesheet" href="/templates/protostar/css/print.css" media="print">
199 <script src="./js/jquery-1.12.4.min.js"></script> 199 <script src="./js/jquery-1.12.4.min.js"></script>
200 <script src="./js/slick.min.js"></script> 200 <script src="./js/slick.min.js"></script>
201 <script src="/templates/protostar/js/photo_popup.js"></script>
201 <link rel="stylesheet" href="./js/slick.css" media="screen" /> 202 <link rel="stylesheet" href="./js/slick.css" media="screen" />
202 203
203 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 204 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
......
1 jQuery(function($) {
2 /**
3 * フォトライブラリ用のpopupのためのHTMLをセット
4 */
5 $(document).ready(function() {
6 const photosCustom = $('.item-page.photos-custom');
7 if (photosCustom[0]) {
8 let photosCustomHtml = '';
9 photosCustomHtml += '<div id="photo-popup-wrapper">';
10 photosCustomHtml += '<div id="photo-popup">';
11 photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
12 photosCustomHtml += '</div>';
13 photosCustomHtml += '<a id="photo-popup-close" class="popup-button" href="#">×</a>';
14 photosCustomHtml += '<a id="photo-popup-pre" class="popup-button" href="#"><</a>';
15 photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
16 photosCustomHtml += '<div id="photo-popup-under">';
17 photosCustomHtml += '</div>';
18 photosCustomHtml += '</div>';
19 photosCustom.append(photosCustomHtml);
20 }
21 // 自動生成されたp要素を削除
22 let $imgWrppers = $('.item-page.photos-custom > div p');
23 for (let i = 0; i < $imgWrppers.length; i++) {
24 // 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
25 if ($imgWrppers[i]['children'].length === 0) {
26 $('.item-page.photos-custom > div p').eq(i).remove();
27 }
28 }
29 });
30
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の取得と、
50 * popupの制御を行う関数の実行。
51 */
52 $('.item-page.photos-custom > div p').on('click', function() {
53 // クリックされた画像のインデックス番号を取得
54 let index = $('.item-page.photos-custom > div p').index(this);
55 // 画像の数を取得
56 const imagesLength = $('.item-page.photos-custom > div p').length;
57 changePopup(index, imagesLength);
58 // popupで表示させる画像URLを取得
59 const src = $(this).children('img').attr('src');
60 const $img = $('#photo-popup-img');
61 // popupに画像URLをセット
62 $img.attr('src', src);
63 setPopup();
64 $(window).resize(function () {
65 setPopup();
66 });
67 setTimeout(function () {
68 // popupの表示
69 $('#photo-popup-wrapper').fadeIn();
70 // popupのみスクロール可とする。
71 $('body').css('overflow','hidden');
72 }, 50);
73 setTimeout(function () {
74 popupScrollSet($img);
75 }, 100);
76 });
77
78 /**
79 * ポップアップの状態の制御
80 * ・ 画像の切り替え
81 * ・ ポップアップの表示、非表示
82 *
83 * @param {*} index クリックされた画像の親要素の中での順番
84 * @param {*} imagesLength 画像のインデックス番号の最大値を取得
85 */
86 function changePopup(index, imagesLength) {
87 $('#photo-popup-pre').off('click').on('click', function() {
88 const $img = $('#photo-popup-img');
89 let src = '';
90 // 透明にする
91 $img.css('opacity',0);
92 if (index === 0) {
93 index = imagesLength - 1;
94 src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src');
95 } else {
96 index--;
97 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
98 }
99 setTimeout(function () {
100 // transitionで透明になりきった時点で画像の差し替えを実行
101 $img.attr('src', src);
102 }, 400);
103 setTimeout(function () {
104 popupScrollSet($img);
105 }, 500);
106 setTimeout(function () {
107 $('#photo-popup').css('display','');
108 $img.css('opacity','');
109 }, 600);
110 });
111
112 $('#photo-popup-next').off('click').on('click', function() {
113 const $img = $('#photo-popup-img');
114 let src = '';
115 // 透明にする
116 $('#photo-popup-img').css('opacity',0);
117 if (index === imagesLength - 1) {
118 index = 0;
119 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
120 } else {
121 index++;
122 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
123 }
124 setTimeout(function () {
125 // transitionで透明になりきった時点で画像の差し替えを実行
126 $img.attr('src', src);
127 }, 400);
128 setTimeout(function () {
129 popupScrollSet($img);
130 }, 500);
131 setTimeout(function () {
132 $('#photo-popup').css('display','');
133 $img.css('opacity','');
134 }, 600);
135 });
136
137 $('#photo-popup-close').off('click').on('click', function() {
138 $('#photo-popup-wrapper').fadeOut();
139 $('body').css('overflow','');
140 });
141
142 $('#photo-popup-under').off('click').on('click', function() {
143 $('#photo-popup-wrapper').fadeOut();
144 $('body').css('overflow','');
145 });
146 }
147
148 /**
149 * 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
150 * @param {*} $img ポップアップに表示している画像
151 */
152 function popupScrollSet($img) {
153 const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
154 const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
155 if (imgHeight > imgWidth) {
156 const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
157 const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
158 const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
159 $('#photo-popup').scrollTop(scrollTop);
160 console.log('test');
161 }
162 }
163 });
...\ 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!