I am trying to send Mouse Event to my Offscreen Tab and I received following error:
Error during experimental.offscreenTabs.sendMouseEvent:
Invalid or unexpected MouseEvent object
My Code:
chrome.experimental.offscreenTabs.sendMouseEvent(tab.id, {
"type": "click",
"altKey": false,
"ctrlKey": false,
"shiftKey": false
}, {
"x": 10,
"y": 10
}, function () {
console.log("Mouse Event Sent");
});
Any Suggestions?
You need to add a button key as well if you use a mouse event.
{
"type": "click",
"button": 1, // 0 = left, 1 = middle, 2 = right
"altKey": false,
"ctrlKey": false,
"shiftKey": false
}
Since the API is experimental, and the documentation is not quite complete, I looked in the source code:
chromium/src/chrome/browser/extensions/api/offscreen_tabs/offscreen_tabs_api.cc (implementation of the offscreenTabs API)
chromium/src/third_party/WebKit/Source/WebKit/chromium/public/WebInputEvent.h (for definitions of the "button" constants).
PS. I managed to get a Developer tools instance when I used button: 2. Quite useful for debugging interaction with an offscreen tab!
Related
I have the following chart:
And a script attached to the button:
function updateChart() {
const sheet = SpreadsheetApp.getActiveSheet()
const chart = sheet.getCharts()[0];
SpreadsheetApp.getUi().alert(String(chart.getOptions().get('title')));
SpreadsheetApp.getUi().alert(String(chart.getOptions().get('series.0.color')));
sheet.updateChart(chart.modify().build());
}
The first time I'm pressing this button it does nothing (as expected). The second time it resets line color to blue.
series.0.color is always null, although title is there, so I'm not even sure where to get that color to preserve it in between .modify() and .build() calls.
How do I prevent updateChart from resetting the color?
I've tried to inspect options in the published chart as suggested in comments (thanks #TheMaster), unfortunately it still doesn't help with the color issue.
The options are:
{
"hAxis": {
"title": "x"
},
"vAxes": {
"0": {
"title": "10x"
}
},
"series": {
"0": {
"color": "#008000"
}
},
"useFirstColumnAsDomain": true,
"width": 600,
"title": "10x vs \"x\"",
"height": 371
}
And I'm using the following code to get them:
function printOption(opts, name) {
console.log(`${name}: ${opts.get(name)}`)
}
function inspectChart(chart) {
const options = chart.getOptions();
printOption(options, 'title');
printOption(options, 'hAxis.title');
printOption(options, 'vAxes.0.title');
printOption(options, 'series.0.color');
}
Output is:
title: 10x vs "x"
hAxis.title: x
vAxes.0.title: 10x
series.0.color: null
As you can see all properties (including nested within array) are there except color
Another interesting point is that once you try to update the color:
sheet.updateChart(sheet.getCharts()[0].modify().setOption('series', {0: {color: 'green'}}).build());
It applies, but from now you're unable to read that property at all:
sheet.getCharts()[0].getOptions().get('series.0.color')
The line above fails with Unexpected error while getting the method or property get on object Charts.ChartOptions.
Also it looks like no matter what color I choose it is always #008000 in the published chart, which makes me think I should look for the color somewhere else, but I don't know where
Since the public 7.0 release of PrimeFaces includes ChartJs, I thought I'd give it a try.
It works fine, however so far I have not been able to properly display data with values changing over time in a line chart.
chart.js has cartesian time axes for this purpose, however in PrimeFaces , only CartesianLinearAxes is available.
Feeding date objects (instead of String labels) to ChartData simply results in no x-axis being drawn.
Am I missing something or did they just skip this functionality when including chart.js in Primefaces?
OK great questions.
First, PF knows they did not implement time yet but there is an open ticket: https://github.com/primefaces/primefaces/issues/4564
Second, have no fear you can use the Extender feature to make it work. Here is an example we used.
In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
In your XHTML add this JavaScript code function to match when you set in #1 Java bean.
function chartExtender() {
//copy the config options into a variable
var options = $.extend(true, {}, this.cfg.config);
options = {
//remove the legend
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
type: "time",
time: {
parser: 'h:mm:ss a',
tooltipFormat: 'h:mm:ss a',
unit: 'hour',
displayFormats: {
'hour': 'h:mm:ss a'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Your Y Axis',
fontSize: 13,
}
}]
}
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
You can see the different time formats available from ChartsJS using MomentJS.
Just a complement to do the extender works, use this.cfg.config.options = {...
for exemple:
function extName() {
this.cfg.config.options = {
legend: {
display: false
}
};
};
Using toastr to have my FCM popups come up on the screen. The notifications are of different kinds (success, info etc) - how would I target the specific element that I am currently firing?
This is my code:
// Handle incoming messages
messaging.onMessage(function(payload) {
console.log("Notification received: ", payload);
toastr["success"](payload.notification.body, payload.notification.title, {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": true,
"positionClass": "toast-top-left",
"preventDuplicates": false,
"showDuration": 30000,
"hideDuration": 1000,
"timeOut": 0,
"extendedTimeOut": 0,
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
});
});
Am I right in thinking you want to get the last toast generated?
If the toast still exists in the DOM then this will get the most recent generated toast that is still on screen
$('.toast').last();
I would like to create element that does something for ctrl+tap. How can I assign listener to it?
I have tried to use iron-a11y-keys-behavior https://elements.polymer-project.org/elements/iron-a11y-keys-behavior
and
keyBindings: {
'ctrl:tap': 'doSomething'
},
but it does not work.
Can I use somehow Polymer features like listeners or behaviors for it, or should I code it on my own using VanillaJS?
The only solution I have found is
listeners: {
'tap': '_elementTapped'
},
keyBindings: {
'ctrl+control:keydown': '_updatePressed',
'control:keyup': '_updatePressed'
},
_ctrlPressed: false,
_updatePressed: function(event) {
this._ctrlPressed = event.detail.ctrlKey;
},
_elementTapped: function(){
if(this._ctrlPressed){
this.doSomething();
}
}
For me it looks, like an overhead, as we have to add 2 more methods, 1 property and 1 listeners, comparing to 'ctrl:tap': 'doSomething'.
I would really appreciate cleaner solutions.
I'd like to throw up a T+C dialog when one clicks the submit button of a form. I'm using backbone.js. I can't work out whether I should be cramming the dialog within the FormView, or invoking the DialogView from within FormView or hooking it up with an event or something.
Ideally, my FormView Save() method would initialize it, with a Accept and Decline callback. My previous, none-Backbone implementation handed over all control to the dialog itself, which was a bit inelegant. Can anyone suggest anything?
edit: Thanks to Derick, here's where I'm at. Note however, that JqueryUI dialog appends itself at the end of 'body', and thus looses its context (it's not longer wrapped in the div it came from), so event binding isn't working.
save: ->
that = #
dlg = new TermsConditionsView({el: '#tcDialog'})
dlg.bind 'accepted', #tncAccepted, #
dlg.bind 'declined', #tncDeclined, #
$(dlg.render().el).dialog
draggable: false
resizable: false
width: 500
height: 600
modal: true
dialogClass: 'termsConditions'
buttons: [
{
id: 'acceptButton'
text: 'Accept'
click: -> that.tncAccepted()
}
{
id: 'declineButton'
text: 'Decline'
click: -> that.tncDeclined()
}
]
I'd have the FormView call a separate DialogView, and listen to an "accepted" and "declined" event, which the DialogView will trigger based on the user's action.
FormView = Backbone.View.extend({
events: {
"click #save": "save"
},
save: function(){
var dlg = new TnCView();
dlg.bind("accepted", this.tncAccepted, this);
dlg.bind("declined", this.tncDeclined, this);
$(dlg.render().el).dialog();
},
tncAccepted: function(){
// do whatever you need, when the user accepts the terms n conditions
},
tncDeclined: function(){
// do whatever you need, when the user declines the terms n conditions
}
});
TnCView = Backbone.View.extend({
events: {
"click #accept": "accept",
"click #decline": "decline"
},
accept: function(){
// close the dialog
this.trigger("accepted");
},
decline: function(){
// close the dialog
this.trigger("declined");
}
});
Note that I put the FormView in control of turning the Terms n Conditions into a dialog. it's my preference for the parent form to be in control of when / where a child form's 'el' is placed into the DOM / shown on the screen. this tends to keep the code cleaner and more flexible in the long run.