ContextMenu using Right Click button - javascript

I need to create a ContextMenu that will only show when you right click on a label. MenuManager is where I have the list of menu on my context menu and it is on another file so what I did is initialize the MenuManager.
.MyLayerEdit.Add is the Element I created. I'm not really sure if I did the right ContextMenu function, I just copied this from the other files.
//**initialization of class MyLayerEdit
var MyLayerManager = new MyLayerEdit();
var menuManager = MenuManager.MyLayerEdit.Add;
//***Creating a class 'MyLayerEdit'
var MyLayerEdit = Class.create(){
MyLayerEdit.prototype {
initialize : function () {
this.define();
},
//**Creating ContextMenu
var ContextMenu = Class.create()
ContextMenu.prototype(element, layerNo, layerName {
this.define(element, layerNo, layerName)
},
function MyLayer(){
this.conMenu = new ContextMenu(this);
this.conMenu.call(this.conMenu, menuManager);
//***errorhandler callback
var errorHandler = function(callback){
KKC.Error.checkError(msg, ex)
}
},
Now I don't know what the next thing to do to show the context menu. Anyone know how to create a simple context menu? Using right click button?
On my Specs, its says Create a Class
var MyLayerEdit = Class.create()
and then define is as:
var MyLayerManager = new MyLayerEdit()
before I initialize MyLayerEdit to the other file and call the error method where I did.
I made an element MyLayerEdit under MenuManager in the other file.
Next is to call the show method of context menu to display it, i need to create the context menu:
var ContextMenu = Class.create()

Related

onclick and eventListener for a dropdown menu not working

I have this Dropdown class in which I want to create new element that ,well you guessed it,works exactly like a drop down menu:
class Dropdown{
constructor(name,element,classNa){
this.classN = classNa;
var x = new CElement(name,"div",dropdownHeaderStyle,"classN");
x.display(element);
}
dropdown(mes){
var z = new CElement(mes,"div",dropDownStyle,this.classN);
z.display(".classN");
}
}
(I have another class CElement that creates elements, using this parameters:value,elementType,elementStyle,classPara = "",and appends it with display funcion, there is no problem with it tho)
the styling:
var dropDownStyle = "display:none;";
var show = "display:block;";
and the showFunction:
function showFunction(selector) {
document.querySelector(selector).classList.toggle("show");
}
The problem happens when I add this bad boy:
x.addEventListener('click',showFunction(".drpDown"));
or this:
x.onclick = showFunction(".drpDown");
It litteraly crashes,If I add that in the constructor, boom after that line nothing works...
The ridiculous thing about this is that I am using another addEventListener('click' ... and that works.What am I doing wrong?

How to wrap table generated by InsertTable command inside a div

I saw this code on one of the tutorials I have seen, but this one adds class to the table element.
var RadEditorCommandList = Telerik.Web.UI.Editor.CommandList;
var table = RadEditorCommandList["InsertTable"];
RadEditorCommandList["InsertTable"] = function (commandName, editor, args) {
table(commandName, editor, args);
var p = editor.getSelectedElement().parentNode.parentNode.parentNode;
p.classList.add("editor-table")
};
I was wondering how can I extend this command if I want to wrap the table inside a div, here's my failed attempt (it doesn't display a table on the editor anymore):
var table = Telerik.Web.UI.Editor.CommandList['InsertTable'];
Telerik.Web.UI.Editor.CommandList['InsertTable'] = function(
commandName,
editor,
args
) {
table(commandName, editor, args);
var wrapper = document.createElement('div');
wrapper.classList.add('table-wrapper');
var p = editor.getSelectedElement().parentNode.parentNode.parentNode;
wrapper.appendChild(p);
};
Use the OnClientPasteHtml client-event, where you will obtain the inserted table with the args.get_value() method, modify it to be in a div wrapper and paste it via args.set_value() method.
You can check an example at https://www.telerik.com/support/kb/aspnet-ajax/editor/details/inserting-new-tables-with-a-header-row-as-default

How to locate an SAPUI5 control in a control container and display it in topside part?

In the right side I want to locate the desired row and display it in topside part, Below is my code:
var oSplitterV = new sap.ui.commons.Splitter();
oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical);
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("HelpData.json","",false);
//below is the code for left part
var oLinkTemplate = new sap.ui.commons.Link({
text:"{name}",
press: oController.doPress
});
var oPanel = new sap.ui.commons.Panel({text:"Title"});
var oLayout = new sap.ui.layout.VerticalLayout({
content:{
path:"/document",
template:oLinkTemplate
}
});
oLayout.setModel(oModel);
oPanel.addContent(oLayout);
oSplitterV.addFirstPaneContent(oPanel);
//below is the code for right part
var oRowRepeater = new sap.ui.commons.RowRepeater({
numberOfRows:1000
});
oRowRepeater.setModel(oModel);
var oRowTemplate = new sap.ui.layout.VerticalLayout();
oRowTemplate.addContent(new sap.ui.commons.TextView({
text:"{name}",
}));
oRowTemplate.addContent(new sap.ui.commons.FormattedTextView({
htmlText:"{description}"
}));
oRowRepeater.bindRows("/document", oRowTemplate);
oSplitterV.addSecondPaneContent(oRowRepeater);
Please also see JSFiddle code here. In the doPress function I can get the name value of the Link which I clicked, but I don't know how to get the corresponding content and display it in the secondPaneContent's topside part(it's somehow like the anchor), please help me, thank you.
In your onPress event handler you can query the underlying binding to determine which element was selected.
Once you have this you can get a jQuery reference to the corresponding row in the RowRepeater, and use jQuery's scrolling capabilities:
press: function(e) {
var
// get the binding path so we can look
// up the corresponding RowRepeater row
sPath=e.oSource.getBindingContext().getPath(),
// parse out the binding path number
iPath=Number(sPath.match(/.*(\d)$/)[1]),
// get the px value of the top of the
// corresponding RowRepeater row using the binding path
iScrollTop=oRowRepeater.getRows()[iPath].$().offset().top;
// smoothly scroll to row
$('html, body').animate({
scrollTop: iScrollTop
}, 1000);
}
This probably needs some cleanup, but can provide a starting point:
https://jsfiddle.net/bjfrqstb/

Plugin being triggered by every instance of a class

I am working with jQuery and have built a small plugin.
jQuery(document).ready(function(){
jQuery('.section').Section();
});
jQuery.fn.Section = function(func, options){
if(typeof(func)==='undefined') func = 'new';
if(typeof(options)==='undefined') options = new Object();
//var settings = $.extend({}, options);
var DOM = jQuery(this);
var p = DOM.parent();
var collapsed = false;
var slide_area = DOM.find('.slide_area');
var toggle_btn = DOM.find('.toggle_btn');
return this.each( function() {
switch(func){
case 'new':
toggle_btn.on('click', function(){console.log('click');
if (collapsed){
slide_area.slideDown();
toggle_btn.text('-');
collapsed = false;
}else{
slide_area.slideUp();
toggle_btn.text('+');
collapsed = true;
}
});
break;
}
});
}
You can see, I am using a class selector to attach the Section plugin to all DIV's with the class 'section'.
In the Section plugin, there is a listener for a toggle button in the section.
The problem is that when I click on the toggle button, the event is fired 4 times.(There are 4 DIV's with a 'section' class.
I thought I had this plugin set-up correctly so it plays well with jQuery. I have looked around, but could not find what I've done incorrectly.
How can I change this so it does not trigger the click function once for each instance of a 'section' DIV?
Here is the HTML to help understand the structure:
<div class="section"><!-- paypal settings -->
<h3>Paypal Settings</h3>
<div class="section_controls">
<div class="toggle_btn">-</div>
<div class="hr" style="background-color: <?php echo $settings->secondary_color; ?>;"></div>
</div>
</div>
You're doing work outside your this.each(...) that should be inside it. For instance, your lines:
var slide_area = DOM.find('.slide_area');
var toggle_btn = DOM.find('.toggle_btn');
Those are outside the this.each(...) part of your plugin, and you've set DOM to (effectively) the set of elements your plugin was called on. That means that slide_area refers to all .slide_area elements in all of the sections you were called with, and that toggle_btn refers to all .toggle_btn elements in all of the sections you were called with. Later in your this.each(...), you hook up a handler using toggle_btn.on(...), and so you hook it up to all four toggle buttons four separate times.
At first glance, everything you're doing outside your this.each(...) should be inside it.
Just put your variables in the return this.each like this:
return this.each( function() {
var DOM = jQuery(this);
var p = DOM.parent();
var collapsed = false;
var slide_area = DOM.find('.slide_area');
var toggle_btn = DOM.find('.toggle_btn');
switch(func){
case 'new':
toggle_btn.on('click', function(){
console.log('click');
if (collapsed){
slide_area.slideDown();
toggle_btn.text('-');
collapsed = false;
}else{
slide_area.slideUp();
toggle_btn.text('+');
collapsed = true;
}
});
break;
}
});
}

Adding content to menu items

I've made some menus, but can't figure out how to set the actual page content for these menu items once clicked. Cheers.
function doGet() {
var app = UiApp.createApplication();
var menu = app.createMenuBar();
var handler = app.createServerHandler();
var menuUsers = menu.addItem('Users', handler).addSeparator().setId('users');
var menuPending = menu.addItem('Pending Submissions', handler).addSeparator().setId('pending');
app.add(menu);
return app;
}
In general, you would have some main panel that is your main display. Let's call it main-display".
The handler for each menu item executes a function when the menu item is clicked. This function can do anything (say, highlight some text, or pull up a toolbar, or save the file). It doesn't necessarily have to change the whole display. A menu bar is like the File menu or Edit or whatever you'd like.
You would have to define a ServerHandler that handles each different menu item being clicked.
function doGet() {
var app = UiApp.createApplication();
var menu = app.createMenuBar();
var handlerUsers = app.createServerHandler("showUsers");
var handlerPending = app.createServerHandler("showPending");
var menuUsers = menu.addItem('Users', handlerUsers).addSeparator().setId('users');
var menuPending = menu.addItem('Pending Submissions', handlerPending).addSeparator().setId('pending');
app.add(app.createVerticalPanel().add(menu).add(app.createSimplePanel().setId("main-display")));
return app;
}
Then have some functions
function showUsers() {
var app = UiApp.getActiveApplication();
var main = app.getElementById("main-display");
//do whatever you need to display your main panel
return app;
}
Similar function for showPending.
Instead, if you'd like a bunch of different content panels, look into using TabPanel. I feel like this is more of what you're looking for.

Categories