-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmaterial-portal.json
1 lines (1 loc) · 26.7 KB
/
material-portal.json
1
{"name":"material-portal","html":"<!--\n Copyright (c) 2021 Masashi Hamaguchi\n Released under the MIT license\n https://opensource.org/licenses/mit-license.php\n-->\n\n<div id=\"portal\" class=\"portal-base\" v-cloak>\n\n <div id=\"menu-area\">\n <div class=\"nav-area\">\n <div class=\"flex-menu\">\n <div class=\"portal-static\">\n <small>{{ domain }}</small>\n </div>\n\n <!-- information -->\n <div class=\"portal-info\">\n <div class=\"info fuwat\">\n <p class=\"date\">{{ date }}</p>\n <p class=\"time\">{{ time }}</p>\n <p class=\"message\">{{ message }}</p>\n </div>\n </div>\n\n <!-- notice -->\n <div class=\"portal-notice\">\n <div class=\"notice fuwat\">\n <h2 class=\"portal-title\">お知らせ</h2>\n <ul class=\"notice-list\">\n <li v-for=\"notice in notices\">\n <div v-if=\"notice.URL.value != ''\">\n <a :href=\"notice.URL.value\" target=\"_blank\">\n <p>\n {{ notice.タイトル.value }}\n </p>\n <small v-if=\"notice.お知らせ内容.value != ''\">\n {{ notice.お知らせ内容.value }}\n </small>\n </a>\n </div>\n <div v-else>\n <p>\n {{ notice.タイトル.value }}\n </p>\n <small v-if=\"notice.お知らせ内容.value != ''\">\n {{ notice.お知らせ内容.value }}\n </small>\n </div>\n </li>\n </ul>\n </div>\n </div>\n\n <!-- assigned -->\n <div class=\"portal-assigned\">\n <div class=\"assigned fuwat\">\n <h2 class=\"portal-title\">未処理アプリ</h2>\n <ul class=\"assigned-list\">\n <li v-for=\"app in assignedAppList\">\n <a :href=\"`/k/${app.id}/?bview=ASSIGN`\" target=\"_blank\">\n <span class=\"assigned-app-image\" :style=\"'background-image: url(' + app.icon + ');'\"></span>\n <span class=\"assigned-app-name\">{{ app.name }}</span>\n </a>\n <div class=\"assigned-app-count\">\n <span class=\"assigned-app-count-left\"></span>\n <span class=\"assigned-app-count-center\">{{ app.count }}</span>\n <span class=\"assigned-app-count-right\"></span>\n </div>\n </li>\n </ul>\n </div>\n </div>\n\n <div id=\"ad-menu\">\n </div>\n </div>\n </div>\n\n <div v-on:click=\"onOpenMenu\" class=\"toggle-btn fuwat\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n <div v-on:click=\"onOpenMenu\" class=\"toggle-area fuwat\">\n\n </div>\n\n <div v-on:click=\"onMask\" id=\"mask\"></div>\n </div>\n\n <div class=\"portal-container\">\n\n <div class=\"flex-info\">\n <!-- information -->\n <div class=\"portal-info\">\n <div class=\"info\">\n <p class=\"date fuwat\">{{ date }}</p>\n <p class=\"time fuwat\">{{ time }}</p>\n <p class=\"message fuwat\">{{ message }}</p>\n </div>\n </div>\n\n <!-- app group list -->\n <div class=\"portal-list\">\n <div class=\"list\">\n <h2 class=\"portal-title fuwat\">アプリグループ</h2>\n <div class=\"widget-list\">\n <a v-for=\"(widget, index) in widgets\" v-on:click=\"onScroll(widget.レコード番号.value)\" :class=\"`btn-${getColorClass(widget.ウィジェットカラー.value)} fuwat`\">\n {{ widget.ウィジェット名.value }}\n </a>\n </div>\n </div>\n </div>\n\n </div>\n\n <div class=\"flex-apps\">\n <!-- app list -->\n <div class=\"portal-main\">\n\n <div v-for=\"(widget, index) in widgets\" :id=\"'widget' + widget.レコード番号.value\" class=\"portal-widget\">\n <div class=\"widget\">\n <h2 class=\"portal-title fuwat\">{{ widget.ウィジェット名.value }}</h2>\n <div class=\"portal-apps\">\n <div v-for=\"app in widget.アプリリスト.value\" class=\"app-box fuwat\">\n <div :class=\"`app ${getColorClass(widget.ウィジェットカラー.value)}`\">\n <a :href=\"`/k/${app.value.アプリID.value}/`\" :title=\"app.value.アプリ名.value\" target=\"_blank\">\n <span>{{ app.value.アプリID.value }}</span>\n <p>{{ app.value.表示名.value !== '' ? app.value.表示名.value : app.value.アプリ名.value }}</p>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <footer class=\"footer fuwat\">\n <small>{{ footer }}</small>\n </footer>\n</div>\n","css":"/**\n * Copyright (c) 2021 Masashi Hamaguchi\n * Released under the MIT license\n * https://opensource.org/licenses/mit-license.php\n */\n\n* {\n --menu-width: 350px;\n}\n\n[v-cloak] {\n display: none;\n}\n\n.ocean-portal-index-header {\n display: none;\n}\n\n/*==========\n General\n==========*/\n.portal-title {\n font-size: 18px;\n margin: 0.5em 0;\n padding: 0 8px;\n}\n\n.portal-base {\n width: 100%;\n height: 100%;\n padding-top: 16px;\n color: #464646;\n background-color: #F0F0F0;\n font-family: 'M PLUS 1p', sans-serif;\n}\n\n.portal-container {\n max-width: 1600px;\n height: 100%;\n margin: 0 auto;\n padding: 0 16px;\n display: flex;\n flex-direction: column;\n}\n\n.flex-menu {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.flex-info,\n.flex-apps {\n width: 100%;\n display: flex;\n}\n\n.flex-apps {\n max-width: 100%;\n flex-wrap: wrap;\n}\n\n/*==========\n Menu Area\n==========*/\n.nav-area {\n display: block;\n position: fixed;\n margin-top: 112px;\n top: 0;\n left: calc(-1 * var(--menu-width));\n bottom: 0;\n width: var(--menu-width);\n background: #FFE49B;\n overflow-x: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n transition: .5s;\n z-index: 5;\n}\n\n.open .nav-area {\n left: 0;\n}\n\n.toggle-btn {\n position: fixed;\n top: calc(32px + 50%);\n left: -16px;\n width: 48px;\n height: 48px;\n border-radius: 24px;\n background-color: #BDBDBD;\n cursor: pointer;\n z-index: 4;\n}\n\n.toggle-area {\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 16px;\n background-color: #BDBDBD;\n cursor: pointer;\n z-index: 3;\n}\n\n.toggle-btn:hover,\n.toggle-btn:hover+.toggle-area,\n.toggle-area:hover,\n.toggle-area:hover+.toggle-btn {\n background-color: #9E9E9E;\n}\n\n.toggle-btn span {\n position: absolute;\n height: 2px;\n background-color: #fff;\n border-radius: 1px;\n}\n\n.open .toggle-btn {\n background-color: transparent;\n left: calc(var(--menu-width) - 16px);\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n}\n\n.open .toggle-area {\n background-color: transparent;\n left: var(--menu-width);\n}\n\n.open .toggle-btn:hover+.toggle-area {\n background-color: transparent;\n}\n\n.toggle-btn,\n.toggle-area,\n.toggle-btn span {\n display: block;\n transition: top .5s, left .5s, transform .5s, background .5s;\n box-sizing: border-box;\n}\n\n.toggle-btn span:nth-child(1) {\n width: 20%;\n top: 42%;\n left: 34px;\n -webkit-transform: rotate(45deg);\n transform: rotate(45deg);\n}\n\n.toggle-btn span:nth-child(2) {\n width: 40%;\n top: 50%;\n left: 22px;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n\n.toggle-btn span:nth-child(3) {\n width: 20%;\n bottom: 42%;\n left: 34px;\n -webkit-transform: rotate(-45deg);\n transform: rotate(-45deg);\n}\n\n.open .toggle-btn span {\n background-color: #fff;\n width: 30%;\n}\n\n.open .toggle-btn span:nth-child(1) {\n -webkit-transform: translateY(-2px) rotate(-45deg);\n transform: translateY(-2px) rotate(-45deg);\n animation: unset;\n}\n\n.open .toggle-btn span:nth-child(2) {\n opacity: 0;\n animation: unset;\n}\n\n.open .toggle-btn span:nth-child(3) {\n -webkit-transform: translateY(2px) rotate(45deg);\n transform: translateY(2px) rotate(45deg);\n animation: unset;\n}\n\n#mask {\n display: none;\n}\n\n.open #mask {\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #000;\n opacity: .8;\n z-index: 2;\n cursor: pointer;\n transition: all .5s;\n}\n\n/* menu area */\n.portal-static {\n width: 100%;\n padding: 16px 0 0 0;\n text-align: center;\n}\n\n.portal-notice,\n.portal-assigned {\n width: 100%;\n padding: 16px;\n box-sizing: border-box;\n}\n\n/* notice */\n.notice-list {\n padding: 0;\n}\n\n.notice-list li {\n margin: 4px 0;\n padding: 8px;\n font-size: 14px;\n list-style: none;\n display: flex;\n align-items: baseline;\n border-radius: 8px;\n transition-duration: 0.5s;\n}\n\n.notice-list li::before {\n content: '●';\n margin-right: 8px;\n}\n\n.notice-list li div {\n width: 100%;\n}\n\n.notice-list li div p {\n margin: 0;\n}\n\n.notice-list li div small {\n display: inline-block;\n margin-top: 8px;\n}\n\n.notice-list div a {\n width: 100%;\n color: #464646;\n display: block;\n}\n\n.notice-list li:hover {\n background-color: #FFFEFA;\n}\n\n/* assigned */\n.assigned-list {\n padding: 0;\n}\n\n.assigned-list li {\n margin: 4px 0;\n position: relative;\n list-style-image: none;\n list-style-type: none;\n margin-left: 0;\n}\n\n.assigned-list a {\n position: relative;\n display: block;\n padding: 0 8px;\n height: 48px;\n color: #464646;\n border-radius: 8px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n word-wrap: normal;\n transition-duration: 0.5s;\n}\n\n.assigned-list a:hover {\n background-color: #FFFEFA;\n}\n\n.assigned-app-image {\n display: inline-block;\n width: 32px;\n height: 32px;\n background-size: cover;\n}\n\n.assigned-app-name {\n padding-left: 8px;\n}\n\n.assigned-app-image::before,\n.assigned-app-name::before {\n display: inline-block;\n height: 100%;\n content: '';\n vertical-align: middle;\n}\n\n.assigned-app-count {\n top: 0;\n left: 32px;\n position: absolute;\n}\n\n[class^=\"assigned-app-count-\"] {\n display: inline-block;\n height: 12px;\n text-align: center;\n font-size: 10px;\n vertical-align: middle;\n line-height: 12px;\n}\n\n.assigned-app-count-left {\n width: 6px;\n background: url(https://static.cybozu.com/contents/k/image/argo/uiparts/badge/left.png) no-repeat 1px center;\n}\n\n.assigned-app-count-center {\n color: #fff;\n background: url(https://static.cybozu.com/contents/k/image/argo/uiparts/badge/center.png) repeat-x center top;\n}\n\n.assigned-app-count-right {\n width: 6px;\n background: url(https://static.cybozu.com/contents/k/image/argo/uiparts/badge/right.png) no-repeat -1px center;\n}\n\n\n/*==========\n Portal Area\n==========*/\n.portal-main {\n width: 100%;\n min-width: 0;\n margin: 16px 0;\n border-radius: 8px;\n display: flex;\n flex-wrap: wrap;\n}\n\n.footer {\n width: 100%;\n height: 32px;\n margin-top: 64px;\n text-align: center\n}\n\nsmall {\n margin-top: 8px;\n color: #795548;\n}\n\n/* information */\n.portal-info {\n width: 320px;\n margin: 16px 8px;\n padding: 16px 0;\n border-radius: 8px;\n}\n\n.date,\n.time,\n.message {\n width: 100%;\n display: block;\n text-align: center;\n margin: 0;\n}\n\n.date {\n font-size: 28px;\n}\n\n.time {\n font-size: 84px;\n}\n\n.message {\n font-size: 16px;\n}\n\n.nav-area .date {\n font-size: 24px;\n}\n\n.nav-area .time {\n font-size: 80px;\n}\n\n.nav-area .message {\n font-size: 14px;\n}\n\n.portal-list {\n margin-bottom: 8px;\n padding: 8px;\n box-sizing: border-box;\n flex: 1;\n display: flex;\n flex-wrap: wrap;\n}\n\n.portal-list a {\n margin: 8px;\n padding: 8px;\n display: inline-block;\n box-sizing: border-box;\n text-align: center;\n color: #fff;\n border-radius: 8px;\n box-shadow: 0 2px 3px rgb(0 0 0 / 16%);\n transition-duration: 0.5s;\n}\n\n.portal-list a:hover {\n color: #2A3E53;\n background-color: #FFFEFA;\n}\n\n\n/* main */\n.portal-widget {\n width: 20%;\n padding: 8px;\n box-sizing: border-box;\n}\n\n.list,\n.widget {\n width: 100%;\n height: 100%;\n padding: 16px;\n background-color: #fff;\n border-radius: 8px;\n box-sizing: border-box;\n}\n\n/* app list */\nh3.widget-title {\n font-size: 18px;\n margin: 0.5em 0;\n padding: 0 8px;\n}\n\n/* apps */\n.portal-apps {\n width: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.app-box {\n width: 100%;\n padding: 8px;\n box-sizing: border-box;\n position: relative;\n}\n\n.app {\n width: 100%;\n box-sizing: border-box;\n text-align: center;\n background-color: transparent;\n border: 1px solid #2A3E53;\n border-left: 16px solid #2A3E53;\n border-radius: 8px;\n box-shadow: 0 2px 3px rgb(0 0 0 / 16%);\n transition-duration: 0.5s;\n}\n\n/* アプリリンクhover時の背景 ::before */\n.app::before {\n margin: 8px 8px 8px 16px;\n border-radius: 0px 8px 8px 0px;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n content: '';\n transform-origin: left top;\n transform: scale(0, 1);\n transition: transform 0.5s;\n}\n\n.app:hover::before {\n transform-origin: left top;\n transform: scale(1, 1);\n}\n\n.app a {\n color: #464646;\n width: 100%;\n padding: 8px 4px;\n box-sizing: border-box;\n display: inline-block;\n transition-duration: 0.5s;\n}\n\n.app:hover a {\n color: #fff;\n}\n\n.app a span {\n --app-width: calc(12px + 26px);\n width: var(--app-width);\n font-size: 8px;\n color: #fff;\n transform: rotate(-0.25turn);\n transform-origin: left top 0;\n position: absolute;\n top: calc(var(--app-width) + 8px);\n left: 10px;\n}\n\n.app a p {\n width: 100%;\n height: 1.5em;\n margin: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n word-wrap: normal;\n}\n\n@media screen and (max-width: 1024px) {\n .portal-container {\n padding-left: 44px;\n }\n\n .flex-info .portal-info {\n display: none;\n }\n\n .portal-widget {\n width: 33.3%;\n }\n}\n\n@media screen and (min-width: 1025px) {\n .flex-menu .portal-info {\n display: none;\n }\n}\n\n@media screen and (min-width: 1025px) and (max-width: 1920px) {\n .portal-container {\n max-width: 1240px;\n }\n\n .portal-widget {\n width: 25%;\n }\n}\n\n/*==========\n Scrollbar\n==========*/\nhtml #menu-area .nav-area::-webkit-scrollbar {\n margin: 0;\n}\n\nhtml #menu-area .nav-area::-webkit-scrollbar-thumb {\n border: solid 5px #FFE49B;\n background-color: #464646;\n border-radius: 10px;\n}\n\n/*==========\n Color\n==========*/\n.orange,\n.orange:hover,\n.btn-orange {\n border-color: #FFAA52;\n}\n\n.light-blue,\n.light-blue:hover,\n.btn-light-blue {\n border-color: #7ECAF2;\n}\n\n.green,\n.green:hover,\n.btn-green {\n border-color: #8ED09A;\n}\n\n.yellow,\n.yellow:hover,\n.btn-yellow {\n border-color: #DAE46D;\n}\n\n.emerald-green,\n.emerald-green:hover,\n.btn-emerald-green {\n border-color: #9ED4C8;\n}\n\n.red,\n.red:hover,\n.btn-red {\n border-color: #E4A396;\n}\n\n.pink,\n.pink:hover,\n.btn-pink {\n border-color: #FF7793;\n}\n\n.blue,\n.blue:hover,\n.btn-blue {\n border-color: #66B6E6;\n}\n\n/* button color */\n.orange::before,\n.btn-orange {\n background-color: #FFAA52;\n border-color: #FFAA52;\n}\n\n.light-blue::before,\n.btn-light-blue {\n background-color: #7ECAF2;\n border-color: #7ECAF2;\n}\n\n.green::before,\n.btn-green {\n background-color: #8ED09A;\n border-color: #8ED09A;\n}\n\n.yellow::before,\n.btn-yellow {\n background-color: #DAE46D;\n border-color: #DAE46D;\n}\n\n.emerald-green::before,\n.btn-emerald-green {\n background-color: #9ED4C8;\n border-color: #9ED4C8;\n}\n\n.red::before,\n.btn-red {\n background-color: #E4A396;\n border-color: #E4A396;\n}\n\n.pink::before,\n.btn-pink {\n background-color: #FF7793;\n border-color: #FF7793;\n}\n\n.blue::before,\n.btn-blue {\n background-color: #66B6E6;\n border-color: #66B6E6;\n}\n\n\n/* fuwat */\n.fuwat {\n -webkit-animation-fill-mode: both;\n -ms-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation-duration: 1.5s;\n -ms-animation-duration: 1.5s;\n animation-duration: 1.5s;\n -webkit-animation-name: fuwatAnime;\n -ms-animation-name: fuwatAnime;\n animation-name: fuwatAnime;\n visibility: visible !important;\n}\n\n@-webkit-keyframes fuwatAnime {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n }\n}\n\n@keyframes fuwatAnime {\n 0% {\n opacity: 0;\n -webkit-transform: translateY(-20px);\n -ms-transform: translateY(-20px);\n transform: translateY(-20px);\n }\n\n 100% {\n opacity: 1;\n -webkit-transform: translateY(0);\n -ms-transform: translateY(0);\n transform: translateY(0);\n }\n}\n\n/*============\n@keyframes\n=============*/\n@keyframes equalizer01 {\n 0% {\n width: 70%;\n }\n\n 10% {\n width: 50%;\n }\n\n 20% {\n width: 100%;\n }\n\n 30% {\n width: 10%;\n }\n\n 40% {\n width: 50%;\n }\n\n 50% {\n width: 70%;\n }\n\n 60% {\n width: 50%;\n }\n\n 70% {\n width: 10%;\n }\n\n 80% {\n width: 100%;\n }\n\n 90% {\n width: 10%;\n }\n\n 100% {\n width: 70%;\n }\n}\n\n@keyframes equalizer02 {\n 0% {\n width: 30%;\n }\n\n 10% {\n width: 20%;\n }\n\n 20% {\n width: 40%;\n }\n\n 30% {\n width: 10%;\n }\n\n 40% {\n width: 20%;\n }\n\n 50% {\n width: 30%;\n }\n\n 60% {\n width: 20%;\n }\n\n 70% {\n width: 10%;\n }\n\n 80% {\n width: 40%;\n }\n\n 90% {\n width: 10%;\n }\n\n 100% {\n width: 30%;\n }\n}\n","js":"/**\n * Copyright (c) 2021 Masashi Hamaguchi\n * Released under the MIT license\n * https://opensource.org/licenses/mit-license.php\n */\n\n(function () {\n /**\n * Parameters\n */\n // ウィジェット管理アプリ\n const PORTAL_MANAGEMENT_APP_ID = 0;\n // ポータルお知らせアプリ\n const NOTICE_APP_ID = 0;\n // Footer\n const FOOTER = '©︎ Material Portal';\n\n // Color Master\n const COLOR_MASTER = {\n 'オレンジ': {\n class: 'orange',\n color: '#FFAA52'\n },\n 'みずいろ': {\n class: 'light-blue',\n color: '#7ECAF2'\n },\n 'みどり': {\n class: 'green',\n color: '#8ED09A'\n },\n 'きいろ': {\n class: 'yellow',\n color: '#DAE46D'\n },\n 'エメラルドグリーン': {\n class: 'emerald-green',\n color: '#9ED4C8'\n },\n 'あか': {\n class: 'red',\n color: '#E4A396'\n },\n 'ピンク': {\n class: 'pink',\n color: '#FF7793'\n },\n 'あお': {\n class: 'blue',\n color: '#66B6E6'\n }\n };\n\n /**\n * Scripts\n */\n const loginUser = kintone.getLoginUser();\n\n const getMessage = function (now) {\n let time = Number(String(('00' + now.getHours()).slice(-2)) + String(('00' + now.getMinutes()).slice(-2)));\n\n let message;\n if (time < 500) {\n message = 'こんばんは';\n } else if (time < 1100) {\n message = 'おはようございます';\n } else if (time < 1700) {\n message = 'こんにちは';\n } else {\n message = 'こんばんは';\n }\n return `${message}、${loginUser.name}さん`;\n }\n\n const getDate = function (now) {\n let days = ['日', '月', '火', '水', '木', '金', '土'];\n return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日(${days[now.getDay()]})`;\n }\n const getTime = function (now) {\n let hour = ('00' + now.getHours()).slice(-2)\n let minute = ('00' + now.getMinutes()).slice(-2);\n let seconds = ('00' + now.getSeconds()).slice(-2);\n return `${hour}:${minute}`;\n }\n\n // get records\n const getRecords = async function (app, query, offset = 0, records = []) {\n let q = query ? `${query} limit 500 offset ${offset}` : `limit 500 offset ${offset}`;\n const resp = await kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {\n app: app,\n query: q\n }).then(resp => {\n return resp.records;\n }).catch(err => {\n console.log(err);\n return [];\n });\n\n records = records.concat(resp);\n if (resp.length >= 500) return getRecords(app, query, offset + 500, records);\n return records;\n }\n\n const getAssignedList = function () {\n return kintone.api(kintone.api.url('/k/api/app/listAssigned', true), 'POST', {\n 'includeGuestInfo': true\n }).then(resp => {\n if (resp.success) {\n return resp.result.assignedAppList;\n } else {\n console.log('assigned list api error');\n return [];\n }\n }).catch(err => {\n console.log(err);\n return [];\n });\n }\n\n // fuwat\n const fuwat = function () {\n $('.fuwat').css('visibility', 'hidden');\n $(window).scroll(function () {\n let windowHeight = $(window).height(),\n topWindow = $(window).scrollTop();\n $('.fuwat').each(function () {\n let objectPosition = $(this).offset().top;\n if (topWindow > objectPosition - windowHeight + 200) {\n $(this).addClass(\"fuwatAnime\");\n }\n });\n });\n }\n\n const setMenuPosition = function () {\n let toggleBtn = $('.toggle-btn');\n let top = $(window).scrollTop();\n let basePosition = 64;\n if (top <= basePosition) {\n toggleBtn.css('top', `calc((112px - ${top}px) / 2 + 50% - 24px)`);\n } else {\n toggleBtn.css('top', `calc(24px + 50% - 24px)`);\n }\n }\n\n const createVueApp = async function () {\n let lists = await Promise.all([\n getRecords(NOTICE_APP_ID, 'お知らせ表示 in (\"表示\") and (掲載開始日 <= TODAY() or 掲載開始日 = \"\") and (掲載終了日 >= TODAY() or 掲載終了日 = \"\") order by 表示順 asc, レコード番号 asc'),\n getAssignedList(),\n getRecords(PORTAL_MANAGEMENT_APP_ID, 'ウィジェット表示 in (\"表示\") order by ウィジェット表示順 asc, レコード番号 asc')\n ]);\n\n Vue.createApp({\n data() {\n return {\n date: getDate(new Date()),\n time: getTime(new Date()),\n message: getMessage(new Date()),\n notices: lists[0],\n assignedAppList: lists[1],\n widgets: lists[2],\n footer: FOOTER,\n domain: document.domain,\n // class\n open: 'open'\n }\n },\n mounted: function () {\n // info clock\n setInterval(this.updateTime, 100);\n // menu-area position\n $(window).scroll(() => setMenuPosition());\n // fuwat\n fuwat();\n },\n methods: {\n updateTime: function () {\n let now = new Date();\n this.date = getDate(now);\n this.time = getTime(now);\n this.message = getMessage(now);\n },\n onScroll: function (id) {\n let t = $(`#widget${id}`).offset().top;\n $('html, body').animate({\n scrollTop: t - 48\n }, 400 + t / 4);\n },\n onOpenMenu: function () {\n let area = $('#menu-area');\n if (!area.hasClass(this.open)) {\n area.addClass(this.open);\n } else {\n area.removeClass(this.open);\n }\n },\n onMask: function () {\n $('#menu-area').removeClass(this.open);\n },\n getColorClass: (key) => COLOR_MASTER[key].class,\n getColor: (key) => COLOR_MASTER[key].color\n }\n }).mount('#portal');\n }\n\n const init = function () {\n // for development\n // $('.kintone-portal-designer-html').css('display', 'none');\n\n // administrator menu\n const adminMenu = $('.gaia-argoui-coveroptionmenubutton');\n adminMenu.appendTo('.dhOPxC__right .dhOPxC__menu-list');\n adminMenu.css({\n width: \"48px\",\n height: \"48px\",\n backgroundImage: \"url(https://static.cybozu.com/contents/k/image/argo/uiparts/ellipsis/ellipsis.png)\",\n backgroundColor: \"transparent\"\n }).hover(() => {\n adminMenu.css(\"backgroundColor\", \"#434343\");\n }, () => {\n adminMenu.css(\"backgroundColor\", \"transparent\");\n });\n }\n\n /**\n * Run Scripts\n */\n // view init\n init();\n // create Vue App\n createVueApp();\n\n})();\n","headerColor":"","toolbarColor":"","hiddenPortalHeader":false,"portalHeaderColor":"","customize_version":1}