I would like to add 3 buttons(Hide/Remove/Settings) to the Legend:
Hide button should have onclick event to hide series/indicator,
Remove button should have onclick event to remove(not hide) series/indicator,
Settings button should have onclick event to show popup for edit settings of the series/indicator.
Code:
legend: {
enabled: true,
useHTML:true,
labelFormatter: function () {
return this.name + ' <button onclick="indicator_hide()">Hide</button>' + '<button onclick="indicator_remove()">Remove</button>' + '<button onclick="indicator_settings()">Settings</button>';
}
Code for button
function indicator_hide(){
if(chart.series[0].visible==true){
chart.series[0].visible=false
} else{
chart.series[0].visible=true
}
}
I created a chart, see the link below.
jsFiddle
https://jsfiddle.net/PaulJaker/7bLdjs4y/1/
It is easier to connect the click events with a series if you use load chart event to add event listeners. Then it is enough to call the right methods for a series.
chart: {
events: {
load: function() {
this.legend.allItems.forEach(item => {
const btns = item.legendItem.element.children;
btns[0].addEventListener('click', () => indicator_hide(item));
btns[1].addEventListener('click', () => indicator_remove(item));
btns[2].addEventListener('click', () => indicator_settings(item));
});
document.getElementById('popupClose').addEventListener('click', function() {
this.parentElement.style.visibility = "hidden";
});
}
}
},
legend: {
enabled: true,
useHTML: true,
labelFormatter: function() {
return this.name + ' <button>Toggle</button>' +
'<button>Remove</button>' +
'<button>Settings</button>';
}
}
Live demo: https://jsfiddle.net/BlackLabel/bu53n1sc/
API Reference: https://api.highcharts.com/highcharts/chart.events.load
Related
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
I have made a highcharts column chart in my react application, and am now trying to add an onClick event to the chart. My aim is that when the user click a column, I can obtain the values of the X and Y axis, and then call a function from the page.
The onClick event is achieved using plotoptions, as follows:
plotOptions={{
series: {
cursor: 'pointer',
point: {
events: {
click: () => {
this.fuction.call(this, 1);
}
}
}
}
}}
The problem with this is that I can call the function, but I cannot access the values of the column.
So, I try this:
plotOptions={{
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
console.log(this);
}
}
}
}
}}
This way, I can access the values on the column, through this but cannot call the function, as this does not hold the current page object.
My question is, how can I combine the two, so I can access the value of the selected column and call the function on the page?
I have tried this:
plotOptions={{
series: {
cursor: 'pointer',
point: {
events: {
click: function (e) {
console.log(this);
console.log(e);
}
}
}
}
}}
Which gives me the onClick event, and the column, but not the current page object.
I have also tried this:
plotOptions={{
column: {
cursor: 'pointer',
point: {
events: {
click: (e) => { console.log(this); console.log(e); }
}
}
}
}}
But this also does not give me what I need.
I am sure this is not very difficult, I just cannot find it, or the correct search term...
plotOptions={{
series: {
cursor: 'pointer',
point: {
events: {
click: (e) => { console.log(this); console.log(e.point.category); console.log(e.point.y); }
}
}
}
}}
Now this contains the current state of the page, and I can access the information from the column from e.point
Have you tried this ?
click: function(e) {
console.log(
e.yAxis[0].value, e.xAxis[0].value
)
}
You may find more infos following this link :
http://api.highcharts.com/highcharts/chart.events.click
In plotOption click event is like this
JS Bin demo
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
console.log('X: ' + this.x + ', Y: ' + this.y);
//call function passing this values as arguments
}
}
}
}
},
I am using qtip2 for displaying the alert messages for my web application ( as shown at http://craigsworks.com/projects/qtip2/demos/#dialogues )
my code is
1) for dialogue
function dialogue(content, title) {
/*
* Since the dialogue isn't really a tooltip as such, we'll use a dummy
* out-of-DOM element as our target instead of an actual element like document.body
*/
$('<div />').qtip(
{
content: {
text: content
, title: {
text: 'PMGSY ',
button: 'Close'
}
},
position: {
my: 'center', at: 'center', // Center it...
target: $(window) // ... in the window
},
show: {
ready: true, // Show it straight away
modal: {
on: true, // Make it modal (darken the rest of the page)...
blur: false, // ... but don't close the tooltip when clicked
escape: false
}
},
hide: false, // We'll hide it maunally so disable hide events
style: {
classes: 'qtip-shadow qtip-rounded qtip-dialogue', // Optional shadow...
widget: true //themeroller
},
events: {
// Hide the tooltip when any buttons in the dialogue are clicked
render: function (event, api) {
$('button', api.elements.content).click(api.hide);
},
// Destroy the tooltip once it's hidden as we no longer need it!
hide: function (event, api) { api.destroy(); }
}
});
}
2) to call it as alert
function Alert(message) {
// Content will consist of the message and an ok button
var message = $('<p />', { text: message }),
ok = $('<button />', { text: 'Ok', 'class': 'full' });
dialogue(message.add(ok), 'Alert!');
}
the problem is when i use it ,its does not block the further processing until user click on ok button (like default alert function).
e.g this alert does not even show up.
Alert("Customised alerts"); //this doesent show
window.location.replace("/Home/startPage");
how to make my custom alert mimic the default alert function ?
Please help
Replace
ok = $('<button />', { text: 'Ok', 'class': 'full' });
with
ok = $('<button />', { text: 'Ok', 'class': 'full' }).click(function(){
window.location.replace("/Home/startPage");
});
i am create simple app using sencha touch 2 + java script + html 5 which change / slide html pages automatically.
i write below code to slide html pages using DelayedTask task but the code is not working .
Main.js
Ext.create('Ext.Carousel', {
fullscreen: true,
xtype:'carousel',
cls:'carousel',
defaults: {
styleHtmlContent: true
},
config: {
ui : 'light',
},
listeners:
{
'afterrender': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (this.getActiveIndex() == this.items.length - 1) {
this.setActiveItem(0, 'slide');
}
else {
this.next();
}
this.pageTurner.delay(6000);
}, carousel);
carousel.pageTurner.delay(6000);
}
},
items: [
{
html : '<img src="resources/images/Picture1.png" width="100%" height = "100%" align="middle" /> <audio autoplay loop><source src="resources/audio/kalimba.mp3"></audio>',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture2.png" width="100%" height = "100%" margin=0 align="middle" /> ',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
},
{
html : '<img src="resources/images/Picture3.png" width="100%" height = "100%" margin=0 align="middle" />',
style: 'backgroundImage: url(resources/images/bg.png);backgroundRepeat: repeat;backgroundPosition: center'
}
]
});
i write this code to auto side but its not working please help me..
There are quite many errors in your code. Please try this, as I've tested, it works (changes are only made to listeners):
listeners:
{
'show': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (carousel.getActiveIndex() == carousel.items.length - 2) {
carousel.setActiveItem(0, 'slide');
}
else {
carousel.next();
}
}, carousel);
carousel.pageTurner.delay(1000);
},
'activeitemchange': function(carousel){
if (carousel.getActiveIndex() == 0) {
carousel.fireEvent('show',this);
} else
carousel.pageTurner.delay(1000);
},
},
Some explanation:
afterrender event is replaced by paint event in Sencha Touch 2. In this situation, you can also use show event.
to set delay time after each cardswitch, you need to listen to activeitemchange event
Hope it helps.
I know there already an accepted answer, but here is my implementation of this (for sencha touch v2.2)
Tapping or manually sliding the image will pause the slideshow. Tapping again will resume.
Make sure you apply this to xtype: 'carousel'
{
xtype: 'carousel',
//...your config stuff here...
carouselSlideDelay: 3500,
autoSlide: true,
listeners: {
initialize: function(carousel) {
if (this.autoSlide) {
carousel.isRunning = false;
this.start(carousel);
// Add tap event.
carousel.element.on('tap', function(e, el){
if (!carousel.isRunning) {
carousel.next();
this.start(carousel);
} else {
this.stop(carousel);
}
}, this);
// Add drag event.
carousel.element.on('dragstart', function(e, el){
this.stop(carousel);
}, this);
}
}
},
start: function(carousel, delay) {
// If already running.
if (carousel.isRunning) { return; }
// Allow for overriding the default delay value.
var delay = (delay !== undefined ? delay : this.carouselSlideDelay);
carousel.isRunning = true;
carousel.timerId = setInterval(function () {
carousel.next();
if (carousel.getActiveIndex() === carousel.getMaxItemIndex()) {
carousel.setActiveItem(0);
}
}, delay);
},
stop: function(carousel) {
clearInterval(carousel.timerId);
carousel.isRunning = false;
}
}
And this was loosely based off the Sencha Touch demo here.
After chrome 43 bug. Auto carousel is not working in my app. so i did some customization
direction: 'horizontal',
delay: 10000,
start: true,
indicator:false,
listeners:
{
activate: function(homeScreenCarousel) {
var me=this;
homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
if (me.getActiveIndex() == me.items.length-1) {
me.setActiveItem(0,'slide');
}
else {
me.setActiveItem(me.getActiveIndex()+1,'slide');
}
me.pageTurner.delay(8000);
}, homeScreenCarousel);
homeScreenCarousel.pageTurner.delay(8000);
},
activeitemchange:function(homeScreenCarousel){
var me=this;
homeScreenCarousel.pageTurner = new Ext.util.DelayedTask(function() {
if (me.getActiveIndex() == me.items.length - 1) {
me.setActiveItem(0, 'slide');
}
else {
me.setActiveItem(me.getActiveIndex()+1,'slide');
}
homeScreenCarousel.pageTurner.delay(8000);
}, homeScreenCarousel);
}
},
How to disable the delete button using if condition in Extjs for ex;i want to disable the button if it satifies the given if condition else remain enabled.
if(validAction(entityHash.get('entity.xyz'),actionHash.get('action.delete')))
This is the grid Delete button code.
Ext.reg("gridheaderbar-inActive", Ad.GridInActiveButton,{
xtype: 'tbspacer', width: 5
});
Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
//text: 'Delete',
cls: 'ad-img-button',
width:61,
height:40,
iconCls: 'ad-btn-icon',
icon: '/webapp/resources/images/btn_del.png',
handler:function(){
statusChange(this.parentBar.parentGrid, 'Delete')
}
});
create actioncolumn and make custom renderer:
{
xtype: 'actioncolumn',
width: 38,
renderer: function (val, metadata, record) {
this.items[0].icon = '${CONTEXT_PATH}/images/' + record.get('fileType') + '.png';
this.items[0].disabled = !record.get('isDownloadActionEnable');
this.items[1].disabled = !record.get('isDeleteActionEnable');
metadata.style = 'cursor: pointer;';
return val;
},
items: [
{
icon: '${CONTEXT_PATH}/images/pdf.png', // Use a URL in the icon config
tooltip: 'Download',
handler: function (grid, rowIndex, colIndex) {
//handle
}
},
{
icon: '${CONTEXT_PATH}/images/delete.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
handle
}
}
]
}
in this example You see additionally how to change dynamically icon.
One way to solve it is to attach a unique ID to your delete button and bind a listener to the selectionchange event of your SelectionModel, whenever the selection changes you can check whatever you want and enable/disable the button as you see fit.
ie.
Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
id: 'btnDelete',
cls: 'ad-img-button',
...
});
and in your selectionmodel do something like this :
var sm = new Ext.grid.CheckboxSelectionModel({
...
,listeners: {
'selectionchange' : {
fn: function(sm) {
if (sm.hasSelection()) {
var selected = sm.getSelected();
if (selected.get('field') == value) {
Ext.getCmp('btnDelete').disable();
}
else {
Ext.getCmp('btnDelete').enable();
}
}
}
,scope: this
}
}
});