Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

preload.json crashes Jason app (Not sure if this is expected to work or not) #325

Open
darenr opened this issue Jan 16, 2018 · 7 comments
Open

preload.json crashes Jason app (Not sure if this is expected to work or not) #325

darenr opened this issue Jan 16, 2018 · 7 comments

Comments

@darenr
Copy link
Contributor

darenr commented Jan 16, 2018 •
edited
Loading

the project preload.json - is that expected to work? It's not (unless you inject additional elements) fully formed, the "layers" element isn't wrapped in a $jason/body or a $jason/head/templates/body container. If you run that exact json on the Jason app it crashes. Maybe I'm missing something and you automatically wrap the contents of preload.json with the $jason or something?
@darenr darenr changed the title Not sure if this is expected to work or not preload.json crashes Jason app (Not sure if this is expected to work or not) Jan 16, 2018
@gliechtenstein
Copy link
Contributor

Yes, it is intentionally without rest of the tags because the previous approach of trying to support the entire $jason object proved to be too convoluted without much gains. Previously a loading page could even process its own events through $jason.head.actions, etc. but nobody needs a loading screen to do all kinds of things, it just needs to be static.

That's why I cut all that out with the new approach with preload.json. It's not meant to work if you just load that preload.json like other Jason views. It's just the $jason.body part of a loading view. You can check back at this discussion #298

Maybe I'm missing something and you automatically wrap the contents of preload.json with the $jason or something?

So the answer to above is yes.

That said, if something's not working with preload other than the issues above, could you share the details?

@darenr
Copy link
Contributor Author

darenr commented Jan 16, 2018

got it thanks, I was trying to design a preload.json (using Jason) and wasn't sure.

@darenr darenr closed this as completed Jan 16, 2018
@gliechtenstein
Copy link
Contributor

yup just need to build a view like any other view, and then when you're done designing, just strip out rest of the view and use the $jason.body part as your preload and that should work.

@darenr
Copy link
Contributor Author

darenr commented Jan 16, 2018

at what point though in the hierarchy? just having a "layers" element works but I want to style the background so I'd like to go one level up so I can set body.style.background?

@darenr darenr reopened this Jan 16, 2018
@gliechtenstein
Copy link
Contributor

You first write a regular markup like this:

{
  "$jason": {
    "head": [HEAD CONTENT],
    "body": [BODY CONTENT]
  }
}

Then just take out the [BODY CONTENT] part and use it as preload, which means you can use anything from style to sections to layers to footer to header, because those all belong under body

@darenr
Copy link
Contributor Author

darenr commented Jan 16, 2018

perfect, thanks!

@darenr darenr closed this as completed Jan 16, 2018
@darenr darenr reopened this Feb 7, 2018
@darenr darenr closed this as completed Feb 7, 2018
@darenr
Copy link
Contributor Author

darenr commented Feb 7, 2018

Re-opening because when I use the below preload.json once the app loads the loading screen doesn't go away. It seems to be specific to using web background in preload

{
    "style": {
        "background": {
            "type": "html",
            "text": "<html> <head> <script> var hands = []; window.onload = function(){ hands.push(document.querySelector('#secondhand > *')); hands.push(document.querySelector('#minutehand > *')); hands.push(document.querySelector('#hourhand > *')); var cx = 100; var cy = 100; function shifter(val) { return [val, cx, cy].join(' '); } var date = new Date(); var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2; var minuteAngle = 360 * date.getMinutes() / 60; var secAngle = 360 * date.getSeconds() / 60; hands[0].setAttribute('from', shifter(secAngle)); hands[0].setAttribute('to', shifter(secAngle + 360)); hands[1].setAttribute('from', shifter(minuteAngle)); hands[1].setAttribute('to', shifter(minuteAngle + 360)); hands[2].setAttribute('from', shifter(hoursAngle)); hands[2].setAttribute('to', shifter(hoursAngle + 360)); for(var i = 1; i <= 12; i++) { var el = document.createElementNS('http://www.w3.org/2000/svg', 'line'); el.setAttribute('x1', '100'); el.setAttribute('y1', '30'); el.setAttribute('x2', '100'); el.setAttribute('y2', '40'); el.setAttribute('transform', 'rotate(' + (i*360/12) + ' 100 100)'); el.setAttribute('style', 'stroke: #ffffff;'); document.querySelector('svg').appendChild(el); } } </script> <style> html, body { overflow:hidden; width:100%; height:100%; padding:0; margin:0; background: #eee; } svg { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .filler { background: #ffdd17; position: absolute; bottom: 50%; top: 0; left: 0; right: 0; } </style> </head> <body> <div class='filler'></div> <svg width='200' height='200'> <filter id='innerShadow' x='-20%' y='-20%' width='140%' height='140%'> <feGaussianBlur in='SourceGraphic' stdDeviation='3' result='blur'/> <feOffset in='blur' dx='2.5' dy='2.5'/> </filter> <g> <circle id='shadow' style='fill:rgba(0,0,0,0.1)' cx='97' cy='100' r='87' filter='url(#innerShadow)'></circle> <circle id='circle' style='stroke: #FFF; stroke-width: 12px; fill:#090787' cx='100' cy='100' r='80'></circle> </g> <g> <line x1='100' y1='100' x2='100' y2='55' transform='rotate(80 100 100)' style='stroke-width: 3px; stroke: #fffbf9;' id='hourhand'> <animatetransform attributeName='transform' attributeType='XML' type='rotate' dur='43200s' repeatCount='indefinite'/> </line> <line x1='100' y1='100' x2='100' y2='40' style='stroke-width: 4px; stroke: #fdfdfd;' id='minutehand'> <animatetransform attributeName='transform' attributeType='XML' type='rotate' dur='3600s' repeatCount='indefinite'/> </line> <line x1='100' y1='100' x2='100' y2='30' style='stroke-width: 2px; stroke: #C1EFED;' id='secondhand'> <animatetransform attributeName='transform' attributeType='XML' type='rotate' dur='60s' repeatCount='indefinite'/> </line> </g> <circle id='center' style='fill:#128A86; stroke: #C1EFED; stroke-width: 2px;' cx='100' cy='100' r='3'></circle> </svg> </body> </html>"
        },
        "border": "none"
    }
}```

@darenr darenr reopened this Feb 7, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@darenr @gliechtenstein