code formatting changes.
This commit is contained in:
Watts
parent
8ea257e68b
commit
42114580ec
@ -4,16 +4,16 @@
|
||||
License: MIT */
|
||||
|
||||
(function (undefined) {
|
||||
'use strict';
|
||||
"use strict";
|
||||
|
||||
// client
|
||||
if (typeof ko !== undefined + '') {
|
||||
if (typeof ko !== undefined + "") {
|
||||
bindContextMenu(ko);
|
||||
}
|
||||
|
||||
// node
|
||||
if (typeof module !== undefined + '' && module.exports && typeof require !== undefined + '') {
|
||||
bindContextMenu(require('knockout'));
|
||||
if (typeof module !== undefined + "" && module.exports && typeof require !== undefined + "") {
|
||||
bindContextMenu(require("knockout"));
|
||||
}
|
||||
|
||||
function bindContextMenu(ko) {
|
||||
@ -23,7 +23,7 @@
|
||||
var registerEvent = utils.registerEventHandler;
|
||||
var isObservable = ko.isObservable;
|
||||
|
||||
registerEvent(document, 'click', function (event) {
|
||||
registerEvent(document, "click", function (event) {
|
||||
var button = event.which || event.button;
|
||||
if (!event.defaultPrevented && button < 2) {
|
||||
hideCurrentMenu();
|
||||
@ -53,16 +53,16 @@
|
||||
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
|
||||
var eventsToHandle = valueAccessor() || {};
|
||||
var allBindings = allBindingsAccessor();
|
||||
var defaultClass = allBindings.contextMenuClass || 'context-menu';
|
||||
var defaultClass = allBindings.contextMenuClass || "context-menu";
|
||||
var activeElement;
|
||||
|
||||
// bind on click? bind on context click?
|
||||
if (allBindings.bindMenuOnClick) {
|
||||
registerEvent(element, 'click', openMenu);
|
||||
registerEvent(element, "click", openMenu);
|
||||
}
|
||||
|
||||
if (allBindings.bindMenuOnContextMenu === undefined || allBindings.bindMenuOnContextMenu) {
|
||||
registerEvent(element, 'contextmenu', openMenu);
|
||||
registerEvent(element, "contextmenu", openMenu);
|
||||
}
|
||||
|
||||
elementMapping.push({
|
||||
@ -76,7 +76,7 @@
|
||||
if (activeElement) {
|
||||
activeElement.hide();
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
function mouseX(evt) {
|
||||
@ -100,16 +100,14 @@
|
||||
}
|
||||
|
||||
function openMenu(event) {
|
||||
var menuElement;
|
||||
|
||||
activeElement = getMenu(event);
|
||||
menuElement = activeElement.element;
|
||||
var menuElement = activeElement.element;
|
||||
|
||||
hideCurrentMenu();
|
||||
|
||||
if (menuElement) {
|
||||
// make visibility hidden, then add to DOM so that we can get the height/width of the menu
|
||||
menuElement.style.visibility = 'hidden';
|
||||
menuElement.style.visibility = "hidden";
|
||||
(document.body || document).appendChild(menuElement);
|
||||
|
||||
// set location
|
||||
@ -118,26 +116,26 @@
|
||||
var rightOfViewport = window.innerWidth + window.pageXOffset;
|
||||
|
||||
if (mouseY(event) + menuElement.offsetHeight > bottomOfViewport) {
|
||||
menuElement.style.top = 1 * (bottomOfViewport - menuElement.offsetHeight - 10) + 'px';
|
||||
menuElement.style.top = 1 * (bottomOfViewport - menuElement.offsetHeight - 10) + "px";
|
||||
} else {
|
||||
menuElement.style.top = mouseY(event) + 'px';
|
||||
menuElement.style.top = mouseY(event) + "px";
|
||||
}
|
||||
|
||||
if (mouseX(event) + menuElement.offsetWidth > rightOfViewport) {
|
||||
menuElement.style.left = 1 * (rightOfViewport - menuElement.offsetWidth - 10) + 'px';
|
||||
menuElement.style.left = 1 * (rightOfViewport - menuElement.offsetWidth - 10) + "px";
|
||||
} else {
|
||||
menuElement.style.left = mouseX(event) + 'px';
|
||||
menuElement.style.left = mouseX(event) + "px";
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
menuElement.style.top = (element.offsetTop + element.offsetHeight) + 'px';
|
||||
menuElement.style.left = (element.offsetLeft + element.offsetWidth) + 'px';
|
||||
menuElement.style.top = (element.offsetTop + element.offsetHeight) + "px";
|
||||
menuElement.style.left = (element.offsetLeft + element.offsetWidth) + "px";
|
||||
}
|
||||
|
||||
// now set to visible
|
||||
menuElement.style.visibility = '';
|
||||
menuElement.style.visibility = "";
|
||||
}
|
||||
|
||||
// replace current menu with the recently created
|
||||
@ -163,17 +161,17 @@
|
||||
});
|
||||
|
||||
if (elements.length) {
|
||||
menu = document.createElement('div');
|
||||
menu = document.createElement("div");
|
||||
menu.className = defaultClass;
|
||||
|
||||
// you may need padding to menus that has checks
|
||||
menu.innerHTML = '<ul class="' + (hasChecks ? 'has-checks' : '') + '">' +
|
||||
elements.join('') +
|
||||
'</ul>';
|
||||
menu.innerHTML = "<ul class=\"" + (hasChecks ? "has-checks" : "") + '">' +
|
||||
elements.join("") +
|
||||
"</ul>";
|
||||
|
||||
// map items to actions
|
||||
elements.forEach(function (item, index) {
|
||||
registerEvent(menu.children[0].children[index], 'click', function (event) {
|
||||
registerEvent(menu.children[0].children[index], "click", function (event) {
|
||||
var result = actions[index](viewModel, event);
|
||||
|
||||
if (!result && event) {
|
||||
@ -199,7 +197,7 @@
|
||||
function pushItem(eventName) {
|
||||
var item = getMenuProperties(eventName);
|
||||
var classes = [];
|
||||
var id = '';
|
||||
var id = "";
|
||||
var liHtml;
|
||||
|
||||
if (item.isVisible) {
|
||||
@ -211,25 +209,25 @@
|
||||
|
||||
// set css classes
|
||||
if (item.isChecked) {
|
||||
classes.push('checked');
|
||||
classes.push("checked");
|
||||
}
|
||||
|
||||
if (item.isDisabled) {
|
||||
classes.push('disabled');
|
||||
classes.push("disabled");
|
||||
}
|
||||
|
||||
if (item.isSeparator) {
|
||||
classes.push('separator');
|
||||
classes.push("separator");
|
||||
}
|
||||
|
||||
if (item.url) {
|
||||
classes.push('with-url');
|
||||
classes.push("with-url");
|
||||
}
|
||||
|
||||
liHtml = '<li ' + (id ? ('id="' + id + '" ') : '') +
|
||||
' class="' + classes.join(' ') + '">' +
|
||||
liHtml = "<li " + (id ? ('id="' + id + '" ') : "") +
|
||||
' class="' + classes.join(" ") + '">' +
|
||||
item.html +
|
||||
'</li>';
|
||||
"</li>";
|
||||
|
||||
elements.push(liHtml);
|
||||
actions.push(item.action);
|
||||
@ -240,8 +238,8 @@
|
||||
}
|
||||
|
||||
function getMenuProperties(eventName) {
|
||||
var text = '';
|
||||
var html = '';
|
||||
var text = "";
|
||||
var html = "";
|
||||
var currentEvent = ko.isObservable(eventsToHandle) ?
|
||||
eventsToHandle()[eventName] :
|
||||
eventsToHandle[eventName];
|
||||
@ -268,18 +266,18 @@
|
||||
}
|
||||
|
||||
if (url) {
|
||||
html = '<a href="' + url + '">' + text + '</a>';
|
||||
html = '<a href="' + url + '">' + text + "</a>";
|
||||
} else {
|
||||
html = text;
|
||||
}
|
||||
}
|
||||
|
||||
if ((isObservable(item) && typeof item() === 'boolean') ||
|
||||
(isObservable(item.action) && typeof item.action() === 'boolean')) {
|
||||
if ((isObservable(item) && typeof item() === "boolean") ||
|
||||
(isObservable(item.action) && typeof item.action() === "boolean")) {
|
||||
isBoolean = true;
|
||||
|
||||
if ((item.action && item.action()) ||
|
||||
(typeof item === 'function' && item())) {
|
||||
(typeof item === "function" && item())) {
|
||||
isChecked = true;
|
||||
}
|
||||
}
|
||||
@ -295,23 +293,23 @@
|
||||
isDisabled: isDisabled,
|
||||
isBoolean: isBoolean,
|
||||
isSeparator: isSeparator,
|
||||
action: action,
|
||||
action: action
|
||||
};
|
||||
|
||||
function action(viewModel, event) {
|
||||
var error = eventName + ' option must have an action or an url.';
|
||||
var error = eventName + " option must have an action or an url.";
|
||||
|
||||
if (isDisabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// check if option is a boolean
|
||||
if (isObservable(item) && typeof item() === 'boolean') {
|
||||
if (isObservable(item) && typeof item() === "boolean") {
|
||||
item(!item());
|
||||
}
|
||||
|
||||
// is an object? well, lets check it properties
|
||||
else if (typeof item === 'object') {
|
||||
else if (typeof item === "object") {
|
||||
// check if has an action or if its a separator
|
||||
if (!item.action && !url && !isSeparator) {
|
||||
throw error;
|
||||
@ -319,7 +317,7 @@
|
||||
|
||||
// evaluate action
|
||||
else if (item.action) {
|
||||
if (isObservable(item.action) && typeof item.action() === 'boolean') {
|
||||
if (isObservable(item.action) && typeof item.action() === "boolean") {
|
||||
item.action(!item.action());
|
||||
} else {
|
||||
item.action(viewModel, event);
|
||||
@ -328,7 +326,7 @@
|
||||
}
|
||||
|
||||
// its not an observable, should be a function
|
||||
else if (typeof item === 'function') {
|
||||
else if (typeof item === "function") {
|
||||
item(viewModel, event);
|
||||
}
|
||||
|
||||
@ -340,7 +338,7 @@
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
function hideCurrentMenu() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user