Develop Reference

Summernote custom button pass context and data

I am using summernote in angular I want to create a custom button.
I would like to pass the listHit in customButton as parameter like this 'testBtn': this.customButton(context, listHit) but I am not sure how to do this since the function looks like this 'testBtn': this.customButton any help would be appreciated thank you.
My custom button looks something like this.
customButton(context) {
var listHit = ['One', 'Two', 'Tree'];
const ui = ($ as any).summernote.ui;
var i;
var listHitHtml = "";
for (i = 0; i < listHit.length; i++) {
listHitHtml += "<li>" + listHit[i] + "</li>";
}
var button = ui.buttonGroup([
ui.button({
className: 'dropdown-toggle',
contents: '<i class="fa fa-comments"/><span class="caret"></span>',
tooltip: '#erp_colombia.Lang.Resource.conAvailableComments',
data: {
toggle: 'dropdown'
}
}),
ui.dropdown({
className: 'drop-default summernote-list',
contents: "<div id=\"container-comentario\"><div id=\"dialog\" title=\"Comentarios\" ><h1 class=\"header-comentario\">" + 'Comment' + "</h1><ul id=\"liste-comentarios\"><ul>" + listHitHtml + "</ul></div></div>",
callback: function ($dropdown) {
$dropdown.find('li').each(function () {
$(this).click(function () {
context.invoke("editor.insertText", $(this).html() + "\n");
});
});
}
})
]);
return button.render(); // return button as jquery object
}
Here is my pdfmaker config
this.config = {
placeholder: placeholder,
shortcuts: false,
disableDragAndDrop: true,
//tabsize: 2,
hint: {
mentions: this.quoteCommentsForSummerNote,
match: /\b(\w{1,})$/,
search: function (keyword, callback) {
callback($.grep(this.mentions, function (item: any) {
return item.indexOf(keyword) == 0;
}));
},
content: function (item) {
return item;
}
},
height: 200,
toolbar: [
['myotherbutton', ['testBtn']],
],
buttons: {
'testBtn': this.customButton
}
}
And this is my angular html
Here you can fiddle with a example I created a list that we will assume comes from a service I would like to pass this list to customButton
listStringFromDbService = ['one', 'two', 'three'];
https://stackblitz.com/edit/angular-summernote-demo-gdvvbn?file=src%2Fapp%2Fapp.component.ts

I believe I figured this out.
You can change your button declaration to a function that returns a button function. That way you can pass data to it before constructing the function that Evernote binds to testBtn.
Change the function declaration (expression or declaration will work, like you pointed out)
function customButtonGenerator(arr) {
return function (context) {
const ui = $.summernote.ui;
const button = ui.button({
contents: '<i class="note-icon-magic"></i> Hello',
tooltip: 'Custom button',
container: '.note-editor',
className: 'note-btn',
click: function () {
context.invoke('editor.insertText', 'Hello from test btn!!! ' + arr);
},
});
return button.render();
};
};
then when you create the ui config you can generate the button function instead:
buttons: {
testBtn: customButtonGenerator(this.listStringFromDbService),
},
Here's an updated stackblitz showing a working example.

I have modified the answer of MPawlak like this in it there is a dropdown where you can click the items you want to add. Also I have the passing of parameter to the custom button that still works. Thanks to MPawlak
https://stackblitz.com/edit/angular-summernote-demo-yq8t4t

How to change the text dynamically from a customButton on FullCalendar?

I cannot figure out how to change the text of a customButton after it has been initialized. From the sample code below, the text is set to "custom!". But I want to change it dynamically? Is there a jQuery method call that I can achieve this?
$('#calendar').fullCalendar({
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});

You're almost there already. The docs say that when defining custom buttons, the click parameter is:
a callback function that is called when the button is clicked. Accepts a single argument, a jqueryEvent.
So just use it, for example:
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
$(this).text('Updated text!');
}
}
},
You'll probably want to pass in some dynamic data, maybe about the currently displayed month or week or whatever. For example (this is just an example, maybe you don't need anything like this):
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
var view = $('#calendar').fullCalendar('getView');
$(this).text('First visible day is ' + view.start.format('YYYY-MM-DD'));
}
}
},

In vanilla JS :
customButtons: {
showMore: {
text: moreHoursTranslation,
click: function (e) {
if (this.classList.contains("more-hours")) {
this.classList.remove("more-hours");
this.innerText = moreHoursTranslation;
this.closest(".fc").querySelector(".fc-view").style.height =
"200px";
this.closest(".fc").querySelector(".fc-view").style.overflow =
"auto";
return;
}
this.classList.add("more-hours");
this.innerText = lessHoursTranslation;
this.closest(".fc").querySelector(".fc-view").style.height = "auto";
this.closest(".fc").querySelector(".fc-view").style.overflow = "auto";
},
},
},

You can use following code to add button with event binding.
$('.fc-toolbar .fc-left').prepend(
$('<button type="button" class="fc-button fc-state-default fc-corner-left fc-corner-right">+ room</button>')
.on('click', function() {
var title = prompt('Room name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
})
);
Reference From Bellow Link.
Link

Duplicate id when creating a dialog in OpenUI5

I need help with OpenUI5. I created button in View and by clicking on button it creates Dialog window and throws an error so I cant proceed to functionality of the Dialog.
Button in view:
<m:Button text="{i18n>RESULTS_CHANCES_SEND_EMAIL}"
class="sapUiMediumMarginBegin results-button"
tap="sendToEmail"
press="sendToEmail"
icon="sap-icon://email">
Function in Controller:
sendToEmail: function() {
var email = new Dialog({
title: 'שליחת תוצאות לדוא"ל',
type: 'Message',
content: [
new Input('submitEmailInput', {
liveChange: function (oEvent) {
var sText = oEvent.getParameter('value');
var parent = oEvent.getSource().getParent();
parent.getBeginButton().setEnabled(sText.length > 0);
},
width: '100%',
placeholder: 'דואר אלקטרוני'
})
],
beginButton: new Button({
text: 'שליחה',
enabled: false,
icon: 'sap-icon://email',
press: function () {
//var sText = sap.ui.getCore().byId('submitEmailInput').getValue();
//MessageToast.show('Email is: ' + sText);
// here comes the API request
email.close();
}
}),
endButton: new Button({
text: 'סגירה',
icon: 'sap-icon://decline',
press: function () {
email.close();
}
}),
afterClose: function () {
email.destroy();
}
});
email.open();}
The error: duplicate id
Many thanks!

you have attached the same event handler to "tap" and "press" events so sendToEmail is being called twice (and the second time the control with the same ID already exists)... remove "tap" as this is depreciated, so you should end up with:
<m:Button text="{i18n>RESULTS_CHANCES_SEND_EMAIL}"
class="sapUiMediumMarginBegin results-button"
press="sendToEmail"
icon="sap-icon://email">

Unable to create a delete button in Meteor using reactive-table

I building a sortable table in Meteor with Reactive-Table and having trouble getting my delete button to work for removing entries from the table.
Please see my javascript code below:
Movies = new Meteor.Collection("movies");
if (Meteor.isClient) {
Template.body.events({
"submit .new-movie": function (event) {
var title = event.target.title.value;
var year = event.target.year.value;
var genre = event.target.genre.value;
Movies.insert({
title: title,
year: year,
genre: genre
});
event.target.title.value = "";
event.target.year.value = "";
event.target.genre.value = "0";
return false;
}
});
Template.moviestable.events({
"click .deletebtn": function (event) {
Movies.remove(this._id);
}
});
Template.moviestable.helpers({
movies : function () {
return Movies.find();
},
tableSettings : function () {
return {
showFilter: false,
fields: [
{ key: 'title', label: 'Movie Title' },
{ key: 'year', label: 'Release Year' },
{ key: 'genre', label: 'Genre' },
{ key: 'edit', label: 'Edit', fn: function () { return new Spacebars.SafeString('<button type="button" class="editbtn">Edit</button>') } },
{ key: 'delete', label: 'Delete', fn: function () { return new Spacebars.SafeString('<button type="button" class="deletebtn">Delete</button>') } }
]
}
}
});
}
Can anyone tell me what I'm doing wrong?

In the reactive tables docs, there's an example of how to delete rows from the table. Adapting the example in the docs for your needs, your event should look like this:
Template.moviestable.events({
'click .reactive-table tbody tr': function (event) {
event.preventDefault();
var objToDelete = this;
// checks if the actual clicked element has the class `deletebtn `
if (event.target.className == "deletebtn") {
Movies.remove(objToDelete._id)
}
}
});
The problem you are having is that you are trying to find the _id property on the button click instead of the row click.
If you do console.log(this) on your button click event (as you have it in your question above) you will get something like this Object {key: "delete", label: "", fieldId: "2", sortOrder: ReactiveVar, sortDirection: ReactiveVar} which does not contain the property _id
It is easier to register the row click, where the row object is the actual document you are trying to delete, and then check if the event's target has the delete class you added.

How to get Ext JS component from DOM element

Trying to create an inline edit form.
I have a form that looks like this:
var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/>";
var submitPic = "<img id='submitPic' src='https://s3.amazonaws.com/bzimages/submitPic.png' alt='edit' height='24' width='24'/>";
Ext.define('BM.view.test.Edit', {
extend: 'Ext.form.Panel',
alias: 'widget.test-edit',
layout: 'anchor',
title: 'Edit Test',
defaultType: 'displayfield',
items: [
{name: 'id', hidden: true},
{
name: 'name',
fieldLabel: 'Name',
afterSubTpl: editPic,
cls: 'editable'
},
{
name: 'nameEdit',
fieldLabel: 'Name',
xtype: 'textfield',
hidden: true,
cls: 'editMode',
allowBlank: false,
afterSubTpl: submitPic
}
]
});
The controller looks like this (a lot of events):
init: function() {
this.control({
'test-edit > displayfield': {
afterrender: this.showEditable
},
'test-edit': {
afterrender: this.formRendered
},
'test-edit > field[cls=editMode]': {
specialkey: this.editField,
blur: this.outOfFocus
}
});
},
outOfFocus: function(field, event) {
console.log('Lost focus');
this.revertToDisplayField(field);
},
revertToDisplayField: function(field) {
field.previousNode().show();
field.hide();
},
formRendered: function(form) {
Ext.get('submitPic').on('click', function (event, object) {
var field = Ext.get(object).parent().parent().parent().parent();
var cmp = Ext.ComponentQuery.query('test-edit > field[cls=editMode]');
});
},
editField: function(field, e) {
var value = field.value;
if (e.getKey() === e.ENTER) {
if (!field.allowBlank && Ext.isEmpty(value)){
console.log('Not permitted!');
} else {
var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord();
Ext.Ajax.request({
url: '../webapp/tests/update',
method:'Post',
params: {
id: record.getId(),
fieldName: field.name,
fieldValue: field.value
},
store: record.store,
success: function(response, t){
field.previousNode().setValue(value);
t.store.reload();
var text = response.responseText;
// process server response here
console.log('Update successful!');
}
});
}
this.revertToDisplayField(field);
} else if (e.getKey() === e.ESC) {
console.log('gave up');
this.revertToDisplayField(field);
}
},
showEditable: function(df) {
df.getEl().on("click", handleClick, this, df);
function handleClick(e, t, df){
e.preventDefault();
var editable = df.nextNode();
editable.setValue(df.getValue());
editable.show();
editable.focus();
df.hide();
}
},
I'm using the 'afterSubTpl' config to add the edit icon, and the accept icon.
I have listeners set up to listen on click events concerning them, but after they are clicked, I only have the element created by Ext.get('submitPic'). Now I want to have access to the the Ext field and form that surround it. The parent method only brings back other DOM elements. How do I connect between them? You can see what I tried in formRendered.
I hope someone can clarify this little bit for me.

Walk up the DOM tree until you find a component for the element's id:
getCmpFromEl = function(el) {
var body = Ext.getBody();
var cmp;
do {
cmp = Ext.getCmp(el.id);
el = el.parentNode;
} while (!cmp && el !== body);
return cmp;
}
Ext.Component.from(el) does exactly this since ExtJS 6.5.0, as I just learnt. Doc
Source

You can get the component by id, but only if your component and its dom element have the same id (they usually do):
Ext.getCmp(yourelement.id)
But this is not exactly good practice -- it would be better to set up your listeners so that the handler methods already have a reference to the component. For example, in your 'submitPic' component, you could define the click listener like this:
var me = this;
me.on({
click: function(arguments){
var cmp = me;
...
});