Identifying a Customized Built-In Element without an is= attribute - custom-element

In my Chessly.github.io project I use Customized Built-In IMG Elements to define SVG chesspieces:
Question: How can I distinguish a regular IMG from a customized IMG?
document.body.append(
document.createElement("IMG", {
is: "white-queen"
});
);
This creates a chesspiece, but does not set the is= attribute
I now explicitly set the is= attribute myself, but since this attribute does nothing and can be set to any value (I use is as an observed attribute in my Custom Element code) it is not a solid way to distinguish IMG elements from Customized IMG elements when walking the DOM.
If I promote a pawn (replace the img src)
<img is=white-pawn/>
with element.setAttribute("is","white-queen")
How can I determine the piece originally was the white pawn?
It still is a white-pawn in the Custom Elements registry.
Am I overlooking something?
Simplified code (with basic SVG shape) in JSFiddle: https://jsfiddle.net/dannye/k0va2j76/
Update: Code (based on correct answer below)
let isExtendedElement = x =>
Object.getPrototypeOf(x).__proto__.constructor.name !== 'HTMLElement';
note! This does NOT catch Autonomous Custom Elements!
maybe better:
let isBaseElement = x =>
Object.getPrototypeOf(Object.getPrototypeOf(x)).__proto__.constructor.name=='Element';

I think adding explicitly the is attribute is the best solution for now.
Else you'll have to deal with the class reference. In your case:
yourElement.constructor === customElements.get( 'circle-image' )
yourElement.constructor === CircleImage //if it's the named class
This supposes that you know the name of the custom elements you want to check.
Else you'll have to go through the protoype chain:
CircleImage --> HTMLImageElement --> HTMLElement --> Element --> Node
If HTMLElement is only the father, it's a built-in element.
If HTMLElement is the grandfather (or grand-grand...), it's probably an extended build-in element.
update
If you use a named class you can also retrieve its name:
elem.constructor.name

Related

Selenium webdriver: How to check an img element really have height attribute

in java Selenium web driver on chrome, I need to make sure that an image has a height attribute. The HTML code I have is this:
<img src="https://www.w3schools.com/tags/img_girl.jpg">
and I'm trying to execute
boolean s = driver.findElement(By.tagName("img")).getAttribute("height") !=null;
but this always returns true although there's no height attribute! and if I try to execute
String s = driver.findElement(By.tagName("img")).getAttribute("height");
I'll get 600 despite there is no height attribute in the HTML code. is there any other way I can check it?
Try this example:
#Test
public void testHeightAttribute(){
driver.get("https://webelement.click/en/welcome");
WebElement img = driver.findElement(By.xpath("//img[1]"));
System.out.println(img.findElements(By.xpath(".[#height]")).size());
System.out.println(img.findElements(By.xpath(".[#src]")).size());
}
I am not sure this is the most elegant way though :). The idea is that you're looking up elements using the element itself as a search context (looking up element within itself). If no attribute is present in DOM then the list would be empty (size() == 0). Otherwise it would be 1.
Basically the common method would look like:
public boolean hasAttributeInDom(WebElement element, String attr){
return !element.findElements(By.xpath(".[#" + attr + "]")).isEmpty();
}
You can check height parameter in styles section of Developer tools. Refer to attached screen shot of sample image from Stack overflow. You can see height parameter at right hand side. Generally, dimension are mentioned here.
You will need to understand and look for particular image property in Styles section as its display CSS properties for entire page.

I want JAWS to tell the user what kind of node they are in while navigating the dijit.Tree

We have a dijit.Tree that indicates a node type by using an icon. The icon is a unique indicator that tells the person this node is a "book" or a "DVD" or a "magazine" for example.
dijit renders the icon as a background image in CSS which we know screen readers do not see.
I tried overriding the getTooltip method to provide a tooltip saying "book" or "DVD". It successfully adds the "title" attribute to the "dijitTreeRow". If I mouse over the node, I see the text. This is not ever focused on when the user moves down to get from one node to the next.
When navigating the tree, the up and down arrows traverse the nodes. The span with the visible text is focused on and that string is read. You can see the dotted line focus as well as hear this with JAWS in the most basic of examples: https://dojotoolkit.org/reference-guide/1.10/dijit/Tree.html
What I have not been able to figure out is how to create an indicator that the screen reader will pick up on that will read "Book" alongside "The Great Gatsby".
Does anyone have any tips on how they made this dijit widget accessible for the screen reader when the images are an indicator that should be heard by the blind user?
The tree supports HTML labels, via setting the labelType property on the model you give it.
Assuming you don't want to change the store data (or override the getLabel method), you can reimplement dijit/Tree.getLabel and produce the HTML label, and wrap it with a span with an aria-label.
(code lifted from the dijit.Tree reference).
var myModel = new ObjectStoreModel({
store: myStore,
labelType: "html", // Hack to tell the tree node to render as HTML
query: {id: 'world'}
});
var tree = new Tree({
model: myModel,
getLabel: function(item) {
var label = this.model.getLabel(item);
// dojo.string
return dstring.substitute("<span aria-label='dvd ${0}'>${0}</span>", [label]);
}
});
If your data might contain HTML-ish characters that you don't want to render, escape the characters in getLabel too.

programmatic view transition in dojo mobile

I would like to perform a programmatic view transition.
Here is a code I've tried :
var v = registry.byId('myenergy-pane');
v.transitionTo("home-pane");
Here is another one
var v = registry.byId('myenergy-pane');
v.performTransition("home-pane",1,"slide",null);
None of them is working.
Thanks for your help.
The second code you provided should work, but that's considering the following facts:
The code is executed after the DOM is loaded and the views are parsed by the dojo/parser. The correct way to indicate that is by using dojo/ready, for example:
require(["dojo/ready"], function(ready) {
var v = registry.byId('myenergy-pane');
v.performTransition("home-pane", 1, "slide", null);
});
Both given IDs (myenergy-pane and home-pane) are related to a widget (not only a DOM node) and are both views (dojox/mobile/View or inheriting from).
Make sure you are loading dijit/registry and the registry module alias is actually mapped to the correct module.
I also made a JSFiddle to demonstrate that it should be working: http://jsfiddle.net/g00glen00b/3JMnC/

Difference between id and data-dojo-id

What is the difference between an id and a data-dojo-id in a dojo tag such as this:
<button id="save" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-event="onClick:save">Save</button>
I try to reference this button to change it's label with:
var myButton = dijit.byId("save");
so that I can change the button label
myButton.set("label", "Add New");
If I use id="save" it works. If I only use data-dojo-id="save" it doesn't work.
I'm fairly new to Dojo so an explanation or tutorial you can point me to would be much appreciated!
data-dojo-id assigns widget into global namespace, i.e. into window object:
<button data-dojo-id="save" data-dojo-type="dijit/form/Button">Save</button>​
so you can access the button directly:
save.set("label", "Add New");
See the difference in action at jsFiddle: http://jsfiddle.net/phusick/7yV56/
EDIT: To answer your questions. I do not use data-dojo-id at all. It pollutes global namespace which is the direct opposite of what the AMD does. Anyway, you can still use something like widgets.save and widgets.rename to minimize the pollution:
<button data-dojo-id="widgets.save" data-dojo-type="dijit/form/Button">Save</button>​
<button data-dojo-id="widgets.rename" data-dojo-type="dijit/form/Button">Rename</button>​
IMO, data-dojo-id is there for progressive enhancement, not for fully-fledged applications.
data-dojo-id just assigns an instance to a variable, so with multiple dijits with the same data-dojo-id the variable will point to the last one assigned (i.e. it'll not be an array).
You can avoid extensive use of registry.byId writing your method to obtain widgets according to your needs. The best way to start is dijit/registy.findWidgets(rootNode, skipNode). Please also note, that dojo/parser.parse(rootNode, options) returns an array of instantiated objects, or more precisely:
Returns a blended object that is an array of the instantiated objects,
but also can include a promise that is resolved with the instantiated
objects. This is done for backwards compatibility. If the parser
auto-requires modules, it will always behave in a promise fashion and
parser.parse().then(function(instances){...}) should be used.
An example of a method I use to assign ContentPane's dijits into its widgets property, which is an object:
_attachTemplateWidgets: function(widgets) {
widgets = widgets || this.getChildren();
for(var each = 0; each < widgets.length; each++) {
var widget = widgets[each];
var attachPoint = widget.params.dojoAttachPoint;
if(attachPoint) {
this.widget[attachPoint] = widget;
}
var children = widget.getChildren();
if(children.length > 0) {
this._attachTemplateWidgets(children);
}
}
}
I put the entire class here: https://gist.github.com/3754324. I use this app.ui._Pane instead of dijit/layout/ContentPane.

Dojo Dijit: Why does attr("required", true) fail to set the style "dijitRequired"? or Is there another class which indicates a Dijit is required?

As far as I can judge, the CSS-Rule "dijitRequired" is used to mark a required input field. Yet, this style is not set when I apply the "required"-Attribute to a dijit, for example, a date dijit:
The Dijit is built as follows:
<input dojoType="dijit.form.DateTextBox" class="l" id="datumsTestID" name="datumsTest" tabindex="5" value="2009-01-01" />
The Attribute is set with the following Javscript code
dijit.byId('datumsTestID').attr('required', true)
Am I doing something wrong or is the style "dijitRequired" not intended to be used as I assume?
For my purposes, I patched ValidationTextBox.js to set/unset the class, but is there a cleaner (meaning: more correct) way to set the class or can I style required fields using other attributes?
ValidationTextBox.js, Dojo 1.3, Line 116
_setRequiredAttr:function(_12){
this.required=_12;
if (_12) dojo.addClass(this.domNode, "dijitRequired");
else dojo.removeClass(this.domNode, "dijitRequired");
dijit.setWaiState(this.focusNode,"required",_12);
this._refreshState();
}
Hmm, I don't see that code in ValidationTextBox.js or anywhere else. My _setRequiredAttr() in 1.3 is:
_setRequiredAttr: function(/*Boolean*/ value){
this.required = value;
dijit.setWaiState(this.focusNode,"required", value);
this._refreshState();
}
Actually I don't see any references to dijitRequired at all, maybe that's something you added to your local copy?
Setting dijitRequired is not enough. dijit.form.DateTextBox has its own internal state. Even if required attribute is set, this widget display error only when it has been blurred. You can disable this mechanism using such subclass:
dojo.provide("my.DateTextBox");
dojo.require("dijit.form.DateTextBox");
dojo.declare("my.DateTextBox", dijit.form.DateTextBox, {
_setRequiredAttr: function(required){
this._hasBeenBlurred = true;
this.inherited(arguments);
}
});