Extend Tumult Hype with JavaScript: hypeDocument.extensions

Extension Project
25

↑ extension index

hypeDocument.cloneElement

This Extension allows you to clone elements and append them to the scene or within a Group.
You will specify the Element to clone, where to append the clone, it’s ID, Class Name, Top, Left and z-Index.
The clones HYPE_element_container class name, Child Nodes ID and HYPE_element classes are removed from the clones to avoid clashes with the Hype runtime.

/**
    * cloneElement, can be single Element or Group
    * @param {element} Hype Element to  clone
     * @param {element} Hype Element to append the clone
    * @param {String} The clone's id
    * @param {String} The clone's class name
    * @param {numnber} The clone's Top placement
    * @param {numnber} The clone's Left placement
    * @param {numnber} The clone's z-index
    * @return the specified element is cloned and appended to the specified element. The clones HYPE_element_container class name, Child Nodes ID and HYPE_element classes are removed from the clones to avoid clashes with the Hype runtime.
    */	  
    	hypeDocument.cloneElement = function(elementToClone,clonTo,elementID,elementClassName,elementTop,elementLeft,elementZIndex){
    	var elementClone =   elementToClone.cloneNode(true, true);
      
    	elementClone.id = elementID ;
    	elementClone.className = elementClassName;

    	elementClone.style.top = elementTop.toString() +'px';
    	elementClone.style.left = elementLeft.toString() +'px';
    	elementClone.style.zIndex = elementZIndex.toString();  
    		  
    	clonTo.appendChild(elementClone);
    	
    	
    	var clonedChildren = elementClone.childNodes

    for (i = 0; i < clonedChildren.length; i++) { 
     
    clonedChildren[i].classList.remove("HYPE_element_container");
     
      	var thisChild = clonedChildren[i].childNodes[0];
      	thisChild.classList.remove("HYPE_element");
     	thisChild.id  = "" ;

 } 
	
	return elementClone;
    	
    	
    	}

Usage:
You may have a form that you want to dynamically add elements to it’s list.

Constructor:
hypeDocument.cloneElement(original_to_clone,append_the_clone_To, id,className,top,left,z-index)

In Use:

if (!window.start_Top) { window.start_Top = 0 }; //-- This will be the space between the new clones and we will also use this number in the new ids.
    		
    		if ( window.start_Top < 200 ){ //-- Limit to 2 new clones
    		
    		window.start_Top +=100
    			
    		var original_to_clone  = hypeDocument.getElementById('infoBoxGroup'); 
     
     		/* We use the Scene element here to append the clones but we could use any Div/Group in the scene i.e  hypeDocument.getElementById('clonToFoo'); */
     		var append_the_clone_To = hypeDocument.currentSceneElement(); //-  @REQUIERS  currentSceneElement  Extension.

     //-- clone
    hypeDocument.cloneElement(original_to_clone,append_the_clone_To,'infoBoxGroupClone'+ window.start_Top,'infoBoxGroupClone',window.start_Top,0,2000)

     
    }

In this example we want a couple of clones so we also use the top’s number as an index to limit the cloning to two and also we use it in the new ids to keep them original.

Note: This example also uses currentSceneElement Extension.

Version update 1.1

Added a return of the clone element. You will now be able to add the returned clone element to a var or send it instructions.

clone Extension_Example_v1_MH.hype.zip (27.9 KB)

3 Likes