The following add-ons are supported till Vaadin 8. Are they compatible for Vaadin 14 or 23? If not, any alternative option available?
I have searched both Vaadin Directory and component factory, but cannot find anything similar to this.
May be naming is different, and I cannot find correct alternative.
https://vaadin.com/directory/component/switch
and
https://vaadin.com/directory/component/sizereporter
Thank you
The replacement for Switch add-on is the ToggleButton
https://vaadin.com/directory/component/togglebutton-for-flow
For getting actual size of the component you no longer need an add-on, but can use the JavaScript call with return value callback.
Button button = new Button("display width");
button.setWidth("45%");
button.addClickListener(event -> {
button.getElement()
.executeJs("return $0.clientWidth", button.getElement()).then( width -> {
Notification.show("Button width "+ width.asNumber());
});
});
add(button);
Related
I'm investigating adding custom functionality via my own plugins, and here's what I've done so far
Premise
Create a plugin which will disable the remove button for relevant items
Attempted so far
Registered a plugin and during DID_LOAD_ITEM tried the below
const removeItemButtons = el.querySelectorAll('.filepond--action-remove-item');
removeItemButtons.forEach(removeItemButton => {
removeItemButton.setAttribute("disabled", "disabled");
});
But the button is not disabled. The attribute does not appear on the remove button. Am I missing something in the lifecycle on how plugins interact with the DOM? The button does get returned by the querySelector all, is it modified after the plugin is called?
did the removeItemButtons have been rendered before your function? it seems like your selector did not get the items
I am able to built the desktop app in electronJS. I am trying to implement the functionality to disable the click event on window when there is no internet connectivity similar to the slack.I found the API to detect the internet in electron but not able to find the way to disable the click events.
You can disable all pointer events by adding the following rule to your page's CSS:
body {
pointer-events:none;
}
or via JavaScript:
document.body.style.pointerEvents = "none";
to re-enable:
body {
pointer-events:auto;
}
or
document.body.style.pointerEvents = "auto";
You can do this on more specific elements to gain more granular control.
You could add an invisible panel in front of everything and catch the clicks there.
Is there any way to access Angular2 specific component specific data in console, for debugging purpose?
Like Angular1 has capability to access its components value in console.
update 4.0.0
StackBlitz example
update RC.1
Plunker example In the browser console on the top-left (filter symbol) select plunkerPreviewTarget (or launch the demo app in its own window) then enter for example
Select a component in the DOM node and execute in the console
ng.probe($0);
or for IE - thanks to Kris Hollenbeck (see comments)
ng.probe(document.getElementById('myComponentId')).componentInstance
Alternative
Hint: enabling debug tools overrides ng.probe()
Enable debug tools like:
import {enableDebugTools} from '#angular/platform-browser';
bootstrap(App, []).then(appRef => enableDebugTools(appRef))
Use above Plunker example and in the console execute for example:
ng.profiler.appRef
ng.profiler.appRef._rootComponents[0].instance
ng.profiler.appRef._rootComponents[0].hostView.internalView
ng.profiler.appRef._rootComponents[0].hostView.internalView.viewChildren[0].viewChildren
I haven't found a way yet to investigate the Bar directive.
A better debug experience is provided by Augury which builds on this API
https://augury.angular.io/
https://www.youtube.com/watch?v=b1YV9vJKXEA
original (beta)
Here is a summary how to do that https://github.com/angular/angular/blob/master/TOOLS_JS.md (dead link and I haven't found a replacement).
Enabling debug tools
By default the debug tools are disabled. You can enable debug tools as follows:
import {enableDebugTools} from 'angular2/platform/browser';
bootstrap(Application).then((appRef) => {
enableDebugTools(appRef);
});
Using debug tools
In the browser open the developer console (Ctrl + Shift + j in Chrome). The top level object is called ng and contains more specific tools inside it.
Example:
ng.profiler.timeChangeDetection();
See also
Angular 2: How enable debugging in angular2 from browser console
First select the element using chrome 'inspect element' and run below method in chrome 'developer console'.
ng.probe($0).componentInstance
You could also use a css selector as shown below.
ng.probe($$('.image-picker')[0]).componentInstance
If you do it often, to make it little easier, have a global shortcut created as below. Now select any DOM element inside the component using 'inspect element' and invoke 'e()' from console
window['e'] = () => eval('ng.probe($0).componentInstance');
Using global scope variable.(any browser)
In ngOnInit() of component file
ngOnInit() {
window['test'] = this;
}
Now we can access instance of that component including services(imported on that component).
If you want to prevent accessing test for let's say production, you can conditionally give access to test like:
constructor(private _configService: ConfigService) {
}
ngOnInit() {
if(_configService.prod) {
window['test'] = this;
}
}
Here _configService means the instance of service used by all components and services.
So variable would be set like:
export class ConfigService {
prod = false;
}
I'm surprised that no one has mentioned Augury here, it's a Chrome plugin that gives you convenient access to all the information in your components, and also makes it easier to see that information in the console directly:
https://augury.rangle.io/
Angular 9+:
Select component root element in developer tools (Inspector), then type in console:
ng.getComponent($0);
I have a phonegap app that uses jqm that works fine in android and ios.
Porting to WP7 i have an issue with the history, specifically history.back() (but also .go(-1) etc). This refers to going back in history where the previous 'page' was in the same physical html file, just a different data-role=page div.
using a jwm site in a regular browser is fine (with separate 'pages' in the same html file). Also, using history.back() when we go from one html file to another in the app is fine. It's the specific combination of WP7.5, jqm and PG.
Has anyone come across a solution for this? it's driving me crazy, and has been as issue since PG 1.4.1 and jwm 1.0.
EDIT 1: It's possible that the phonegap process of initialising the webview on WP7.5 somehow overrides the jqm history overrides, after they've loaded.
EDIT 2: definitely something to do with jqm not being able to modify the history. each time there is a 'page' change, history.length is still 0.
EDIT 3: When i inspect the 'history' object, i found there is no function for replaceState or pushState - i know jqm uses this for history nav, maybe that's the problem.
ok - this isn't perfect, but here's a solution (read: hack) that works for me. It only works for page hash changes, not actual url changes (but you could add a regex check for that). Put this somewhere in the code that runs on ondeviceready:
if (device.platform == 'WinCE') {
window.history.back = function () {
var p = $.mobile.urlHistory.getPrev();
if (p) {
$.mobile.changePage("#" + p.pageUrl, { reverse: true });
$.mobile.urlHistory.stack.splice(-2, 2);
$.mobile.urlHistory.activeIndex -= 2;
}
}
}
I have the Drupal Quicktabs module installed at:
http://ar.sacherokeedev.com/auction-directory
I've also installed the wibiya toolbar, http://www.wibiya.com.
Everything works fine in Firefox and Chrome, but in IE7, with the toolbar enabled, it breaks the ajax tab loading. With the toolbar disabled, IE7 works fine. Wibya has a "Javascript Conflict" mode, and I've tried that as well as changing my DocType, as they suggest.
I've narrowed it down to a couple of things. First, quicktabs behavior is based on the "type" of the tab:
if (tab.tabObj.type != 'view') {
// construct the ajax path to retrieve the content, depending on type
var qtAjaxPath = Drupal.settings.basePath + 'quicktabs/ajax/' + tab.tabObj.type + '/';
switch (tab.tabObj.type) {
case 'node':
qtAjaxPath += tab.tabObj.nid + '/' + tab.tabObj.teaser + '/' + tab.tabObj.hide_title;
break;
case 'block':
qtAjaxPath += tab.qtid + '/' + tab.tabObj.bid + '/' + tab.tabObj.hide_title;
break;
case 'qtabs':
qtAjaxPath += tab.tabObj.qtid;
break;
}
In my case, when using the toolbar in IE, tab.tabObj.type is "undefined". So, I'm thinking that wibiya is hijacking my objects or something.
I also get a runtime error, "Object does not support this property or method" in the following block:
if (!Drupal.quicktabs.scripts[files[i]] && !files[i].match(/^\/misc\/jquery\.js.*$/)) {
Drupal.quicktabs.scripts[files[i]] = files[i];
html += '<script type="text/javascript" src="' + files[i] + '"></script>';
}
Has anyone seen this before, or have any suggestions?
Update: I did console.log(tab.tabObj) and in Firefox and Chrome, I get something that makes sense, an Object with a block id, a type, etc... But in i.e. I get this:
function(fn,thisObj){var scope=thisObj|window;for(vari=0,len=this.length;i<len;++i){fn.call(scope,this[i],i,this);}}
Anyone have any ideas?
UPDATE: I am currently using the Drupal specific wibya module, and the toolbar itself works fine on my site whether one is using IE, Firefox or Chrome. The issue is that the ajax tabs on that page are prevented from functioning by the wibiya toolbar. I'm inclined to agree with #clive that it's a jQuery/javascript conflict, but I'm not sure what I can do about it.
As for running Drupal 6, I inherited the system, and as of now, can't upgrade.
UPDATE: I just tried loading jQuery 1.4 using the instructions at http://drupal.org/node/1058168. That caused IE to work properly, but now Chrome and Firefox don't like it.
UPDATE: This is a conflict between jQuery 1.3 which runs on Drupal 6 and the Wibiya toolbar which uses at least 1.4. I'm accepting #clive's answer, mainly because he's right about the fact that this is just something that I'm going to have to live with if I have to keep using Drupal 6.
My best guess would be that you're using Drupal 6 which ships with jQuery 1.2.6 (or 1.3.2 with the jQuery update module. The Wibiya baar conversely uses jQuery 1.4.2 upwards.
According to a page on the Wibiya support forums (which I'm sure you've already seen):
if page loads another version of jQuery like 1.2.6 or 1.3.2 previously, Wibiya bar's loading of its own jQ 1.4.2 does not work. No bars, nothing.
But if you load your own jQ 1.4.2 in the first place, then your bar works, despite all other Drupal functions suck like polls, votes, hierarchical select tags, nice menus, some collapsibles, etc.
There a lots of these types of problems with Drupal which is why the community comes up with workarounds and solutions: The Drupal specific Wibiya module will probably save you a lot of headaches.
UPDATE
There's a JS error on your site:
Unsafe JavaScript attempt to access frame with URL http://ar.sacherokeedev.com/auction-directory from frame with URL http://ad.doubleclick.net/adi/N1727.autoremarketing.com/B5111890.6;sz=728x90;click=http://adclick.g.doubleclick.net/aclk?sa=L&ai=B6dLCjz5qTqvUGIfN0AXN67WqBa-C-usBAAAAEAEg7ZqAFjgAWK_Q_80gYLu2moPQCrIBFGFyLnNhY2hlcm9rZWVkZXYuY29tugEJZ2ZwX2ltYWdlyAEJ2gEtaHR0cDovL2FyLnNhY2hlcm9rZWVkZXYuY29tL2F1Y3Rpb24tZGlyZWN0b3J5mAKgjQbAAgLgAgDqAhNBUl9Ib21lX0xlYWRlcmJvYXJk-ALw0R6QA4wGmAPgA6gDAeAEAaAGFg&num=0&sig=AOD64_1Xi82LSwUc1kKF0RL_orTztOMfxg&client=ca-pub-2649455708539916&adurl=;ord=1670303729?. Domains, protocols and ports must match.
Is it possible that unsafe frame attempt is stopping IE7 from processing the rest of the JS, thereby making your tabs not work?