I am using a kendo editor and I have a select event
function onselect(e) {
var editor = e.sender;
var selection = editor.getSelection();
var selectedNode = selection.anchorNode;
var targetelement = $(selectedNode).closest("[contenteditable='false']");
}
Problem is when I click a single character then I am not getting the correct selected node and when I click any text(more than one character) I am getting proper selected node.
Related
I have one SplitApp with Master -Detail layout. I would like to know how can I set the first item in Master view to default so that on loading of application Detail view shows the information about the select list item. So when user open the application automatically first item in Master should be selected and Detail View show the information.
I am using Objectlist Item as control for Master view. And currently using the select event for selecting the list item.
var oList = new sap.m.List("idMasterList",{
mode: sap.m.ListMode.SingleSelect,
select: [oController.onSelectItem, oController]
});
onSelectItem: function(oEvent){
//var app = sap.ui.getCore().byId("splitApp");
var oMasterList = sap.ui.getCore().byId("idMasterList");
var oSelItem = oMasterList.getSelectedItem();
var sPath = oSelItem.oBindingContexts.druginfo.sPath;
var oItem = sap.ui.getCore().getModel("druginfo").getProperty(sPath);
var oSelModel = new sap.ui.model.json.JSONModel(oItem) ;
sap.ui.getCore().setModel(oSelModel, "SelectedItem");
}
Regards,
Mayank
It seems like there is (hidden) API to make the select event fire when setting the selected item:
ListBase.prototype.setSelectedItem = function(oListItem, bSelect, bFireEvent) {
if (this.indexOfItem(oListItem) < 0) {
jQuery.sap.log.warning("setSelectedItem is called without valid ListItem parameter on " + this);
return;
}
if (this._bSelectionMode) {
oListItem.setSelected((bSelect === undefined) ? true : !!bSelect);
bFireEvent && this._fireSelectionChangeEvent([oListItem]);
}
};
You could use setSelectedItem once your lists data is loaded (e.g. change event of aggregation binding items) like this:
var oList = this.getView().byId("MyListID"),
oFirstItem = oList.getItems()[0];
oList.setSelectedItem(oFirstItem, true, true);
This will trigger the selectionChange resp. select event and your already existing event listener will be triggered.
I have dropdown options where options populate dynamically, I have a multifield,checkbox,dropdown. When i click on the checkbox[event on selectionchanged] its fetch the items count from multifield and display options.
var select2opts = [];
var dialog = this.findParentByType('dialog');
var panel1 = this.findParentByType('panel');
var dropdown = panel1.getComponent("dropdown1");
var button = panel1.getComponent("button1");
var customfield = panel1.getComponent("customfield");
for (var i = 1; i <= customfield.items.getCount()-1 ; i++) {
select2opts.push({value: i, text:"Tab "+i});
}
dropdown.setOptions(select2opts);
dropdown.show();
But Rather than checkbox, i want some image to be place there like refresh & on click this function will get call. Which type of widget and event i can use for that.
Thanks
You can use the button xtype. It has a icon property that takes url of the image to be used. Set your function as the value of handler property. The handler function gets called every time the button is clicked. button and event objects are passed to the handler function. The button object can be used to get reference to the dialog object.
Reference : http://dev.day.com/docs/en/cq/current/widgets-api/output/CQ.Ext.Button.html
I'm looking for simple code that adds a popup in my Google Apps Script Ui that comes up when I hit a submit button. The popup box would display a message and have a button to close the popup.
I've looked all over the place - everything seems so complicated and does way more than I need it to do.
This is the current code I have for the submit button.
function doGet() {
var app = UiApp.createApplication();
app.setTitle("My Logbook");
var hPanel_01 = app.createHorizontalPanel();
var vPanel_01 = app.createVerticalPanel();
var vPanel_02 = app.createVerticalPanel();
var vPanel_03 = app.createVerticalPanel();
var submitButton = app.createButton("Submit");
//Create click handler
var clickHandler = app.createServerHandler("submitData");
submitButton.addClickHandler(clickHandler);
clickHandler.addCallbackElement(hPanel_01);
////Test PopUp Panel
var app = UiApp.getActiveApplication();
var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
submitButton.addClickHandler(closeHandler);
var button= app.createButton('Close').addClickHandler(closeHandler);
dialog.add(button);
app.add(dialog);
//////
return app;
}
Since UiApp is depreciated, HTMLService should be used to create custom user interfaces.
To prompt simple popup to display a message, use alert method of Ui class
var ui = DocumentApp.getUi();
ui.alert('Hello world');
will prompt simple popup with hello world and an ok button.
To display customized html template in Dialog, use HTMLService to create template and then pass it to showModalDialog method of Ui Class
var html = HtmlService.createHtmlOutput("<div>Hello world</div>").setSandboxMode(HtmlService.SandboxMode.IFRAME);
DocumentApp.getUi().showModalDialog(html, "My Dialog");
HtmlService.createHtmlOutputFromFile allows you to display html that is in a separate file. see the documentation
Have you tried using zIndex? It places the panel above all of your other panels...
var popupPanel = app.createVerticalPanel().setId('popupPanel')
.setVisible(false)
.setStyleAttribute('left', x)
.setStyleAttribute('top', y)
.setStyleAttribute('zIndex', '1')
.setStyleAttribute('position', 'fixed');
x = panel position from the left portion of your app
y = panel position from the top portion of your app
zIndex = the 'layer' your panel will appear on. You can stack panels using '1', '2', '3' etc.
position = your panel will be in a fixed position denoted by (x,y)
Visibility is set to false until you click submit, then have a client handler for your submit button make the popupPanel visible. When you click the button on your popupPanel, have the client handler set visibility to false once again and it will disappear.
One more thing, I noticed you get the active app and then create a new app. You do not need to create a new app...just new panels inside your app.
Hope this helps!
You can use a dialogbox to popup.
Add a button to the dialog-box. Add a client handler that sets the dialog box invisible,once you click the button.
var app = UiApp.createApplication;
var dialog = app.createDialogBox();
var closeHandler = app.createClientHandler().forTargets(dialog).setVisible(false);
var button= app.createButton('Close').addClickHandler(closeHandler);
dialog.add(button);
app.add(dialog);
This should help.
EDIT
Added "()" after .createClientHandler. That should remove issues related to TypeError: Cannot find function createDialogBox in object function createApplication() {/* */}
Popup - use something like this:
var table = app.createFlexTable();
table.setStyleAttribute("position", "absolute");
table.setStyleAttribute("background", "white");
add items to the table and hide and show as needed.
I would like to add onDblClick event to codemirror 2. I found that onCursorActivity does not deliverer the event so there is no way for me from this method to filter the events.
How can I implement onDbClick event on Codemirror ?
Thanks in advance.
You can call on method on object returned by CodeMirror:
var cm = CodeMirror.fromTextArea(document.querySelector('textarea'));
cm.on('dblclick', function() {
alert('You double click the editor');
});
You can find the list of all available events in documentation.
Register a handler on the element returned by the getWrapperElement() method. Unless you want to not just detect double-clicks, but also prevent the default (select word under mouse cursor) from occurring... in that case I guess some modification of the core code is needed.
http://jsfiddle.net/yusafkhaliq/NZF53/1/
Since codemirror renders inside the element specified you can add an ondblclick event to the element, like below the highlighter renders without line numbers once double clicked that specific elements will display line numbers
var codeelems = document.getElementsByClassName("code");
for (i = 0; i < codeelems.length; i++) {
(function ($this) {
var value = $this.innerHTML;
$this.innerHTML = "";
var editor = CodeMirror($this, {
value: value,
mode: "text/javascript",
lineNumbers: false
});
$this.ondblclick = function () {
editor.setOption("lineNumbers", true);
}
})(codeelems[i]);
}
I want to check the node of the selected text. If it is span, another function will edit the classes applied to it. If it is same as the parent node, then the code will wrap the selection in span and set its styles. The problem here I'm facing is, how to determine, if user has selected the whole text inside the editor or only some text. If user selects the whole text, I want to apply the styles to the parent node instead of adding a new span and styles to it. Below is my code -
var ed=tinyMCE.getInstanceById('textAreaId');
var sel = ed.selection.getContent();
if(trim(sel)!="") {
//get the node of the selection
var thisNode=tinyMCE.activeEditor.selection.getStart().nodeName;
ed_Property=propertyName;
ed_PropertyVal=propertyValue;
//get the root node inside editor
var parentNode=tinyMCE.activeEditor.getBody().firstChild.nodeName;
if(thisNode=="SPAN") {
nodeclass=$(tinyMCE.activeEditor.selection.getNode()).attr('class');
//edit span properties
editSpanProperties(nodeclass,propertyName,propertyValue);
}
else if(thisNode==parentNode) {
var elmType="span";
var Spanid1=createSpanId(targetToStyle,elmType);
Spanid=targetToStyle+"_"+elmType+"_"+Spanid1;
var strStyle=ed_Property+":"+ed_PropertyVal;
//wrap selection in a span
sel = "<span id='"+Spanid+"' style='"+strStyle+"'>" + sel + "</span>";
//set content
ed.selection.setContent(sel);
//retain the selection
ed.selection.select(ed.dom.select('#'+Spanid)[0],false);
}
else {
//here I need to check if user has selected whole text and set properties
setStylesOnEditor(templateSection,propertyName,propertyValue);
}//if ends
}
else if(trim(sel)=="") {
alert('No text selected');
}
how to determine, if user has selected
the whole text inside the editor or
only some text.
You need to compare the selected text with the editors content:
var content_editor = $(ed.getBody()).text();
var content_selection = ed.selection.getContent({format : 'text'});
// now compare both either characterwise or as whole string,
// you might need to strip whitespace characters from the strings!
// and do what you want to do in each case