Combining multiple Hype docs

1

We had previously created 3 different hype projects - each with similar elements / menus / navigations etc. So for each project there were multiple items that had the same unique IDs.

We now want to combine the 3 projects together but because of the same unique IDs, it’s not straightforward. I tried converting each into a persistent symbol and then combining the symbols into 1 document but that doesn’t help either.

Any wisdom on how we might be able to combine without having to rename a bunch of unique IDs / scripts?

2

It may be possible to help but without any examples of your 3 documents it would be a shot in the dark…

3

To @MarkHunte point, its rather complicated to understand what you want to achieve without an example or perhaps an explanation of what you want achieve, and since there are a few ways to going about accomplishing projects within Hype its crucial you provide more details about the general concept.

4

Sure @petester @MarkHunte. See attached example files. In the folder you’ll see the 3 hype projects labeled Project 1, 2, 3. Each works fine. But when combined in the “Combined” file as a separate scene each, it doesn’t.

I know why - because there are common unique IDs across all 3.

My question really is, is there an easy way around this, to easily combine projects that may have common unique IDs ?

Combining Hype files.zip (199.7 KB)

5

Looks like your missing the jquery for the HTML HEAD in 3 Scenes?

6

@petester oops - yes fixed that. but only the first scene works - the other don’t.

7

Combining Hype files.zip (231.5 KB)

8

Im guessing the interaction is, once you clicked on all three in scene 1 it should go the next scene automatically?

9

Looks like your duplicating symbols rather creating new ones from a duplicate what you need to do if I’m getting this correctly make new duplicate via Menu vs just Duplicate.

Also you’ll need to Id Box in different scenes - For Scene 2 - 4,5,6, Scene 3 - 7,8,9 and create new actions as you did similar like in scene 1? Thats just manual way, but probably your asking if you can change them on the fly without having Id them in 2 other scenes.

10

There isn't an automated way to handle unique ID collisions, so you'll need to adjust your element IDs and the JavaScript that references them.

11

I think the simplest thing to do is give all your clashing elements a class name that matches it’s current id.

Then in your javascript

Add code that gets either the current scene or symbol.

In the head file

 <script type="text/javascript"> function myCallback(hypeDocument, element, event){ 
 
   		hypeDocument.currentSceneElement = function(){
return document.querySelector('#'+this.documentId()+' > .HYPE_scene[style*="block"]');
}
  
  } 

if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}


window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>

in you hideBox1()

 var  theScene = hypeDocument.currentSceneElement();
var Box1_ = theScene.querySelector('.Box1')
$(Box1_).hide();

I think doing this give you the least amount of change to elements and code.

As far as I can see, Hype does not actually propagate the clash of ids at runtime. It maintains unique ids by not honouring the duplicate id and instead uses it’s own generated one on any elements that would have a clashing id.

So I do not think you even need to change them… just do the above.

3 Likes
12

You can batch rename the IDs for each project.
Example:
ID ballRolling <-current ID
ID ballRollingpone <-Batch remained ID

Add new characters to the end or start of ID

13

Can you explain what you mean in relation to this question?

In hype when you can select a batch of elements at the same time and then try to change the id on all of them (All still selected). Hype will prompt you to either keep what you have done or give them all unique ids.
If you choose unique ids then if you for instance used a single id like ball then it will generate new ids as

ball-1
ball-2
ball-3

and so on. But this will not work for this question as the example file is given. You cannot select all the elements at one time. They are in different scenes and inside symbols.

You could use it if the elements were outside of symbols and first placed on a single scene. set the batch ids and the move to new scenes.

But you would then have to tailor your code to these changes. and this seems to me more messing around than what i proposed above…

14

Batch rename the code.

Copy all the code in one project and paste it to a blank textEditor.

Batch rename the all ID’s which must be changed.

Once all ID’s have been changed, copy the changed code and replace the code in the project with the edited code.

**Warning: Backup Projects or code before making changed

15

Batch rename the code.

Copy all the code in one project and paste it to a blank textEditor.

Batch rename the all ID’s which must be changed.

Once all ID’s have been changed, copy the changed code and replace the code in the project with the edited code.

Warning: Backup Projects or code before making changed

16

That makes no sense!!?.

17

Never mond