Include css styles in symbol exports


(Mark Hunte) #1

So rather than me invent something first, does anyone have any existing tricks of getting styles in a project either in the Head or resource file to export with a Symbol.

( At the moment I include them in an element off scene which is picked up globally)


#2

use javascript to create a ‘style’ declaration in the head

var stylesheet = document.createElement('style');
stylesheet.innerHTML = "YOUR DECLARATIONS / RULES";
document.head.appendChild(stylesheet);

EDIT Don’t forget to think of cascade when doing this. Perhaps a lazy way is to add !important to the end of your decs. There is another way to add ‘rules’:

stylesheet.insertRule("rule", index)
// example
stylesheet.insertRule("header { background-color: green; }", 0)

(Mark Hunte) #3

Thanks, I will try that because if that works it makes them accessible.

I really would like one of the next Hype versions to include a check box option to what to include or not in a symbol export. Would make this type of kludging and that of including functions a whole lot easier.


(Mark Hunte) #4

Thanks. That works.


#5

The functions get exported too so when you import you get them so long as you include them in the symbol.


(Mark Hunte) #6

Cheers,

But you will find that functions only get exported if they are attached to an event action in the Symbol.

In some cases where I have functions that do not get called by an event action I found the easiest thing to do was place an action on a symbol timeline that calls the functions but place a pause action before they actually get called. This allowed me to not actually call them from the timeline but have them exported.

I have put in a request for a selection option for exporting symbols because of this.


#7

Can you give me a condition where you would use a function without an action call? for my own piece of mind


#8

Also one thing I just discovered (in 518) is that when you delete a symbol you’ve imported it leaves the functions behind. Then if you re-import it, it adds the same function in the resource box list. I’m assuming these won’t get exported in the final export. It’s just a reference? @Daniel @jonathan

Also depending on your function names could get messy? :smile:

EDIT nope I just changed one function and it wasn’t represented in the other duplicate. That could cause problems down the line :open_mouth:


(Mark Hunte) #9

A couple of reasons,

Where you do not want a function to load at symbol load.

I have some functions that if I put them in the symbol load they are triggered too early, even if I order them.
Therefore I only call the first function ‘config’ which then calls the others at the end of it’s run.

I also dynamically add click actions which their function do not need to be called at load or can be added to a mouse event in the Hype UI.


#10

ok I see.


(Mark Hunte) #11

The same goes if you import a symbol twice ( which I guess makes sense) but you end up with two sets of the functions.
You need to remember to import once and then copy and paste where needed.