お気に入り図書館の設定

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お気に入り図書館の設定 | カーリル</title> <meta name="theme-color" content="#00A1EA"> <meta name="application-name" content="カーリル" /> <meta name="apple-mobile-web-app-title" content="カーリル"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="search" type="application/opensearchdescription+xml" href="https://calil.jp/public/search.xml" title="カーリル" /> <link rel="alternate" type="application/rss+xml" title="カーリルのブログ" href="https://blog.calil.jp/feed" /> <link rel="stylesheet" href="/public/web-html/css/index.css"> <style type="text/css" media="print"> #menu, #menu_sp, .navigation { display: none; } #next, #next * { -webkit-print-color-adjust: exact; } </style>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-S0SYRD0CEW"></script> <script> var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack; if (dnt!=='1' && dnt!=='yes') { window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-S0SYRD0CEW'); } else { console.log('Do-Not-Track, not loading analytics.'); window.gtag = function() {}; } </script> </head> <body> <div id="menu"> <div class="container"> <a href="/"> <img src="/public/web-html/assets/home.svg" title="ホーム"> </a> <a href="/popular/">今話題の本</a><a href="/library/">図書館マップ</a><a href="/recipe">本のレシピ</a><a class="large" href="/list">読みたいリスト</a> <div class="dropdown"> <button aria-disabled="true" onclick="event.target.focus();">もっと見る<span class="caret" aria-hidden="true">▼</span></button> <div class="menu" role="menubar"> <a tabindex="0" class="small" href="/list">読みたいリスト</a> <a tabindex="0" href="/review/">書評</a> <a tabindex="0" href="/local/">カーリルローカル</a> <a tabindex="0" href="/touch/">カーリルタッチ</a> <a tabindex="0" href="/stamp">図書館スタンプラリー</a> </div> </div> <div class="right"> <a href="/login?redirect=/settings">ログイン・新規登録</a> <div class="dropdown"> <button aria-disabled="true" onclick="event.target.focus();">設定<span class="caret">▼</span> </button> <div class="menu" role="menubar" aria-label="設定"> <a tabindex="0" href="/settings">お気に入り図書館</a> <a tabindex="0" href="/profile/source">高度な検索設定</a> <a tabindex="0" href="/login?redirect=/settings">ログイン</a> </div> </div> </div> </div> </div> <div id="menu_sp" role="menu"> <div class="container"> <a class="logo" href="/"> <img src="/public/web-html/assets/logo-sp.svg" title="カーリル"> </a> <a class="login" href="/login?redirect=/settings">ログイン</a> <a class="setting" href="/settings">図書館の設定</a> <a href="/popular/">今話題の本</a> <a href="/library/">図書館マップ</a> <a href="/recipe">本のレシピ</a> <a href="/list">読みたいリスト</a> <a href="/review/">書評</a> <a href="/local/">ローカル</a> <a href="/stamp">スタンプラリー</a> </div> </div> <nav class="navigation"> <button class="menu_icon" aria-label="メニュー" aria-haspopup="true" aria-controls="menu_sp"></button> <button class="search_icon" aria-label="検索フォームの表示"> </nav> <div id="next" class="page_hide"> <div class="container"> <a class="logo" href="/" title="カーリルのホームに戻る"> <picture> <source media="(max-width: 1024px)" srcset="/public/web-html/assets/logo-mini.svg"> <img src="/public/web-html/assets/logo.svg" alt="日本最大の図書館蔵書検索・カーリル"> </picture> </a> <form action="/search" method="get"><input name="q" type="search" value="" placeholder="" autocomplete="off" autofocus="true"><button type="submit">さがす</button></form> </div> </div> <style> .container a { color: #00ABFF; text-decoration: none; } h1 { font-size: 140%; color: #00ABFF; font-weight: 400; } h2 { font-size: 30px; } h3 { font-size: 100%; } h2, h3, h4 { font-weight: normal; } .form-control { display: block; width: 100%; height: 34px; padding: 0px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } @media (min-width: 768px) { .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; } } .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } #place_dialog { background-color:#00CAFF; border:8px solid #999; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; width:480px; height:380px; position:absolute; margin-left:-240px; margin-top:-190px; left:50%; top:218px; z-index: 3000; display:none; } #place_dialog .dlg_content{ color:white; margin:10px; position:relative; } #place_dialog .list{ height:300px; overflow:auto; } #place_dialog .place_dlg_button, #place_dialog .place_gps_button { margin:20px 0; } #place_dialog .place_dlg_button a, #place_dialog .place_gps_button a{ border:3px solid white; color:white !important; font-weight:bold; padding:5px 14px; text-decoration:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } #place_dialog .place_gps_button a { background-image: url(https://calil.jp/public/img/icon/location.png); background-repeat: no-repeat; background-position: 6px 2px; padding-left: 30px; } #place_dialog #pref_selector a{ color:black; } .city_list .yomi_block{ border-bottom:1px solid white;clear:both; height:1px; } .city_list .yomi{ float:left; clear:both; width:1.5em; height:1.5em; margin-right:7px; background-color:white; color:#26BEFF; text-align:center; padding:3px 2px 2px 3px; } .city_list .cities{ float:left; width:410px; line-height:130%; padding-top:1px; margin-bottom:4px; } .city_list .city_part{ color: #ffffff; display:inline-block; min-width:4em; white-space:no-wrap; margin-right:10px; padding:2px 4px; text-decoration:none; } .city_list .city_part:hover{ background-color:#FF9B00; } .city_list .lib_type{ border-top:1px solid white; padding: 2px 0; font-size:90%; color:#00CAFF; text-align:center; background-color:white; margin-bottom:3px; clear:both; } </style> <div class="container"> <table style="width:100%"> <tr> <td style="margin-right:30px;width:120px" valign="top"> <style type="text/css" media="screen"> .profile_menu { margin-left:0; padding-left:0; width: 13em; margin-top:0px; border-right:1px dotted #dddddd; margin-right:20px; } .profile_menu li { list-style: none; } .profile_menu li.active { font-weight: bold; background-color:#eeeeee; } .profile_menu li a { text-decoration: none; display:block; padding:10px; } .profile_menu li a:hover { text-decoration: none; background-color:#eeeeee; } </style> <ul class="profile_menu"> <li class="active"> <a href="/settings">お気に入り図書館</a> </li> <li> <a href="/profile/source">高度な検索設定</a> </li> <li> <a href="/login">ログイン</a> </li> </ul> </td> <td valign="top"> <style type="text/css"> .disabled { color:#999; } .content h3 { background-image:url(https://calil.jp/public/img/recipe/line_top.png); background-repeat:no-repeat; padding-top:14px; border-width:0px; } </style> <h1>お気に入り図書館</h1> <p>お気に入り図書館に設定できる図書館は、市町村と大学などをあわせて10件までです。</p> <form method="get" action="/library/search" class="form-inline" style="padding: 0;"> <input type="hidden" name="from" value="settings" /> <input type="text" placeholder="市町村・学校・図書館" class="form-control" name="q" id="place" value="" style="margin-bottom: 0;" /> <button class="btn btn-primary">検索して追加する</button> </form> <form method="post" action="" id="settings"> <h3 style="height:20px;"> <a href="javascript:calil.geo.getGeoLib()"> <svg xmlns="http://www.w3.org/2000/svg" style="width: 16px;height: 16px;fill: #00ABFF;position: relative;top: 2px;" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg> 現在地を追加する </a>&emsp; <a href="javascript:calil.library.setAddMode(); calil.dialog.show('place_dialog');"> <svg xmlns="http://www.w3.org/2000/svg" style="width: 16px;height: 16px;fill: #00ABFF;position: relative;top: 2px;" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/></svg> 都道府県から選ぶ </a> </h3> <div style="margin-top:30px;"> <input type="hidden" name="referer" value=""> </div> </form> </td> </tr> </table> <div id="place_dialog"> <div class="dlg_content"> <div style="position:absolute;top:-30px;right:-30px;"><a href="javascript:calil.dialog.close('place_dialog');"><img alt="閉じる" src="/public/img/parts/close.png"></a></div> <h3 id="place_dialog_title">都道府県から選択</h3> <div id = "city_selector" style="display:none;"> <a href="javascript:calil.dialog.hidecity()" style="color:#fff;text-decoration:none;font-size:95%">« 戻る</a> <div class="list"> </div> </div>  <table cellspacing="0" cellpadding="6" id="pref_selector"> <tr> <td> <table width="100%" cellspacing="0" cellpadding="0" style="font-size:14px;line-height:140%;"> <tr valign="top"> <td align="right"> <table cellspacing="1" cellpadding="0"> <tr height="40" style="font-size:10px;text-align:center;"> <td></td> <td bgcolor="#8888ff" width="50"> <a href="javascript:calil.dialog.load_pref('北海道');" >北海道</a> </td> </tr> <tr> <td height="10"></td> </tr> </table> <table cellspacing="1" cellpadding="0" style="font-size:10px;text-align:center;margin-bottom:1px;"> <tr height="25"> <td></td><td></td><td></td><td width="30"></td> <td bgcolor="#99ddff" width="30"> <a href="javascript:calil.dialog.load_pref('青森県');">青森</a> </td> <td width="20"></td> </tr> <tr height="40"> <td></td><td></td><td width="30"></td> <td bgcolor="#99ddff" width="30"> <a href="javascript:calil.dialog.load_pref('秋田県');">秋田</a> </td> <td bgcolor="#99ddff"> <a href="javascript:calil.dialog.load_pref('岩手県');">岩手</a> </td> </tr> <tr height="35"> <td></td><td></td><td></td> <td bgcolor="#99ddff" width="30"> <a href="javascript:calil.dialog.load_pref('山形県');">山形</a> </td> <td bgcolor="#99ddff"> <a href="javascript:calil.dialog.load_pref('宮城県');">宮城</a> </td> </tr> <tr height="25"> <td bgcolor="#ccf577" width="30"> <a href="javascript:calil.dialog.load_pref('石川県');">石川</a> </td> <td bgcolor="#ccf577" width="30"> <a href="javascript:calil.dialog.load_pref('富山県');">富山</a> </td> <td bgcolor="#ccaaff" width="60" colspan="2"> <a href="javascript:calil.dialog.load_pref('新潟県');">新潟</a> </td> <td bgcolor="#99ddff" width="30"> <a href="javascript:calil.dialog.load_pref('福島県');">福島</a> </td> </tr> </table> </td> </tr> </table> <table cellspacing="1" cellpadding="0" style="font-size:10px;text-align:center;border-style:none;"> <tr height="25"> <td bgcolor="#f5e577" width="26"> <a href="javascript:calil.dialog.load_pref('長崎県');">長崎</a> </td> <td bgcolor="#f5e577" width="26"> <a href="javascript:calil.dialog.load_pref('佐賀県');">佐賀</a> </td> <td bgcolor="#f5e577" width="26"> <a href="javascript:calil.dialog.load_pref('福岡県');">福岡</a> </td> <td width="10"></td> <td bgcolor="#ff88bb" width="26" rowspan="2"> <a href="javascript:calil.dialog.load_pref('山口県');">山口</a> </td> <td bgcolor="#ff88bb" width="26"> <a href="javascript:calil.dialog.load_pref('島根県');">島根</a> </td> <td bgcolor="#ff88bb" width="26"> <a href="javascript:calil.dialog.load_pref('鳥取県');">鳥取</a> </td> <td bgcolor="#80f580" width="26" rowspan="2"> <a href="javascript:calil.dialog.load_pref('兵庫県');">兵庫</a> </td> <td bgcolor="#80f580" width="30"> <a href="javascript:calil.dialog.load_pref('京都府');">京都</a> </td> <td bgcolor="#80f580" width="26"> <a href="javascript:calil.dialog.load_pref('滋賀県');">滋賀</a> </td> <td bgcolor="#ccf577" width="30"> <a href="javascript:calil.dialog.load_pref('福井県');">福井</a> </td> <td bgcolor="#ccaaff" width="30" rowspan="2"> <a href="javascript:calil.dialog.load_pref('長野県');">長野</a> </td> <td bgcolor="#ff99ff" width="30"> <a href="javascript:calil.dialog.load_pref('群馬県');">群馬</a> </td> <td bgcolor="#ff99ff" width="30"> <a href="javascript:calil.dialog.load_pref('栃木県');">栃木</a> </td> <td bgcolor="#ff99ff" width="30"> <a href="javascript:calil.dialog.load_pref('茨城県');">茨城</a> </td> <td width="20"></td> </tr> <tr height="25"> <td></td> <td bgcolor="#f5e577"> <a href="javascript:calil.dialog.load_pref('熊本県');">熊本</a> </td> <td bgcolor="#f5e577"> <a href="javascript:calil.dialog.load_pref('大分県');">大分</a> </td> <td></td> <td bgcolor="#ff88bb"> <a href="javascript:calil.dialog.load_pref('広島県');">広島</a> </td> <td bgcolor="#ff88bb"> <a href="javascript:calil.dialog.load_pref('岡山県');">岡山</a> </td> <td bgcolor="#80f580"> <a href="javascript:calil.dialog.load_pref('大阪府');">大阪</a> </td> <td bgcolor="#80f580"> <a href="javascript:calil.dialog.load_pref('奈良県');">奈良</a> </td> <td bgcolor="#ffcc88"> <a href="javascript:calil.dialog.load_pref('岐阜県');">岐阜</a> </td> <td bgcolor="#ff99ff"> <a href="javascript:calil.dialog.load_pref('山梨県');">山梨</a> </td> <td bgcolor="#ff99ff"> <a href="javascript:calil.dialog.load_pref('埼玉県');">埼玉</a> </td> <td bgcolor="#ff99ff"> <a href="javascript:calil.dialog.load_pref('千葉県');">千葉</a> </td> </tr> <tr height="24"> <td></td> <td bgcolor="#f5e577"> <a href="javascript:calil.dialog.load_pref('鹿児島県');">鹿児島</a> </td> <td bgcolor="#f5e577"> <a href="javascript:calil.dialog.load_pref('宮崎県');">宮崎</a> </td> <td></td><td></td><td></td><td></td><td></td> <td bgcolor="#80f580"> <a href="javascript:calil.dialog.load_pref('和歌山県');">和歌山</a> </td> <td bgcolor="#ffcc88"> <a href="javascript:calil.dialog.load_pref('三重県');">三重</a> </td> <td bgcolor="#ffcc88"> <a href="javascript:calil.dialog.load_pref('愛知県');">愛知</a> </td> <td bgcolor="#ffcc88"> <a href="javascript:calil.dialog.load_pref('静岡県');">静岡</a> </td> <td bgcolor="#ff99ff"> <a href="javascript:calil.dialog.load_pref('神奈川県');">神奈川</a> </td> <td bgcolor="#ff99ff"> <a href="javascript:calil.dialog.load_pref('東京都');">東京</a> </td> </tr> <tr height="20"> <td></td><td></td><td></td><td></td><td></td> <td bgcolor="#ddbb99"> <a href="javascript:calil.dialog.load_pref('愛媛県');">愛媛</a> </td> <td bgcolor="#ddbb99"> <a href="javascript:calil.dialog.load_pref('香川県');">香川</a> </td> </tr><tr height="20"> <td bgcolor="#ff8888"> <a href="javascript:calil.dialog.load_pref('沖縄県');">沖縄</a> </td> <td></td><td></td><td></td><td></td> <td bgcolor="#ddbb99"> <a href="javascript:calil.dialog.load_pref('高知県');">高知</a> </td> <td bgcolor="#ddbb99"> <a href="javascript:calil.dialog.load_pref('徳島県');">徳島</a> </td> </tr> </table> </td> </tr> </table>  </div> </div> </div> <div class="footer"> <p> <a href="/doc/about.html">カーリルについて</a> - <a href="/doc/lib.html">図書館の方へ</a> - <a href="/local/">ローカル</a> - <a href="/doc/api.html">図書館 API</a> - <a href="/doc/download.html">バナー・素材</a> </p> <p> <a href="/">ホーム</a> - <a href="/company/">運営会社</a> - <a href="https://blog.calil.jp/">ブログ</a> - <a href="https://twitter.com/caliljp">Twitter</a> - <a href="/privacy/freedom.html">図書館の自由</a> - <a href="/privacy/">プライバシーポリシー</a> - <a href="/doc/contact.html">お問い合わせ</a> </p> </div> <style> // fadeOutのためのスタイル .fadeOut { animation : fadeOut 1s; animation-fill-mode: both; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } </style> <script type="text/javascript" charset="utf-8"> function get_query() { var hash, hashes, i, vars; vars = []; hash = void 0; hashes = window.location.href.slice(window.location.href.indexOf("?") + 1).split("&"); i = 0; while (i < hashes.length) { hash = hashes[i].split("="); vars.push(hash[0]); vars[hash[0]] = hash[1]; i++; } return vars; } function buildQueryString(params) { var parts = []; var add = function(key, value) { parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(value)); } for (var key in params) { var param = params[key]; if (Array.isArray(param)) { param.map(function(value) { add(key, value); }); } else { add(key, param); } } return '?' + parts.join('&').replace(/%20/g, '+'); } var calil = {}; // 図書館設定 calil.library = { add_mode: false, setAddMode: function() { this.add_mode = true; }, addLibrary: function(sysid, func) { this.setLibrary({ sysid: sysid, add: true, func: func }); }, setLibrary: function(param) { if (this.add_mode) param['add'] = true; var url = '/set_place_json' + buildQueryString(param); console.log(url) fetch(url).then(function(r) { return r.json()}).then(function(data) { if (data.stat === "ok") { if (location.search.match('from=settings')) { return location.href = '/settings'; } else if (location.pathname === "/" || location.pathname.indexOf('/library') === 0) { return location.href = '/start'; } else if (location.pathname === '/settings') { if ((get_query().redirect != null) === true) { return location.href = get_query().redirect; } else { return location.href = location.pathname + location.search; } } else { return location.reload(); } } else if (data.stat === 'confirm') { if (!confirm(data.message)) { return; } param['force'] = 'true'; return calil.library.setLibrary(param); } else { return alert('エラー: ' + data.message); } }) .catch(function(error) { console.log(error) // alert('サーバーからの応答がありません。'); }) } }; // 位置情報から探す calil.geo = { getGeoLib: function() { document.querySelectorAll('body, a').forEach(function(element) { element.style.cursor = 'wait'; }); var callback; callback = (function(_this) { return function(lat, lng) { var params = { lat: lat, lon: lng, limit: 30 }; var url = '//api.calil.jp/mobile/recommend' + buildQueryString(params); fetch(url).then(function(r) {return r.json()}).then(function(data) { var j, len, message, n, nearest_lib, ref; if (data.nearby.length <= 0) { return alert('近くに図書館が見つかりません'); } nearest_lib = null; ref = data.nearby; for (j = 0, len = ref.length; j < len; j++) { n = ref[j]; if (n.icon !== 'school') { nearest_lib = n; break; } } if (!nearest_lib) { nearest_lib = data.nearby[0]; } message = nearest_lib.name + 'が見つかりました。この図書館を設定しますか？'; if (confirm(message)) { calil.library.setLibrary({ sysid: nearest_lib.id, add: true }); } document.querySelectorAll('body, a').forEach(function(element) { element.style.cursor = 'auto'; }); }) .catch(function() { alert('読み込みに失敗しました。'); document.querySelectorAll('body, a').forEach(function(element) { element.style.cursor = 'auto'; }); }) }; })(this); return this._getGeolocation(callback); }, _getGeolocation: function(callback, hideerror) { var error; if (!navigator.geolocation) { return; } error = (hideerror ? function() {} : this._errorFunc); return navigator.geolocation.getCurrentPosition((function(position) { var lat, lng; lat = position.coords.latitude; lng = position.coords.longitude; return callback(lat, lng); }), error, { enableHighAccuracy: true }); }, _errorFunc: function(error) { var message = ''; switch (error.code) { case error.POSITION_UNAVAILABLE: message = '位置情報の取得ができませんでした。'; break; case error.PERMISSION_DENIED: message = '位置情報取得の使用許可がされませんでした。'; break; case error.PERMISSION_DENIED_TIMEOUT: message = '位置情報取得中にタイムアウトしました。'; } alert(message); } }; calil.dialog = { show: function(id) { var mtop, next_url, redirect_url, top; if (id === "login_dialog") { next_url = location.pathname + location.search; redirect_url = "/login?redirect=" + escape(next_url); location.href = redirect_url; return; } if (document.getElementById(id).clientHeight > document.documentElement.clientHeight) { mtop = document.getElementById(id).style.marginTop.replace('px', ''); document.getElementById(id).style.top = window.scrollY - mtop + 10; } else { top = Math.floor(window.scrollY + (document.documentElement.clientHeight / 2)); if (top < 10) { top = 10; } document.getElementById(id).style.top = top + 'px'; } document.getElementById(id).style.display = 'block'; }, show_fast: function(id) { document.getElementById(id).style.width = document.documentElement.clientWidth - 16 + 'px'; document.querySelector(id).style.display = 'block'; window.scrollTo(0, 0); }, close: function(id) { document.getElementById(id).style.display = 'none'; }, pref_name: '', pref_data: false, load_pref: function(pref) { var url; document.querySelectorAll('body, a').forEach(function(element) { element.style.cursor = 'wait'; }); this.pref_name = pref; url = '/api/citylist?callback=calil.dialog.loadlibs&allcity=1&withuniv=1&pref=' + encodeURIComponent(pref); this.load_script(url) }, load_script(url) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; document.head.appendChild(script); }, loadlibs: function(cities) { var __A, cities, city, html, i, link, onclick, y, yindex; html = '<div class="city_list">'; html += '<div class="lib_type">公共図書館</div>'; yindex = 'あ,か,さ,た,な,は,ま,や,ら,わ,大学,専門'.split(','); i = 0; for (y in cities) { if (y.length > 1) { html += '<div class="lib_type">' + y + '図書館</div>'; } else { if (i > 0) { html += '<div class="yomi_block"></div>'; } html += '<div class="yomi"'; if (y.length > 1) { html += ' style="height:2.6em;" '; } html += '>' + y + '</div>'; } html += '<div class="cities prefix">'; __A = []; for (city in cities[y]) { if (!__A[city]) { html += '<a class="city_part"'; if (y.length > 1) { html += ' style="display:block;" '; } link = ''; onclick = ''; if (y.length > 1) { onclick = `calil.library.setLibrary({'sysname' : '${cities[y][city]}'});`; } else { onclick = `calil.library.setLibrary({'pref' : '${this.pref_name}','city' : '${cities[y][city]}'});`; } html += ` href="javascript:;" onclick="${onclick}">${cities[y][city]}</a>`; } } html += '</div>'; i++; } html += '</div>'; document.getElementById('city_selector').style.display = 'block'; document.getElementById('pref_selector').style.display = 'none'; document.querySelector('#city_selector .list').innerHTML = html; document.querySelectorAll('body, a').forEach(function(element) { element.style.cursor = 'auto'; }); }, hidecity: function() { document.getElementById('pref_selector').style.display = 'block'; document.getElementById('city_selector').style.display = 'none'; } }; document.addEventListener('DOMContentLoaded', function() { var lc = [].slice.call(document.querySelectorAll('.libcheck')) if (lc.length > 0) { lc.forEach(function(element) { element.addEventListener('change', libcheck); }); } var cl = [].slice.call(document.querySelectorAll('.city_libcheck')) if (cl.length > 0) { cl.forEach(function(element) { element.addEventListener('change', city_libcheck); }); } }); // 図書館システムがクリックされたとき function libcheck(event) { var libcheck = (event.target || event.srcElement); var system_id = libcheck.id; // チェックをつけたとき if (libcheck.checked) { // システムのdisableを解除 libcheck.disabled = false; // システム内の図書館のdisableスタイルを解除 document.querySelectorAll('.' + system_id).forEach(function(element) { element.classList.remove('disabled'); }); // チェックしたときにシステムの横に表示するコメントをすべて非表示に document.querySelectorAll('.sys_comment').forEach(function(element) { element.style.display = 'none'; }); // 各図書館を取得 var city_libcheck = [].slice.call(libcheck.closest('.'+system_id).querySelectorAll('.city_libcheck')); // 各図書館でチェック済みの要素を取得 var checked_count = [].slice.call(libcheck.closest('.'+system_id).querySelectorAll('.city_libcheck:checked')).length; // 各図書館のチェックが0のとき、最初のひとつにチェックを入れる if(checked_count<=0 && city_libcheck.length>0){ city_libcheck[0].checked = true; } // チェックされているシステム数を取得 var checked_system = [].slice.call(document.querySelectorAll('.libcheck:checked')); // 図書館の上限設定値より多くチェックされていれば if (checked_system.length > 10) { // 一番下から2番目のチェックをはずす var lc = checked_system[checked_system.length-2]; var libcheck_id = lc.id; // いまチェックしたシステムが一番下から2番目の場合、一番下のシステムに差し替える console.log(libcheck_id) console.log(system_id) if(libcheck_id==system_id){ var lc = checked_system[checked_system.length-1]; var libcheck_id = lc.id; } lc.checked = false; var remove_sysname = document.querySelector('.' + libcheck_id + ' label').innerHTML; document.querySelectorAll('.' + libcheck_id).forEach(function(element) { element.classList.add('disabled'); }); var libcheck_ids = document.querySelector('div .' + libcheck_id) if (libcheck_ids.length > 0) { libcheck_ids.forEach(function(element) { element.classList.add('disabled'); }) } document.getElementById(system_id + '_comment').innerText = `10個選択。${remove_sysname}を外しました。`; } else { document.getElementById(system_id + '_comment').innerHTML = `10個中${checked_system.length}個選択`; } // システムの横に変更したメッセージを表示 var changed_system_comment = document.getElementById(system_id + '_comment'); changed_system_comment.style.display = 'inline-block'; setTimeout((function() { changed_system_comment.classList.add('fadeOut'); setTimeout(function(){ changed_system_comment.style.display = 'none'; changed_system_comment.classList.remove('fadeOut'); }, 1000); }), 1500); } else { document.querySelectorAll('.' + system_id).forEach(function(element) { element.classList.add('disabled'); }); document.querySelectorAll('div .' + system_id).forEach(function(element) { element.classList.add('disabled'); }) } }; // 各図書館がクリックされたとき function city_libcheck(event) { // クリックされた図書館を取得 var city_libcheck = (event.target || event.srcElement); // 同じシステムでチェックされている図書館を取得 var lib_inputs = city_libcheck.closest('.system').querySelectorAll('input.city_libcheck:checked'); // システムのinputを取得 var libcheck = city_libcheck.closest('.system').querySelectorAll('h4>input.libcheck'); if(libcheck.length>0){ // 1つでも図書館がチェックされていたらシステムのチェックをtrueにする if(lib_inputs.length>0){ libcheck[0].checked = true; // システムのdisableを解除 libcheck[0].classList.remove('disabled'); // システム内の図書館のdisableスタイルを解除 document.querySelectorAll('.' + libcheck.id).forEach(function(element) { element.classList.remove('disabled'); }); }else{ libcheck[0].checked = false; libcheck[0].classList.add('disabled'); // システム内の図書館のdisableスタイルを解除 document.querySelectorAll('.' + libcheck.id).forEach(function(element) { element.classList.add('disabled'); }); } } }; </script> <script type="text/javascript"> function toggleLibs(event, id){ var area = document.getElementById('area' + id); if (area.style.display == 'none') { area.style.display = 'block'; } else { area.style.display = 'none'; } var icon = (event.target || event.srcElement); if(!(icon.classList.indexOf('fa') > -1)){ icon = icon.querySelector('.fa'); } if(icon.classList.indexOf('fa-plus-circle') > -1){ icon.classList.add('fa-minus-circle'); icon.classList.remove('fa-plus-circle'); }else{ icon.classList.add('fa-plus-circle'); icon.classList.remove('fa-minus-circle'); } } </script> <script type="text/javascript" charset="utf-8" src="/public/web-html/js/menusp.js"></script> </body> </html>

CINXE.COM

お気に入り図書館の設定 | カーリル