Merge branch 'develop'

akoya-tomo · Feb 27, 2020 · 5224d35 · 5224d35
2 parents d511770 + 64161dd
commit 5224d35
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -34,10 +34,12 @@
   - 過剰なリクエストの抑制  
     サーバーへの過剰なリクエストを抑制しました。デメリットとしてポップアップまでの時間の最小値が300ミリ秒に制限されます。表示の遅れが気になるときはサムネ使用をご検討下さい。  
   - [KOSHIAN リロード拡張 改](https://github.com/akoya-tomo/koshian_reload_futaba_kai/)のページ更新無しでのカタログリロードに対応  
+  - ![\(New\)](images/new.png "New") ポップアップ拡大縮小のアニメーション時間（デフォルト：0ms = アニメーション無効）  
+    ポップアップを表示や隠すときの拡大縮小のアニメーション時間を設定できます。
 
 ## インストール
 **GitHub**  
-[![インストールボタン](images/install_button.png "クリックでアドオンをインストール")](https://github.com/akoya-tomo/koshian_image_popuper_kai/releases/download/v1.8.1/koshian_image_popuper_kai-1.8.1-fx.xpi)  
+[![インストールボタン](images/install_button.png "クリックでアドオンをインストール")](https://github.com/akoya-tomo/koshian_image_popuper_kai/releases/download/v1.9.0/koshian_image_popuper_kai-1.9.0-fx.xpi)  
 
 ※「接続エラーのため、アドオンをダウンロードできませんでした。」と表示されてインストール出来ない時は、インストールボタンを右クリックしてxpiファイルをダウンロードし、メニューのツール→アドオン（またはCtrl+Shift+A）で表示されたアドオンマネージャーのページにxpiファイルをドラッグ＆ドロップして下さい。  
 
@@ -53,12 +55,9 @@
 * [futaba catalog NG](https://greasyfork.org/ja/scripts/37565-futaba-catalog-ng/)を使用する場合は必ずfutaba catalog NG **v1.2.6以上**をインストールして下さい。
 * [futaba thread highlighter K](https://greasyfork.org/ja/scripts/36639-futaba-thread-highlighter-k/)がピックアップしたスレの画像もポップアップさせたい場合はfutaba thread highlighter K **rev13以上**をインストールして下さい。
 
-## 既知の不具合
-* スレメニューボタン付きカタログでポップアップが表示されたままになることがある。  
-  - スレメニューボタン付きカタログに暫定的に対応した影響で発生することがあります。  
-    ポップアップが消えない時はブラウザのページ再読み込みをして下さい。（アドオンのリロード機能では消えません）  
-
 ## 更新履歴
+* v1.9.0 2020-02-27
+  - ポップアップ拡大縮小のアニメーションを追加
 * v1.8.1 2019-12-30
   - v1.8.0でポップアップ上のリンク先が別のスレになることがある不具合を修正
   - スレのメール欄に「・3・」でIP表示したときにスレ本文より先にIPが表示されてしまう不具合を修正

diff --git a/koshian_image_popuper/cat.js b/koshian_image_popuper/cat.js
@@ -8,6 +8,7 @@ const DEFAULT_VIDEO_MUTED = false;
 const DEFAULT_VIDEO_VOLUME = 0.5;
 const DEFAULT_VIDEO_PLAY = true;
 const DEFAULT_POPUP_TIME = 300;
+const DEFAULT_ANIMATION_DURATION = 0;
 const DEFAULT_POPUP_THUMBNAIL = false;
 const DEFAULT_POPUP_LINK = false;
 const DEFAULT_POPUP_TEXT = false;
@@ -23,12 +24,14 @@ let g_video_muted = DEFAULT_VIDEO_MUTED;
 let g_video_volume = DEFAULT_VIDEO_VOLUME;
 let g_video_play = DEFAULT_VIDEO_PLAY;
 let g_popup_time = DEFAULT_POPUP_TIME;
+let g_animation_duration = DEFAULT_ANIMATION_DURATION;
 let g_popup_thumbnail = DEFAULT_POPUP_THUMBNAIL;
 let g_popup_link = DEFAULT_POPUP_LINK;
 let g_popup_text = DEFAULT_POPUP_TEXT;
 let g_max_text_lines = DEFAULT_MAX_TEXT_LINES;
 let g_text_height = DEFAULT_TEXT_HEIGHT;
 let g_request_time = DEFAULT_REQUEST_TIME;
+let main_container = null;
 
 function getMediaUrl(thre_doc){
     let thre = thre_doc.getElementsByClassName("thre")[0];
@@ -91,21 +94,13 @@ class Cell{
         this.text = document.createElement("div");
         this.res_num = res_num;
 
-        this.popup.style.display = "none";
+        this.popup.classList.add("KOSHIAN_image_popup");
         this.popup.style.zIndex = 100;
         this.popup.setAttribute("KOSHIAN_INDEX", `${index}`);
         parent.appendChild(this.popup);
 
+        this.text.className = "text";
         this.text.textContent = res_num + text;
-        this.text.style.fontSize = "small";
-        this.text.style.color = "white";
-        this.text.style.backgroundColor = "blue";
-        this.text.style.borderStyle = "solid";
-        this.text.style.borderWidth = "0 1px";
-        this.text.style.borderColor = "blue";
-        this.text.style.position = "relative";
-        this.text.style.overflow = "hidden";
-        this.text.style.wordBreak = "break-all";
 
         target.setAttribute("KOSHIAN_INDEX", `${index}`);
         target.addEventListener("mouseenter", onMouseEnter);
@@ -283,7 +278,7 @@ class Cell{
         }
     }
 
-    show(){
+    show(zoom_in = false){
         if(!this.loaded){
             return;
         }
@@ -302,6 +297,8 @@ class Cell{
             this.popup.style.left = `${ccx}px`;
             this.popup.style.right = null;
             max_popup_width = clientW - cx;
+            this.popup.classList.add("left");
+            this.popup.classList.remove("right");
         }else{
             this.popup.style.left = null;
             this.popup.style.right = `${clientW - ccx}px`;
@@ -312,36 +309,36 @@ class Cell{
                 this.video.style.cssFloat = "right";
             }
             this.text.style.cssFloat = "right";
+            this.popup.classList.add("right");
+            this.popup.classList.remove("left");
         }
 
         if(cy < clientH/2){
             this.popup.style.top = `${ccy}px`;
             this.popup.style.bottom = null;
             max_popup_height = clientH - cy;
+            this.popup.classList.add("top");
+            this.popup.classList.remove("bottom");
         }else{
             this.popup.style.top = null;
             this.popup.style.bottom=`${clientH - ccy}px`;
             max_popup_height = cy;
+            this.popup.classList.add("bottom");
+            this.popup.classList.remove("top");
         }
 
         this.max_width = Math.min(g_media_max_width, max_popup_width);
         this.max_height = Math.min(g_media_max_height, max_popup_height);
 
-        this.popup.style.display = "block";
-        this.popup.style.position = "absolute";
-        this.popup.style.boxShadow = "0 10px 25px rgba(0, 0, 0, 0.5)";
+        this.popup.classList.remove("zoom_out");
 
         if (g_popup_text) {
             if (g_max_text_lines == 1) {
-                this.text.className = "";
-                this.text.style.whiteSpace = "nowrap";
-                this.text.style.textOverflow = "ellipsis";
+                this.text.classList.remove("ellipsis");
                 this.text.style.maxHeight = "";
                 this.text.style.lineHeight = "";
             } else {
-                this.text.className = "ellipsis";
-                this.text.style.whiteSpace = "";
-                this.text.style.textOverflow = "";
+                this.text.classList.add("ellipsis");
                 this.text.style.maxHeight = `${g_max_text_lines * g_text_height}px`;
                 this.text.style.lineHeight = `${g_text_height}px`;
             }
@@ -351,6 +348,7 @@ class Cell{
             this.img.style.maxWidth = `${this.max_width}px`;
             this.img.style.maxHeight = `${this.max_height}px`;
             if (g_popup_text) {
+                this.popup.classList.add("show");
                 this.text.style.maxWidth = `${this.max_width}px`;
                 this.text.style.width = this.img.clientWidth > 0 ? `${this.img.clientWidth}px` : `${this.max_width}px`;
                 let text_rect = this.text.getBoundingClientRect();
@@ -359,11 +357,15 @@ class Cell{
                 this.img.style.maxHeight = `${Math.min(this.max_height, max_popup_height - text_rect.height)}px`;
                 this.text.style.width = this.img.clientWidth > 0 ? `${this.img.clientWidth}px` : `${this.max_width}px`;
                 this.text.style.height = `${text_rect.height}px`;
+                if (g_animation_duration > 0) {
+                    this.popup.classList.remove("show");
+                }
             }
         }else if(this.video){
             this.video.style.maxWidth = `${this.max_width}px`;
             this.video.style.maxHeight = `${this.max_height}px`;
             if (g_popup_text) {
+                this.popup.classList.add("show");
                 this.text.style.maxWidth = `${this.max_width}px`;
                 this.text.style.width = this.video.clientWidth > 0 ? `${this.video.clientWidth}px` : `${this.max_width}px`;
                 let text_rect = this.text.getBoundingClientRect();
@@ -372,9 +374,18 @@ class Cell{
                 this.video.style.maxHeight = `${Math.min(this.max_height, max_popup_height - text_rect.height)}px`;
                 this.text.style.width = this.video.clientWidth > 0 ? `${this.video.clientWidth}px` : `${this.max_width}px`;
                 this.text.style.height = `${text_rect.height}px`;
+                if (g_animation_duration > 0) {
+                    this.popup.classList.remove("show");
+                }
             }
         }
 
+        if (zoom_in && g_animation_duration > 0) {
+            this.popup.classList.add("zoom_in");
+        } else {
+            this.popup.classList.add("show");
+        }
+
         if(this.video && g_video_play){
             this.video.play();
         }
@@ -385,7 +396,11 @@ class Cell{
             this.video.pause();
         }
 
-        this.popup.style.display = "none";
+        this.popup.classList.remove("show");
+        this.popup.classList.remove("zoom_in");
+        if (g_animation_duration > 0) {
+            this.popup.classList.add("zoom_out");
+        }
 
         if(this.img && this.img.error){
             this.img = null;
@@ -454,7 +469,7 @@ function onMouseEnter(e){
                     if(cell.loaded){
                         clearInterval(cell.loaded_timer);
                         cell.loaded_timer = null;
-                        cell.show();
+                        cell.show(true);
                     }
                 }, 10);
             }
@@ -544,7 +559,7 @@ function setCellMap(target_list, name, index) {
 
         let container = document.createElement("a");
         container.id = `KOSHIAN_image_popup_container${index}`;
-        document.body.appendChild(container);
+        main_container.appendChild(container);
 
         let a = a_list[0];
         let img = img_list[0];
@@ -578,6 +593,7 @@ function safeGetValue(value, default_value){
 
 function onGetSettings(result){
     g_popup_time = Math.max(safeGetValue(result.popup_time, DEFAULT_POPUP_TIME), DEFAULT_REQUEST_TIME);
+    g_animation_duration = safeGetValue(result.animation_duration, DEFAULT_ANIMATION_DURATION);
     g_media_max_width = safeGetValue(result.media_max_width, DEFAULT_MEDIA_MAX_WIDTH);
     g_media_max_height = safeGetValue(result.media_max_height, DEFAULT_MEDIA_MAX_HEIGHT);
     g_video_control = safeGetValue(result.video_control, DEFAULT_VIDEO_CONTROL);
@@ -590,6 +606,8 @@ function onGetSettings(result){
     g_popup_text = safeGetValue(result.popup_text, DEFAULT_POPUP_TEXT);
     g_max_text_lines = safeGetValue(result.max_text_lines, DEFAULT_MAX_TEXT_LINES);
     g_text_height = safeGetValue(result.text_height, DEFAULT_TEXT_HEIGHT);
+
+    document.documentElement.style.setProperty("--animation-duration", `${g_animation_duration}ms`);
 }
 
 function onChangeSetting(changes, areaName){
@@ -598,6 +616,7 @@ function onChangeSetting(changes, areaName){
     }
 
     g_popup_time = safeGetValue(changes.popup_time.newValue, DEFAULT_POPUP_TIME);
+    g_animation_duration = safeGetValue(changes.animation_duration.newValue, DEFAULT_ANIMATION_DURATION);
     g_media_max_width = safeGetValue(changes.media_max_width.newValue, DEFAULT_MEDIA_MAX_WIDTH);
     g_media_max_height = safeGetValue(changes.media_max_height.newValue, DEFAULT_MEDIA_MAX_HEIGHT);
     g_video_control = safeGetValue(changes.video_control.newValue, DEFAULT_VIDEO_CONTROL);
@@ -611,6 +630,8 @@ function onChangeSetting(changes, areaName){
     g_max_text_lines = safeGetValue(changes.max_text_lines.newValue, DEFAULT_MAX_TEXT_LINES);
     g_text_height = safeGetValue(changes.text_height.newValue, DEFAULT_TEXT_HEIGHT);
 
+    document.documentElement.style.setProperty("--animation-duration", `${g_animation_duration}ms`);
+
     for(let i = 0; i < cell_map.length; ++i){
         cell_map[i].setting();
     }
@@ -632,6 +653,15 @@ function onLoad(){
         return;
     }
 
+    main_container = document.getElementById("KOSHIAN_image_popup_main_container");
+    if (main_container) {
+        main_container.textContent = null;   // main containerの子要素を全削除
+    } else {
+        main_container = document.createElement("div");
+        main_container.id = "KOSHIAN_image_popup_main_container";
+        document.body.appendChild(main_container);
+    }
+
     map_index = setCellMap(td_list, "small", 0);
 
     setPickupCell();

diff --git a/koshian_image_popuper/manifest.json b/koshian_image_popuper/manifest.json
@@ -3,7 +3,7 @@
 
     "name":"KOSHIAN カタログの画像をポップアップで表示 改",
 
-    "version":"1.8.1",
+    "version":"1.9.0",
 
     "description":"スレ画像をポップアップ表示します",
 

diff --git a/koshian_image_popuper/options.html b/koshian_image_popuper/options.html
@@ -12,6 +12,12 @@
     <p>
       <input id="popup_time" type="number" min = "300">
       <label for="popup_time">ミリ秒後にポップアップ（最小300ミリ秒）</label>
+      <br>
+      <label>
+        アニメーション時間
+        <input id="animation_duration" type="number" min = "0">
+        ミリ秒（0でアニメーション無効）
+      </label>
     </p>
     <p>
       <label for="media_max_width">最大横幅 (ピクセル)</label>

diff --git a/koshian_image_popuper/options.js b/koshian_image_popuper/options.js
@@ -6,6 +6,7 @@ const DEFAULT_VIDEO_MUTED = false;
 const DEFAULT_VIDEO_VOLUME = 0.5;
 const DEFAULT_VIDEO_PLAY = true;
 const DEFAULT_POPUP_TIME = 300;
+const DEFAULT_ANIMATION_DURATION = 0;
 const DEFAULT_POPUP_THUMBNAIL = false;
 const DEFAULT_POPUP_LINK = false;
 const DEFAULT_POPUP_TEXT = false;
@@ -15,7 +16,7 @@ const DEFAULT_REQUEST_TIME = 300;
 
 /* eslint indent: ["warn", 2] */
 
-function onError(error) {
+function onError(error) { // eslint-disable-line no-unused-vars
 }
 
 function safeGetValue(value, default_value) {
@@ -31,6 +32,7 @@ function saveOptions(e) {
 
   browser.storage.local.set({
     popup_time: document.querySelector("#popup_time").value,
+    animation_duration: document.querySelector("#animation_duration").value,
     media_max_width: document.querySelector("#media_max_width").value,
     media_max_height: document.querySelector("#media_max_height").value,
     video_control: document.querySelector("#video_control").checked,
@@ -48,6 +50,7 @@ function saveOptions(e) {
 
 function setCurrentChoice(result) {
   document.querySelector("#popup_time").value = Math.max(safeGetValue(result.popup_time, DEFAULT_POPUP_TIME), DEFAULT_REQUEST_TIME);
+  document.querySelector("#animation_duration").value = safeGetValue(result.animation_duration, DEFAULT_ANIMATION_DURATION);
   document.querySelector("#media_max_width").value = safeGetValue(result.media_max_width, DEFAULT_MEDIA_MAX_WIDTH);
   document.querySelector("#media_max_height").value = safeGetValue(result.media_max_height, DEFAULT_MEDIA_MAX_HEIGHT);
   document.querySelector("#video_control").checked = safeGetValue(result.video_control, DEFAULT_VIDEO_CONTROL);