[update/fix] 魔改造すぎて commit 分けられませんでしたごめんなさい...

[update] -> 鍵部屋フィルターと満室フィルターを分けました/各種ロジックを軽量化しました [fix] -> issue #2 When use plugin, page is cut off
takahyon · Apr 13, 2020 · c68a136 · c68a136
1 parent 1a3f99f
commit c68a136
Show file tree

Hide file tree

Showing 7 changed files with 171 additions and 198 deletions.
diff --git a/css/contents_style.css b/css/contents_style.css
diff --git a/css/popup.css b/css/popup.css
@@ -1,10 +1,11 @@
-body{
+#ndHiddenBlocker {
     margin: 0px;
     width: 200px;
     height: 200px;
 }
+
 /* === ボタンを表示するエリア ============================== */
-.switchArea {
+#ndHiddenBlocker .switchArea {
  line-height    : 48px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
@@ -17,40 +18,41 @@ body{
 }
 
 /* === チェックボックス ==================================== */
-.switchArea input[type="checkbox"] {
+#ndHiddenBlocker .switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
 }
 
 /* === チェックボックスのラベル（標準） ==================== */
-.switchArea label {
+#ndHiddenBlocker .switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 48px;                /* ボタンの高さ       */
  border         : 2px solid rgba(0, 0, 0, 0.36);   /* 未選択タブのの枠線 */
  border-radius  : 24px;                /* 角丸               */
+ cursor         : pointer;
 }
 
 /* === チェックボックスのラベル（ONのとき） ================ */
-.switchArea input[type="checkbox"]:checked +label {
+#ndHiddenBlocker .switchArea input[type="checkbox"]:checked +label {
  border-color   : #6666ff;             /* 選択タブの枠線     */
 }
 
 /* === 表示する文字（標準） ================================ */
-.switchArea label span:after{
+#ndHiddenBlocker .switchArea label span:after {
  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 28px;          /* 表示する位置       */
  color          : rgba(0, 0, 0, 0.36);             /* 文字色             */
 }
 
 /* === 表示する文字（ONのとき） ============================ */
-.switchArea  input[type="checkbox"]:checked + label span:after{
+#ndHiddenBlocker .switchArea input[type="checkbox"]:checked + label span:after {
  content        : "ON";                /* 表示する文字       */
  padding        : 0 28px 0 0;          /* 表示する位置       */
  color          : #6666ff;             /* 文字色             */
 }
 
 /* === 丸部分のSTYLE（標準） =============================== */
-.switchArea #swImg {
+#ndHiddenBlocker .switchArea #swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 40px;                /* 丸の横幅           */
  height         : 40px;                /* 丸の高さ           */
@@ -62,23 +64,23 @@ body{
 }
 
 /* === 丸部分のSTYLE（ONのとき） =========================== */
-.switchArea input[type="checkbox"]:checked ~ #swImg {
+#ndHiddenBlocker .switchArea input[type="checkbox"]:checked ~ #swImg {
  transform      : translateX(66px);    /* 丸も右へ移動       */
  background     : #6666ff;             /* カーソルタブの背景 */
 }
 
-.text{
+#ndHiddenBlocker .text {
     text-align: center;
     font-size: medium;
     font-family: sans-serif;
 }
 
-.topBox{
+#ndHiddenBlocker .topBox {
     width: 200px;
     height: 40px;
     background     : #6666ff; 
 }
-.topText{
+#ndHiddenBlocker .topText {
     text-align: center;
     color: azure;
     font-size: large;

diff --git a/html/popup.html b/html/popup.html
@@ -5,39 +5,30 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
     <link href='../css/popup.css' rel='stylesheet' type='text/css'>
-    <title>Document</title>
-
 </head>
 
-<body>
-
+<body id="ndHiddenBlocker">
     <div class="topBox">
         <div class="topText">
             ND hidden Blocker
         </div>
     </div>
 
-
     <div class="text">鍵ルームを非表示にする</div>
-    <div class="text">全てのルームを表示する</div>
-
     <div class="switchArea">
-        <input type="checkbox" id="swi1">
-        <label for="swi1"><span></span></label>
+        <input type="checkbox" id="cbLockedRoom">
+        <label for="cbLockedRoom"><span></span></label>
         <div id="swImg"></div>
     </div>
-    <div class="text">
-    </div>
-    <script type="text/javascript" src="../js/jquery.js"></script>
 
-    <script type="text/javascript" src="../js/popup.js"></script>
-
-<!-- 
-    <div class="text">ルームを全て表示する</div>
+    <div class="text">満室ルームを非表示にする</div>
     <div class="switchArea">
-        <input type="checkbox" id="switch2">
-        <label for="switch1"><span></span></label>
+        <input type="checkbox" id="cbNoVacancyRoom">
+        <label for="cbNoVacancyRoom"><span></span></label>
         <div id="swImg"></div>
-    </div> -->
+    </div>
+
+    <script type="text/javascript" src="../js/jquery.js"></script>
+    <script type="text/javascript" src="../js/popup.js"></script>
 </body>
 </html>
diff --git a/js/content_scripts/common.js b/js/content_scripts/common.js
diff --git a/js/content_scripts/drawRooms.js b/js/content_scripts/drawRooms.js