Remove jquery.contextMenu (#248)

externals/jquery.contextMenu.css

@@ -1,177 +0,0 @@
-/*!
- * jQuery contextMenu - Plugin for simple contextMenu handling
- *
- * Version: 1.6.6
- *
- * Authors: Rodney Rehm, Addy Osmani (patches for FF)
- * Web: http://medialize.github.com/jQuery-contextMenu/
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
- *   GPL v3 http://opensource.org/licenses/GPL-3.0
- *
- */
-
-.context-menu-list {
-    z-index: 1001;
-    position: fixed;
-    background: white;
-    border: solid 1px gainsboro;
-    box-shadow: 4px 4px 4px -2px #888888;
-    padding: 8px 0px 8px 0px;
-    line-height: 25px;
-    width: 254px;
-    list-style: none;
-    margin-left: -10px;
-    outline: 0px #fff;
-}
-
-.context-menu-item {
-    padding: 2px 2px 2px 31px;
-    background-color: #fff;
-    position: relative;
-    -webkit-user-select: none;
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.context-menu-separator {
-    padding-bottom: 0;
-    border-bottom: 1px solid #DDD;
-}
-
-.context-menu-item>label>input,
-.context-menu-item>label>textarea {
-    -webkit-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
-    margin-left: -10px;
-}
-
-.context-menu-item:hover {
-    cursor: pointer;
-    background-color: #eeeeee;
-}
-
-.context-menu-item.disabled {
-    color: #666;
-}
-
-.context-menu-input.hover,
-.context-menu-item.disabled.hover {
-    cursor: default;
-    background-color: #EEE;
-}
-
-.context-menu-submenu:after {
-    content: ">";
-    color: #666;
-    position: absolute;
-    top: 0;
-    right: 3px;
-    z-index: 1;
-}
-
-
-/* icons
-    #protip:
-    In case you want to use sprites for icons (which I would suggest you do) have a look at
-    http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement 
-    .context-menu-item.icon:before {}
- */
-
-.context-menu-item.icon {
-    min-height: 18px;
-    background-repeat: no-repeat;
-    background-position: 10px 7px;
-}
-
-.context-menu-item.icon:hover {
-    min-height: 18px;
-    background-repeat: no-repeat;
-    background-position: 10px 7px;
-}
-
-
-/*.context-menu-item.icon-edit {
-    background-image: url(images/page_white_edit.png);
-}
-
-.context-menu-item.icon-cut {
-    background-image: url(images/cut.png);
-}
-
-.context-menu-item.icon-copy {
-    background-image: url(images/page_white_copy.png);
-}
-
-.context-menu-item.icon-paste {
-    background-image: url(images/page_white_paste.png);
-}
-
-.context-menu-item.icon-delete {
-    background-image: url(images/page_white_delete.png);
-}
-
-.context-menu-item.icon-add {
-    background-image: url(images/page_white_add.png);
-}
-
-.context-menu-item.icon-quit {
-    background-image: url(images/door.png);
-}*/
-
-
-/* vertically align inside labels */
-
-.context-menu-input>label>* {
-    vertical-align: top;
-}
-
-
-/* position checkboxes and radios as icons */
-
-.context-menu-input>label>input[type="checkbox"],
-.context-menu-input>label>input[type="radio"] {
-    margin-left: -17px;
-}
-
-.context-menu-input>label>span {
-    margin-left: 5px;
-}
-
-.context-menu-input>label,
-.context-menu-input>label>input[type="text"],
-.context-menu-input>label>textarea,
-.context-menu-input>label>select {
-    display: block;
-    width: 100%;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -ms-box-sizing: border-box;
-    -o-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.context-menu-input>label>textarea {
-    height: 100px;
-}
-
-.context-menu-item>.context-menu-list {
-    display: none;
-    /* re-positioned by js */
-    right: -5px;
-    top: 5px;
-}
-
-
-/*.context-menu-item.hover>.context-menu-list {
-    display: block;
-    padding-left: 5px;
-}*/
-
-.context-menu-accesskey {
-    text-decoration: underline;
-}

src/Definitions/jquery.contextmenu.d.ts

@@ -1,42 +0,0 @@
-// Type definitions for jQuery contextMenu 1.7.0
-// Project: http://medialize.github.com/jQuery-contextMenu/
-// Definitions by: Natan Vivo <https://github.com/nvivo/>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-/// <reference path="jquery.d.ts" />
-
-interface JQueryContextMenuOptions {
-  selector: string;
-  appendTo?: string;
-  trigger?: string;
-  autoHide?: boolean;
-  delay?: number;
-  determinePosition?: (menu: JQuery) => void;
-  position?: (opt: JQuery, x: number, y: number) => void;
-  positionSubmenu?: (menu: JQuery) => void;
-  zIndex?: number;
-  animation?: {
-    duration?: number;
-    show?: string;
-    hide?: string;
-  };
-  events?: {
-    show?: () => void;
-    hide?: () => void;
-  };
-  callback?: (key: any, options: any) => any;
-  items?: any;
-  build?: (triggerElement: JQuery, e: Event) => any;
-  reposition?: boolean;
-  className?: string;
-  itemClickEvent?: string;
-}
-
-interface JQueryStatic {
-  contextMenu(options?: JQueryContextMenuOptions): JQuery;
-  contextMenu(type: string, selector?: any): JQuery;
-}
-
-interface JQuery {
-  contextMenu(options?: any): JQuery;
-}

src/Explorer/Tables/DataTable/DataTableContextMenu.ts

@@ -1,150 +0,0 @@
-import Q from "q";
-
-import * as Constants from "../Constants";
-import TableCommands from "./TableCommands";
-import TableEntityListViewModel from "./TableEntityListViewModel";
-
-/*
- * ContextMenu view representation
- */
-export default class DataTableContextMenu {
-  public viewModel: TableEntityListViewModel;
-
-  // There is one context menu for each selector on each tab and they should all be registered here.
-  // Once the context menus are registered, we should access them through this instance.
-  public static Instance: { [key: string]: { contextMenu: DataTableContextMenu } } = {};
-
-  private _tableCommands: TableCommands;
-
-  constructor(viewModel: TableEntityListViewModel, tableCommands: TableCommands) {
-    this.viewModel = viewModel;
-    this._tableCommands = tableCommands;
-
-    this.registerTableBodyContextMenu();
-    this.registerTableHeaderContextMenu();
-
-    DataTableContextMenu.Instance[viewModel.queryTablesTab.tabId] = { contextMenu: this };
-  }
-
-  public unregisterContextMenu(selector: string): void {
-    $.contextMenu("destroy", "div#" + this.viewModel.queryTablesTab.tabId + ".tab-pane " + selector);
-  }
-
-  public registerTableBodyContextMenu(): void {
-    // Localize
-    $.contextMenu({
-      selector:
-        "div#" + this.viewModel.queryTablesTab.tabId + ".tab-pane " + Constants.htmlSelectors.dataTableBodyRowSelector,
-      callback: this.bodyContextMenuSelect,
-      items: {
-        edit: {
-          name: "Edit",
-          cmd: TableCommands.editEntityCommand,
-          icon: "edit-entity",
-          disabled: () => !this.isEnabled(TableCommands.editEntityCommand)
-        },
-        delete: {
-          name: "Delete",
-          cmd: TableCommands.deleteEntitiesCommand,
-          icon: "delete-entity",
-          disabled: () => !this.isEnabled(TableCommands.deleteEntitiesCommand)
-        },
-        reorder: {
-          name: "Reorder Columns Based on Schema",
-          cmd: TableCommands.reorderColumnsCommand,
-          icon: "shift-non-empty-columns-left",
-          disabled: () => !this.isEnabled(TableCommands.reorderColumnsCommand)
-        },
-        reset: {
-          name: "Reset Columns",
-          cmd: TableCommands.resetColumnsCommand,
-          icon: "reset-column-order"
-        }
-      }
-    });
-  }
-
-  public registerTableHeaderContextMenu(): void {
-    // Localize
-    $.contextMenu({
-      selector:
-        "div#" + this.viewModel.queryTablesTab.tabId + ".tab-pane " + Constants.htmlSelectors.dataTableHeadRowSelector,
-      callback: this.headerContextMenuSelect,
-      items: {
-        customizeColumns: {
-          name: "Column Options",
-          cmd: TableCommands.customizeColumnsCommand,
-          icon: "customize-columns"
-        },
-        reset: {
-          name: "Reset Columns",
-          cmd: TableCommands.resetColumnsCommand,
-          icon: "reset-column-order"
-        }
-      }
-    });
-  }
-
-  private isEnabled(commandName: string): boolean {
-    return this._tableCommands.isEnabled(commandName, this.viewModel.selected());
-  }
-
-  private headerContextMenuSelect = (key: any, options: any): void => {
-    var promise: Q.Promise<any> = null;
-
-    switch (key) {
-      case TableCommands.customizeColumnsCommand:
-        promise = this._tableCommands.customizeColumnsCommand(this.viewModel);
-        break;
-      case TableCommands.resetColumnsCommand:
-        promise = Q.resolve(this._tableCommands.resetColumns(this.viewModel));
-        break;
-      default:
-        break;
-    }
-
-    if (promise) {
-      promise.then(() => {
-        this.viewModel.focusDataTable();
-      });
-    }
-  };
-
-  private bodyContextMenuSelect = (key: any, options: any): void => {
-    var promise: Q.Promise<any> = null;
-
-    switch (key) {
-      case TableCommands.editEntityCommand:
-        promise = this._tableCommands.editEntityCommand(this.viewModel);
-        break;
-      case TableCommands.deleteEntitiesCommand:
-        promise = this._tableCommands.deleteEntitiesCommand(this.viewModel);
-        break;
-      case TableCommands.reorderColumnsCommand:
-        promise = this._tableCommands.reorderColumnsBasedOnSelectedEntities(this.viewModel);
-        break;
-      case TableCommands.resetColumnsCommand:
-        promise = Q.resolve(this._tableCommands.resetColumns(this.viewModel));
-        break;
-      default:
-        break;
-    }
-
-    if (promise) {
-      promise.then(() => {
-        this.viewModel.focusDataTable();
-      });
-    }
-  };
-
-  /**
-   * A context menu factory to construct the one context menu for each tab/table view model.
-   */
-  public static contextMenuFactory(viewModel: TableEntityListViewModel, tableCommands: TableCommands) {
-    if (!DataTableContextMenu.Instance[viewModel.queryTablesTab.tabId]) {
-      DataTableContextMenu.Instance[viewModel.queryTablesTab.tabId] = {
-        contextMenu: new DataTableContextMenu(viewModel, tableCommands)
-      };
-    }
-  }
-}

src/Explorer/Tables/DataTable/DataTableOperationManager.ts

@@ -41,18 +41,6 @@ export default class DataTableOperationManager {
     this.tryOpenEditor();
   };
 
-  private contextMenu = (event: JQueryEventObject) => {
-    var elem: JQuery = $(event.currentTarget);
-    this.updateLastSelectedItem(elem, event.shiftKey);
-
-    this.applyContextMenuSelection(elem);
-    setTimeout(function() {
-      $(".context-menu-list")
-        .attr("tabindex", -1)
-        .focus();
-    }, 0);
-  };
-
   private keyDown = (event: JQueryEventObject): boolean => {
     var isUpArrowKey: boolean = event.keyCode === Constants.keyCodes.UpArrow,
       isDownArrowKey: boolean = event.keyCode === Constants.keyCodes.DownArrow,
@@ -293,7 +281,6 @@ export default class DataTableOperationManager {
   public bind() {
     this.dataTable.on("click", "tr", this.click);
     this.dataTable.on("dblclick", "tr", this.doubleClick);
-    this.dataTable.on("contextmenu", "tr", this.contextMenu);
     this.dataTable.on("keydown", "td", this.keyDown);
     this.dataTable.on("keyup", "td", this.keyUp);
 

src/Explorer/Tables/DataTable/TableEntityListViewModel.ts

@@ -5,7 +5,6 @@ import Q from "q";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { CassandraTableKey, CassandraAPIDataClient } from "../TableDataClient";
 import DataTableViewModel from "./DataTableViewModel";
-import DataTableContextMenu from "./DataTableContextMenu";
 import * as DataTableUtilities from "./DataTableUtilities";
 import TableCommands from "./TableCommands";
 import TableEntityCache from "./TableEntityCache";
@@ -56,8 +55,6 @@ export default class TableEntityListViewModel extends DataTableViewModel {
     this.cache = new TableEntityCache();
     this.queryErrorMessage = ko.observable<string>();
     this.queryTablesTab = queryTablesTab;
-    // Enable Context menu for the data table.
-    DataTableContextMenu.contextMenuFactory(this, tableCommands);
     this.id = `tableEntityListViewModel${this.queryTablesTab.tabId}`;
     this.cqlQuery = ko.observable<string>(
       `SELECT * FROM ${this.queryTablesTab.collection.databaseId}.${this.queryTablesTab.collection.id()}`

src/Main.ts

@@ -17,7 +17,6 @@ import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "../less/TableStyles/queryBuilder.less";
 import "../externals/jquery.dataTables.min.css";
 import "../less/TableStyles/fulldatatables.less";
-import "../externals/jquery.contextMenu.css";
 import "../less/TableStyles/EntityEditor.less";
 import "../less/TableStyles/CustomizeColumns.less";
 import "../less/resourceTree.less";
@@ -43,7 +42,6 @@ import "es6-symbol/implement";
 import "webcrypto-liner/build/webcrypto-liner.shim.min";
 import "./Libs/jquery";
 import "bootstrap/dist/js/npm";
-import "../externals/jquery.contextMenu.js";
 import "../externals/jquery.typeahead.min.js";
 import "../externals/jquery-ui.min.js";
 import "../externals/adal.js";