gd-sprest-js
Version:
SharePoint 2013/Online js components.
108 lines (107 loc) • 4.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var common_1 = require("./common");
var _1 = require(".");
/**
* Contextual Menu
*/
exports.ContextualMenu = function (props) {
// Method to close the menu
var close = function () {
// See if the menu exists
if (_menu._host && _menu._host._container.classList.contains("is-open")) {
// Close the modal
_menu._host._container.classList.remove("is-open");
}
};
// Method to get the contextual menu
var get = function () { return _menu; };
// Set the contextual menu html
props.el.innerHTML = _1.Templates.ContextualMenu(props);
// Create the contextual menu
var _menu = new _1.fabric.ContextualMenu(props.el.querySelector(".ms-ContextualMenu"), props.elTarget);
// Determine if this menu has sub-menus
var hasSubMenu = false;
for (var i = 0; i < props.items.length; i++) {
// See if a sub-menu exists
if (props.items[i].menu) {
// Set the flag
hasSubMenu = true;
break;
}
}
// Add a click event to the target
var _html = null;
props.elTarget.addEventListener("click", function (ev) {
// Prevent a postback
ev ? ev.preventDefault() : null;
// See if the host exists
if (_menu._host) {
// See if there is a custom class name
if (props.className && _menu._host._contextualHostMain.className.indexOf(props.className) < 0) {
// Append the class name
_menu._host._contextualHostMain.className += " " + props.className;
}
// See if the menu is closed
if (_menu._host._container && _menu._host._container.classList.contains("is-open") == false) {
// Display the menu
_menu._hostTarget.click();
}
// See if the host exists and fabric class doesn't exist
if (_menu._host._contextualHost.classList.contains("fabric") == false) {
// Add the class
_menu._host._contextualHost.classList.add("fabric");
// Set the inner html manually, to remove any events associated with this menu
// The core framework doesn't work well w/ sub-menus.
_html = _html || _menu._host._contextualHost.innerHTML;
_menu._host._contextualHost.innerHTML = _html;
// See if the menu is not positioned
if (_menu._host._contextualHost.classList.contains("is-positioned") == false) {
// Clear the styling and ensure it's positioned
_menu._host._contextualHost.removeAttribute("style");
_menu._host._contextualHost.classList.add("is-positioned");
}
// Ensure the menu is being rendered under the target
_menu._host._contextualHost.style.left = _menu._hostTarget.getBoundingClientRect().left + "px";
_menu._host._contextualHost.style.top = _menu._hostTarget.getBoundingClientRect().bottom + "px";
// See if a sub-menu doesn't exists
if (!hasSubMenu) {
// Set the max height and scroll
_menu._host._contextualHost.style.maxHeight = "300px";
_menu._host._contextualHost.style.overflowY = "auto";
}
// Get the window and menu positions
var windowPos = document.body.getBoundingClientRect();
var menuPos = _menu._host._contextualHost.getBoundingClientRect();
// See if the menu is being rendered below the screen
if (windowPos.height < menuPos.bottom) {
// Scroll the menu into view
_menu._host._contextualHost.scrollIntoView(true);
}
// See if the menu is being rendered past the screen
var diff = menuPos.right - windowPos.right;
if (diff > 0) {
// Update the left position
_menu._host._contextualHost.style.left = (menuPos.left - diff) + "px";
}
}
}
// Set the click events
common_1.setClickEvents(_menu._host._contextualHost.querySelector(".ms-ContextualMenu"), props.items, function (ev, item) {
// See if a click event exists
if (props.onClick) {
// Call the click event
props.onClick(ev, item);
}
else {
// Close the menu by default
close();
}
});
});
// Return the contextual menu
return {
close: close,
get: get
};
};