Dot syntax naming convention generator

I am using hype as a tool that the designer I work with can tweak animations and then I can add interactivity around that. As I mentioned in my last post I have run into some issues with the new rollout, and I thought I would share a structured unique ID generator that I had ben playing with a few weeks back.

I come from a flash background and one could grab elements by a dot syntax naming structure level1.level2.level3, each of these being nested movie clips. The names were similar for the internal elements with the top level defining the unique name.

I have build an OOP structure that sits upon the existing HYPE, but allows for generic targeting of objects. This way one could say have several versions of level one with unique names but they all have a similar targetable Level 2 and Level 3.

My solution walks backwards up the DOM chain skipping the containers to see the elements named within the elements. Once it gets to the top it walks back down the chain to rename all the IDs in a logical manner.

I am using classes to give the generic names, and building the unique IDS based off that.

/**
* rename
* @description Renames the ID of a hype element
* @param {Object} element - the element to be renamed 
* @return null
*/
rename:function(element){
	var nameList = new Array();
	var newID = this.findTopLevelParent(element,nameList);
	if(newID.length > 0){
		element.id = newID.join(".")+"."+element.classList[1];
	}else{
		element.id = element.classList[1];
	}

	//console.log(element);

},

/**
* getWrappedParent
* @description Because hype wraps the elements in a container, this steps up 2 levels to get the next element, not container
* @param {Object} target - the element to find the next level up element for 
* @return null
*/
getWrappedParent:function(target){
	return target.parentElement.parentElement;
},


/**
* findTopLevelParent
* @description Recursively steps backwards up the Dom to find the top level parent. It constructs the name for the 
* @param {Object} target - the element to find the next level up element for 
* @param {Array} nameList - an array to store the names of the containers up the list. Names are built this way
* @return null
*/
findTopLevelParent:function(target, nameList){
	var compare = this.getWrappedParent(target);
	var parentName = compare.classList[1];
	if(parentName == null){
		return nameList;
	}
	nameList.unshift(parentName);
	return this.findTopLevelParent(compare, nameList);

}

inside of a hype function on load one calls this:

var renamed = new UniqueIdGenerator();
	
renamed.rename(element);

then a log trace yields this:

level1a
 level1a.level2
level1a.level2.level3
level1b
level1b.level2
level1b.level2.level3

enjoy.

3 Likes

Very interesting! But doesn’t changing the ID interfere with Hype animations? Hype specifically keeps a table mapping DOM IDs it created to its internal representation.

Nope, works like a charm.

Shit, just tested, you are so right. have a workaround now.

Used this same feature of the DOM in another way, to store the currentTimeline – you can write any attribute you want to it, so I am using the DOM as any other object for storage. I have my own id called myID which I tie into my Hype_Controller.

Makes sense and that should be fully compatible.

On a side note, I was doing some reading the other day about custom HTML5 attributes. It seems the formal/correct way is to include a prefix of data- before the attribute name. This method unlocks some other features accessible from JS/CSS.

Rad. Good to know!