mirror of
https://github.com/Cacti/cacti.git
synced 2026-10-24 03:57:32 +09:00
TheWitnessandTheWitness
2a44c7a791
* fix: label modern dialog apply/clear with the page button text; show Rows on the bar
The dialog apply button was hardcoded 'Search', which mismatched the page's submit label (e.g. 'Go') and collided with pages that have a filter field named Search (clog). It now uses the configured go/clear button display text. Also route the 'rows' field to the modern bar alongside timespan/refresh so the per-page Rows selector stays visible.
* feature: always label the row-count selector 'Rows'
emit_field() forces the 'rows' field friendly_name to Rows regardless of page-specific naming (Devices, Trees, ...), in both legacy and modern filters. Refresh already renders on the modern bar via field_is_bar.
* feature: order modern bar selectors (Rows, Refresh) and separate them from the buttons
Rows renders first and Refresh second on the modern filter bar, and a vertical separator now divides the selectors (Layouts, Rows, Refresh) from the layout action buttons.
* changelog: 8191.feature fragment for modern filter bar polish
* jQuery 4: replace removed $.isFunction in bundled plugins
jQuery 4.0 removed $.isFunction. contextMenu, colorpicker and timepicker are hand-vendored orphans fixed in place; tablesorter is npm-managed, so it is also rewritten at sync time in build/sync-js.mjs so a rebuild reproduces the fix (no-ops once the upstream fix is released and the pin is bumped).
* Render the Thumbnails and Business Hours graph filter checkboxes as Cacti toggles
* fix: address review — update modern JS docblock and strengthen bar/label tests
Rewrite the create_modern_javascript docblock to describe the page-configured apply/clear labels (and document the change/clear callback params). Extend FilterLayoutsTest to assert the selector|button separator, the applied Rows-then-Refresh ordering, and both go/clear label lookups, and that the hardcoded Search dialog label is gone.
* Filter bar polish: toggle-style filter checkboxes and flicker-free layout buttons
Render the shared filter_checkbox field as a Cacti toggle switch (.checkboxSwitch/.checkboxSlider) so every page's filter checkboxes match the rest of the UI, and start the layout Rename/Delete/Save As buttons hidden so layoutUpdateButtons() reveals them only when applicable instead of flashing visible on load.
* Modern filter: move the timespan selector onto its own second filter line
Timespan controls were rendered inline on the single modern filter bar. Route method=timespan fields into a separate group and emit them as a second filterTable row so the bar isn't overcrowded, matching the legacy multi-row layout. Applies to every modern filter with a timespan (the graph view pages).
* Modern filter: keep toggle checkboxes on the bar with a visible label and tooltip
filter_checkbox fields now count as bar fields so the Thumbnails/Business Hours toggles sit on the single bar instead of the Edit dialog. Their label used .checkboxLabel (display:none by design for forms), which hid the text; switch to .checkboxLabelWanted and always set a title tooltip from the field's title/friendly_name so each toggle is self-describing.
* Modern filter: toggles back in the dialog, restrict auto-apply to bar fields, drop dialog Clear
- Move filter_checkbox toggles back into the Edit dialog (field_is_bar no longer claims them) and render them as a form row: friendly name in the label column, toggle in the value column.
- In modern mode only bar selectors (Rows, Refresh) and the Layout selector auto-trigger a filter change; dialog field changes/clicks no longer call applyFilter (gate changeChain/clickChain on !use_modern_filter() || field_is_bar). Legacy keeps auto-applying on change (text inputs still excluded).
- Remove the Clear button from the modern Edit dialog and the now-unused clearLabel; update the dialog-labels test accordingly.
* Fix filter toggle vertical alignment across themes
The generic .filterTable .filterColumn label { vertical-align: -10% } nudge (meant for text labels) out-specified .checkboxSwitch and dragged the toggle switch down, which also pulled the adjacent label baseline low in the Edit dialog and misaligned the toggle on the legacy filter bar. Add a higher-specificity label.checkboxSwitch { vertical-align: middle } in every theme carrying the rule (midwinter has no such rule).
* Hide the filter search glyph in the modern Edit dialog
Theme main.js appends a ti-search glyph after #rfilter, positioned for a table cell; in the modern Edit dialog #rfilter sits in a wide div (no td), so the glyph wraps below the field. Skip the injection when #rfilter is inside .cactiFilterEditTable (modern dialog); legacy, which has no such ancestor, keeps the glyph.
* jQuery 4: full removed-API sweep of bundled plugins
Replace every jQuery-4-removed helper across the vendored plugins: \$.trim -> String.prototype.trim, \$.isArray -> Array.isArray, \$.proxy -> Function.prototype.bind, \$.parseJSON -> JSON.parse, \$.type -> typeof/\$.isPlainObject, \$.isWindow -> native window check (plus the earlier \$.isFunction). Orphans (colorpicker, timepicker, multiselect, multiselect.filter, tableDnD) are fixed in place; the npm-managed tablesorter core+widgets are rewritten at sync time in build/sync-js.mjs so a rebuild reproduces the fix.
* Modern filter dialog: non-modal, Apply gated on save, Save keeps dialog open
- Rename the dialog apply action to Apply and disable it until the (new or changed) filter is saved (layoutDirty tracking); Close just closes without applying.
- Save no longer reloads the page: it reflects the saved layout in the selector and re-enables Apply, keeping the dialog open.
- Dialogs are now modal: false.
- Switch the layout selector change from a full document.location reload to an AJAX loadUrl().
- Vertically center the modern bar cells so the barSep separator lines up between the buttons.
* Modern filter: add layout to the filter's session variable structure
Register layout (FILTER_VALIDATE_INT, default 0) in sanitize_filter_variables() alongside page so the selected layout is validated and stored in the filter's session object and persists across page views.
* Modern filter: Graph Template amalgam on line 2, timespan on line 3
Tag the Graph Template + Source/Order/CF/Measure group ('bar' => true on graph_template_id and the html_graph_order_filter_array() metrics) so create_modern_filter renders it as its own second filter line on Graph View and Tree View, pushing the timespan to the third line. These bar fields also auto-trigger the filter so the Template->Source->Order callback chain works on the main bar.
* Fix graph_template_id multi-select: allow comma lists, type get_host_graph_list correctly
get_host_graph_list() immediately transforms graph_template_id via html_transform_graph_template_ids() (handles cg_/dq_ prefixes and comma lists), so its parameter is a string, not an int -- correct the type hint and docblock. Also widen the preview and listview graph_template_id validation regexp to accept a comma-separated list like 'cg_118,cg_106,cg_119', matching the tree filter.
* Modern filter: hide the whole cell for hidden layout buttons to even out bar separator spacing
The Rename/Delete/Save As buttons hid only the <button>, leaving their table-cell (with padding) in the bar, so the separator after them was pushed away from Edit. Put the display:none on the .filterColumnButton cell and toggle the cell in layoutUpdateButtons so hidden buttons take no space and the separators sit evenly between the visible buttons.
* Remove legacy .drop-callback/makeCallbacks() autocomplete widget
The Device dropdown and other form_callback() lookups now always use the
ajax-backed select2 selectmenu. Drop the old makeCallbacks() jQuery-UI
autocomplete entirely and have form_callback() render the select2-callback
<select> by default, keeping the plain full-list <select> only when the
'autocomplete' config option is enabled.
* Carry selected layout through the modern dialog Apply action
The layout_save callback already returns the new layout id (and url), and
layoutDialogSave() selects it in #filter_layout. The dialog Apply button,
however, ran the plain filter apply (applyFilter()) which rebuilds the URL
from the field values and omits filter_layout, so the page reloaded as
(New Filter). Apply now navigates to the selected layout's data-url (which
includes filter_layout=<id>) when a layout is selected, falling back to the
normal filter apply when none is.
* Fix Filter Layouts manage page table and use jQuery UI dialogs for delete/rename
The management table was opened with html_start_box(\ = true), emitting a
<div> instead of a <table>, so the header and rows rendered unstyled and
run-together. Switch it to table mode.
Replace the generic confirm()-based delete with a CDEF-style jQuery UI
confirmation dialog loaded over ajax, and add a Rename action that opens a
matching jQuery UI dialog with a name field. Both post to the existing
layout_delete/layout_rename handlers on confirm.
* Use jQuery UI dialogs for filter-bar layout rename/delete; drop rename from manage page
The filter bar (modern and legacy) was still using native prompt()/confirm()
for the layout Rename and Delete actions - convert both to jQuery UI dialogs
(a name-entry dialog for rename, a confirm dialog for delete).
On the Filter Layouts management page, remove the rename action entirely and
instead link the layout name to its page (with filter_layout set) as an edit
link; keep the Delete confirmation dialog and Publish action.
* Rework Layouts manage page: preset filter bar + actions dropdown; rename to Layouts
Model layouts.php on the preset pages (CDEFs, etc.): add the standard
CactiTableFilter search bar in the legacy look, a sortable list with a
checkbox column, a pager, and a draw_actions_dropdown with Delete, Make
Global (publish), and Make Local (reassign to the current user). The
unimpressive per-row action icons and ajax dialogs are replaced by the
checkbox/confirmation flow. Make Global/Make Local are admin-only.
Treat layouts.php as a filter_layouts preset page so its own filter bar
does not offer the layout dropdown. Rename the page title and Console
Presets menu entry from 'Filters'/'Filter Layouts' to 'Layouts'.
* Show friendly page name in the Layouts list Page column
Map the stored page basename to the Console navigation title (e.g. host.php
=> Devices) via a layouts_page_name() lookup against \, falling
back to the raw basename. The Page column is now nosort since the displayed
label no longer matches the sortable database value.
* Fix filter search TypeError: use filter_options key in default search field
sanitize_filter_variables() reads a field's callback options from the
'filter_options' key, but the default search field in create_default() stored
them under 'options', so the key never reached validate_store_request_vars().
That left FILTER_CALLBACK with no callback and raised 'filter_var(): Option
must be a valid callback' whenever a table filter was searched.
* Address PR scan findings: tablesorter useless conditional + layouts SQL
- jquery.tablesorter.js: drop the redundant 'str &&' guard inside the
already-truthy 'str ?' branch of the digit and currency parsers (CodeQL
useless-conditional). Add a matching sync-js transform rule so a rebuild
from upstream keeps the simplification.
- layouts.php: fully parameterize the management list queries with bound
'?' parameters for the search term and user id, and build the LIMIT from
explicit (int) page/rows, so no request variable reaches the SQL string
(Semgrep cacti-request-var-in-sql).
* Address PR review: colorpicker trim, tablesorter JSON guard, bar separator, i18n
- jquery.colorpicker.js: _setAltField() iterated index <= properties.length, so
the last pass read properties[undefined]; \$.trim(undefined) was '' but native
.trim() throws. Iterate with < so no TypeError.
- jquery.tablesorter.widgets.js: the retrieveValue feature-check still tested the
removed \$.parseJSON; under jQuery 4 it was always falsy so saved widget state
never loaded. Test native window.JSON.parse instead, and add a matching
build/sync-js.mjs transform rule so a rebuild keeps the guard.
- html_filter.php: the Layouts selector is always rendered, so emit the
selector-to-button separator unconditionally (graph preview routes fields to
the amalgam/timespan lines, leaving the bar line without it before).
- changelog/i18n: reword 8191.feature to describe the Apply (save-gated) dialog
action, and add the new layouts.php/html_filter.php msgids to cacti.pot.
* Add tablesorter transform coverage to the sync-js test
Feed a fixture containing every removed jQuery 4 utility (\$.isFunction,
\$.trim, \$.type ===string/object, \$.isWindow, \$.isArray, \$.parseJSON calls
and the bare if (\$.parseJSON) guard) plus the CodeQL str && simplification
through syncAssets, and assert the synced tablesorter output contains the
native equivalents and none of the removed APIs. Previously the transform ran
against a generic stub, so an incomplete rewrite could pass unnoticed.
* Apply php-cs-fixer: comment style, alignment, and single-quote strings
Run through the project php-cs-fixer config (the mandatory pre-PR check):
line comments for the input-validation banners, aligned assignment, and
single-quoted strings where no interpolation is used. No behaviour change.
* Render the filter Go action as a refresh glyph button (modern + legacy)
Replace the 'Go' text submit with a compact 'ti ti-refresh' glyph button
titled 'Refresh page' for every page filter:
- emit_field() forces the glyph/title on any 'go' submit, so both the shared
default and pages that define their own 'go' get it on the legacy filter.
- The modern bar (which has no form) gets a JS-wired #layout_refresh glyph
button right of Edit that loadUrl()s the selected layout url (carrying
filter_layout) or the page change callback.
Add the 'Refresh page' msgid to cacti.pot and note it in 8191.feature.
* Add a Tabler .icon-rotate spin class and use it for refreshing icons
Tabler ships only the icon webfont, with no fa-spin equivalent, so spinning
reload icons stopped animating (e.g. the Troubleshooting > Data Sources
auto-refresh indicator). Define .icon-rotate in every theme (reusing the
globally loaded fa-spin keyframes) and apply it:
- the modern filter refresh button spins while it loads,
- the realtime graph drill-down loader switches from fa-spin to icon-rotate,
- the data_debug auto-refresh indicators spin again.
* tests: sync FilterLayouts assertions with the reworded separator comment and dw.addClass
The source scan expected the old 'Separate the selectors' comment and a chained
.dialog('widget').addClass() form; update to the current reworded comment and
the 'var dw' + dw.addClass('cactiFilterDialog') the dialog now uses.
* Glyph-ify the timespan Refresh/Clear and the generic Clear action
Replace the timespan 'Refresh' text button with a spinning ti ti-refresh glyph
and 'Clear' with a ti ti-eraser glyph (also fixing a stray double </span>), and
make the generic filter Clear a ti ti-eraser glyph button across legacy and
modern via emit_field (button case now honours a 'glyph' key). The timespan
refresh icon spins (icon-rotate) while it reloads.
* Glyph-ify filter Import/Export, layout, and modern-bar action buttons
Force ti-table-import / ti-table-export glyphs for any filter button named import/export (centralized in emit_field like go/clear), so page-defined Import/Export buttons and the modern bar's always-visible action strip render consistent Tabler glyphs. Add a glyph parameter to layout_button() and glyph the Edit/Rename/Delete/Save As/Save/New/Publish buttons across the modern bar and legacy layouts row.
* Use table-import/table-export glyphs for cactiTableButton Import/Export icons
The filter header Export/Import icons injected into cactiTableButton used generic chevron-down/chevron-up glyphs; switch them to ti ti-table-export / ti ti-table-import to match the rest of the glyph theme.
* Glyph-ify the Save Filter Defaults button on the filter bar
The has_save 'Save' action rendered as a text button on the modern bar (and legacy filter); force a ti ti-device-floppy glyph via emit_field like go/clear/import/export so it matches the rest of the glyph theme.
* Regenerate tree-view graphs when applying a saved filter layout
The modern layout selector loaded a layout's saved data-url (action=tree) directly, so on the Graph Tree view it pulled the tree shell instead of regenerating graphs. Route the layout-url loads (selector change, refresh button, and dialog Apply) through correctUrlParameters() so action=tree becomes action=tree_content and graphs reload into #main, matching applyGraphFilter(). No-op on non-tree pages.
* Keep timespan controls working after ajax reloads and tip custom date fields
On the Graph Preview page the predefined_timespan change and tsrefresh/tsclear/shift click handlers were bound directly inside the filter's inline ready script, so an ajax content reload that replaced the timespan controls dropped the bindings (a full page refresh restored them). Bind them with namespaced event delegation on document so they survive content replacement and never double-bind. Add tooltips to the custom start/end date inputs telling the user to click Refresh to apply the range, plus POT entries and a changelog note.
* Record layouts.php static redirect in the sink inventory baseline
The sink and architectural hotspot guard flagged inventory drift: layouts.php's static header('Location: layouts.php') redirect (no request input) was never added to the tracked baseline. Refresh the baseline via tests/security/build_sink_inventory.sh to record it.
* Fix layout Save-As dialog state and use cacti_redirect in layouts.php
Address review findings: (1) use cacti_redirect('layouts.php') instead of a raw header()+exit so the standard redirect checks run (and drop the now-unneeded sink-inventory entry); (2) reset the dialog's force-new flag after the first successful save so later saves update the created layout instead of creating duplicates; (3) preserve an existing dirty state when reopening the Edit dialog so pending edits are not silently discarded by Apply.
* Drop stale layout msgids from the translation template
Remove the Filter Layouts, Published to all users, Publish to all users, and No Filter Layouts Found msgids that this PR replaced (now Layouts, Make Global, Make Local, No Layouts Found); all four are absent from PHP. Keeps the surgically-maintained POT in sync with the shipped strings.
---------
Co-authored-by: TheWitness <TheWitness@users.noreply.github.com>
2135 lines
89 KiB
JavaScript
Executable File
2135 lines
89 KiB
JavaScript
Executable File
/**
|
|
* jQuery contextMenu v2.9.2 - Plugin for simple contextMenu handling
|
|
*
|
|
* Version: v2.9.2
|
|
*
|
|
* Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
|
|
* Web: http://swisnl.github.io/jQuery-contextMenu/
|
|
*
|
|
* Copyright (c) 2011-2020 SWIS BV and contributors
|
|
*
|
|
* Licensed under
|
|
* MIT License http://www.opensource.org/licenses/mit-license
|
|
*
|
|
* Date: 2020-05-13T13:55:36.983Z
|
|
*/
|
|
|
|
// jscs:disable
|
|
/* jshint ignore:start */
|
|
(function (factory) {
|
|
if (typeof define === 'function' && define.amd) {
|
|
// AMD. Register as anonymous module.
|
|
define(['jquery'], factory);
|
|
} else if (typeof exports === 'object') {
|
|
// Node / CommonJS
|
|
factory(require('jquery'));
|
|
} else {
|
|
// Browser globals.
|
|
factory(jQuery);
|
|
}
|
|
})(function ($) {
|
|
|
|
'use strict';
|
|
|
|
// TODO: -
|
|
// ARIA stuff: menuitem, menuitemcheckbox und menuitemradio
|
|
// create <menu> structure if $.support[htmlCommand || htmlMenuitem] and !opt.disableNative
|
|
|
|
// determine html5 compatibility
|
|
$.support.htmlMenuitem = ('HTMLMenuItemElement' in window);
|
|
$.support.htmlCommand = ('HTMLCommandElement' in window);
|
|
$.support.eventSelectstart = ('onselectstart' in document.documentElement);
|
|
/* // should the need arise, test for css user-select
|
|
$.support.cssUserSelect = (function(){
|
|
var t = false,
|
|
e = document.createElement('div');
|
|
|
|
$.each('Moz|Webkit|Khtml|O|ms|Icab|'.split('|'), function(i, prefix) {
|
|
var propCC = prefix + (prefix ? 'U' : 'u') + 'serSelect',
|
|
prop = (prefix ? ('-' + prefix.toLowerCase() + '-') : '') + 'user-select';
|
|
|
|
e.style.cssText = prop + ': text;';
|
|
if (e.style[propCC] == 'text') {
|
|
t = true;
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
return t;
|
|
})();
|
|
*/
|
|
|
|
|
|
if (!$.ui || !$.widget) {
|
|
// duck punch $.cleanData like jQueryUI does to get that remove event
|
|
$.cleanData = (function (orig) {
|
|
return function (elems) {
|
|
var events, elem, i;
|
|
for (i = 0; elems[i] != null; i++) {
|
|
elem = elems[i];
|
|
try {
|
|
// Only trigger remove when necessary to save time
|
|
events = $._data(elem, 'events');
|
|
if (events && events.remove) {
|
|
$(elem).triggerHandler('remove');
|
|
}
|
|
|
|
// Http://bugs.jquery.com/ticket/8235
|
|
} catch (e) {
|
|
}
|
|
}
|
|
orig(elems);
|
|
};
|
|
})($.cleanData);
|
|
}
|
|
/* jshint ignore:end */
|
|
// jscs:enable
|
|
|
|
var // currently active contextMenu trigger
|
|
$currentTrigger = null,
|
|
// is contextMenu initialized with at least one menu?
|
|
initialized = false,
|
|
// window handle
|
|
$win = $(window),
|
|
// number of registered menus
|
|
counter = 0,
|
|
// mapping selector to namespace
|
|
namespaces = {},
|
|
// mapping namespace to options
|
|
menus = {},
|
|
// custom command type handlers
|
|
types = {},
|
|
// default values
|
|
defaults = {
|
|
// selector of contextMenu trigger
|
|
selector: null,
|
|
// where to append the menu to
|
|
appendTo: null,
|
|
// method to trigger context menu ["right", "left", "hover"]
|
|
trigger: 'right',
|
|
// hide menu when mouse leaves trigger / menu elements
|
|
autoHide: false,
|
|
// ms to wait before showing a hover-triggered context menu
|
|
delay: 200,
|
|
// flag denoting if a second trigger should simply move (true) or rebuild (false) an open menu
|
|
// as long as the trigger happened on one of the trigger-element's child nodes
|
|
reposition: true,
|
|
// Flag denoting if a second trigger should close the menu, as long as
|
|
// the trigger happened on one of the trigger-element's child nodes.
|
|
// This overrides the reposition option.
|
|
hideOnSecondTrigger: false,
|
|
|
|
//ability to select submenu
|
|
selectableSubMenu: false,
|
|
|
|
// Default classname configuration to be able avoid conflicts in frameworks
|
|
classNames: {
|
|
hover: 'context-menu-hover', // Item hover
|
|
disabled: 'context-menu-disabled', // Item disabled
|
|
visible: 'context-menu-visible', // Item visible
|
|
notSelectable: 'context-menu-not-selectable', // Item not selectable
|
|
|
|
icon: 'context-menu-icon',
|
|
iconEdit: 'context-menu-icon-edit',
|
|
iconCut: 'context-menu-icon-cut',
|
|
iconCopy: 'context-menu-icon-copy',
|
|
iconPaste: 'context-menu-icon-paste',
|
|
iconDelete: 'context-menu-icon-delete',
|
|
iconAdd: 'context-menu-icon-add',
|
|
iconQuit: 'context-menu-icon-quit',
|
|
iconLoadingClass: 'context-menu-icon-loading'
|
|
},
|
|
|
|
// determine position to show menu at
|
|
determinePosition: function ($menu) {
|
|
// position to the lower middle of the trigger element
|
|
if ($.ui && $.ui.position) {
|
|
// .position() is provided as a jQuery UI utility
|
|
// (...and it won't work on hidden elements)
|
|
$menu.css('display', 'block').position({
|
|
my: 'center top',
|
|
at: 'center bottom',
|
|
of: this,
|
|
offset: '0 5',
|
|
collision: 'fit'
|
|
}).css('display', 'none');
|
|
} else {
|
|
// determine contextMenu position
|
|
var offset = this.offset();
|
|
offset.top += this.outerHeight();
|
|
offset.left += this.outerWidth() / 2 - $menu.outerWidth() / 2;
|
|
$menu.css(offset);
|
|
}
|
|
},
|
|
// position menu
|
|
position: function (opt, x, y) {
|
|
var offset;
|
|
// determine contextMenu position
|
|
if (!x && !y) {
|
|
opt.determinePosition.call(this, opt.$menu);
|
|
return;
|
|
} else if (x === 'maintain' && y === 'maintain') {
|
|
// x and y must not be changed (after re-show on command click)
|
|
offset = opt.$menu.position();
|
|
} else {
|
|
// x and y are given (by mouse event)
|
|
var offsetParentOffset = opt.$menu.offsetParent().offset();
|
|
offset = {top: y - offsetParentOffset.top, left: x -offsetParentOffset.left};
|
|
}
|
|
|
|
// correct offset if viewport demands it
|
|
var bottom = $win.scrollTop() + $win.height(),
|
|
right = $win.scrollLeft() + $win.width(),
|
|
height = opt.$menu.outerHeight(),
|
|
width = opt.$menu.outerWidth();
|
|
|
|
if (offset.top + height > bottom) {
|
|
offset.top -= height;
|
|
}
|
|
|
|
if (offset.top < 0) {
|
|
offset.top = 0;
|
|
}
|
|
|
|
if (offset.left + width > right) {
|
|
offset.left -= width;
|
|
}
|
|
|
|
if (offset.left < 0) {
|
|
offset.left = 0;
|
|
}
|
|
|
|
opt.$menu.css(offset);
|
|
},
|
|
// position the sub-menu
|
|
positionSubmenu: function ($menu) {
|
|
if (typeof $menu === 'undefined') {
|
|
// When user hovers over item (which has sub items) handle.focusItem will call this.
|
|
// but the submenu does not exist yet if opt.items is a promise. just return, will
|
|
// call positionSubmenu after promise is completed.
|
|
return;
|
|
}
|
|
if ($.ui && $.ui.position) {
|
|
// .position() is provided as a jQuery UI utility
|
|
// (...and it won't work on hidden elements)
|
|
$menu.css('display', 'block').position({
|
|
my: 'left top-5',
|
|
at: 'right top',
|
|
of: this,
|
|
collision: 'flipfit fit'
|
|
}).css('display', '');
|
|
} else {
|
|
// determine contextMenu position
|
|
var offset = {
|
|
top: -9,
|
|
left: this.outerWidth() - 5
|
|
};
|
|
$menu.css(offset);
|
|
}
|
|
},
|
|
// offset to add to zIndex
|
|
zIndex: 1,
|
|
// show hide animation settings
|
|
animation: {
|
|
duration: 50,
|
|
show: 'slideDown',
|
|
hide: 'slideUp'
|
|
},
|
|
// events
|
|
events: {
|
|
preShow: $.noop,
|
|
show: $.noop,
|
|
hide: $.noop,
|
|
activated: $.noop
|
|
},
|
|
// default callback
|
|
callback: null,
|
|
// list of contextMenu items
|
|
items: {}
|
|
},
|
|
// mouse position for hover activation
|
|
hoveract = {
|
|
timer: null,
|
|
pageX: null,
|
|
pageY: null
|
|
},
|
|
// determine zIndex
|
|
zindex = function ($t) {
|
|
var zin = 0,
|
|
$tt = $t;
|
|
|
|
while (true) {
|
|
zin = Math.max(zin, parseInt($tt.css('z-index'), 10) || 0);
|
|
$tt = $tt.parent();
|
|
if (!$tt || !$tt.length || 'html body'.indexOf($tt.prop('nodeName').toLowerCase()) > -1) {
|
|
break;
|
|
}
|
|
}
|
|
return zin;
|
|
},
|
|
// event handlers
|
|
handle = {
|
|
// abort anything
|
|
abortevent: function (e) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
},
|
|
// contextmenu show dispatcher
|
|
contextmenu: function (e) {
|
|
var $this = $(this);
|
|
|
|
//Show browser context-menu when preShow returns false
|
|
if (e.data.events.preShow($this,e) === false) {
|
|
return;
|
|
}
|
|
|
|
// disable actual context-menu if we are using the right mouse button as the trigger
|
|
if (e.data.trigger === 'right') {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
}
|
|
|
|
// abort native-triggered events unless we're triggering on right click
|
|
if ((e.data.trigger !== 'right' && e.data.trigger !== 'demand') && e.originalEvent) {
|
|
return;
|
|
}
|
|
|
|
// Let the current contextmenu decide if it should show or not based on its own trigger settings
|
|
if (typeof e.mouseButton !== 'undefined' && e.data) {
|
|
if (!(e.data.trigger === 'left' && e.mouseButton === 0) && !(e.data.trigger === 'right' && e.mouseButton === 2)) {
|
|
// Mouse click is not valid.
|
|
return;
|
|
}
|
|
}
|
|
|
|
// abort event if menu is visible for this trigger
|
|
if ($this.hasClass('context-menu-active')) {
|
|
return;
|
|
}
|
|
|
|
if (!$this.hasClass('context-menu-disabled')) {
|
|
// theoretically need to fire a show event at <menu>
|
|
// http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#context-menus
|
|
// var evt = jQuery.Event("show", { data: data, pageX: e.pageX, pageY: e.pageY, relatedTarget: this });
|
|
// e.data.$menu.trigger(evt);
|
|
|
|
$currentTrigger = $this;
|
|
if (e.data.build) {
|
|
var built = e.data.build($currentTrigger, e);
|
|
// abort if build() returned false
|
|
if (built === false) {
|
|
return;
|
|
}
|
|
|
|
// dynamically build menu on invocation
|
|
e.data = $.extend(true, {}, defaults, e.data, built || {});
|
|
|
|
// abort if there are no items to display
|
|
if (!e.data.items || $.isEmptyObject(e.data.items)) {
|
|
// Note: jQuery captures and ignores errors from event handlers
|
|
if (window.console) {
|
|
(console.error || console.log).call(console, 'No items specified to show in contextMenu');
|
|
}
|
|
|
|
throw new Error('No Items specified');
|
|
}
|
|
|
|
// backreference for custom command type creation
|
|
e.data.$trigger = $currentTrigger;
|
|
|
|
op.create(e.data);
|
|
}
|
|
op.show.call($this, e.data, e.pageX, e.pageY);
|
|
}
|
|
},
|
|
// contextMenu left-click trigger
|
|
click: function (e) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
$(this).trigger($.Event('contextmenu', {data: e.data, pageX: e.pageX, pageY: e.pageY}));
|
|
},
|
|
// contextMenu right-click trigger
|
|
mousedown: function (e) {
|
|
// register mouse down
|
|
var $this = $(this);
|
|
|
|
// hide any previous menus
|
|
if ($currentTrigger && $currentTrigger.length && !$currentTrigger.is($this)) {
|
|
$currentTrigger.data('contextMenu').$menu.trigger('contextmenu:hide');
|
|
}
|
|
|
|
// activate on right click
|
|
if (e.button === 2) {
|
|
$currentTrigger = $this.data('contextMenuActive', true);
|
|
}
|
|
},
|
|
// contextMenu right-click trigger
|
|
mouseup: function (e) {
|
|
// show menu
|
|
var $this = $(this);
|
|
if ($this.data('contextMenuActive') && $currentTrigger && $currentTrigger.length && $currentTrigger.is($this) && !$this.hasClass('context-menu-disabled')) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
$currentTrigger = $this;
|
|
$this.trigger($.Event('contextmenu', {data: e.data, pageX: e.pageX, pageY: e.pageY}));
|
|
}
|
|
|
|
$this.removeData('contextMenuActive');
|
|
},
|
|
// contextMenu hover trigger
|
|
mouseenter: function (e) {
|
|
var $this = $(this),
|
|
$related = $(e.relatedTarget),
|
|
$document = $(document);
|
|
|
|
// abort if we're coming from a menu
|
|
if ($related.is('.context-menu-list') || $related.closest('.context-menu-list').length) {
|
|
return;
|
|
}
|
|
|
|
// abort if a menu is shown
|
|
if ($currentTrigger && $currentTrigger.length) {
|
|
return;
|
|
}
|
|
|
|
hoveract.pageX = e.pageX;
|
|
hoveract.pageY = e.pageY;
|
|
hoveract.data = e.data;
|
|
$document.on('mousemove.contextMenuShow', handle.mousemove);
|
|
hoveract.timer = setTimeout(function () {
|
|
hoveract.timer = null;
|
|
$document.off('mousemove.contextMenuShow');
|
|
$currentTrigger = $this;
|
|
$this.trigger($.Event('contextmenu', {
|
|
data: hoveract.data,
|
|
pageX: hoveract.pageX,
|
|
pageY: hoveract.pageY
|
|
}));
|
|
}, e.data.delay);
|
|
},
|
|
// contextMenu hover trigger
|
|
mousemove: function (e) {
|
|
hoveract.pageX = e.pageX;
|
|
hoveract.pageY = e.pageY;
|
|
},
|
|
// contextMenu hover trigger
|
|
mouseleave: function (e) {
|
|
// abort if we're leaving for a menu
|
|
var $related = $(e.relatedTarget);
|
|
if ($related.is('.context-menu-list') || $related.closest('.context-menu-list').length) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
clearTimeout(hoveract.timer);
|
|
} catch (e) {
|
|
}
|
|
|
|
hoveract.timer = null;
|
|
},
|
|
// click on layer to hide contextMenu
|
|
layerClick: function (e) {
|
|
var $this = $(this),
|
|
root = $this.data('contextMenuRoot'),
|
|
button = e.button,
|
|
x = e.pageX,
|
|
y = e.pageY,
|
|
fakeClick = x === undefined,
|
|
target,
|
|
offset;
|
|
|
|
e.preventDefault();
|
|
|
|
setTimeout(function () {
|
|
// If the click is not real, things break: https://github.com/swisnl/jQuery-contextMenu/issues/132
|
|
if(fakeClick){
|
|
if (root !== null && typeof root !== 'undefined' && root.$menu !== null && typeof root.$menu !== 'undefined') {
|
|
root.$menu.trigger('contextmenu:hide');
|
|
}
|
|
return;
|
|
}
|
|
|
|
var $window;
|
|
var triggerAction = ((root.trigger === 'left' && button === 0) || (root.trigger === 'right' && button === 2));
|
|
|
|
// find the element that would've been clicked, wasn't the layer in the way
|
|
if (document.elementFromPoint && root.$layer) {
|
|
root.$layer.hide();
|
|
target = document.elementFromPoint(x - $win.scrollLeft(), y - $win.scrollTop());
|
|
|
|
// also need to try and focus this element if we're in a contenteditable area,
|
|
// as the layer will prevent the browser mouse action we want
|
|
if (target !== null && target.isContentEditable) {
|
|
var range = document.createRange(),
|
|
sel = window.getSelection();
|
|
range.selectNode(target);
|
|
range.collapse(true);
|
|
sel.removeAllRanges();
|
|
sel.addRange(range);
|
|
}
|
|
$(target).trigger(e);
|
|
root.$layer.show();
|
|
}
|
|
|
|
if (root.hideOnSecondTrigger && triggerAction && root.$menu !== null && typeof root.$menu !== 'undefined') {
|
|
root.$menu.trigger('contextmenu:hide');
|
|
return;
|
|
}
|
|
|
|
if (root.reposition && triggerAction) {
|
|
if (document.elementFromPoint) {
|
|
if (root.$trigger.is(target)) {
|
|
root.position.call(root.$trigger, root, x, y);
|
|
return;
|
|
}
|
|
} else {
|
|
offset = root.$trigger.offset();
|
|
$window = $(window);
|
|
// while this looks kinda awful, it's the best way to avoid
|
|
// unnecessarily calculating any positions
|
|
offset.top += $window.scrollTop();
|
|
if (offset.top <= e.pageY) {
|
|
offset.left += $window.scrollLeft();
|
|
if (offset.left <= e.pageX) {
|
|
offset.bottom = offset.top + root.$trigger.outerHeight();
|
|
if (offset.bottom >= e.pageY) {
|
|
offset.right = offset.left + root.$trigger.outerWidth();
|
|
if (offset.right >= e.pageX) {
|
|
// reposition
|
|
root.position.call(root.$trigger, root, x, y);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (target && triggerAction) {
|
|
root.$trigger.one('contextmenu:hidden', function () {
|
|
$(target).contextMenu({x: x, y: y, button: button});
|
|
});
|
|
}
|
|
|
|
if (root !== null && typeof root !== 'undefined' && root.$menu !== null && typeof root.$menu !== 'undefined') {
|
|
root.$menu.trigger('contextmenu:hide');
|
|
}
|
|
}, 50);
|
|
},
|
|
// key handled :hover
|
|
keyStop: function (e, opt) {
|
|
if (!opt.isInput) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
e.stopPropagation();
|
|
},
|
|
key: function (e) {
|
|
|
|
var opt = {};
|
|
|
|
// Only get the data from $currentTrigger if it exists
|
|
if ($currentTrigger) {
|
|
opt = $currentTrigger.data('contextMenu') || {};
|
|
}
|
|
// If the trigger happen on a element that are above the contextmenu do this
|
|
if (typeof opt.zIndex === 'undefined') {
|
|
opt.zIndex = 0;
|
|
}
|
|
var targetZIndex = 0;
|
|
var getZIndexOfTriggerTarget = function (target) {
|
|
if (target.style.zIndex !== '') {
|
|
targetZIndex = target.style.zIndex;
|
|
} else {
|
|
if (target.offsetParent !== null && typeof target.offsetParent !== 'undefined') {
|
|
getZIndexOfTriggerTarget(target.offsetParent);
|
|
}
|
|
else if (target.parentElement !== null && typeof target.parentElement !== 'undefined') {
|
|
getZIndexOfTriggerTarget(target.parentElement);
|
|
}
|
|
}
|
|
};
|
|
getZIndexOfTriggerTarget(e.target);
|
|
// If targetZIndex is heigher then opt.zIndex dont progress any futher.
|
|
// This is used to make sure that if you are using a dialog with a input / textarea / contenteditable div
|
|
// and its above the contextmenu it wont steal keys events
|
|
if (opt.$menu && parseInt(targetZIndex,10) > parseInt(opt.$menu.css("zIndex"),10)) {
|
|
return;
|
|
}
|
|
switch (e.keyCode) {
|
|
case 9:
|
|
case 38: // up
|
|
handle.keyStop(e, opt);
|
|
// if keyCode is [38 (up)] or [9 (tab) with shift]
|
|
if (opt.isInput) {
|
|
if (e.keyCode === 9 && e.shiftKey) {
|
|
e.preventDefault();
|
|
if (opt.$selected) {
|
|
opt.$selected.find('input, textarea, select').blur();
|
|
}
|
|
if (opt.$menu !== null && typeof opt.$menu !== 'undefined') {
|
|
opt.$menu.trigger('prevcommand');
|
|
}
|
|
return;
|
|
} else if (e.keyCode === 38 && opt.$selected.find('input, textarea, select').prop('type') === 'checkbox') {
|
|
// checkboxes don't capture this key
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
} else if (e.keyCode !== 9 || e.shiftKey) {
|
|
if (opt.$menu !== null && typeof opt.$menu !== 'undefined') {
|
|
opt.$menu.trigger('prevcommand');
|
|
}
|
|
return;
|
|
}
|
|
break;
|
|
// omitting break;
|
|
// case 9: // tab - reached through omitted break;
|
|
case 40: // down
|
|
handle.keyStop(e, opt);
|
|
if (opt.isInput) {
|
|
if (e.keyCode === 9) {
|
|
e.preventDefault();
|
|
if (opt.$selected) {
|
|
opt.$selected.find('input, textarea, select').blur();
|
|
}
|
|
if (opt.$menu !== null && typeof opt.$menu !== 'undefined') {
|
|
opt.$menu.trigger('nextcommand');
|
|
}
|
|
return;
|
|
} else if (e.keyCode === 40 && opt.$selected.find('input, textarea, select').prop('type') === 'checkbox') {
|
|
// checkboxes don't capture this key
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
} else {
|
|
if (opt.$menu !== null && typeof opt.$menu !== 'undefined') {
|
|
opt.$menu.trigger('nextcommand');
|
|
}
|
|
return;
|
|
}
|
|
break;
|
|
|
|
case 37: // left
|
|
handle.keyStop(e, opt);
|
|
if (opt.isInput || !opt.$selected || !opt.$selected.length) {
|
|
break;
|
|
}
|
|
|
|
if (!opt.$selected.parent().hasClass('context-menu-root')) {
|
|
var $parent = opt.$selected.parent().parent();
|
|
opt.$selected.trigger('contextmenu:blur');
|
|
opt.$selected = $parent;
|
|
return;
|
|
}
|
|
break;
|
|
|
|
case 39: // right
|
|
handle.keyStop(e, opt);
|
|
if (opt.isInput || !opt.$selected || !opt.$selected.length) {
|
|
break;
|
|
}
|
|
|
|
var itemdata = opt.$selected.data('contextMenu') || {};
|
|
if (itemdata.$menu && opt.$selected.hasClass('context-menu-submenu')) {
|
|
opt.$selected = null;
|
|
itemdata.$selected = null;
|
|
itemdata.$menu.trigger('nextcommand');
|
|
return;
|
|
}
|
|
break;
|
|
|
|
case 35: // end
|
|
case 36: // home
|
|
if (opt.$selected && opt.$selected.find('input, textarea, select').length) {
|
|
return;
|
|
} else {
|
|
(opt.$selected && opt.$selected.parent() || opt.$menu)
|
|
.children(':not(.' + opt.classNames.disabled + ', .' + opt.classNames.notSelectable + ')')[e.keyCode === 36 ? 'first' : 'last']()
|
|
.trigger('contextmenu:focus');
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
break;
|
|
|
|
case 13: // enter
|
|
handle.keyStop(e, opt);
|
|
if (opt.isInput) {
|
|
if (opt.$selected && !opt.$selected.is('textarea, select')) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
break;
|
|
}
|
|
if (typeof opt.$selected !== 'undefined' && opt.$selected !== null) {
|
|
opt.$selected.trigger('mouseup');
|
|
}
|
|
return;
|
|
|
|
case 32: // space
|
|
case 33: // page up
|
|
case 34: // page down
|
|
// prevent browser from scrolling down while menu is visible
|
|
handle.keyStop(e, opt);
|
|
return;
|
|
|
|
case 27: // esc
|
|
handle.keyStop(e, opt);
|
|
if (opt.$menu !== null && typeof opt.$menu !== 'undefined') {
|
|
opt.$menu.trigger('contextmenu:hide');
|
|
}
|
|
return;
|
|
|
|
default: // 0-9, a-z
|
|
var k = (String.fromCharCode(e.keyCode)).toUpperCase();
|
|
if (opt.accesskeys && opt.accesskeys[k]) {
|
|
// according to the specs accesskeys must be invoked immediately
|
|
opt.accesskeys[k].$node.trigger(opt.accesskeys[k].$menu ? 'contextmenu:focus' : 'mouseup');
|
|
return;
|
|
}
|
|
break;
|
|
}
|
|
// pass event to selected item,
|
|
// stop propagation to avoid endless recursion
|
|
e.stopPropagation();
|
|
if (typeof opt.$selected !== 'undefined' && opt.$selected !== null) {
|
|
opt.$selected.trigger(e);
|
|
}
|
|
},
|
|
// select previous possible command in menu
|
|
prevItem: function (e) {
|
|
e.stopPropagation();
|
|
var opt = $(this).data('contextMenu') || {};
|
|
var root = $(this).data('contextMenuRoot') || {};
|
|
|
|
// obtain currently selected menu
|
|
if (opt.$selected) {
|
|
var $s = opt.$selected;
|
|
opt = opt.$selected.parent().data('contextMenu') || {};
|
|
opt.$selected = $s;
|
|
}
|
|
|
|
var $children = opt.$menu.children(),
|
|
$prev = !opt.$selected || !opt.$selected.prev().length ? $children.last() : opt.$selected.prev(),
|
|
$round = $prev;
|
|
|
|
// skip disabled or hidden elements
|
|
while ($prev.hasClass(root.classNames.disabled) || $prev.hasClass(root.classNames.notSelectable) || $prev.is(':hidden')) {
|
|
if ($prev.prev().length) {
|
|
$prev = $prev.prev();
|
|
} else {
|
|
$prev = $children.last();
|
|
}
|
|
if ($prev.is($round)) {
|
|
// break endless loop
|
|
return;
|
|
}
|
|
}
|
|
|
|
// leave current
|
|
if (opt.$selected) {
|
|
handle.itemMouseleave.call(opt.$selected.get(0), e);
|
|
}
|
|
|
|
// activate next
|
|
handle.itemMouseenter.call($prev.get(0), e);
|
|
|
|
// focus input
|
|
var $input = $prev.find('input, textarea, select');
|
|
if ($input.length) {
|
|
$input.focus();
|
|
}
|
|
},
|
|
// select next possible command in menu
|
|
nextItem: function (e) {
|
|
e.stopPropagation();
|
|
var opt = $(this).data('contextMenu') || {};
|
|
var root = $(this).data('contextMenuRoot') || {};
|
|
|
|
// obtain currently selected menu
|
|
if (opt.$selected) {
|
|
var $s = opt.$selected;
|
|
opt = opt.$selected.parent().data('contextMenu') || {};
|
|
opt.$selected = $s;
|
|
}
|
|
|
|
var $children = opt.$menu.children(),
|
|
$next = !opt.$selected || !opt.$selected.next().length ? $children.first() : opt.$selected.next(),
|
|
$round = $next;
|
|
|
|
// skip disabled
|
|
while ($next.hasClass(root.classNames.disabled) || $next.hasClass(root.classNames.notSelectable) || $next.is(':hidden')) {
|
|
if ($next.next().length) {
|
|
$next = $next.next();
|
|
} else {
|
|
$next = $children.first();
|
|
}
|
|
if ($next.is($round)) {
|
|
// break endless loop
|
|
return;
|
|
}
|
|
}
|
|
|
|
// leave current
|
|
if (opt.$selected) {
|
|
handle.itemMouseleave.call(opt.$selected.get(0), e);
|
|
}
|
|
|
|
// activate next
|
|
handle.itemMouseenter.call($next.get(0), e);
|
|
|
|
// focus input
|
|
var $input = $next.find('input, textarea, select');
|
|
if ($input.length) {
|
|
$input.focus();
|
|
}
|
|
},
|
|
// flag that we're inside an input so the key handler can act accordingly
|
|
focusInput: function () {
|
|
var $this = $(this).closest('.context-menu-item'),
|
|
data = $this.data(),
|
|
opt = data.contextMenu,
|
|
root = data.contextMenuRoot;
|
|
|
|
root.$selected = opt.$selected = $this;
|
|
root.isInput = opt.isInput = true;
|
|
},
|
|
// flag that we're inside an input so the key handler can act accordingly
|
|
blurInput: function () {
|
|
var $this = $(this).closest('.context-menu-item'),
|
|
data = $this.data(),
|
|
opt = data.contextMenu,
|
|
root = data.contextMenuRoot;
|
|
|
|
root.isInput = opt.isInput = false;
|
|
},
|
|
// :hover on menu
|
|
menuMouseenter: function () {
|
|
var root = $(this).data().contextMenuRoot;
|
|
root.hovering = true;
|
|
},
|
|
// :hover on menu
|
|
menuMouseleave: function (e) {
|
|
var root = $(this).data().contextMenuRoot;
|
|
if (root.$layer && root.$layer.is(e.relatedTarget)) {
|
|
root.hovering = false;
|
|
}
|
|
},
|
|
// :hover done manually so key handling is possible
|
|
itemMouseenter: function (e) {
|
|
var $this = $(this),
|
|
data = $this.data(),
|
|
opt = data.contextMenu,
|
|
root = data.contextMenuRoot;
|
|
|
|
root.hovering = true;
|
|
|
|
// abort if we're re-entering
|
|
if (e && root.$layer && root.$layer.is(e.relatedTarget)) {
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
}
|
|
|
|
// make sure only one item is selected
|
|
(opt.$menu ? opt : root).$menu
|
|
.children('.' + root.classNames.hover).trigger('contextmenu:blur')
|
|
.children('.hover').trigger('contextmenu:blur');
|
|
|
|
if ($this.hasClass(root.classNames.disabled) || $this.hasClass(root.classNames.notSelectable)) {
|
|
opt.$selected = null;
|
|
return;
|
|
}
|
|
|
|
|
|
$this.trigger('contextmenu:focus');
|
|
},
|
|
// :hover done manually so key handling is possible
|
|
itemMouseleave: function (e) {
|
|
var $this = $(this),
|
|
data = $this.data(),
|
|
opt = data.contextMenu,
|
|
root = data.contextMenuRoot;
|
|
|
|
if (root !== opt && root.$layer && root.$layer.is(e.relatedTarget)) {
|
|
if (typeof root.$selected !== 'undefined' && root.$selected !== null) {
|
|
root.$selected.trigger('contextmenu:blur');
|
|
}
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
root.$selected = opt.$selected = opt.$node;
|
|
return;
|
|
}
|
|
|
|
if(opt && opt.$menu && opt.$menu.hasClass('context-menu-visible')){
|
|
return;
|
|
}
|
|
|
|
$this.trigger('contextmenu:blur');
|
|
},
|
|
// contextMenu item click
|
|
itemClick: function (e) {
|
|
var $this = $(this),
|
|
data = $this.data(),
|
|
opt = data.contextMenu,
|
|
root = data.contextMenuRoot,
|
|
key = data.contextMenuKey,
|
|
callback;
|
|
|
|
// abort if the key is unknown or disabled or is a menu
|
|
if (!opt.items[key] || $this.is('.' + root.classNames.disabled + ', .context-menu-separator, .' + root.classNames.notSelectable) || ($this.is('.context-menu-submenu') && root.selectableSubMenu === false )) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
|
|
if (typeof opt.callbacks[key] === 'function' && Object.prototype.hasOwnProperty.call(opt.callbacks, key)) {
|
|
// item-specific callback
|
|
callback = opt.callbacks[key];
|
|
} else if (typeof root.callback === 'function') {
|
|
// default callback
|
|
callback = root.callback;
|
|
} else {
|
|
// no callback, no action
|
|
return;
|
|
}
|
|
|
|
// hide menu if callback doesn't stop that
|
|
if (callback.call(root.$trigger, key, root, e) !== false) {
|
|
root.$menu.trigger('contextmenu:hide');
|
|
} else if (root.$menu.parent().length) {
|
|
op.update.call(root.$trigger, root);
|
|
}
|
|
},
|
|
// ignore click events on input elements
|
|
inputClick: function (e) {
|
|
e.stopImmediatePropagation();
|
|
},
|
|
// hide <menu>
|
|
hideMenu: function (e, data) {
|
|
var root = $(this).data('contextMenuRoot');
|
|
op.hide.call(root.$trigger, root, data && data.force);
|
|
},
|
|
// focus <command>
|
|
focusItem: function (e) {
|
|
e.stopPropagation();
|
|
var $this = $(this),
|
|
data = $this.data(),
|
|
opt = data.contextMenu,
|
|
root = data.contextMenuRoot;
|
|
|
|
if ($this.hasClass(root.classNames.disabled) || $this.hasClass(root.classNames.notSelectable)) {
|
|
return;
|
|
}
|
|
|
|
$this
|
|
.addClass([root.classNames.hover, root.classNames.visible].join(' '))
|
|
// select other items and included items
|
|
.parent().find('.context-menu-item').not($this)
|
|
.removeClass(root.classNames.visible)
|
|
.filter('.' + root.classNames.hover)
|
|
.trigger('contextmenu:blur');
|
|
|
|
// remember selected
|
|
opt.$selected = root.$selected = $this;
|
|
|
|
|
|
if(opt && opt.$node && opt.$node.hasClass('context-menu-submenu')){
|
|
opt.$node.addClass(root.classNames.hover);
|
|
}
|
|
|
|
// position sub-menu - do after show so dumb $.ui.position can keep up
|
|
if (opt.$node) {
|
|
root.positionSubmenu.call(opt.$node, opt.$menu);
|
|
}
|
|
},
|
|
// blur <command>
|
|
blurItem: function (e) {
|
|
e.stopPropagation();
|
|
var $this = $(this),
|
|
data = $this.data(),
|
|
opt = data.contextMenu,
|
|
root = data.contextMenuRoot;
|
|
|
|
if (opt.autoHide) { // for tablets and touch screens this needs to remain
|
|
$this.removeClass(root.classNames.visible);
|
|
}
|
|
$this.removeClass(root.classNames.hover);
|
|
opt.$selected = null;
|
|
}
|
|
},
|
|
// operations
|
|
op = {
|
|
show: function (opt, x, y) {
|
|
var $trigger = $(this),
|
|
css = {};
|
|
|
|
// hide any open menus
|
|
$('#context-menu-layer').trigger('mousedown');
|
|
|
|
// backreference for callbacks
|
|
opt.$trigger = $trigger;
|
|
|
|
// show event
|
|
if (opt.events.show.call($trigger, opt) === false) {
|
|
$currentTrigger = null;
|
|
return;
|
|
}
|
|
|
|
// create or update context menu
|
|
var hasVisibleItems = op.update.call($trigger, opt);
|
|
if (hasVisibleItems === false) {
|
|
$currentTrigger = null;
|
|
return;
|
|
}
|
|
|
|
// position menu
|
|
opt.position.call($trigger, opt, x, y);
|
|
|
|
// make sure we're in front
|
|
if (opt.zIndex) {
|
|
var additionalZValue = opt.zIndex;
|
|
// If opt.zIndex is a function, call the function to get the right zIndex.
|
|
if (typeof opt.zIndex === 'function') {
|
|
additionalZValue = opt.zIndex.call($trigger, opt);
|
|
}
|
|
css.zIndex = zindex($trigger) + additionalZValue;
|
|
}
|
|
|
|
// add layer
|
|
op.layer.call(opt.$menu, opt, css.zIndex);
|
|
|
|
// adjust sub-menu zIndexes
|
|
opt.$menu.find('ul').css('zIndex', css.zIndex + 1);
|
|
|
|
// position and show context menu
|
|
opt.$menu.css(css)[opt.animation.show](opt.animation.duration, function () {
|
|
$trigger.trigger('contextmenu:visible');
|
|
|
|
op.activated(opt);
|
|
opt.events.activated(opt);
|
|
});
|
|
// make options available and set state
|
|
$trigger
|
|
.data('contextMenu', opt)
|
|
.addClass('context-menu-active');
|
|
|
|
// register key handler
|
|
$(document).off('keydown.contextMenu').on('keydown.contextMenu', handle.key);
|
|
// register autoHide handler
|
|
if (opt.autoHide) {
|
|
// mouse position handler
|
|
$(document).on('mousemove.contextMenuAutoHide', function (e) {
|
|
// need to capture the offset on mousemove,
|
|
// since the page might've been scrolled since activation
|
|
var pos = $trigger.offset();
|
|
pos.right = pos.left + $trigger.outerWidth();
|
|
pos.bottom = pos.top + $trigger.outerHeight();
|
|
|
|
if (opt.$layer && !opt.hovering && (!(e.pageX >= pos.left && e.pageX <= pos.right) || !(e.pageY >= pos.top && e.pageY <= pos.bottom))) {
|
|
/* Additional hover check after short time, you might just miss the edge of the menu */
|
|
setTimeout(function () {
|
|
if (!opt.hovering && opt.$menu !== null && typeof opt.$menu !== 'undefined') {
|
|
opt.$menu.trigger('contextmenu:hide');
|
|
}
|
|
}, 50);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
hide: function (opt, force) {
|
|
var $trigger = $(this);
|
|
if (!opt) {
|
|
opt = $trigger.data('contextMenu') || {};
|
|
}
|
|
|
|
// hide event
|
|
if (!force && opt.events && opt.events.hide.call($trigger, opt) === false) {
|
|
return;
|
|
}
|
|
|
|
// remove options and revert state
|
|
$trigger
|
|
.removeData('contextMenu')
|
|
.removeClass('context-menu-active');
|
|
|
|
if (opt.$layer) {
|
|
// keep layer for a bit so the contextmenu event can be aborted properly by opera
|
|
setTimeout((function ($layer) {
|
|
return function () {
|
|
$layer.remove();
|
|
};
|
|
})(opt.$layer), 10);
|
|
|
|
try {
|
|
delete opt.$layer;
|
|
} catch (e) {
|
|
opt.$layer = null;
|
|
}
|
|
}
|
|
|
|
// remove handle
|
|
$currentTrigger = null;
|
|
// remove selected
|
|
opt.$menu.find('.' + opt.classNames.hover).trigger('contextmenu:blur');
|
|
opt.$selected = null;
|
|
// collapse all submenus
|
|
opt.$menu.find('.' + opt.classNames.visible).removeClass(opt.classNames.visible);
|
|
// unregister key and mouse handlers
|
|
// $(document).off('.contextMenuAutoHide keydown.contextMenu'); // http://bugs.jquery.com/ticket/10705
|
|
$(document).off('.contextMenuAutoHide').off('keydown.contextMenu');
|
|
// hide menu
|
|
if (opt.$menu) {
|
|
opt.$menu[opt.animation.hide](opt.animation.duration, function () {
|
|
// tear down dynamically built menu after animation is completed.
|
|
if (opt.build) {
|
|
opt.$menu.remove();
|
|
$.each(opt, function (key) {
|
|
switch (key) {
|
|
case 'ns':
|
|
case 'selector':
|
|
case 'build':
|
|
case 'trigger':
|
|
return true;
|
|
|
|
default:
|
|
opt[key] = undefined;
|
|
try {
|
|
delete opt[key];
|
|
} catch (e) {
|
|
}
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
|
|
setTimeout(function () {
|
|
$trigger.trigger('contextmenu:hidden');
|
|
}, 10);
|
|
});
|
|
}
|
|
},
|
|
create: function (opt, root) {
|
|
if (typeof root === 'undefined') {
|
|
root = opt;
|
|
}
|
|
|
|
// create contextMenu
|
|
opt.$menu = $('<ul class="context-menu-list"></ul>').addClass(opt.className || '').data({
|
|
'contextMenu': opt,
|
|
'contextMenuRoot': root
|
|
});
|
|
if(opt.dataAttr){
|
|
$.each(opt.dataAttr, function (key, item) {
|
|
opt.$menu.attr('data-' + opt.key, item);
|
|
});
|
|
}
|
|
|
|
$.each(['callbacks', 'commands', 'inputs'], function (i, k) {
|
|
opt[k] = {};
|
|
if (!root[k]) {
|
|
root[k] = {};
|
|
}
|
|
});
|
|
|
|
if (!root.accesskeys) {
|
|
root.accesskeys = {};
|
|
}
|
|
|
|
function createNameNode(item) {
|
|
var $name = $('<span></span>');
|
|
if (item._accesskey) {
|
|
if (item._beforeAccesskey) {
|
|
$name.append(document.createTextNode(item._beforeAccesskey));
|
|
}
|
|
$('<span></span>')
|
|
.addClass('context-menu-accesskey')
|
|
.text(item._accesskey)
|
|
.appendTo($name);
|
|
if (item._afterAccesskey) {
|
|
$name.append(document.createTextNode(item._afterAccesskey));
|
|
}
|
|
} else {
|
|
if (item.isHtmlName) {
|
|
// restrict use with access keys
|
|
if (typeof item.accesskey !== 'undefined') {
|
|
throw new Error('accesskeys are not compatible with HTML names and cannot be used together in the same item');
|
|
}
|
|
$name.html(item.name);
|
|
} else {
|
|
$name.text(item.name);
|
|
}
|
|
}
|
|
return $name;
|
|
}
|
|
|
|
// create contextMenu items
|
|
$.each(opt.items, function (key, item) {
|
|
var $t = $('<li class="context-menu-item"></li>').addClass(item.className || ''),
|
|
$label = null,
|
|
$input = null;
|
|
|
|
// iOS needs to see a click-event bound to an element to actually
|
|
// have the TouchEvents infrastructure trigger the click event
|
|
$t.on('click', $.noop);
|
|
|
|
// Make old school string seperator a real item so checks wont be
|
|
// akward later.
|
|
// And normalize 'cm_separator' into 'cm_seperator'.
|
|
if (typeof item === 'string' || item.type === 'cm_separator') {
|
|
item = {type: 'cm_seperator'};
|
|
}
|
|
|
|
item.$node = $t.data({
|
|
'contextMenu': opt,
|
|
'contextMenuRoot': root,
|
|
'contextMenuKey': key
|
|
});
|
|
|
|
// register accesskey
|
|
// NOTE: the accesskey attribute should be applicable to any element, but Safari5 and Chrome13 still can't do that
|
|
if (typeof item.accesskey !== 'undefined') {
|
|
var aks = splitAccesskey(item.accesskey);
|
|
for (var i = 0, ak; ak = aks[i]; i++) {
|
|
if (!root.accesskeys[ak]) {
|
|
root.accesskeys[ak] = item;
|
|
var matched = item.name.match(new RegExp('^(.*?)(' + ak + ')(.*)$', 'i'));
|
|
if (matched) {
|
|
item._beforeAccesskey = matched[1];
|
|
item._accesskey = matched[2];
|
|
item._afterAccesskey = matched[3];
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (item.type && types[item.type]) {
|
|
// run custom type handler
|
|
types[item.type].call($t, item, opt, root);
|
|
// register commands
|
|
$.each([opt, root], function (i, k) {
|
|
k.commands[key] = item;
|
|
// Overwrite only if undefined or the item is appended to the root. This so it
|
|
// doesn't overwrite callbacks of root elements if the name is the same.
|
|
if (typeof item.callback === 'function' && (typeof k.callbacks[key] === 'undefined' || typeof opt.type === 'undefined')) {
|
|
k.callbacks[key] = item.callback;
|
|
}
|
|
});
|
|
} else {
|
|
// add label for input
|
|
if (item.type === 'cm_seperator') {
|
|
$t.addClass('context-menu-separator ' + root.classNames.notSelectable);
|
|
} else if (item.type === 'html') {
|
|
$t.addClass('context-menu-html ' + root.classNames.notSelectable);
|
|
} else if (item.type !== 'sub' && item.type) {
|
|
$label = $('<label></label>').appendTo($t);
|
|
createNameNode(item).appendTo($label);
|
|
|
|
$t.addClass('context-menu-input');
|
|
opt.hasTypes = true;
|
|
$.each([opt, root], function (i, k) {
|
|
k.commands[key] = item;
|
|
k.inputs[key] = item;
|
|
});
|
|
} else if (item.items) {
|
|
item.type = 'sub';
|
|
}
|
|
|
|
switch (item.type) {
|
|
case 'cm_seperator':
|
|
break;
|
|
|
|
case 'text':
|
|
$input = $('<input type="text" value="1" name="" />')
|
|
.attr('name', 'context-menu-input-' + key)
|
|
.val(item.value || '')
|
|
.appendTo($label);
|
|
break;
|
|
|
|
case 'textarea':
|
|
$input = $('<textarea name=""></textarea>')
|
|
.attr('name', 'context-menu-input-' + key)
|
|
.val(item.value || '')
|
|
.appendTo($label);
|
|
|
|
if (item.height) {
|
|
$input.height(item.height);
|
|
}
|
|
break;
|
|
|
|
case 'checkbox':
|
|
$input = $('<input type="checkbox" value="1" name="" />')
|
|
.attr('name', 'context-menu-input-' + key)
|
|
.val(item.value || '')
|
|
.prop('checked', !!item.selected)
|
|
.prependTo($label);
|
|
break;
|
|
|
|
case 'radio':
|
|
$input = $('<input type="radio" value="1" name="" />')
|
|
.attr('name', 'context-menu-input-' + item.radio)
|
|
.val(item.value || '')
|
|
.prop('checked', !!item.selected)
|
|
.prependTo($label);
|
|
break;
|
|
|
|
case 'select':
|
|
$input = $('<select name=""></select>')
|
|
.attr('name', 'context-menu-input-' + key)
|
|
.appendTo($label);
|
|
if (item.options) {
|
|
$.each(item.options, function (value, text) {
|
|
$('<option></option>').val(value).text(text).appendTo($input);
|
|
});
|
|
$input.val(item.selected);
|
|
}
|
|
break;
|
|
|
|
case 'sub':
|
|
createNameNode(item).appendTo($t);
|
|
item.appendTo = item.$node;
|
|
$t.data('contextMenu', item).addClass('context-menu-submenu');
|
|
item.callback = null;
|
|
|
|
// If item contains items, and this is a promise, we should create it later
|
|
// check if subitems is of type promise. If it is a promise we need to create
|
|
// it later, after promise has been resolved.
|
|
if ('function' === typeof item.items.then) {
|
|
// probably a promise, process it, when completed it will create the sub menu's.
|
|
op.processPromises(item, root, item.items);
|
|
} else {
|
|
// normal submenu.
|
|
op.create(item, root);
|
|
}
|
|
break;
|
|
|
|
case 'html':
|
|
$(item.html).appendTo($t);
|
|
break;
|
|
|
|
default:
|
|
$.each([opt, root], function (i, k) {
|
|
k.commands[key] = item;
|
|
// Overwrite only if undefined or the item is appended to the root. This so it
|
|
// doesn't overwrite callbacks of root elements if the name is the same.
|
|
if (typeof item.callback === 'function' && (typeof k.callbacks[key] === 'undefined' || typeof opt.type === 'undefined')) {
|
|
k.callbacks[key] = item.callback;
|
|
}
|
|
});
|
|
createNameNode(item).appendTo($t);
|
|
break;
|
|
}
|
|
|
|
// disable key listener in <input>
|
|
if (item.type && item.type !== 'sub' && item.type !== 'html' && item.type !== 'cm_seperator') {
|
|
$input
|
|
.on('focus', handle.focusInput)
|
|
.on('blur', handle.blurInput);
|
|
|
|
if (item.events) {
|
|
$input.on(item.events, opt);
|
|
}
|
|
}
|
|
|
|
// add icons
|
|
if (item.icon) {
|
|
if (typeof item.icon === 'function') {
|
|
item._icon = item.icon.call(this, this, $t, key, item);
|
|
} else {
|
|
if (typeof(item.icon) === 'string' && (
|
|
item.icon.substring(0, 4) === 'fab '
|
|
|| item.icon.substring(0, 4) === 'fas '
|
|
|| item.icon.substring(0, 4) === 'fad '
|
|
|| item.icon.substring(0, 4) === 'far '
|
|
|| item.icon.substring(0, 4) === 'fal ')
|
|
) {
|
|
// to enable font awesome
|
|
$t.addClass(root.classNames.icon + ' ' + root.classNames.icon + '--fa5');
|
|
item._icon = $('<i class="' + item.icon + '"></i>');
|
|
} else if (typeof(item.icon) === 'string' && item.icon.substring(0, 3) === 'fa-') {
|
|
item._icon = root.classNames.icon + ' ' + root.classNames.icon + '--fa fa ' + item.icon;
|
|
} else {
|
|
item._icon = root.classNames.icon + ' ' + root.classNames.icon + '-' + item.icon;
|
|
}
|
|
}
|
|
|
|
if(typeof(item._icon) === "string"){
|
|
$t.addClass(item._icon);
|
|
} else {
|
|
$t.prepend(item._icon);
|
|
}
|
|
}
|
|
}
|
|
|
|
// cache contained elements
|
|
item.$input = $input;
|
|
item.$label = $label;
|
|
|
|
// attach item to menu
|
|
$t.appendTo(opt.$menu);
|
|
|
|
// Disable text selection
|
|
if (!opt.hasTypes && $.support.eventSelectstart) {
|
|
// browsers support user-select: none,
|
|
// IE has a special event for text-selection
|
|
// browsers supporting neither will not be preventing text-selection
|
|
$t.on('selectstart.disableTextSelect', handle.abortevent);
|
|
}
|
|
});
|
|
// attach contextMenu to <body> (to bypass any possible overflow:hidden issues on parents of the trigger element)
|
|
if (!opt.$node) {
|
|
opt.$menu.css('display', 'none').addClass('context-menu-root');
|
|
}
|
|
opt.$menu.appendTo(opt.appendTo || document.body);
|
|
},
|
|
resize: function ($menu, nested) {
|
|
var domMenu;
|
|
// determine widths of submenus, as CSS won't grow them automatically
|
|
// position:absolute within position:absolute; min-width:100; max-width:200; results in width: 100;
|
|
// kinda sucks hard...
|
|
|
|
// determine width of absolutely positioned element
|
|
$menu.css({position: 'absolute', display: 'block'});
|
|
// don't apply yet, because that would break nested elements' widths
|
|
$menu.data('width',
|
|
(domMenu = $menu.get(0)).getBoundingClientRect ?
|
|
Math.ceil(domMenu.getBoundingClientRect().width) :
|
|
$menu.outerWidth() + 1); // outerWidth() returns rounded pixels
|
|
// reset styles so they allow nested elements to grow/shrink naturally
|
|
$menu.css({
|
|
position: 'static',
|
|
minWidth: '0px',
|
|
maxWidth: '100000px'
|
|
});
|
|
// identify width of nested menus
|
|
$menu.find('> li > ul').each(function () {
|
|
op.resize($(this), true);
|
|
});
|
|
// reset and apply changes in the end because nested
|
|
// elements' widths wouldn't be calculatable otherwise
|
|
if (!nested) {
|
|
$menu.find('ul').addBack().css({
|
|
position: '',
|
|
display: '',
|
|
minWidth: '',
|
|
maxWidth: ''
|
|
}).outerWidth(function () {
|
|
return $(this).data('width');
|
|
});
|
|
}
|
|
},
|
|
update: function (opt, root) {
|
|
var $trigger = this;
|
|
if (typeof root === 'undefined') {
|
|
root = opt;
|
|
op.resize(opt.$menu);
|
|
}
|
|
|
|
var hasVisibleItems = false;
|
|
|
|
// re-check disabled for each item
|
|
opt.$menu.children().each(function () {
|
|
var $item = $(this),
|
|
key = $item.data('contextMenuKey'),
|
|
item = opt.items[key],
|
|
disabled = (typeof item.disabled === 'function' && item.disabled.call($trigger, key, root)) || item.disabled === true,
|
|
visible;
|
|
if (typeof item.visible === 'function') {
|
|
visible = item.visible.call($trigger, key, root);
|
|
} else if (typeof item.visible !== 'undefined') {
|
|
visible = item.visible === true;
|
|
} else {
|
|
visible = true;
|
|
}
|
|
|
|
if (visible) {
|
|
hasVisibleItems = true;
|
|
}
|
|
|
|
$item[visible ? 'show' : 'hide']();
|
|
|
|
// dis- / enable item
|
|
$item[disabled ? 'addClass' : 'removeClass'](root.classNames.disabled);
|
|
|
|
if (typeof item.icon === 'function') {
|
|
$item.removeClass(item._icon);
|
|
var iconResult = item.icon.call(this, $trigger, $item, key, item);
|
|
if(typeof(iconResult) === "string"){
|
|
$item.addClass(iconResult);
|
|
} else {
|
|
$item.prepend(iconResult);
|
|
}
|
|
}
|
|
|
|
if (item.type) {
|
|
// dis- / enable input elements
|
|
$item.find('input, select, textarea').prop('disabled', disabled);
|
|
|
|
// update input states
|
|
switch (item.type) {
|
|
case 'text':
|
|
case 'textarea':
|
|
item.$input.val(item.value || '');
|
|
break;
|
|
|
|
case 'checkbox':
|
|
case 'radio':
|
|
item.$input.val(item.value || '').prop('checked', !!item.selected);
|
|
break;
|
|
|
|
case 'select':
|
|
item.$input.val((item.selected === 0 ? "0" : item.selected) || '');
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (item.$menu) {
|
|
// update sub-menu
|
|
var subMenuHasVisibleItems = op.update.call($trigger, item, root);
|
|
if (subMenuHasVisibleItems) {
|
|
hasVisibleItems = true;
|
|
}
|
|
}
|
|
});
|
|
return hasVisibleItems;
|
|
},
|
|
layer: function (opt, zIndex) {
|
|
// add transparent layer for click area
|
|
// filter and background for Internet Explorer, Issue #23
|
|
var $layer = opt.$layer = $('<div id="context-menu-layer"></div>')
|
|
.css({
|
|
height: $win.height(),
|
|
width: $win.width(),
|
|
display: 'block',
|
|
position: 'fixed',
|
|
'z-index': zIndex - 1,
|
|
top: 0,
|
|
left: 0,
|
|
opacity: 0,
|
|
filter: 'alpha(opacity=0)',
|
|
'background-color': '#000'
|
|
})
|
|
.data('contextMenuRoot', opt)
|
|
.appendTo(document.body)
|
|
.on('contextmenu', handle.abortevent)
|
|
.on('mousedown', handle.layerClick);
|
|
|
|
// IE6 doesn't know position:fixed;
|
|
if (typeof document.body.style.maxWidth === 'undefined') { // IE6 doesn't support maxWidth
|
|
$layer.css({
|
|
'position': 'absolute',
|
|
'height': $(document).height()
|
|
});
|
|
}
|
|
|
|
return $layer;
|
|
},
|
|
processPromises: function (opt, root, promise) {
|
|
// Start
|
|
opt.$node.addClass(root.classNames.iconLoadingClass);
|
|
|
|
function completedPromise(opt, root, items) {
|
|
// Completed promise (dev called promise.resolve). We now have a list of items which can
|
|
// be used to create the rest of the context menu.
|
|
if (typeof items === 'undefined') {
|
|
// Null result, dev should have checked
|
|
errorPromise(undefined);//own error object
|
|
}
|
|
finishPromiseProcess(opt, root, items);
|
|
}
|
|
|
|
function errorPromise(opt, root, errorItem) {
|
|
// User called promise.reject() with an error item, if not, provide own error item.
|
|
if (typeof errorItem === 'undefined') {
|
|
errorItem = {
|
|
"error": {
|
|
name: "No items and no error item",
|
|
icon: "context-menu-icon context-menu-icon-quit"
|
|
}
|
|
};
|
|
if (window.console) {
|
|
(console.error || console.log).call(console, 'When you reject a promise, provide an "items" object, equal to normal sub-menu items');
|
|
}
|
|
} else if (typeof errorItem === 'string') {
|
|
errorItem = {"error": {name: errorItem}};
|
|
}
|
|
finishPromiseProcess(opt, root, errorItem);
|
|
}
|
|
|
|
function finishPromiseProcess(opt, root, items) {
|
|
if (typeof root.$menu === 'undefined' || !root.$menu.is(':visible')) {
|
|
return;
|
|
}
|
|
opt.$node.removeClass(root.classNames.iconLoadingClass);
|
|
opt.items = items;
|
|
op.create(opt, root, true); // Create submenu
|
|
op.update(opt, root); // Correctly update position if user is already hovered over menu item
|
|
root.positionSubmenu.call(opt.$node, opt.$menu); // positionSubmenu, will only do anything if user already hovered over menu item that just got new subitems.
|
|
}
|
|
|
|
// Wait for promise completion. .then(success, error, notify) (we don't track notify). Bind the opt
|
|
// and root to avoid scope problems
|
|
promise.then(completedPromise.bind(this, opt, root), errorPromise.bind(this, opt, root));
|
|
},
|
|
// operation that will run after contextMenu showed on screen
|
|
activated: function(opt){
|
|
var $menu = opt.$menu;
|
|
var $menuOffset = $menu.offset();
|
|
var winHeight = $(window).height();
|
|
var winScrollTop = $(window).scrollTop();
|
|
var menuHeight = $menu.height();
|
|
if(menuHeight > winHeight){
|
|
$menu.css({
|
|
'height' : winHeight + 'px',
|
|
'overflow-x': 'hidden',
|
|
'overflow-y': 'auto',
|
|
'top': winScrollTop + 'px'
|
|
});
|
|
} else if(($menuOffset.top < winScrollTop) || ($menuOffset.top + menuHeight > winScrollTop + winHeight)){
|
|
$menu.css({
|
|
'top': winScrollTop + 'px'
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
// split accesskey according to http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#assigned-access-key
|
|
function splitAccesskey(val) {
|
|
var t = val.split(/\s+/);
|
|
var keys = [];
|
|
|
|
for (var i = 0, k; k = t[i]; i++) {
|
|
k = k.charAt(0).toUpperCase(); // first character only
|
|
// theoretically non-accessible characters should be ignored, but different systems, different keyboard layouts, ... screw it.
|
|
// a map to look up already used access keys would be nice
|
|
keys.push(k);
|
|
}
|
|
|
|
return keys;
|
|
}
|
|
|
|
// handle contextMenu triggers
|
|
$.fn.contextMenu = function (operation) {
|
|
var $t = this, $o = operation;
|
|
if (this.length > 0) { // this is not a build on demand menu
|
|
if (typeof operation === 'undefined') {
|
|
this.first().trigger('contextmenu');
|
|
} else if (typeof operation.x !== 'undefined' && typeof operation.y !== 'undefined') {
|
|
this.first().trigger($.Event('contextmenu', {
|
|
pageX: operation.x,
|
|
pageY: operation.y,
|
|
mouseButton: operation.button
|
|
}));
|
|
} else if (operation === 'hide') {
|
|
var $menu = this.first().data('contextMenu') ? this.first().data('contextMenu').$menu : null;
|
|
if ($menu) {
|
|
$menu.trigger('contextmenu:hide');
|
|
}
|
|
} else if (operation === 'destroy') {
|
|
$.contextMenu('destroy', {context: this});
|
|
} else if ($.isPlainObject(operation)) {
|
|
operation.context = this;
|
|
$.contextMenu('create', operation);
|
|
} else if (operation) {
|
|
this.removeClass('context-menu-disabled');
|
|
} else if (!operation) {
|
|
this.addClass('context-menu-disabled');
|
|
}
|
|
} else {
|
|
$.each(menus, function () {
|
|
if (this.selector === $t.selector) {
|
|
$o.data = this;
|
|
|
|
$.extend($o.data, {trigger: 'demand'});
|
|
}
|
|
});
|
|
|
|
handle.contextmenu.call($o.target, $o);
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
// manage contextMenu instances
|
|
$.contextMenu = function (operation, options) {
|
|
if (typeof operation !== 'string') {
|
|
options = operation;
|
|
operation = 'create';
|
|
}
|
|
|
|
if (typeof options === 'string') {
|
|
options = {selector: options};
|
|
} else if (typeof options === 'undefined') {
|
|
options = {};
|
|
}
|
|
|
|
// merge with default options
|
|
var o = $.extend(true, {}, defaults, options || {});
|
|
var $document = $(document);
|
|
var $context = $document;
|
|
var _hasContext = false;
|
|
|
|
if (!o.context || !o.context.length) {
|
|
o.context = document;
|
|
} else {
|
|
// you never know what they throw at you...
|
|
$context = $(o.context).first();
|
|
o.context = $context.get(0);
|
|
_hasContext = !$(o.context).is(document);
|
|
}
|
|
|
|
switch (operation) {
|
|
|
|
case 'update':
|
|
// Updates visibility and such
|
|
if(_hasContext){
|
|
op.update($context);
|
|
} else {
|
|
for(var menu in menus){
|
|
if(menus.hasOwnProperty(menu)){
|
|
op.update(menus[menu]);
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
|
|
case 'create':
|
|
// no selector no joy
|
|
if (!o.selector) {
|
|
throw new Error('No selector specified');
|
|
}
|
|
// make sure internal classes are not bound to
|
|
if (o.selector.match(/.context-menu-(list|item|input)($|\s)/)) {
|
|
throw new Error('Cannot bind to selector "' + o.selector + '" as it contains a reserved className');
|
|
}
|
|
if (!o.build && (!o.items || $.isEmptyObject(o.items))) {
|
|
throw new Error('No Items specified');
|
|
}
|
|
counter++;
|
|
o.ns = '.contextMenu' + counter;
|
|
if (!_hasContext) {
|
|
namespaces[o.selector] = o.ns;
|
|
}
|
|
menus[o.ns] = o;
|
|
|
|
// default to right click
|
|
if (!o.trigger) {
|
|
o.trigger = 'right';
|
|
}
|
|
|
|
if (!initialized) {
|
|
var itemClick = o.itemClickEvent === 'click' ? 'click.contextMenu' : 'mouseup.contextMenu';
|
|
var contextMenuItemObj = {
|
|
// 'mouseup.contextMenu': handle.itemClick,
|
|
// 'click.contextMenu': handle.itemClick,
|
|
'contextmenu:focus.contextMenu': handle.focusItem,
|
|
'contextmenu:blur.contextMenu': handle.blurItem,
|
|
'contextmenu.contextMenu': handle.abortevent,
|
|
'mouseenter.contextMenu': handle.itemMouseenter,
|
|
'mouseleave.contextMenu': handle.itemMouseleave
|
|
};
|
|
contextMenuItemObj[itemClick] = handle.itemClick;
|
|
// make sure item click is registered first
|
|
$document
|
|
.on({
|
|
'contextmenu:hide.contextMenu': handle.hideMenu,
|
|
'prevcommand.contextMenu': handle.prevItem,
|
|
'nextcommand.contextMenu': handle.nextItem,
|
|
'contextmenu.contextMenu': handle.abortevent,
|
|
'mouseenter.contextMenu': handle.menuMouseenter,
|
|
'mouseleave.contextMenu': handle.menuMouseleave
|
|
}, '.context-menu-list')
|
|
.on('mouseup.contextMenu', '.context-menu-input', handle.inputClick)
|
|
.on(contextMenuItemObj, '.context-menu-item');
|
|
|
|
initialized = true;
|
|
}
|
|
|
|
// engage native contextmenu event
|
|
$context
|
|
.on('contextmenu' + o.ns, o.selector, o, handle.contextmenu);
|
|
|
|
if (_hasContext) {
|
|
// add remove hook, just in case
|
|
$context.on('remove' + o.ns, function () {
|
|
$(this).contextMenu('destroy');
|
|
});
|
|
}
|
|
|
|
switch (o.trigger) {
|
|
case 'hover':
|
|
$context
|
|
.on('mouseenter' + o.ns, o.selector, o, handle.mouseenter)
|
|
.on('mouseleave' + o.ns, o.selector, o, handle.mouseleave);
|
|
break;
|
|
|
|
case 'left':
|
|
$context.on('click' + o.ns, o.selector, o, handle.click);
|
|
break;
|
|
case 'touchstart':
|
|
$context.on('touchstart' + o.ns, o.selector, o, handle.click);
|
|
break;
|
|
/*
|
|
default:
|
|
// http://www.quirksmode.org/dom/events/contextmenu.html
|
|
$document
|
|
.on('mousedown' + o.ns, o.selector, o, handle.mousedown)
|
|
.on('mouseup' + o.ns, o.selector, o, handle.mouseup);
|
|
break;
|
|
*/
|
|
}
|
|
|
|
// create menu
|
|
if (!o.build) {
|
|
op.create(o);
|
|
}
|
|
break;
|
|
|
|
case 'destroy':
|
|
var $visibleMenu;
|
|
if (_hasContext) {
|
|
// get proper options
|
|
var context = o.context;
|
|
$.each(menus, function (ns, o) {
|
|
|
|
if (!o) {
|
|
return true;
|
|
}
|
|
|
|
// Is this menu equest to the context called from
|
|
if (!$(context).is(o.selector)) {
|
|
return true;
|
|
}
|
|
|
|
$visibleMenu = $('.context-menu-list').filter(':visible');
|
|
if ($visibleMenu.length && $visibleMenu.data().contextMenuRoot.$trigger.is($(o.context).find(o.selector))) {
|
|
$visibleMenu.trigger('contextmenu:hide', {force: true});
|
|
}
|
|
|
|
try {
|
|
if (menus[o.ns].$menu) {
|
|
menus[o.ns].$menu.remove();
|
|
}
|
|
|
|
delete menus[o.ns];
|
|
} catch (e) {
|
|
menus[o.ns] = null;
|
|
}
|
|
|
|
$(o.context).off(o.ns);
|
|
|
|
return true;
|
|
});
|
|
} else if (!o.selector) {
|
|
$document.off('.contextMenu .contextMenuAutoHide');
|
|
$.each(menus, function (ns, o) {
|
|
$(o.context).off(o.ns);
|
|
});
|
|
|
|
namespaces = {};
|
|
menus = {};
|
|
counter = 0;
|
|
initialized = false;
|
|
|
|
$('#context-menu-layer, .context-menu-list').remove();
|
|
} else if (namespaces[o.selector]) {
|
|
$visibleMenu = $('.context-menu-list').filter(':visible');
|
|
if ($visibleMenu.length && $visibleMenu.data().contextMenuRoot.$trigger.is(o.selector)) {
|
|
$visibleMenu.trigger('contextmenu:hide', {force: true});
|
|
}
|
|
|
|
try {
|
|
if (menus[namespaces[o.selector]].$menu) {
|
|
menus[namespaces[o.selector]].$menu.remove();
|
|
}
|
|
|
|
delete menus[namespaces[o.selector]];
|
|
} catch (e) {
|
|
menus[namespaces[o.selector]] = null;
|
|
}
|
|
|
|
$document.off(namespaces[o.selector]);
|
|
}
|
|
break;
|
|
|
|
case 'html5':
|
|
// if <command> and <menuitem> are not handled by the browser,
|
|
// or options was a bool true,
|
|
// initialize $.contextMenu for them
|
|
if ((!$.support.htmlCommand && !$.support.htmlMenuitem) || (typeof options === 'boolean' && options)) {
|
|
$('menu[type="context"]').each(function () {
|
|
if (this.id) {
|
|
$.contextMenu({
|
|
selector: '[contextmenu=' + this.id + ']',
|
|
items: $.contextMenu.fromMenu(this)
|
|
});
|
|
}
|
|
}).css('display', 'none');
|
|
}
|
|
break;
|
|
|
|
default:
|
|
throw new Error('Unknown operation "' + operation + '"');
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
// import values into <input> commands
|
|
$.contextMenu.setInputValues = function (opt, data) {
|
|
if (typeof data === 'undefined') {
|
|
data = {};
|
|
}
|
|
|
|
$.each(opt.inputs, function (key, item) {
|
|
switch (item.type) {
|
|
case 'text':
|
|
case 'textarea':
|
|
item.value = data[key] || '';
|
|
break;
|
|
|
|
case 'checkbox':
|
|
item.selected = data[key] ? true : false;
|
|
break;
|
|
|
|
case 'radio':
|
|
item.selected = (data[item.radio] || '') === item.value;
|
|
break;
|
|
|
|
case 'select':
|
|
item.selected = data[key] || '';
|
|
break;
|
|
}
|
|
});
|
|
};
|
|
|
|
// export values from <input> commands
|
|
$.contextMenu.getInputValues = function (opt, data) {
|
|
if (typeof data === 'undefined') {
|
|
data = {};
|
|
}
|
|
|
|
$.each(opt.inputs, function (key, item) {
|
|
switch (item.type) {
|
|
case 'text':
|
|
case 'textarea':
|
|
case 'select':
|
|
data[key] = item.$input.val();
|
|
break;
|
|
|
|
case 'checkbox':
|
|
data[key] = item.$input.prop('checked');
|
|
break;
|
|
|
|
case 'radio':
|
|
if (item.$input.prop('checked')) {
|
|
data[item.radio] = item.value;
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
|
|
return data;
|
|
};
|
|
|
|
// find <label for="xyz">
|
|
function inputLabel(node) {
|
|
return (node.id && $('label[for="' + node.id + '"]').val()) || node.name;
|
|
}
|
|
|
|
// convert <menu> to items object
|
|
function menuChildren(items, $children, counter) {
|
|
if (!counter) {
|
|
counter = 0;
|
|
}
|
|
|
|
$children.each(function () {
|
|
var $node = $(this),
|
|
node = this,
|
|
nodeName = this.nodeName.toLowerCase(),
|
|
label,
|
|
item;
|
|
|
|
// extract <label><input>
|
|
if (nodeName === 'label' && $node.find('input, textarea, select').length) {
|
|
label = $node.text();
|
|
$node = $node.children().first();
|
|
node = $node.get(0);
|
|
nodeName = node.nodeName.toLowerCase();
|
|
}
|
|
|
|
/*
|
|
* <menu> accepts flow-content as children. that means <embed>, <canvas> and such are valid menu items.
|
|
* Not being the sadistic kind, $.contextMenu only accepts:
|
|
* <command>, <menuitem>, <hr>, <span>, <p> <input [text, radio, checkbox]>, <textarea>, <select> and of course <menu>.
|
|
* Everything else will be imported as an html node, which is not interfaced with contextMenu.
|
|
*/
|
|
|
|
// http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#concept-command
|
|
switch (nodeName) {
|
|
// http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-menu-element
|
|
case 'menu':
|
|
item = {name: $node.attr('label'), items: {}};
|
|
counter = menuChildren(item.items, $node.children(), counter);
|
|
break;
|
|
|
|
// http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-a-element-to-define-a-command
|
|
case 'a':
|
|
// http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-button-element-to-define-a-command
|
|
case 'button':
|
|
item = {
|
|
name: $node.text(),
|
|
disabled: !!$node.attr('disabled'),
|
|
callback: (function () {
|
|
return function () {
|
|
$node.get(0).click();
|
|
};
|
|
})()
|
|
};
|
|
break;
|
|
|
|
// http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-command-element-to-define-a-command
|
|
case 'menuitem':
|
|
case 'command':
|
|
switch ($node.attr('type')) {
|
|
case undefined:
|
|
case 'command':
|
|
case 'menuitem':
|
|
item = {
|
|
name: $node.attr('label'),
|
|
disabled: !!$node.attr('disabled'),
|
|
icon: $node.attr('icon'),
|
|
callback: (function () {
|
|
return function () {
|
|
$node.get(0).click();
|
|
};
|
|
})()
|
|
};
|
|
break;
|
|
|
|
case 'checkbox':
|
|
item = {
|
|
type: 'checkbox',
|
|
disabled: !!$node.attr('disabled'),
|
|
name: $node.attr('label'),
|
|
selected: !!$node.attr('checked')
|
|
};
|
|
break;
|
|
case 'radio':
|
|
item = {
|
|
type: 'radio',
|
|
disabled: !!$node.attr('disabled'),
|
|
name: $node.attr('label'),
|
|
radio: $node.attr('radiogroup'),
|
|
value: $node.attr('id'),
|
|
selected: !!$node.attr('checked')
|
|
};
|
|
break;
|
|
|
|
default:
|
|
item = undefined;
|
|
}
|
|
break;
|
|
|
|
case 'hr':
|
|
item = '-------';
|
|
break;
|
|
|
|
case 'input':
|
|
switch ($node.attr('type')) {
|
|
case 'text':
|
|
item = {
|
|
type: 'text',
|
|
name: label || inputLabel(node),
|
|
disabled: !!$node.attr('disabled'),
|
|
value: $node.val()
|
|
};
|
|
break;
|
|
|
|
case 'checkbox':
|
|
item = {
|
|
type: 'checkbox',
|
|
name: label || inputLabel(node),
|
|
disabled: !!$node.attr('disabled'),
|
|
selected: !!$node.attr('checked')
|
|
};
|
|
break;
|
|
|
|
case 'radio':
|
|
item = {
|
|
type: 'radio',
|
|
name: label || inputLabel(node),
|
|
disabled: !!$node.attr('disabled'),
|
|
radio: !!$node.attr('name'),
|
|
value: $node.val(),
|
|
selected: !!$node.attr('checked')
|
|
};
|
|
break;
|
|
|
|
default:
|
|
item = undefined;
|
|
break;
|
|
}
|
|
break;
|
|
|
|
case 'select':
|
|
item = {
|
|
type: 'select',
|
|
name: label || inputLabel(node),
|
|
disabled: !!$node.attr('disabled'),
|
|
selected: $node.val(),
|
|
options: {}
|
|
};
|
|
$node.children().each(function () {
|
|
item.options[this.value] = $(this).text();
|
|
});
|
|
break;
|
|
|
|
case 'textarea':
|
|
item = {
|
|
type: 'textarea',
|
|
name: label || inputLabel(node),
|
|
disabled: !!$node.attr('disabled'),
|
|
value: $node.val()
|
|
};
|
|
break;
|
|
|
|
case 'label':
|
|
break;
|
|
|
|
default:
|
|
item = {type: 'html', html: $node.clone(true)};
|
|
break;
|
|
}
|
|
|
|
if (item) {
|
|
counter++;
|
|
items['key' + counter] = item;
|
|
}
|
|
});
|
|
|
|
return counter;
|
|
}
|
|
|
|
// convert html5 menu
|
|
$.contextMenu.fromMenu = function (element) {
|
|
var $this = $(element),
|
|
items = {};
|
|
|
|
menuChildren(items, $this.children());
|
|
|
|
return items;
|
|
};
|
|
|
|
// make defaults accessible
|
|
$.contextMenu.defaults = defaults;
|
|
$.contextMenu.types = types;
|
|
// export internal functions - undocumented, for hacking only!
|
|
$.contextMenu.handle = handle;
|
|
$.contextMenu.op = op;
|
|
$.contextMenu.menus = menus;
|
|
});
|