<!--エスケープをさせないデータの表示用-->
<my-raw-item>
    <span></span>
    <script>
        var self = this;
        self.root.innerHTML = opts.content;
    </script>
</my-raw-item>
<!--ヘルプ画面アイテム-->
<my-help-item>
    <div class="item help-item">
        <p class="red margin-zero"><strong>Ｑ</strong>
            <my-raw-item content="{question}"/>
        </p>
        <p class="margin-zero"><strong>Ａ</strong>
            <my-raw-item content="{answer}"/>
        </p>
    </div>
    <style>
        my-help-item .item {
            -webkit-border-radius: 2vw;
            -moz-border-radius: 2vw;
            border-radius: 2vw;
            background-color: #ffffff;
            width: 80vw;
            position: relative;
            margin: 0 auto;
            margin-bottom: 2vmax;
            padding: 2vmax;
        }
    </style>
</my-help-item>
<!--空データ用アイテム-->
<my-item-empty>
    <div class="item">
        <p><strong>表示できる情報がありません。</strong></p>
    </div>
    <script>

    </script>
    <style>
        my-item-empty .item {
            width: 80vw;
            margin: 0 auto;
            margin-top: 4vmax;
        }
    </style>
</my-item-empty>
<!--ローディング中用アイテム-->
<my-item-loading>
    <div class="item">
        <my-spinner></my-spinner>
    </div>
    <script>

    </script>
    <style>
        my-item-loading .item {
            width: 80vw;
            margin: 0 auto;
            margin-top: 4vmax;
            -webkit-justify-content: center; /* Safari */
            justify-content: center;
            -webkit-align-items: center; /* Safari */
            align-items: center;
            display: flex;
        }
    </style>
</my-item-loading>
<!--案件用アイテム-->
<my-project-item>
    <div class="item">
        <div class="header">
            <strong>案件番号{no}</strong>
        </div>
        <div class="body">
            <div class="row left">
                <img src="{getUrl('imgBase') + '/project/list/album_icon.png'}" class="thumb">
                <label class="left album-name"><strong>{album_name}</strong><br/>
                    <small>{memories.config.const.project_category.name[category] + ' ' + [item_type_name]}
                    </small>
                    <br/>
                    <small>{page + 'ページ ' + order_books + '冊'}</small>
                </label>
            </div>
        </div>
        <div class="center">
            <my-confirm-button path="/project/list/select.png" callback="{showFolders}"></my-confirm-button>
        </div>
        <p class="right margin-zero last-login">
            <small>最終ログイン日：{last_login_date}</small>
        </p>
    </div>
    <script>
        var self = this;
        self.no = self.opts.no;
        self.category = self.opts.category;
        /**
         * フォルダ一覧画面表示
         */
        showFolders()
        {
            self.setCurrentProjectNo(self.no);
            self.setCurrentProjectCategory(self.category);
            self.fireObservable('initFolder');
            route('folders');
        }
    </script>
    <style>
        my-project-item .item {
            -webkit-border-radius: 2vw;
            -moz-border-radius: 2vw;
            border-radius: 2vw;
            background-color: #ffffff;
            width: 80vw;
            position: relative;
            margin: 0 auto;
            margin-bottom: 3vmax;
        }

        my-project-item .item .header {
            color: #ffffff;
            background-color: #666666;
            -webkit-border-radius: 2vw 2vw 0 0;
            -moz-border-radius: 2vw 2vw 0 0;
            border-radius: 2vw 2vw 0 0;
            position: absolute;
            left: 0;
            top: 0;
            padding: 2vw;
            width: 76.2vw;
            height: 1.3em;
            display: table;
        }

        my-project-item .item .header > strong {
            display: table-cell;
            vertical-align
            : middle;
        }

        my-project-item .item .body {
            padding: 9vw 1vw 1vw 1vw;
        }

        my-project-item .item .body .row {
            display: flex;
            -webkit-justify-content: flex-start; /* Safari */
            justify-content: flex-start;
            -webkit-align-items: center; /* Safari */
            align-items: center;
            padding-top: 2vw;
        }

        my-project-item .item .body .row .album-name {
            word-break: break-all;
        }

        my-project-item .item .last-login {
            padding-right: 2vw;
        }

        my-project-item .item .body .row .thumb {
            width: 15vw;
            margin: 0 3vw;
        }

        my-project-item .item .body .row .thumb + label {
            margin-left: 2vw;
        }
    </style>
</my-project-item>
<!--フォルダ用アイテム-->
<my-folder-item>
    <div if="{!isBridal()}">
        <div class="{item: true, selected: parent.deleteMode && checked, unselected: !parent.deleteMode || (parent.deleteMode && !checked)}">
            <div show={!deleted} class="body">
                <div onclick="{showPhotos}">
                    <div if="{!parent.deleteMode}" class="row">
                        <div class="icon">
                            <img src="{getUrl('imgBase') + '/folder/list/folder.png'}">
                        </div>
                        <div class="folder-name red margin-horizontal">
                            <strong>{name}</strong>
                        </div>
                    </div>
                    <div if="{!parent.deleteMode && counts !== null && !spinning}" class="count-area">
                        <p class="margin-zero">
                            <small><span class="blue small">スナップ写真</span> {counts.normal.current}枚 (使用写真
                                {counts.normal.use}枚)
                            </small>
                        </p>
                        <p if="{!isPersonal()}" class="margin-zero">
                            <small><span class="blue small">集合写真</span> {counts.big.current}枚 (使用写真 {counts.big.use}枚)
                            </small>
                        </p>
                    </div>
                </div>
                <div if="{parent.deleteMode}" class="row" onclick="{switchCheck}">
                    <div class="icon checkbox">
                        <img if="{checked}" src="{getUrl('imgCommonBase') + 'checked.png'}">
                        <img if="{!checked}" src="{getUrl('imgCommonBase') + 'unchecked.png'}">
                    </div>
                    <div class="folder-name margin-horizontal">
                        <strong class="red">{name}</strong>
                        <div if="{counts !== null && !spinning}" class="count-area">
                            <p class="margin-zero">
                                <small><span class="blue small">スナップ写真</span> {counts.normal.current}枚 (使用写真
                                    {counts.normal.use}枚)
                                </small>
                            </p>
                            <p if="{!isPersonal()}" class="margin-zero">
                                <small><span class="blue small">集合写真</span> {counts.big.current}枚 (使用写真 {counts.big.use}枚)
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="center">
                    <my-small-spinner show={spinning}></my-small-spinner>
                </div>
            </div>
            <div show={deleted}>
                <my-hourglass></my-hourglass>
            </div>
            <div if="{!parent.deleteMode}" class="arrow center" onclick="{showPhotos}"><strong>></strong></div>
        </div>
    </div>

    <div if="{isBridal()}" class="bridal_folder_item">
        <div class="{item: true, selected: parent.deleteMode && checked, unselected: !parent.deleteMode || (parent.deleteMode && !checked)}">
            <div class="icon">
                <div>
                    <img src="{getUrl('imgBase') + '/folder/list/page_icon.png'}">
                    <img src="{getUrl('imgBase') + '/folder/list/page_icon_title.png'}" class="img_title">
                </div>
            </div>
            <div show={!deleted} class="body">
                <div onclick="{showPhotos}">
                    <div if="{!parent.deleteMode}" class="row">
                        <div class="folder-name margin-horizontal">
                            <div class="ttl_folder">
                                <img src="{getUrl('imgBase') + '/folder/list/folder.png'}" class="ttl_folder_img">
                                <strong>{name}</strong>
                            </div>
                            <div if="{!parent.deleteMode && counts !== null && !spinning}" class="count-area">
                                <p class="margin-zero">
                                    <small>
                                        <span class="small">スナップ写真</span> {counts.normal.current}枚 / 使用写真 {counts.normal.use}枚
                                    </small>
                                </p>
                                <p class="margin-zero">
                                    <small>
                                        <span class="small">大きな写真</span> {counts.big.current}枚 / 使用写真 {counts.big.use}枚
                                    </small>
                                </p>
                            </div>
                        </div>
                        <div if="{!parent.deleteMode}" class="arrow center" onclick="{showPhotos}"><div></div></div>
                    </div>
                </div>
                <div if="{parent.deleteMode}" class="row" onclick="{switchCheck}">
                    <div class="folder-name margin-horizontal">
                        <div class="ttl_folder">
                            <div class="icon checkbox">
                                <img if="{checked}" src="{getUrl('imgCommonBase') + 'checked.png'}">
                                <img if="{!checked}" src="{getUrl('imgCommonBase') + 'unchecked.png'}">
                            </div>
                            <strong>{name}</strong>
                        </div>
                        <div if="{counts !== null && !spinning}" class="count-area">
                            <p class="margin-zero">
                                <small>
                                    <span class="small">スナップ写真</span> {counts.normal.current}枚 / 使用写真 {counts.normal.use}枚
                                </small>
                            </p>
                            <p class="margin-zero">
                                <small>
                                    <span class="small">大きな写真</span> {counts.big.current}枚 / 使用写真 {counts.big.use}枚
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="center">
                    <my-small-spinner show={spinning}></my-small-spinner>
                </div>
            </div>
            <div show={deleted}>
                <my-hourglass></my-hourglass>
            </div>
        </div>
    </div>
    <script>
        var self = this;
        self.deleted = false;
        self.id = self.opts.id;
        self.counts = null;
        self.checked = false;
        self.spinning = true;
        /**
         * フォルダごとの写真枚数取得
         */
        setPhotoCount()
        {
            self.spinning = true;
            self.update();
            for (var i = 0, length = self.parent.folderPhotoCounts.length; i < length; i++) {
                if (self.id != self.parent.folderPhotoCounts[i].id) {
                    continue;
                }
                self.counts = self.parent.folderPhotoCounts[i].counts;
                break;
            }
            self.spinning = false;
            self.update();
        }
        /**
         * 削除時の選択時処理
         */
        switchCheck()
        {
            self.checked = !self.checked;
            self.parent.manageExecDeleteBtn();
        }
        /**
         * 写真一覧画面表示
         */
        showPhotos()
        {
            self.setCurrentFolderId(self.id);
            route('photos');
        }
        /**
         * 他コンポーネントからの選択状態全解除処理
         */
        unselectAll()
        {
            self.checked = false;
        }
        /**
         * マウント後処理
         */
        self.on('mount', function () {
            self.setPhotoCount();
            self.parent.obs.on('unselectAll', self.unselectAll);
        });
    </script>
    <style>
        my-folder-item my-hourglass img {
            height: 10vh;
        }

        my-folder-item .selected {
            background-color: #d38383;
        }

        my-folder-item .unselected {
            background-color: #fff;
        }

        my-folder-item .item {
            -webkit-border-radius: 2vw;
            -moz-border-radius: 2vw;
            border-radius: 2vw;
            width: 90vw;
            position: relative;
            margin: 0 auto;
            margin-bottom: 2vmax;
            display: flex;
            -webkit-justify-content: flex-start; /* Safari */
            justify-content: flex-start;
            -webkit-align-items: stretch; /* Safari */
            align-items: stretch;
            overflow: hidden;
        }

        my-folder-item .item .body {
            width: 90%;
            padding: 2%;
        }

        my-folder-item .item .body .row {
            display: flex;
            -webkit-justify-content: flex-start; /* Safari */
            justify-content: flex-start;
            -webkit-align-items: center; /* Safari */
            align-items: center;
            word-break: break-all;
        }

        my-folder-item .item .body .icon img {
            width: 13vw;
            margin: 0 3vw;
        }

        my-folder-item .item .body .checkbox img {
            width: 27px;
            height: 27px;
        }

        my-folder-item .item .arrow {
            width: 10%;
            color: #666;
            background-color: #ccc;
            display: flex;
            -webkit-justify-content: center; /* Safari */
            justify-content: center;
            -webkit-align-items: center; /* Safari */
            align-items: center;
        }
        /* ブライダル用 */
        my-folder-item .bridal_folder_item .item {
            box-shadow: 3px 5px 15px -8px rgba(0, 0, 0, .7);
        }
        my-folder-item .bridal_folder_item .item .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            height: inherit;
            width: 30%;
            background-color: #9AB0C5;
            padding: 3% 2% 2%;
            text-align: center;
        }
        my-folder-item .bridal_folder_item .item .icon.checkbox {
            display: inline-block;
            width: auto;
            background-color: transparent;
            vertical-align: middle;
        }
        my-folder-item .bridal_folder_item .item .icon img {
            height: 10vw;
            max-height: 30px;
            margin: 0;
        }
        my-folder-item .bridal_folder_item .item .icon .img_title {
            display: block;
            width: 17vw;
            height: auto;
        }
        my-folder-item .bridal_folder_item .item .body {
            width: 100%;
            padding: 0;
            border: .1rem solid #9AB0C5;
            border-radius: 0 2vw 2vw 0;
        }
        my-folder-item .bridal_folder_item .item .body .folder-name {
            width: 90%;
            padding: 2% 0;
            margin: 0 5%;
        }
        my-folder-item .bridal_folder_item .ttl_folder {
            color: #9AB0C5;
            border-bottom: 1px solid #9AB0C5;
            margin-bottom: 5px;
        }
        my-folder-item .bridal_folder_item .ttl_folder_img {
            display: inline-block;
            height: 12px;
            width: auto;
            vertical-align: middle;
        }
        my-folder-item .bridal_folder_item .ttl_folder strong {
            display: inline-block;
            margin-left: 3px;
            vertical-align: middle;
        }
        my-folder-item .bridal_folder_item .item .arrow {
            display: block;
            background-color: transparent;
            border-radius: 0;
            padding-right: 2%;
        }
        my-folder-item .bridal_folder_item .item .arrow > div {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 7.5px 0 7.5px 13.0px;
            border-color: transparent transparent transparent #9AB0C5;
        }
    </style>
</my-folder-item>
<!--表紙フォルダ用アイテム-->
<my-cover-folder-item onclick="{showPhotos}">
    <div if="{!isBridal()}">
        <div class="item">
            <div class="body">
                <div class="row">
                    <div class="icon">
                        <img src="{getUrl('imgBase') + '/folder/list/cover.png'}">
                    </div>
                    <div class="folder-name margin-horizontal">
                        <strong class="red">表紙用写真フォルダ</strong>
                        <div class="center">
                            <my-small-spinner show={spinning}></my-small-spinner>
                        </div>
                        <div if="{counts !== null}" class="count-area">
                            <p class="margin-zero">
                                <small><span class="blue small">写真合計</span> {counts.normal.current + counts.big.current}枚
                                    (最大
                                    {limit.cover.normal}枚)
                                </small>
                            </p>
                            <p class="margin-zero">
                                <small><span class="blue small">集合写真</span> {counts.big.current}枚 (最大 {limit.cover.big}枚)
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="arrow center"><strong>></strong></div>
        </div>
        <div class="horizon"></div>
    </div>

    <div if="{isBridal()}" class="bridal_cover_folder_item">
        <div class="item">
            <div class="icon">
                <div>
                    <img src="{getUrl('imgBase') + '/folder/list/cover_icon.png'}">
                    <img src="{getUrl('imgBase') + '/folder/list/cover_icon_title.png'}" class="img_title">
                </div>
            </div>
            <div class="body">
                <div class="row">
                    <div class="folder-name margin-horizontal">
                        <div class="ttl_cover_folder">
                            <img src="{getUrl('imgBase') + '/folder/list/folder.png'}" class="ttl_cover_folder_img">
                            <strong>表紙専用フォルダ</strong>
                        </div>
                        <div class="center">
                            <my-small-spinner show={spinning}></my-small-spinner>
                        </div>
                        <div if="{counts !== null}" class="count-area">
                            <p class="margin-zero">
                                <small>
                                    <span class="small">写真合計</span> {counts.normal.current + counts.big.current}枚 / 最大 {limit.cover.normal}枚
                                </small>
                            </p>
                            <p class="margin-zero">
                                <small>
                                    <span class="small">大きな写真</span> {counts.big.current}枚 / 最大 {limit.cover.big}枚
                                </small>
                            </p>
                        </div>
                    </div>
                    <div class="arrow center"><div></div></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var self = this;
        self.counts = null;
        self.spinning = true;
        self.limit = self.parent.limit;
        /**
         * 表紙フォルダ写真使用枚数取得
         */
        setPhotoCount()
        {
            self.spinning = true;
            self.update();
            for (var i = 0, length = self.parent.folderPhotoCounts.length; i < length; i++) {
                if (self.id != self.parent.folderPhotoCounts[i].id) {
                    continue;
                }
                self.counts = self.parent.folderPhotoCounts[i].counts;
                break;
            }
            self.spinning = false;
            self.update();
        }
        /**
         * 表紙写真一覧画面表示
         */
        showPhotos()
        {
            self.setCurrentFolderId(self.id);
            route('cover_photos');
        }
        self.on('mount', self.setPhotoCount);
    </script>
    <style>
        my-cover-folder-item .horizon {
            width: 90vw;
            height: 2vw;
            -webkit-border-radius: 1vw;
            -moz-border-radius: 1vw;
            border-radius: 1vw;
            background-color: #fff;
            margin: 0 auto;
            margin-bottom: 2vmax;
        }

        my-cover-folder-item .item {
            -webkit-border-radius: 2vw;
            -moz-border-radius: 2vw;
            border-radius: 2vw;
            background-color: #ffffff;
            width: 90vw;
            position: relative;
            margin: 0 auto;
            margin-bottom: 2vmax;
            display: flex;
            -webkit-justify-content: flex-start; /* Safari */
            justify-content: flex-start;
            -webkit-align-items: stretch; /* Safari */
            align-items: stretch;
            overflow: hidden;
        }

        my-cover-folder-item .item .body {
            width: 90%;
            padding: 2%;
            background-color: #fff;
        }

        my-cover-folder-item .item .body .row {
            display: flex;
            -webkit-justify-content: flex-start; /* Safari */
            justify-content: flex-start;
            -webkit-align-items: center; /* Safari */
            align-items: center;
            word-break: break-all;
        }

        my-cover-folder-item .item .body .icon img {
            width: 13vw;
            margin: 0 3vw;
        }

        my-cover-folder-item .item .arrow {
            width: 10%;
            color: #ccc;
            background-color: #485691;
            display: flex;
            -webkit-justify-content: center; /* Safari */
            justify-content: center;
            -webkit-align-items: center; /* Safari */
            align-items: center;
        }
        /* ブライダル用 */
        my-cover-folder-item .bridal_cover_folder_item .item {
            box-shadow: 3px 5px 15px -8px rgba(0, 0, 0, .7);
        }
        my-cover-folder-item .bridal_cover_folder_item .item .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            height: inherit;
            width: 30%;
            background-color: #aa8d66;
            padding: 3% 2% 2%;
            text-align: center;
        }
        my-cover-folder-item .bridal_cover_folder_item .item .icon img {
            width: 10vw;
            margin: 0;
        }
        my-cover-folder-item .bridal_cover_folder_item .item .icon .img_title {
            display: block;
            width: 17vw;
        }
        my-cover-folder-item .bridal_cover_folder_item .item .body {
            width: 100%;
            padding: 0;
            border: .1rem solid #aa8d66;
            border-radius: 0 2vw 2vw 0;
        }
        my-cover-folder-item .bridal_cover_folder_item .item .body .folder-name {
            width: 90%;
            padding: 2% 0;
            margin: 0 5%;
        }
        my-cover-folder-item .bridal_cover_folder_item .ttl_cover_folder {
            color: #AA8C66;
            border-bottom: 1px solid #AA8C66;
            margin-bottom: 5px;
        }
        my-cover-folder-item .bridal_cover_folder_item .ttl_cover_folder_img {
            display: inline-block;
            height: 12px;
            width: auto;
            vertical-align: middle;
        }
        my-cover-folder-item .bridal_cover_folder_item .ttl_cover_folder strong {
            display: inline-block;
            margin-left: 3px;
            vertical-align: middle;
        }
        my-cover-folder-item .bridal_cover_folder_item .item .arrow {
            display: block;
            background-color: transparent;
            border-radius: 0;
            padding-right: 2%;
        }
        my-cover-folder-item .bridal_cover_folder_item .item .arrow > div {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 7.5px 0 7.5px 13.0px;
            border-color: transparent transparent transparent #aa8d66;
        }
    </style>
</my-cover-folder-item>
<!--写真用アイテム-->
<my-photo-item>
    <div show={!deleted && isDone}
         class="{narrow-frame: isDeleteMode, wide-frame: !isDeleteMode, border-red: isDeleteMode && selected, border-black: !selected}">
        <div class="layer zoom-layer" show={!isDeleteMode} onclick="{parent.zoomPhoto}"></div>
        <div class="layer deleted-layer" if={deleted}>
            <my-hourglass></my-hourglass>
        </div>
        <div class="layer delete-layer" show={isDeleteMode && !isUsed} onmousedown={touchStartEvent}
             ontouchstart={touchStartEvent} onmouseup={touchEndEvent} ontouchend={touchEndEvent}
             ontouchmove={touchMoveEvent}
             ontouchout={cancelTouchEvent}></div>
        <div class="layer used-layer bg-trans-gray" show={isDeleteMode && isUsed} onmousedown={touchStartEvent}
             ontouchstart={touchStartEvent} onmouseup={touchEndEvent} ontouchend={touchEndEvent}
             ontouchmove={touchMoveEvent}
             ontouchout={cancelTouchEvent}><span>使用中</span></div>
        <div class="layer check-icon" show={isDeleteMode && !isUsed}>
            <img show={selected} src="{selectedImg}">
            <img show={!selected} src="{unselectedImg}">
        </div>
        <div class="layer user-photo"><img data-src="{middle}"
                                           class="lazyload"></div>
    </div>
    <script>
        var self = this;
        self.isDone = false;
        self.isDeleteMode = self.parent.deleteMode;
        self.deleted = false;
        self.thumb = self.getUserPhotoUrl(self.id, memories.config.const.download_image_category.value.thumb, true);
        self.middle = self.getUserPhotoUrl(self.id, memories.config.const.download_image_category.value.middle);
        self.selected = false;
        self.selectedImg = self.getUrl('imgCommonBase') + 'check.png';
        self.unselectedImg = self.getUrl('imgCommonBase') + 'circle.png';
        self.longTouchTime = 1000;
        self.isUsed = false;
        /**
         * 削除選択時処理
         */
        switchCheck()
        {
            self.selected = !self.selected;
            self.update();
        }
        /**
         * 削除モード切替処理
         */
        changeDeleteMode(isDeleteMode)
        {
            self.isDeleteMode = isDeleteMode;
        }
        /**
         * 他コンポーネントからの削除選択時処理
         */
        selectDelete()
        {
            for (var i = 0, length = self.parent.deletePhotos.length; i < length; i++) {
                if (self.id == self.parent.deletePhotos[i].id) {
                    self.selected = true;
                    break;
                }
            }
        }
        /**
         * 他コンポーネントからの選択状態全解除処理
         */
        unselectAll()
        {
            self.selected = false;
        }
        /**
         * 削除アイテム追加
         */
        setDeleteItem(isNormal)
        {
            if (isNormal == self.isNormal && self.selected) {
                self.parent.deletePhotos.push(self);
                self.parent.deletePhotoCount++;
            }
        }
        /**
         * 写真使用確認
         */
        setPhotoUsed()
        {
            self.isUsed = self.parent.photoUseManagements.indexOf(self.id) >= 0;
            self.isDone = true;
            self.update();
        }
        /**
         * マウント後処理
         */
        self.on('mount', function () {
            self.setPhotoUsed();
            self.isNormal = self.quality == memories.config.const.image_quality.value.normal;
            self.parent.obs.on('changeItemDeleteMode', self.changeDeleteMode);
            self.parent.obs.on('unselectAll', self.unselectAll);
            self.parent.obs.on('selectDelete', self.selectDelete);
            self.parent.obs.on('setDeleteItem', self.setDeleteItem);
        });

        /**
         * 削除モード時、タッチスタートイベント
         */
        touchStartEvent(e)
        {
            self.setTouched(true);
            self.setTouchTime(0);
            self.setInterval(setInterval(function () {
                self.setTouchTime(self.getTouchTime() + 100);
                if (self.getTouchTime() == self.longTouchTime && self.getTouched()) {
                    // ロングタップ(タップから約1秒)時の処理
                    self.parent.zoomPhoto(e);
                }
            }, 100));
        }
        /**
         * 削除モード時、タッチエンドイベント
         */
        touchEndEvent(e)
        {
            clearInterval(self.getInterval());
            if (self.getTouched() && self.getTouchTime() < self.longTouchTime) {
                // 短いタップでの処理
                if (!self.isUsed) {
                    self.switchCheck();
                }
            }
            self.setTouched(false);
            e.preventDefault();
        }
        /**
         * タッチスクロールイベント
         */
        touchMoveEvent(e)
        {
            self.setTouched(false);
        }
        /**
         * タッチ終了イベント
         */
        cancelTouchEvent(e)
        {
            clearInterval(self.getInterval());
            self.setTouched(false);
        }
    </script>
    <style>
        my-photo-item .narrow-frame {
            width: 23vw;
            height: 23vw;
            position: relative;
        }

        my-photo-item .wide-frame {
            width: 31vw;
            height: 31vw;
            position: relative;
        }

        my-photo-item .layer {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        my-photo-item .zoom-layer {
            z-index: 802;
        }

        my-photo-item .deleted-layer {
            z-index: 801;
        }

        my-photo-item .delete-layer {
            z-index: 800;
        }

        my-photo-item .used-layer {
            z-index: 800;
        }

        my-photo-item .check-icon {
            z-index: 799;
        }

        my-photo-item .deleted-layer img {
            width: 100%;
            height: 100%;
        }

        my-photo-item .user-photo {
            overflow: hidden;
            display: flex;
            -webkit-align-items: center; /* Safari */
            align-items: center;
        }
        my-photo-item .user-photo img {
            width: 100%;
            /*height: 100%;*/
        }

        my-photo-item .check-icon img {
            width: 25%;
            height: 25%;
            position: absolute;
            top: 3px;
            right: 3px;
        }

        my-photo-item .bg-trans-gray {
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
            align-items: center; /* 縦方向中央揃え */
            -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
            justify-content: center; /* 横方向中央揃え */
        }

        my-photo-item .bg-trans-gray span {
            color: white;
        }
    </style>
</my-photo-item>
<!--写真スライド用アイテム-->
<my-gallery-item>
    <div class="swiper-slide">
        <img data-src="{src}" class="swiper-lazy">
        <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
    </div>
    <script>
        var self = this;
        self.src = self.getUserPhotoUrl(self.id, memories.config.const.download_image_category.value.middle);
    </script>
</my-gallery-item>