Execute HYPE in JS

Using JavaScript with Hype
1

I had to remove the document.ready from the so that I could load the file from within my react app so that I could make the file paths compatible from within webpack. I got all of that working now but need to execute the script. Is the a method or function I can run to do that?

I’d image it would be something like window.hype.something() but not sure what exactly.

import FirstImg from 'file!./first.gif';
import SecondImg from 'file!./second.png';
import ThirdImg from 'file!./third.gif';
import HypeThin from 'file!./HYPE-552.thin.min.js';

export default function(){(function k(){function l(a,b,d){var c=!1;null==window[a]&&(null==window[b]?(window[b]=[],window[b].push(k),a=document.getElementsByTagName("head")[0],b=document.createElement("script"),c=h,false==!0&&(c=""),b.type="text/javascript",b.src=c+"/"+d,a.appendChild(b)):window[b].push(k),c=!0);return c}var h="",c="email-landing",e="projectname_hype_container";if(false==!1)try{for(var f=document.getElementsByTagName("script"),
a=0;a<f.length;a++){var b=f[a].src;if(null!=b&&-1!=b.indexOf("projectname_hype_generated_script.js")){h=b.substr(0,b.lastIndexOf("/"));break}}}catch(n){}if(false==!1&&(a=navigator.userAgent.match(/MSIE (\d+\.\d+)/),a=parseFloat(a&&a[1])||null,a=l("HYPE_552","HYPE_dtl_552",!0==(null!=a&&10>a||false==!0)?"HYPE-552.full.min.js":HypeThin),false==!0&&(a=a||l("HYPE_w_552","HYPE_wdtl_552","HYPE-552.waypoints.min.js")),a))return;
f=window.HYPE.documents;if(null!=f[c]){b=1;a=c;do c=""+a+"-"+b++;while(null!=f[c]);for(var d=document.getElementsByTagName("div"),b=!1,a=0;a<d.length;a++)if(d[a].id==e&&null==d[a].getAttribute("HYP_dn")){var b=1,g=e;do e=""+g+"-"+b++;while(null!=document.getElementById(e));d[a].id=e;b=!0;break}if(!1==b)return}b=[];b=[];d={};g={};for(a=0;a<b.length;a++)try{g[b[a].identifier]=b[a].name,d[b[a].name]=eval("(function(){return "+b[a].source+"})();")}catch(m){window.console&&window.console.log(m),
d[b[a].name]=function(){}}a=new HYPE_552(c,e,{"0":{p:1,n:FirstImg,g:"15",t:"@1x",r:1},"1":{p:1,n:SecondImg,g:"31",t:"@1x",r:1},"2":{p:1,n:ThirdImg,g:"43",t:"@1x",r:1}},h,[],d,[{n:"Untitled Scene",o:"1",X:[0]}],[{o:"3",p:"600px",x:0,cA:false,Z:550,Y:500,c:"#FFFFFF",L:[],bY:1,d:500,U:{},T:{kTimelineDefaultIdentifier:{i:"kTimelineDefaultIdentifier",n:"Main Timeline",z:6.07,b:[],a:[{f:"c",y:0,z:0.12,i:"e",e:1,s:0,o:"50"},{f:"c",y:0.12,z:1.29,i:"e",e:1,s:1,o:"50"},{f:"c",y:1,z:0.12,i:"e",e:1,s:0,o:"45"},{f:"c",y:1.12,z:0.29,i:"e",e:1,s:1,o:"45"},{f:"c",y:2.11,z:0.12,i:"e",e:0,s:1,o:"50"},{f:"c",y:2.11,z:0.12,i:"e",e:0,s:1,o:"45"},{f:"c",y:2.23,z:0.12,i:"e",e:1,s:0,o:"46"},{y:2.23,i:"e",s:0,z:0,o:"50",f:"c"},{y:2.23,i:"e",s:0,z:0,o:"45",f:"c"},{f:"c",y:3.05,z:2.08,i:"e",e:1,s:1,o:"46"},{f:"c",y:3.16,z:0.13,i:"e",e:1,s:0,o:"48"},{f:"c",y:3.29,z:1.14,i:"e",e:1,s:1,o:"48"},{f:"c",y:5.13,z:0.12,i:"e",e:0,s:1,o:"46"},{f:"c",y:5.13,z:0.12,i:"e",e:0,s:1,o:"48"},{f:"c",y:5.25,z:0.12,i:"e",e:1,s:0,o:"47"},{f:"c",y:5.25,z:0.12,i:"e",e:1,s:0,o:"49"},{y:5.25,i:"e",s:0,z:0,o:"46",f:"c"},{y:5.25,i:"e",s:0,z:0,o:"48",f:"c"},{y:6.07,i:"e",s:1,z:0,o:"47",f:"c"},{y:6.07,i:"e",s:1,z:0,o:"49",f:"c"}],f:30}},bZ:180,O:["49","47","48","46","45","50"],v:{"46":{h:"15",p:"no-repeat",x:"visible",a:174,q:"100% 100%",b:194,j:"absolute",r:"inline",c:156,k:"div",z:5,d:60,e:0},"49":{aV:8,w:"<p style=\"text-align: center; margin-top: 0px; margin-bottom: 0px; color: rgb(121, 121, 121);\"><span style=\"font-kerning: none\">Lorem Ipsum</span></p>",a:95,x:"visible",Z:"break-word",b:277,y:"preserve",j:"absolute",z:10,yy:"nowrap",s:"Helvetica,Arial,Sans-Serif",aT:8,k:"div",aS:8,e:0,t:26,G:"#000000",aU:8,r:"inline"},"45":{G:"#000000",aU:8,aV:8,r:"inline",e:0,s:"Helvetica,Arial,Sans-Serif",t:26,Z:"break-word",v:"normal",w:"<p style=\"margin-top: 0px; margin-bottom: 0px; text-align: center; color: rgb(121, 121, 121);\"><span style=\"font-kerning: none\">Lorem Ipsum</span></p>",j:"absolute",x:"visible",yy:"nowrap",k:"div",y:"preserve",z:4,aS:8,aT:8,a:132,b:271},"48":{G:"#000000",aU:8,aV:8,r:"inline",e:0,s:"Helvetica,Arial,Sans-Serif",t:26,Z:"break-word",w:"<p style=\"margin-top: 0px; margin-bottom: 0px; color: rgb(121, 121, 121);\"><span style=\"font-kerning: none\">Lorem Ipsum</span></p>",j:"absolute",x:"visible",yy:"nowrap",k:"div",y:"preserve",z:6,aS:8,aT:8,a:32,F:"center",b:274},"50":{h:"43",p:"no-repeat",x:"visible",a:183,q:"100% 100%",b:135,j:"absolute",r:"inline",c:125,k:"div",z:3,d:125,e:0},"47":{h:"31",p:"no-repeat",x:"visible",a:224,q:"100% 100%",b:184,j:"absolute",r:"inline",c:58,k:"div",z:9,d:64,e:0}}}],{},g,{},null,false,true,-1,true,true,false,true);f[c]=a.API;document.getElementById(e).setAttribute("HYP_dn",
c);a.z_o(this.body)})();};

Here’s an example of the JSX Where I am calling it in:

import React from 'react';
import HypeAnimation from '../assets/hype/projectname.hyperesources/projectname_hype_generated_script.js';
import BaseWidget from 'web-shell-core/widgets/BaseWidget';

export default class myNewWidget extends BaseWidget {

  static defaultProps = {
    btnCopy: 'Lotrm Ipsum'
  }

  render() {
    return (
      <section  className="row">
          <div className="col-xs-12">
            <a className="btn btn-orange btn-small beacon-this" data-com-id="com-button" href="https://www.url.com/blah" target="_blank">{ this.props.btnCopy }</a>
            <div id="projectname_hype_container" className="projectname_hype_container" aria-live="polite">
              <script type="text/javascript" charset="utf-8">{HypeAnimation()}</script>
            </div>
          </div>
      </section>
    );
  }
}
2

So it appears to be executing since I thru a console in like below and it kicked off. But looks like whatever builds the animation and elements isn’t running.

export default (function(){console.log('made it');

3

Figured it out. I needed to remove the reference to look for the script tag indexof.

1 Like