narou 2.8.3.1 → 2.9.0

data/lib/web/public/resources/narou.queue.js

@@ -35,7 +35,7 @@ $(document).ready(function() {
       left: $queue.offset().left + $queue.outerWidth() + 1 - $(document).scrollLeft(),
       top: $queue.offset().top - 3 - $(document).scrollTop(),
     });
-    $(".navbar").append($plus);
+    $("#header-navbar").append($plus);
     $plus.delay(100).animate({
       top: - $plus.outerHeight(),
       opacity: 0,

data/lib/web/public/resources/narou.ui.js

@@ -9,6 +9,8 @@ $(document).ready(function() {
   var touchable_device = "ontouchstart" in window;
   var click_event_name = (touchable_device ? "touchstart" : "click");
 
+  var datatables_init_completed = false;
+
   // MEMO: table 全てに対して操作
   // table.$("tr.selected").removeClass("selected");
   // MEMO: .selected が付いている行を全て取得
@@ -20,13 +22,13 @@ $(document).ready(function() {
       {
         id: false, last_update: false, title: true, author: false, sitename: false,
         toc_url: false, novel_type: false, tags: false, status: false, menu: true,
-        download: true, folder: false, general_lastup: false,
+        download: true, folder: false, update_button: false, general_lastup: false,
       }
       // PC
     : {
         id: true, last_update: true, title: true, author: true, sitename: true,
         toc_url: true, novel_type: true, tags: true, status: true, menu: true,
-        download: true, folder: true, general_lastup: true,
+        download: true, folder: true, update_button: true, general_lastup: true,
       });
 
   $.fn.dataTable.Api.register("fireChangeSelect()", function() {
@@ -41,17 +43,6 @@ $(document).ready(function() {
     });
   });
 
-  /*
-   * タグ検索
-   */
-  var $tag_search = $("#tag-search");
-  $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
-    var tag_name = $tag_search.val();
-    if (tag_name.length == 0) return true;
-    var tags = table.row(dataIndex).data().tags;
-    return tags.match(new RegExp('data-tag="' + tag_name + '"'));
-  });
-
   var ANNOTATION_COLOR_TIME_LIMIT = 6 * 60 * 60;   // 6時間(秒)
   var GENERAL_LASTUP_CLASSES = [
     [60 * 60, "gl-60minutes"],
@@ -73,25 +64,37 @@ $(document).ready(function() {
 
   // initComplete や ajax.reload した時に再設定するために呼ばれる
   function resettingTableState() {
-    table.$("[data-toggle=tooltip]").tooltip({
-      animation: false,
-      container: "body",
-    });
+    refreshTooltop(table.$("[data-toggle=tooltip]"), null, "top");
     // バッジを更新しておく(.selectedの復元が終わってから呼ぶ)
     table.fireChangeSelect();
-    // タグのイベントを反映
-    tag.registerEvents(table);
 
     table.draw(false);
   }
 
+  function openContextMenuWithTr(tr, event) {
+    var $tr = $(tr);
+    var target_id = table.row(tr).data().id;
+    var $cover = $("<div class=context-menu-target-cover>");
+    // MEMO: IEだと要素を追加してから座標を指定しないと反映されない
+    $("body").append($cover);
+    $cover.offset($tr.offset()).width($tr.width()).height($tr.height());
+    $cover.one("contextmenu", function(e) {
+      e.preventDefault();
+      $cover.remove();
+      context_menu.close();
+    });
+    context_menu.open(target_id, get_event_position(event), function() {
+      $cover.remove();
+    });
+  }
+
   var table = t = $("#novel-list").DataTable({
     ajax: "/api/list",
     dom: (touchable_device ? 'lprtpi' : 'Rlprtpi'),
     stateSave: true,
     stateDuration: 0,   // tableの状態保存を永続化
     paginationType: "full_numbers",
-    lengthMenu: [[20, 50, 100, -1], [20, 50, 100, "全"]],
+    lengthMenu: [[20, 50, 100, 200, 500, -1], [20, 50, 100, 200, 500, "全"]],
     order: [[ 1, "desc" ]],   // 最初は新着順でソートしておく
     columns: [
       // ID
@@ -121,7 +124,7 @@ $(document).ready(function() {
                 display = "<span class=" + klass + ">" + display + "</span>";
               }
             }
-            return display;
+            return "<div>" + display + "</div>";
           }
           return data;
         }
@@ -145,7 +148,7 @@ $(document).ready(function() {
               klass = value[1];
               if (value[0] === -1 || diff_time <= value[0]) break;
             }
-            return '<span class="general-lastup ' + klass + '">' + display + '</span>';
+            return '<div><span class="general-lastup ' + klass + '">' + display + '</span></div>';
           }
           else if (type === "sort") {
             return data * 10000 + (row.id | 0);
@@ -201,27 +204,36 @@ $(document).ready(function() {
         },
         render: function() {}
       },
+      {
+        title: "更新",
+        data: "update_button", className: "text-center", orderable: false,
+        searchable: false, visible: cell_visible.update_button,
+        defaultContent: '<button class="btn btn-default btn-xs">' +
+                        '<span class="glyphicon glyphicon-refresh"></span></button>',
+        createdCell: function(td, cellData, rowData, rowIndex, colIndex) {
+          $(td).children("button")
+            .data("targetId", rowData.id)
+            .on("click", function(e) {
+              e.stopPropagation();
+              var $this = $(this);
+              var target_id = $this.data("targetId");
+              action.updateForce(target_id);
+            });
+        },
+        render: function() {}
+      },
       {
         title: "個別",
         data: "menu", className: "text-center",
         defaultContent: '<button class="btn btn-default btn-xs">' +
-                        '<span class="glyphicon glyphicon-cog"></span></button>',
+                        '<span class="glyphicon glyphicon-option-horizontal"></span></button>',
         visible: cell_visible.menu,
         createdCell: function(td, cellData, rowData, rowIndex, colIndex) {
           $(td).children("button")
             .data("targetId", rowData.id)
             .on("click", function(e) {
               e.stopPropagation();
-              var $this = $(this);
-              var $tr = $(e.target).closest("tr");
-              var target_id = $this.data("targetId");
-              var $cover = $("<div class=context-menu-target-cover>");
-              // MEMO: IEだと要素を追加してから座標を指定しないと反映されない
-              $("body").append($cover);
-              $cover.offset($tr.offset()).width($tr.width()).height($tr.height());
-              context_menu.open(target_id, get_event_position(e), function() {
-                $cover.remove();
-              });
+              openContextMenuWithTr($(e.target).closest("tr"), e);
             });
         },
         render: function() {},
@@ -246,24 +258,12 @@ $(document).ready(function() {
       }
       return hash;
     }),
-    stateLoadParams: function (_settings, data) {
-      // 独自フィルタボックスへセーブデータを反映
-      if (data.search.search != "") {
-        $("#myFilter").val(data.search.search);
-        $("#myFilter-clear").show();
-      }
-      else {
-        $("#myFilter-clear").hide();
-      }
-    },
     createdRow: function(row, data, data_index) {
       if (data.frozen) {
         $(row).addClass("frozen");
       }
     },
     initComplete: function(_settings, _json) {
-      // タグ検索を復元
-      $tag_search.val(storage.get("tag_search"));
       // 範囲選択モードでもリンクとボタンが使えるように
       table.on("mousedown", "a, button", function(e) {
         e.stopPropagation();
@@ -274,7 +274,9 @@ $(document).ready(function() {
       });
       resettingTableState();
 
-      table.draw(false);
+      search.searchSync();
+
+      datatables_init_completed = true;
     },
     language: {
       //lengthMenu: "_MENU_ 件分表示　<span id='icon-refresh-table' class='glyphicon glyphicon-repeat'></span>",
@@ -298,18 +300,80 @@ $(document).ready(function() {
      * Extensions section
      */
     colReorder: {
-      "realtime": false
+      realtime: false,
+
+      // colReorder でカラムの順番が入れ替えられた場合、createdCell 内で
+      // 設定している内容が全てリセットされてしまいイベント等が消えてしまうので、
+      // ここで一旦リロードしてイベントが再設定されるようにする。
+      // これは createdCell が初期化時に一度しか呼ばれないためで、dataTables の
+      // 今後のバージョンアップで予定されている updatedCell が実装されるまでの
+      // 暫定処置として reorderCallback で代用する。
+      // https://github.com/DataTables/ColReorder/issues/49
+      reorderCallback: function() {
+        // stateSave が有効な状態でカラムが入れ替えられていた場合、
+        // initComplete イベントが発火する前に一度この reorderCallback が発火されるので、
+        // 無駄なリロードをしないように初期化後のみ有効にする
+        if (datatables_init_completed) {
+          notification.trigger("table.reload");
+        }
+      },
     },
   });
 
   var storage = new Narou.Storage();
   var action = new Narou.Action(table);
   var notification = Narou.Notification.instance();
-  var stream_console = new Narou.Console(notification);
+  var stream_console = new Narou.Console;
+  var search = Narou.Search.get(table);
   var tag = new Narou.Tag(table);
-  var context_menu = new Narou.ContextMenu(action, notification, tag);
+  var context_menu = new Narou.ContextMenu(action, tag);
   var select_color_menu = new Narou.SelectColorMenu;
 
+  /*
+   * フィルターの文字列を復元
+   */
+  var filter_string = storage.get("filter_string");
+  if (filter_string) {
+    $("#myFilter").val(filter_string);
+    $("#myFilter-clear").show();
+  }
+  else {
+    $("#myFilter-clear").hide();
+  }
+
+  /*
+   * コントロールパネル（操作ボタン群）をフッターに移動させる／元に戻す
+   */
+  var fixed_buttons = storage.get("buttons_fix_footer");
+
+  function fix_buttons_to_footer() {
+    refreshTooltop(
+        $("#control-panel > div")
+          .appendTo("#footer-navbar > .container")
+          .addClass("in-footer dropup")
+          .find("[data-toggle=tooltip]")
+            .data("placement", "top")
+        );
+    table.fireChangeSelect();
+    $("#footer-navbar").removeClass("hide");
+  }
+
+  function cancel_fix_buttons() {
+    $("#footer-navbar").addClass("hide");
+    refreshTooltop(
+        $("#footer-navbar > .container > div")
+          .appendTo("#control-panel")
+          .removeClass("in-footer dropup")
+          .find("[data-toggle=tooltip]")
+            .data("placement", "bottom")
+        );
+    table.fireChangeSelect();
+  }
+
+  if (fixed_buttons) {
+    fix_buttons_to_footer();
+  }
+
   /*
    * 凍結の表示状態制御
    */
@@ -325,20 +389,28 @@ $(document).ready(function() {
     }
   });
 
-  function restoreVisibilityForFrozen() {
+  function restoreVisibilityForViewMenu() {
     visibility_frozen_novel = storage.get("visibility_frozen_novel");
     visibility_nonfrozen_novel = storage.get("visibility_nonfrozen_novel");
+    var visibility_open_new_tab = storage.get("open_new_tab_setting_pages");
+    var visibility_buttons_fix_footer = storage.get("buttons_fix_footer");
     if (typeof visibility_frozen_novel === "undefined")
       visibility_frozen_novel = true;
     if (typeof visibility_nonfrozen_novel === "undefined")
       visibility_nonfrozen_novel = true;
+    if (typeof visibility_open_new_tab === "undefined")
+      visibility_open_new_tab = false;
+    if (typeof visibility_buttons_fix_footer === "undefined")
+      visibility_buttons_fix_footer = false;
     // メニューのチェック状態も復元
     var method = ["removeClass", "addClass"];
     $("#action-view-frozen")[method[visibility_frozen_novel | 0]]("active");
     $("#action-view-nonfrozen")[method[visibility_nonfrozen_novel | 0]]("active");
+    $("#action-view-toggle-setting-page-open-new-tab")[method[visibility_open_new_tab | 0]]("active");
+    $("#action-view-toggle-buttons-fix-footer")[method[visibility_buttons_fix_footer | 0]]("active");
   }
 
-  restoreVisibilityForFrozen();
+  restoreVisibilityForViewMenu();
 
   function saveVisibilityFrozen() {
     storage.set("visibility_frozen_novel", visibility_frozen_novel);
@@ -347,11 +419,11 @@ $(document).ready(function() {
   }
 
   function toggleVisibilityFrozen() {
-    visibility_frozen_novel = visibility_frozen_novel ? false : true;
+    visibility_frozen_novel = !visibility_frozen_novel;
   }
 
   function toggleVisibilityNonFrozen() {
-    visibility_nonfrozen_novel = visibility_nonfrozen_novel ? false : true;
+    visibility_nonfrozen_novel = !visibility_nonfrozen_novel;
   }
 
   /*
@@ -377,32 +449,26 @@ $(document).ready(function() {
     }, false);
   });
 
+  /*
+   * サーバ再起動イベント定義
+   */
+  notification.on("server.rebooted", function() {
+    location.href = "/";
+  });
+
   notification.on("tag.updateCanvas", function() {
     tag.updateCanvas();
   });
 
-  var action_select_view = $("#action-select-view");
-  var myfilter_clear = $("#myFilter-clear");
-
   /*
-   * カスタムフィルタボックスで入力値をフィルタする
+   * イジェクトボタンの show / hide イベント
    */
-  $("#myFilter").on("keyup", function() {
-    table.search($(this).val()).draw();
-    if ($(this).val() === "") {
-      myfilter_clear.hide();
-    }
-    else {
-      myfilter_clear.show();
-    }
-  })
-  /*
-   * リセットボタン(X)
-   */
-  $("#myFilter-clear").on(click_event_name, function() {
-    table.search("").draw();
-    $("#myFilter").val("");
-    myfilter_clear.hide();
+  var $button_eject = $("#button-eject");
+  notification.on("device.ejectable", function(ejectable) {
+    if (ejectable)
+      $button_eject.removeClass("hide");
+    else
+      $button_eject.addClass("hide");
   });
 
   /*************************************************************
@@ -489,6 +555,21 @@ $(document).ready(function() {
     $("#action-select-mode-rect").addClass("disabled");
   }
   else {
+    // 小説一覧テーブル内で右クリックしたら個別メニューを表示
+    $("#novel-list tbody").on("contextmenu", function(e) {
+      var target_tag_name = e.target.tagName.toLowerCase();
+      // ボタンとかリンクはブラウザの右クリックメニューをそのまま使いたい
+      if (target_tag_name === "button" || target_tag_name === "a" ||
+          $(e.target).parent("button, a")[0])
+        return;
+
+      e.preventDefault();   // ブラウザの右クリックメニューを抑制
+      e.stopPropagation();
+      var mousedowned_element = $.elementFromPoint(get_event_position(e));
+      var tr = mousedowned_element.parents("tr");
+      openContextMenuWithTr(tr, e);
+    });
+
     var initMode = function(mode) {
       if (select_mode != mode) {
         $("#action-select-mode-" + mode).addClass("active");
@@ -625,6 +706,11 @@ $(document).ready(function() {
         var mousedowned_element = $.elementFromPoint(_pos);
         if (!mousedowned_element || mousedowned_element.closest("#novel-list tbody").length === 0)
           return;
+
+        // 右クリックは無視（contextmenu イベント内で個別メニューを表示する）
+        if (e.which == 3)
+          return;
+
         e.preventDefault();
         e.stopPropagation();
         var self = this;
@@ -648,6 +734,7 @@ $(document).ready(function() {
         if (not_clicked_yet) {
           // 範囲選択開始
           $("#rect-select-menu").hide();
+          context_menu.close();
           unregister_close_handler();
           not_clicked_yet = false;
           start_position = _pos;
@@ -780,6 +867,36 @@ $(document).ready(function() {
     table.draw();
   });
 
+  /*
+   * メニュー
+   *   表示＞変換設定ページは新規タブで開く
+   */
+  $("#action-view-toggle-setting-page-open-new-tab").on(click_event_name, function(e) {
+    e.preventDefault();
+    slideNavbar.slide();
+    $(this).toggleClass("active");
+    var open_new_tab = storage.get("open_new_tab_setting_pages");
+    storage.set("open_new_tab_setting_pages", !open_new_tab);
+    storage.save();
+  });
+
+  /*
+   * メニュー
+   *   表示＞ボタンを画面下部に固定
+   */
+  $("#action-view-toggle-buttons-fix-footer").on(click_event_name, function(e) {
+    e.preventDefault();
+    slideNavbar.slide();
+    $(this).toggleClass("active");
+    fixed_buttons = !storage.get("buttons_fix_footer");
+    storage.set("buttons_fix_footer", fixed_buttons);
+    storage.save();
+    if (fixed_buttons)
+      fix_buttons_to_footer();
+    else
+      cancel_fix_buttons();
+  });
+
   /*
    * メニュー
    *   表示＞表示設定を全てリセット
@@ -836,7 +953,7 @@ $(document).ready(function() {
   $("#action-tool-open-dnd-window").on(click_event_name, function(e) {
     e.preventDefault();
     slideNavbar.slide();
-    window.open("/widget/drag_and_drop", "widget_window",
+    window.open("/widget/drag_and_drop", "dnd_window",
                 "width=400,height=350,menubar=no,toolbar=no,scrollbars=no,resizable=yes");
   });
 
@@ -860,6 +977,17 @@ $(document).ready(function() {
     action.csvImport();
   });
 
+  /*
+   * メニュー
+   *   ツール > メモ帳（ポップアップ）
+   */
+  $("#action-tool-notepad-window").on(click_event_name, function(e) {
+    e.preventDefault();
+    slideNavbar.slide();
+    window.open("/widget/notepad", "notepad_window",
+                "width=400,height=350,menubar=no,toolbar=no,scrollbars=no,resizable=yes");
+  });
+
   /*
    * メニュー
    *   オプション＞環境設定
@@ -892,6 +1020,16 @@ $(document).ready(function() {
     });
   });
 
+  /*
+   * メニュー
+   *   オプション＞サーバを再起動
+   */
+  $("#action-option-server-reboot").on(click_event_name, function(e) {
+    e.preventDefault();
+    slideNavbar.slide();
+    action.rebootDialog();
+  });
+
   /*
    * メニュー
    *   オプション＞サーバをシャットダウン
@@ -901,10 +1039,11 @@ $(document).ready(function() {
     slideNavbar.slide();
     bootbox.dialog({
       title: '<span class="glyphicon glyphicon-off"></span> シャットダウン',
-      message: "Narou.rb WEB UI サーバをシャットダウンします。<br>" +
-               "シャットダウンすると再起動するまでアクセスは出来なくなります。<br>" +
-               "再起動するにはコンソールでもう一度 <kbd>narou web</kbd> を実行" +
-               "して下さい。",
+      message: "<p>Narou.rb WEB UI サーバをシャットダウンします。<br>" +
+               "シャットダウンすると再度立ち上げるまではアクセスは出来なくなります。<br>" +
+               "再度立ち上げるにはコンソールでもう一度 <kbd>narou web</kbd> を実行して下さい。</p>" +
+               "<p class=text-danger>アップデート中や変換中の小説がある場合は中断されます。<br>" +
+               "終わったかどうか確認しましょう。</p>",
       backdrop: true,
       buttons: {
         danger: {
@@ -924,6 +1063,25 @@ $(document).ready(function() {
     });
   });
 
+  // tooltip() にハッシュで設定を渡すと、DOMに設定されているdata-placementなどの
+  // 値が無視されてしまうため、デフォルト値を変更しておく
+  _.merge($.fn.tooltip.Constructor.DEFAULTS, {
+    animation: false,
+    container: "body",
+    placement: "bottom"
+  });
+
+  function refreshTooltop(id, title, placement) {
+    $(id)
+      .tooltip("destroy")
+      .tooltip({ title: title, placement: placement })
+      .on("shown.bs.tooltip", function(e) {
+        setTimeout(function() {
+          $(e.target).tooltip("hide");
+        }, 3500);
+      });
+  }
+
   /*
    * 「選択」メニューの横に現在選択中の小説数をバッジで表示
    */
@@ -931,23 +1089,14 @@ $(document).ready(function() {
     table.on("changeselect", function() {
       var selected_count = table.rows(".selected").data().length;
       $("#badge-number-of-selecting").text(selected_count);
-      var tooltip_opt = {
-        animation: false,
-        container: "body",
-        placement: "bottom"
-      }
       if (selected_count > 0) {
-        tooltip_opt.title = "選択した小説を更新";
-        $("#button-update").tooltip("destroy").tooltip(tooltip_opt);
-        tooltip_opt.title = "選択した小説を送信";
-        $("#button-send").tooltip("destroy").tooltip(tooltip_opt);
+        refreshTooltop("#button-update", "選択した小説を更新");
+        refreshTooltop("#button-send", "選択した小説を送信");
         enable_menu_item(".enable-selected");
       }
       else {
-        tooltip_opt.title = "すべての小説を更新";
-        $("#button-update").tooltip("destroy").tooltip(tooltip_opt);
-        tooltip_opt.title = "更新された小説を送信";
-        $("#button-send").tooltip("destroy").tooltip(tooltip_opt);
+        refreshTooltop("#button-update", "すべての小説を更新");
+        refreshTooltop("#button-send", "更新された小説を送信");
         disable_menu_item(".enable-selected");
       }
     });
@@ -957,17 +1106,7 @@ $(document).ready(function() {
   /*
    * Tooltip 化
    */
-  $("[data-toggle=tooltip]").tooltip({
-    animation: false,
-    container: "body",
-    placement: "bottom",
-  });
-
-  $("#icon-refresh-table").tooltip({
-    title: "リストを再読み込み",
-    animation: false,
-    container: "body",
-  });
+  refreshTooltop("[data-toggle=tooltip]");
 
   $("button").on("mouseleave", function() {
     $(this).tooltip("hide");
@@ -1142,6 +1281,15 @@ $(document).ready(function() {
     action.settingBurn();
   });
 
+  /*
+   * ボタン
+   *   Eject
+   */
+  $("#button-eject").on("click", function(e) {
+    e.preventDefault();
+    action.eject();
+  });
+
   /*
    * アイコン
    *   ○件表示の横のリロードアイコン
@@ -1187,6 +1335,9 @@ $(document).ready(function() {
       if ($("#rect-select-menu").is(":visible")) {
         close_rect_select_menu_handler();
       }
+      if (!context_menu.closed) {
+        context_menu.close();
+      }
       else {
         action.selectClear();
       }