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

darenr commented 6 years ago

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?

gliechtenstein commented 6 years ago

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 https://github.com/Jasonette/JASONETTE-iOS/pull/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 commented 6 years ago

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

gliechtenstein commented 6 years ago

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 commented 6 years ago

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?

gliechtenstein commented 6 years ago

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 commented 6 years ago

perfect, thanks!

darenr commented 6 years ago

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"
    }
}```

Jasonette / JASONETTE-iOS

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