Use a Project for Element and Javascript Library


(Mark Hunte) #1

I am not sure how well this will work or if there is a better way. But so far it is helping me.

I often want to copy an element or javascript that I created or wrote at some point but for the life of me cannot remember what project it was in

So I have started a Library project which I can add each element or javascript to.

For example I have a load of form fields I made.

So in the Library I have a scene named Forms which I can add any form I want to copy and past to another project.
The same with Shapes and so on… Each scene is for a type of element.

I can also add any text along side the element explaining any special setup i.e if it needs a particular javascript.
I also make sure the display name of each element is descriptive as to what it is.

The Javascript are just added and comments added to explain them.

So what I get is a normal looking Project.

With the Javascript Library names at the top, the Elements listed and displayed. And I can preview and browser in the Browser if I want. Which also means I can have some of the elements that use javascript functioning for demo purposes.

The Library Project is also using my simple navigation setup which allows for the scene names and prev and next buttons to be automatically renamed on each scene.

I have not added timelines yet but do not see why not as the actions etc. can be copied and pasted in the same way elements can.


JavaScript - Where to start?
(Greg) #2

This is cool Mark. One issue tho, when I add a new scene the “Scene Name” field seems to get the name of the previous scene (“Test” if added at the end).

Anyhow, I added a new scene and used the css ‘details’ tag to add file names and a short description of that file.

<details>
  <summary>button_color</summary>
  <p class="def">Uses javascript to change css colors</p>
 <p class="whoMadeIt">created by me - file path: ~/Desktop/test/button_color.hype </p>
</details>
<br>
<details>
  <summary>button_name_changer</summary>
  <p class="def">Uses javascript to change rename button titles</p>
</details>``

I put this in the header to style the summaries…

p.def, p.whoMadeIt {font-size: 13px !important; text-indent: 30px !important; margin-top: 5px !important;}
p.whoMadeIt {font-size: 11px !important; margin-top: -13px !important;}

EDIT: Ahah, I was adding new scenes, it works perfectly if I duplicate a scene then rename it, YAY!


(Mark Hunte) #3

@gasspence

Ah, you’re talking about the simple nav. Each time you add a new scene you just need to set it’s scene onload to run the changeSceneName() function I will update that page to explain better.


(Mark Hunte) #4

Hey I love the details think. Nice one.


(Mark Hunte) #5

I changed mine to <details style="background-color:#EFFAF1" open="" > and brought the rect it is in forward.

This allows me to place in a small shape and above other stuff where the expansion would mingle the view because of transparency

And it just looks good.

This is how I will generally use it:


(Mark Hunte) #6

Along with adding the actualJavascript functions the library, I am going to also add them to their own scenes using the details tag.

For the colour in the [details] Javascript code;

I am pasting the code example in to a document that is open in Xcode ( extension =.js) , copying straight out ( once it has been colourised by Xcode and pasting onto the scene. I then copy the innerHTM of freshly pasted code element. Which gives me it back in html tagged and css formatted text.

I can then just paste it into the [details*]. I do not need the original pasted code element so I can delete it from the scene.


UPDATE
For the Xcode colour trick. If you do not have Xcode, you can use Script Editor. Open a new doc and set it to use Javascript syntax. Paste the code into the doc and compile it. Then copy it from there once it has colourised and past it into your hype scene. Open up the innerHTML of the pasted code element and click once in the text. Then copy the html.

Paste that into your [details] this will give you the coloured code example…


This all means I can have working JS in the Library and a browser eversion. It probably means I can link related elements to it.


(Mark Hunte) #7

Javascript - [details]

So my Javascript library is evolving.

Some of the scripts are long and may go of the end off the page. So Each [details] element has the on drag-> Control Element Position enabled. I can then drag the [details] any where on the page. I really like this.

But one problem with the is with the drag control on, you cannot easily select and copy the the code.

My solution is to run the below function on the Javascript Library Scene’s on load. And place each javascript code example in the [details] within a div with the class name " copyDits" and a unique id

The code will apply the on double click function to all of them.

When I single any [details] they open and close as normal. If I double click on the code example within, a popup will appear with the selected code ready for me to copy.

As I am typing this I may actually change that to run time line or some how change the drag properties to off for a short duration. Allowing me to select and copy before it reverts to drag control.


UPDATE: the code below now selects the code example div’s text on double click.

I got the selection nugget from here http://stackoverflow.com/a/985368/261305

So even if you do not use the drag control like me, this is extremely handy for selecting only the code example text.


		var theClass = document.getElementsByClassName('copyDits');
		 //console.log(theClass);
		 
		 
		for (var i = 0; i < theClass.length; i++) {
		 
		theClass[i].ondblclick=function(event) {
		
	var targ = event.target.parentNode.id;
	var r = document.createRange();
var w=document.getElementById(targ);  
r.selectNodeContents(w);  
var sel=window.getSelection(); 
sel.removeAllRanges(); 
sel.addRange(r);
	
    
   }
	
}

Example of one of the [details]

<details style="background-color:#EFFAF1" >
  <summary>(6) - [Javascript] &nbsp;for loop AND Select code/text &nbsp;[Div] on double click</summary>
  <br>
  <p class="def">Iterate through an array of object</p>
 <br>
 <div id="forLoop" class="copyDits">
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;"><span style="font-variant-ligatures: no-common-ligatures; color: #bb2ca2">var</span> theClass = document.getElementsByClassName(<span style="font-variant-ligatures: no-common-ligatures; color: #272ad8">'copyDits'</span>);</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo; min-height: 13px;"><br></p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;"><span style="font-variant-ligatures: no-common-ligatures; color: #bb2ca2">for</span> (<span style="font-variant-ligatures: no-common-ligatures; color: #bb2ca2">var</span> i = <span style="font-variant-ligatures: no-common-ligatures; color: #272ad8">0</span>; i &lt; theClass.length; i++) {</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo; min-height: 13px;">&nbsp;&nbsp; &nbsp;</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; theClass[i].ondblclick=<span style="font-variant-ligatures: no-common-ligatures; color: #bb2ca2">function</span>(event) {</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo; min-height: 13px;">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="font-variant-ligatures: no-common-ligatures; color: #bb2ca2">var</span> targ = event.target.parentNode.id;</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="font-variant-ligatures: no-common-ligatures; color: #bb2ca2">var</span> r = document.createRange();</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="font-variant-ligatures: no-common-ligatures; color: #bb2ca2">var</span> w=document.getElementById(targ);</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; &nbsp; &nbsp; r.selectNodeContents(w);</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="font-variant-ligatures: no-common-ligatures; color: #bb2ca2">var</span> sel=window.getSelection();</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; &nbsp; &nbsp; sel.removeAllRanges();</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; &nbsp; &nbsp; sel.addRange(r);</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo; min-height: 13px;">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo; min-height: 13px;">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">&nbsp; &nbsp; }</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo; min-height: 13px;">&nbsp;&nbsp; &nbsp;</p>
<p style="margin-top: 0px; margin-bottom: 0px; font-style: normal; font-variant: normal; font-size: 11px; line-height: normal; font-family: Menlo;">}</p>

</div>
<span><p class="whoMadeIt">created by markhunte see Lottery syndicate hype doc</p></span>

<br>
</details>
<br>

<br>

(Greg) #8

You could also add css for overflow in the header.

 overflow: auto !important;

And you can embed ‘details’ within – like this…(I gave class innards a margin-left: 30px)

<details>
<summary>button_color</summary>
<p class="def">Uses javascript to toggle button title colors per scene</p>
<p class="whoMadeIt">created by me - file path: ~/Desktop/test/button_color.hype</p>

<details class="innards"><summary>javascript</summary><pre>var x = hypeDocument.currentSceneName();

if (x == "1") {document.getElementById("one").style.color = "blue", document.getElementById("two").style.color = "red"};

else if (x == "2") {document.getElementById("two").style.color = "blue", document.getElementById("one").style.color = "red"};</pre></details>
</details>


(Greg) #9

I was thinking about adding a search function, then I realized that the browser handles that quite well by using “command + f”

Note: It only works when he details are opened…

<details open>...</details>

(Mark Hunte) #10

I have been actually playing with creating a search that finds Text and outlines them. Also takes you to the scene they are on. Made some progress but hit a wall today but will pick it up again. It is a spin off from that class and ID list template I did.