Showing preview only (329K chars total). Download the full file or copy to clipboard to get everything.
Repository: Jasonette/Jasonpedia
Branch: gh-pages
Commit: 5716fe2ccb1d
Files: 104
Total size: 303.4 KB
Directory structure:
gitextract_wtw7z__x/
├── LICENSE
├── README.md
├── action/
│ ├── addressbook.json
│ ├── audio/
│ │ └── vaultboy/
│ │ └── index.json
│ ├── geo/
│ │ └── index.json
│ ├── index.json
│ ├── lambda/
│ │ ├── cat.json
│ │ └── index.json
│ ├── network/
│ │ └── index.json
│ ├── script/
│ │ ├── hejs/
│ │ │ └── index.json
│ │ ├── index.json
│ │ ├── inline/
│ │ │ └── index.json
│ │ └── underscorejs/
│ │ ├── db.json
│ │ ├── index.json
│ │ └── modal.json
│ ├── timer/
│ │ ├── index.json
│ │ ├── mario.json
│ │ └── stopwatch.json
│ ├── variable/
│ │ └── index.json
│ └── vision/
│ └── index.json
├── core/
│ ├── href/
│ │ ├── index.json
│ │ └── tabs.json
│ ├── index.json
│ ├── render/
│ │ ├── index.json
│ │ └── templates.json
│ └── snapshot/
│ └── index.json
├── demo.json
├── hello.json
├── template/
│ ├── csv
│ ├── csv.json
│ ├── each.json
│ ├── html.json
│ ├── if.json
│ ├── index.json
│ ├── inline.json
│ ├── js.json
│ ├── jsfunction.json
│ ├── network.json
│ └── rss.json
├── view/
│ ├── background/
│ │ └── index.json
│ ├── component/
│ │ ├── button/
│ │ │ ├── 1.json
│ │ │ ├── 2.json
│ │ │ ├── 3.json
│ │ │ └── index.json
│ │ ├── html/
│ │ │ └── index.json
│ │ ├── image/
│ │ │ └── index.json
│ │ ├── index.json
│ │ ├── label/
│ │ │ └── index.json
│ │ ├── map/
│ │ │ └── index.json
│ │ ├── slider/
│ │ │ └── index.json
│ │ ├── space/
│ │ │ └── index.json
│ │ ├── style/
│ │ │ ├── index.json
│ │ │ └── opacity.json
│ │ ├── textarea/
│ │ │ └── index.json
│ │ └── textfield/
│ │ └── index.json
│ ├── footer/
│ │ ├── index.json
│ │ ├── input.json
│ │ └── tabs.json
│ ├── header/
│ │ ├── header.json
│ │ ├── index.json
│ │ └── noheader.json
│ ├── index.json
│ ├── layer/
│ │ ├── dynamic.json
│ │ ├── index.json
│ │ ├── label.json
│ │ ├── pokemon/
│ │ │ ├── backpack.json
│ │ │ ├── db.json
│ │ │ ├── index.json
│ │ │ └── more.json
│ │ ├── static.json
│ │ └── weather/
│ │ └── index.json
│ ├── layout/
│ │ ├── horizontal.json
│ │ ├── index.json
│ │ ├── nested.json
│ │ └── vertical.json
│ └── section/
│ └── index.json
└── webcontainer/
├── agent/
│ ├── default.json
│ ├── fn/
│ │ ├── agent.html
│ │ └── index.json
│ ├── hijack.json
│ ├── hybrid.json
│ ├── ignore.json
│ └── index.json
├── animejs.json
├── canvas.json
├── d3gauge.json
├── d3graph.json
├── d3html.json
├── feed/
│ ├── animated_item.json
│ ├── db.json
│ ├── index.json
│ ├── item.json
│ └── special_item.json
├── gaugehtml.json
├── iframe.json
├── index.json
├── lots.json
├── pdf.json
├── phasergame.json
├── svg.json
├── template.json
├── template2.json
├── threejsblocks.json
└── threejsrainbow.json
================================================
FILE CONTENTS
================================================
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2016
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# What is this?
This repository is 99.9% JSON.
**Each JSON file is an iOS app. And an Android app. Simultaneously.**
And when you play these JSON snippets on [Jasonette](https://www.jasonette.com), they instantly turn into native apps.
Here's how it works: Jasonette interprets the JSON markup into native iOS and Android components. Just like how you use HTML to write a web page, you use JSON to write a native app, which you can publish to the app store.
Check out [the website](https://www.jasonette.com) to learn more.
Here are some highlights of what these JSON files can turn into (hint: anything you can imagine):
_ | _
-------------------------------------------|--------------------------------------------
<br>[view/layer/dynamic.json](view/layer/dynamic.json)<br><br>[](view/layer/dynamic.json)|<br> [view/layer/weather/index.json](view/layer/weather/index.json)<br><br>[](view/layer/weather/index.json)
<br>[view/section/index.json](view/section/index.json)<br><br>[](view/section/index.json)|<br> [view/component/map/index.json](view/component/map/index.json)<br><br>[](view/component/map/index.json)
<br>[view/component/image.json](view/component/image/index.json)<br><br>[](view/component/image/index.json)|<br> [view/layout/nested.json](view/layout/nested.json)<br><br>[](view/layout/nested.json)
<br>[action/timer/mario.json](action/timer/mario.json)<br><br>[](action/timer/mario.json) |
# How to use this?
First of all, I recommend you check out the [website](https://www.jasonette.com) to quickly learn how this works.
### 1. Recommended way
Jasonette ships with this repository's URL embedded by default, so if you just head over to [the website](https://www.jasonette.com) and follow the "Get Started" guide, you'll be able to try everything on this repository. (Note: The default root URL Jasonette ships with is [hello.json](https://github.com/Jasonette/Jasonpedia/blob/gh-pages/hello.json)).
### 2. Manual way
You can also manually add JSON to Jasonette. If you want to try adding each individual JSON file in this repository, you just need to add their published URLs to Jasonette and run. You can learn how to do that at [Getting started guide](https://jasonette.github.io/documentation).
Just remember, this repo uses [Github pages](https://pages.github.com) to publish the JSON, so all the files will be avaialbe under the `https://jasonette.github.io/Jasonpedia` base url.
For example the [hello.json](https://github.com/Jasonette/Jasonpedia/blob/gh-pages/hello.json) file in the root directory is directly available at [https://jasonette.github.io/Jasonpedia/hello.json](https://jasonette.github.io/Jasonpedia/hello.json), the [demo.json](https://github.com/Jasonette/Jasonpedia/blob/gh-pages/demo.json) is available at [https://jasonette.github.io/Jasonpedia/demo.json](https://jasonette.github.io/Jasonpedia/demo.json), and so forth.
# The purpose of this repo
This repo serves multiple purposes:
###1. Demo
This is the default JSON that ships with all Jasonette code, which means everyone who downloads Jasonette will get to play with what's on this repo as a starter project.
###2. Test
Whenever you write an [extension](https://jasonette.github.io/documentation/advanced/#extension) that may be useful to be merged into the main project, write a test JSON to make sure:
- it works as intended
- it plays nice with the rest of Jasonette
- other people understand how to use it
- the syntax is consistent with the convention
###3. Contribution
Contribution is encouraged for this repo. Feel free to share your JSON apps by sending pull requests.
================================================
FILE: action/addressbook.json
================================================
{
"$jason": {
"head": {
"title": "Addressbook demo",
"description": "$util.addressbook accesses the addressbook and returns the array of contacts",
"tags": [
"contacts",
"addressbook"
],
"preview": "http://i.imgur.com/TPTZ8Fv.png",
"actions": {
"$load": {
"type": "$util.addressbook",
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"sections": [
{
"items": {
"{{#each $jason}}": {
"type": "vertical",
"style": {
"padding": "5",
"spacing": "5"
},
"components": [
{
"type": "label",
"text": "{{name}}"
},
{
"type": "label",
"text": "{{JSON.stringify(phone)}}"
},
{
"type": "label",
"text": "{{JSON.stringify(email)}}"
}
]
}
}
}
]
}
}
}
}
}
================================================
FILE: action/audio/vaultboy/index.json
================================================
{
"$jason": {
"head": {
"title": "Vault boy",
"description": "Touch the vault boy to hear him laugh for you.",
"preview": "http://i.giphy.com/l41YybJPL0z2n1snm.gif",
"actions": {
"hahaha": {
"type": "$audio.play",
"options": {
"url": "https://s3-us-west-2.amazonaws.com/fm.ethan.jason/hahaha.mp3"
}
}
}
},
"body": {
"header": {
"style": {
"color": "#ffffff",
"background": "rgba(0,0,0,0)"
}
},
"style": {
"border": "none",
"background": "http://i.giphy.com/l41YybJPL0z2n1snm.gif"
},
"sections": [
{
"items": [
{
"action": {
"trigger": "hahaha"
},
"type": "horizontal",
"style": {
"padding_right": "20",
"height": "300"
},
"components": [
{
"type": "label",
"text": "Touch\nme!",
"style": {
"color": "#ffffff",
"size": "30",
"padding": "0",
"align": "right",
"font": "HelveticaNeue-Bold"
}
}
]
}
]
}
]
}
}
}
================================================
FILE: action/geo/index.json
================================================
{
"$jason": {
"head": {
"title": "$geo",
"actions": {
"$load": {
"type": "$render"
},
"$pull": {
"type": "$flush",
"success": {
"type": "$reload"
}
}
},
"styles": {
"labels": {
"size": "14",
"font": "HelveticaNeue-Bold",
"align": "center"
},
"left": {
"bottom": "50",
"left": "50",
"width": "100",
"height": "100",
"corner_radius": "50",
"color": "#ffffff",
"background": "#F2E205",
"padding": "20"
},
"right": {
"bottom": "50",
"right": "50",
"width": "100",
"height": "100",
"corner_radius": "50",
"color": "#ffffff",
"background": "#CE2121",
"padding": "20"
},
"canvas": {
"width": "100%",
"height": "300",
"padding": "0"
}
},
"templates": {
"map": {
"style": {
"background": "#50BFFF",
"color": "#ffffff"
},
"header": {
"style": {
"background": "#50BFFF",
"color": "#ffffff"
},
"title": "$geo"
},
"layers": [{
"type": "label",
"text": "Display",
"class": "labels left",
"action": {
"type": "$geo.get",
"success": {
"type": "$render",
"options": {
"template": "coord"
}
}
}
}, {
"type": "label",
"text": "Map",
"class": "labels right",
"action": {
"type": "$geo.get",
"success": {
"type": "$render",
"options": {
"template": "map"
}
}
}
}],
"sections": [{
"items": [{
"type": "map",
"region": {
"coord": "{{$jason.coord}}",
"width": "100",
"height": "100"
},
"class": "canvas"
}]
}]
},
"coord": {
"style": {
"background": "#50BFFF",
"color": "#ffffff"
},
"header": {
"style": {
"background": "#50BFFF",
"color": "#ffffff"
},
"title": "$geo"
},
"layers": [{
"type": "label",
"text": "Display",
"class": "labels left",
"action": {
"type": "$geo.get",
"success": {
"type": "$render",
"options": {
"template": "coord"
}
}
}
}, {
"type": "label",
"text": "Map",
"class": "labels right",
"action": {
"type": "$geo.get",
"success": {
"type": "$render",
"options": {
"template": "map"
}
}
}
}],
"sections": [{
"items": [{
"type": "label",
"class": "labels canvas",
"text": "{{$jason.coord}}"
}]
}]
},
"body": {
"style": {
"background": "#50BFFF",
"color": "#ffffff"
},
"header": {
"style": {
"background": "#50BFFF",
"color": "#ffffff"
},
"title": "$geo"
},
"layers": [{
"type": "label",
"text": "Display",
"class": "labels left",
"action": {
"type": "$geo.get",
"success": {
"type": "$render",
"options": {
"template": "coord"
}
}
}
}, {
"type": "label",
"text": "Map",
"class": "labels right",
"action": {
"type": "$geo.get",
"success": {
"type": "$render",
"options": {
"template": "map"
}
}
}
}]
}
}
}
}
}
================================================
FILE: action/index.json
================================================
{
"$jason": {
"head": {
"title": "Jasonette Actions",
"styles": {
"bold": {
"font": "HelveticaNeue-Bold",
"align": "center",
"background": "#ffffff",
"corner_radius": "3",
"size": "12",
"padding": "10"
},
"padded": {
"width": "150",
"align": "center",
"background": "#ffffff",
"font": "HelveticaNeue-Bold",
"height": "150"
}
},
"actions": {
"$foreground": {
"type": "$reload"
},
"$pull": {
"type": "$flush",
"success": {
"type": "$reload"
}
},
"form_alert": {
"type": "$util.alert",
"options": {
"title": "Demo alert with input",
"description": "Try entering values and press OK",
"form": [
{
"name": "username",
"placeholder": "Enter username"
},
{
"name": "password",
"placeholder": "Enter password",
"type": "secure"
}
]
},
"success": {
"type": "$util.alert",
"options": {
"title": "You have entered:",
"description": "{{$jason.username}} and {{$jason.password}}"
}
}
}
}
},
"body": {
"style": {
"background": "#8bb92d",
"color": "#ffffff"
},
"header": {
"style": {
"background": "#8bb92d",
"color": "#ffffff"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/action/index.json",
"view": "web"
}
},
"search": {
"name": "query",
"placeholder": "search actions",
"style": {
"dark": "true",
"color": "#ffffff",
"background": "#8bb92d"
}
}
},
"sections": [
{
"type": "horizontal",
"style": {
"background": "#ffffff"
},
"header": {
"type": "label",
"text": "$util",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"class": "padded",
"action": {
"type": "$util.banner",
"options": {
"title": "Hello world",
"description": "I'm a banner. I display a title and a description."
}
},
"type": "label",
"text": "$util.banner"
},
{
"class": "padded",
"action": {
"type": "$util.toast",
"options": {
"text": "I'm a toast. I display a simple text."
}
},
"type": "label",
"text": "$util.toast"
},
{
"class": "padded",
"action": {
"type": "$util.alert",
"options": {
"title": "Basic Alert",
"description": "I'm a basic alert. I simply display an alert that needs to be dismissed before moving forward"
}
},
"type": "label",
"text": "$util.alert (basic)"
},
{
"class": "padded",
"action": {
"trigger": "form_alert"
},
"type": "label",
"text": "$util.alert (with input fields)"
},
{
"class": "padded",
"action": {
"type": "$util.picker",
"options": {
"items": [
{
"text": "Trigger $util.banner",
"action": {
"type": "$util.banner",
"options": {
"title": "Hi I'm a banner",
"description": "I'm triggered by a picker"
}
}
},
{
"text": "Trigger $util.alert",
"action": {
"type": "$util.alert",
"options": {
"title": "Hi I'm an alert",
"description": "I'm triggerred by an alert"
}
}
},
{
"text": "Trigger $audio.play",
"action": {
"type": "$audio.play",
"options": {
"url": "https://s3.amazonaws.com/www.textcast.co/icons/yo.mp3"
}
}
}
]
}
},
"type": "label",
"text": "$util.picker"
},
{
"class": "padded",
"action": {
"type": "$util.datepicker",
"success": {
"type": "$util.banner",
"options": {
"title": "Selected time is",
"description": "{{(new Date(parseInt($jason.value) * 1000)).toString()}}"
}
}
},
"type": "label",
"text": "$util.datepicker"
},
{
"class": "padded",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/addressbook.json"
},
"type": "label",
"text": "$util.addressbook"
}
]
},
{
"type": "horizontal",
"style": {
"background": "#ffffff"
},
"header": {
"type": "label",
"text": "$media",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"type": "label",
"text": "$media.play",
"class": "padded",
"action": {
"type": "$media.play",
"options": {
"url": "https://vo.fod4.com/v/25c17d6eb2/v600.mp4"
}
}
},
{
"type": "label",
"text": "$media.picker + $util.share (photo)",
"class": "padded",
"action": {
"type": "$media.picker",
"success": {
"type": "$util.share",
"options": {
"items": [
{
"type": "image",
"data": "{{$jason.data}}"
}
]
}
}
}
},
{
"type": "label",
"class": "padded",
"text": "$media.camera + $util.share (photo)",
"action": {
"type": "$media.camera",
"success": {
"type": "$util.share",
"options": {
"items": [
{
"type": "image",
"data": "{{$jason.data}}"
}
]
}
}
}
},
{
"type": "label",
"text": "$media.camera + $util.share (photo with editing)",
"class": "padded",
"action": {
"type": "$media.camera",
"options": {
"edit": "true"
},
"success": {
"type": "$util.share",
"options": {
"items": [
{
"type": "image",
"data": "{{$jason.data}}"
}
]
}
}
}
},
{
"type": "label",
"text": "$media.camera + $util.share (video)",
"class": "padded",
"action": {
"type": "$media.camera",
"options": {
"type": "video"
},
"success": {
"type": "$util.share",
"options": {
"items": [
{
"type": "video",
"file_url": "{{$jason.file_url}}"
}
]
}
}
}
}
]
},
{
"header": {
"type": "label",
"text": "Barcode & QRCode scanning",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"type": "label",
"text": "$vision",
"class": "bold",
"style": {
"align": "left"
},
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/vision/index.json"
}
}
]
},
{
"header": {
"type": "label",
"text": "$network & $session",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"type": "label",
"text": "$network",
"class": "bold",
"style": {
"align": "left"
},
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/network/index.json"
}
}
]
},
{
"header": {
"type": "label",
"text": "Local variables",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"type": "label",
"text": "Variable",
"class": "bold",
"style": {
"align": "left"
},
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/variable/index.json"
}
}
]
},
{
"header": {
"type": "label",
"text": "$lambda",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"type": "label",
"text": "Triggering a action by name and utilizing its return values",
"class": "bold",
"style": {
"align": "left"
},
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/lambda/index.json"
}
}
]
},
{
"header": {
"type": "label",
"text": "Geo",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"type": "label",
"text": "$geo.get",
"class": "bold",
"style": {
"align": "left"
},
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/geo/index.json"
}
}
]
},
{
"header": {
"type": "label",
"text": "JavaScript",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"type": "label",
"text": "$script.include",
"class": "bold",
"style": {
"align": "left"
},
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/index.json"
}
}
]
},
{
"header": {
"type": "label",
"text": "Timer",
"style": {
"background": "#ebebeb"
}
},
"items": [
{
"type": "label",
"text": "$timer",
"class": "bold",
"style": {
"align": "left"
},
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/timer/index.json"
}
}
]
}
]
}
}
}
================================================
FILE: action/lambda/cat.json
================================================
{
"cats": [
{
"name": "Mr. Fisherman",
"image": "http://i.giphy.com/OmK8lulOMQ9XO.gif",
"status": "Busy fishing on the iPhone"
}
]
}
================================================
FILE: action/lambda/index.json
================================================
{
"$jason": {
"head": {
"title": "Trigger demo",
"styles": {
"code": {
"background": "#646464",
"color": "#ffffff",
"size": "11",
"font": "Courier",
"padding": "10"
},
"header": {
"font": "HelveticaNeue-CondensedBold",
"size": "15",
"background": "#F2D608",
"color": "#000000"
}
},
"actions": {
"banner": {
"type": "$util.banner",
"options": {
"title": "{{$jason.title}}",
"description": "{{$jason.description}}"
}
},
"banner2": {
"type": "$util.banner",
"options": "{{$jason}}"
},
"banner3": {
"type": "$util.banner",
"options": {
"title": "Banner3",
"description": "{{$jason.cats[0].status}}"
}
}
},
"data": {
"actions": {
"banner": {
"type": "$util.banner",
"options": {
"title": "{{$jason.title}}",
"description": "{{$jason.description}}"
}
},
"banner2": {
"type": "$util.banner",
"options": "{{$jason}}"
},
"banner3": {
"type": "$util.banner",
"options": {
"title": "Banner3",
"description": "{{$jason.cats[0].status}}"
}
}
},
"trigger_items": [
{
"action": {
"type": "$util.banner",
"options": {
"title": "Trigger",
"description": "it worked!"
}
}
},
{
"action": {
"trigger": "banner",
"options": {
"title": "Trigger",
"description": "it worked!"
}
}
},
{
"action": {
"trigger": "banner2",
"options": {
"title": "Trigger",
"description": "it worked!"
}
}
},
{
"action": {
"type": "$network.request",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/lambda/cat.json"
},
"success": {
"trigger": "banner3"
}
}
},
{
"action": {
"type": "$network.request",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/lambda/cat.json"
},
"success": {
"trigger": "banner2",
"options": {
"title": "Banner2",
"description": "{{$jason.cats[0].status}}"
}
}
}
},
{
"action": {
"type": "$network.request",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/lambda/cat.json"
},
"success": [
{
"{{#if $jason && 'cats' in $jason}}": {
"trigger": "banner2",
"options": {
"title": "Banner2",
"description": "{{$jason.cats[0].status}}"
}
}
},
{
"{{#else}}": {
"type": "$util.toast",
"options": {
"text": "Error"
}
}
}
]
}
}
],
"items": [
{
"action": {
"type": "$util.banner",
"options": {
"title": "Trigger",
"description": "it worked!"
}
}
},
{
"action": {
"type": "$lambda",
"options": {
"name": "banner",
"options": {
"title": "Trigger",
"description": "it worked!"
}
}
}
},
{
"action": {
"type": "$lambda",
"options": {
"name": "banner2",
"options": {
"title": "Trigger",
"description": "it worked!"
}
}
}
},
{
"action": {
"type": "$network.request",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/lambda/cat.json"
},
"success": {
"type": "$lambda",
"options": {
"name": "banner3"
}
}
}
},
{
"action": {
"type": "$network.request",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/lambda/cat.json"
},
"success": {
"type": "$lambda",
"options": {
"name": "banner2",
"options": {
"title": "Banner2",
"description": "{{$jason.cats[0].status}}"
}
}
}
}
},
{
"action": {
"type": "$network.request",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/lambda/cat.json"
},
"success": {
"type": "$lambda",
"options": [
{
"{{#if $jason && 'cats' in $jason}}": {
"name": "banner2",
"options": {
"title": "Banner2",
"description": "{{$jason.cats[0].status}}"
}
}
},
{
"{{#else}}": {
"type": "$util.toast",
"options": {
"text": "Error"
}
}
}
]
}
}
}
]
},
"templates": {
"body": {
"header": {
"title": "$lambda + trigger",
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/action/lambda/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"text": "$lambda is a special purpose action that calls another action by name and handles its return values. You need to declare the action under $jason.head.actions and call it using $lambda.\n\n1. $lambda lets you pass an argument as 'options'.\n\n2. Once triggered, $lambda waits for the callee action to finish and return via $return.success or $return.error.\n\n3. When the callee action returns, the caller action continues its work by running its 'success' or 'error' actions with the return value received back from $lambda execution.",
"style": {
"size": "11"
}
}
]
},
{
"header": {
"type": "vertical",
"class": "header",
"components": [
{
"type": "label",
"text": "Action declarations",
"class": "header"
},
{
"type": "label",
"text": "First, these are the actions declared under $jason.head.actions which we will trigger in the later sections",
"style": {
"size": "11"
}
}
]
},
"items": [
{
"type": "vertical",
"style": {
"padding": "10"
},
"components": [
{
"type": "label",
"class": "code",
"text": "{{JSON.stringify(actions, null, 2)}}"
}
]
}
]
},
{
"header": {
"type": "vertical",
"class": "header",
"components": [
{
"type": "label",
"text": "Using the raw $lambda action (not recommended)",
"class": "header"
},
{
"type": "label",
"text": "Try running the action by touching the code below",
"style": {
"size": "11"
}
}
]
},
"items": {
"{{#each items}}": {
"type": "vertical",
"style": {
"padding": "10"
},
"action": "{{action}}",
"components": [
{
"type": "label",
"class": "code",
"text": "{{JSON.stringify(action, null, 2)}}"
}
]
}
}
},
{
"header": {
"type": "vertical",
"class": "header",
"components": [
{
"type": "label",
"text": "Using the 'trigger' keyword (Recommended)",
"class": "header"
},
{
"type": "label",
"text": "Try triggering the action by name by touching the code",
"style": {
"size": "11"
}
}
]
},
"items": {
"{{#each trigger_items}}": {
"type": "vertical",
"style": {
"padding": "10"
},
"action": "{{action}}",
"components": [
{
"type": "label",
"class": "code",
"text": "{{JSON.stringify(action, null, 2)}}"
}
]
}
}
}
]
}
}
}
}
}
================================================
FILE: action/network/index.json
================================================
{
"$jason": {
"head": {
"title": "$network",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
},
"data": {
"items": [{
"url": "https://imagejason.herokuapp.com",
"title": "imagejason",
"description": "takes photo using $media.camera, and uploads it to imagejason.herokuapp.com via $network.upload"
}, {
"url": "https://fureliza.herokuapp.com",
"title": "eliza",
"description": "make a $network.request to node.js express based chatbot server. Returns auto-generated output based on the input"
}, {
"url": "https://sessionjason.herokuapp.com/posts.json",
"title": "Microblog with user account",
"description": "Signs into the blog using token authentication ($network.request and $session.set) and make posts using $network.request"
}]
},
"templates": {
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/action/network/index.json",
"view": "web"
}
}
},
"sections": [
{
"header": {
"type": "horizontal",
"style": {
"background": "rgba(14,122,254,0.1)",
"padding": "20"
},
"components": [{
"style": {
"size": "12"
},
"type": "label",
"text": "Note: Sometimes the apps may take about 10 seconds to load. This is because these connect to demo app servers, which go into hibernation when left idle for a while. But wait for a bit for them to load and they should work!"
}]
},
"items": {
"{{#each items}}": {
"type": "vertical",
"href": {
"url": "{{url}}"
},
"components": [{
"type": "label",
"class": "bold",
"text": "{{title}}"
}, {
"type": "label",
"class": "normal",
"text": "{{description}}"
}]
}
}
}
]
}
}
}
}
}
================================================
FILE: action/script/hejs/index.json
================================================
{
"$jason": {
"head": {
"title": "he.js encoding Test",
"actions": {
"$load": {
"type": "$script.include",
"options": {
"items": [
{
"url": "https://rawgit.com/mathiasbynens/he/master/he.js"
}
]
},
"success": {
"type": "$set",
"options": {
"caption": "prisoner's dilemma"
},
"success": {
"type": "$render"
}
}
}
},
"templates": {
"body": {
"header": {
"title": "he.js decoding example",
"menu": {
"text": "View JSON",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/hejs/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"text": "[BEFORE DECODING] {{$get.caption}}"
},
{
"type": "label",
"text": "[AFTER DECODING] {{he.decode($get.caption)}}"
}
]
}
]
}
}
}
}
}
================================================
FILE: action/script/index.json
================================================
{
"$jason": {
"head": {
"title": "$network",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
},
"data": {
"items": [{
"url": "https://jasonette.github.io/Jasonpedia/action/script/hejs/index.json",
"title": "he.js",
"description": "html text encoding/decoding library"
}, {
"url": "https://jasonette.github.io/Jasonpedia/action/script/underscorejs/index.json",
"title": "underscore.js",
"description": "popular util library for manipulating data"
}, {
"url": "https://jasonette.github.io/Jasonpedia/action/script/inline/index.json",
"title": "Inline JavaScript Usage",
"description": "You can also include a JavaScript code inline using $script.include"
}]
},
"templates": {
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/action/script/index.json",
"view": "web"
}
}
},
"sections": [
{
"header": {
"type": "horizontal",
"style": {
"background": "rgba(14,122,254,0.1)",
"padding": "20"
},
"components": [{
"style": {
"size": "12"
},
"type": "label",
"text": "$script.include action lets you include remote/local/inline JavaScript into the template context so you can use them within the template"
}]
},
"items": {
"{{#each items}}": {
"type": "vertical",
"href": {
"url": "{{url}}"
},
"components": [{
"type": "label",
"class": "bold",
"text": "{{title}}"
}, {
"type": "label",
"class": "normal",
"text": "{{description}}"
}]
}
}
}
]
}
}
}
}
}
================================================
FILE: action/script/inline/index.json
================================================
{
"$jason": {
"head": {
"title": "Inline JS Test",
"actions": {
"$load": {
"type": "$script.include",
"options": {
"items": [
{
"text": "var randomcolor = function() { return '#'+Math.floor(Math.random()*16777215).toString(16); }"
}
]
},
"success": {
"trigger": "draw"
}
},
"$pull": {
"trigger": "draw"
},
"draw": {
"type": "$render",
"options": {
"data": {
"color": "{{randomcolor()}}",
"background": "{{randomcolor()}}"
}
}
}
},
"templates": {
"body": {
"style": {
"color": "{{$jason.color}}",
"background": "{{$jason.background}}"
},
"header": {
"style": {
"color": "{{$jason.color}}",
"background": "{{$jason.background}}"
},
"title": "Pull to change to random color",
"menu": {
"text": "View JSON",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/inline/index.json",
"view": "web"
}
}
},
"layers": [
{
"type": "label",
"text": "{{$jason.background}}",
"style": {
"align": "center",
"size": "40",
"height": "100",
"top": "50%-50",
"color": "{{$jason.color}}"
}
}
]
}
}
}
}
}
================================================
FILE: action/script/underscorejs/db.json
================================================
{
"tests": [
{
"title": "_.where",
"code": {
"type": "$href",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/underscorejs/modal.json",
"transition": "modal",
"options": {
"code": "{{$root._.where([{title: 'Harry Potter and the Sorcerer\\'s Stone', author: 'J. K. Rowling'}, {title: 'Cymbeline', author: 'Shakespeare', year: 1611}, {title: 'Fifty Shades of Grey', author: 'E. L. James'}, {title: 'The Machine Stops', author: 'E. M. Forster'}, {title: 'The Tempest', author: 'Shakespeare', year: 1611}], {author: 'Shakespeare'})}}"
}
}
}
},
{
"title": "_.every 'true' case",
"code": {
"type": "$href",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/underscorejs/modal.json",
"transition": "modal",
"options": {
"code": "Is every item in [1,2,3,4] a number? : {{ $root._.every([1,2,3,4], function(num) { return typeof num === 'number'; }).toString() }}"
}
}
}
},
{
"title": "_.every 'false' case",
"code": {
"type": "$href",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/underscorejs/modal.json",
"options": {
"code": "Is every item in [1,'a',3,4] a number? : {{ $root._.every([1,'a',3,4], function(num) { return typeof num === 'number'; }).toString() }}"
}
}
}
},
{
"title": "_.indexBy",
"code": {
"type": "$href",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/underscorejs/modal.json",
"transition": "modal",
"options": {
"code": "{{$root._.indexBy([{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}], 'age')}}"
}
}
}
},
{
"title": "_.uniq",
"code": {
"type": "$href",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/underscorejs/modal.json",
"transition": "modal",
"options": {
"code": "{{$root._.uniq([1,1,2,2,3,3,3,3,4,5,6,6,6,6,6,6,6,6,6,7]).toString()}}"
}
}
}
}
]
}
================================================
FILE: action/script/underscorejs/index.json
================================================
{
"$jason": {
"head": {
"title": "Underscore.js Test",
"actions": {
"$load": {
"type": "$script.include",
"options": {
"items": [
{
"url": "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"
}
]
},
"success": {
"type": "$render"
}
}
},
"styles": {
"code": {
"padding": "10",
"size": "12",
"background": "#222222",
"color": "rgba(255,255,255,0.8)",
"font": "courier"
},
"title": {
"background": "#222222",
"color": "#8f9d6a",
"padding": "10"
}
},
"data": {
"@": "https://jasonette.github.io/Jasonpedia/action/script/underscorejs/db.json"
},
"templates": {
"body": {
"header": {
"title": "Underscore.js Test",
"menu": {
"text": "View JSON",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/script/underscorejs/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": {
"{{#each tests}}": {
"type": "vertical",
"action": "{{code}}",
"components": [
{
"type": "label",
"text": "{{title}}",
"class": "title"
},
{
"type": "label",
"text": "{{JSON.stringify(code, null, 2)}}",
"class": "code"
}
]
}
}
}
]
}
}
}
}
}
================================================
FILE: action/script/underscorejs/modal.json
================================================
{
"$jason": {
"head": {
"title": "Code Modal",
"actions": {
"$load": {
"type": "$render"
}
},
"templates": {
"body": {
"header": {
"title": "Result"
},
"sections": [
{
"items": [
{
"type": "label",
"text": "{{JSON.stringify($params.code, null, 2)}}",
"style": {
"padding": "10",
"background": "#222222",
"color": "rgba(255,255,255,0.8)",
"font": "courier",
"size": "12"
}
}
]
}
]
}
}
}
}
}
================================================
FILE: action/timer/index.json
================================================
{
"$jason": {
"head": {
"title": "$timer",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/action/timer/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"text": "Stopwatch",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/timer/stopwatch.json"
}
},
{
"type": "label",
"text": "Mario",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/timer/mario.json"
}
}
]
}
]
}
}
}
================================================
FILE: action/timer/mario.json
================================================
{
"$jason": {
"head": {
"title": "Mario",
"actions": {
"$load": {
"type": "$set",
"options": {
"index": "0",
"frame": "0"
},
"success": {
"type": "$timer.start",
"options": {
"interval": "1",
"name": "mario",
"repeats": "true",
"action": {
"trigger": "tick"
}
}
}
},
"tick": {
"type": "$set",
"options": {
"index": "{{'' + ((parseInt($get.index) + 1)%2)}}",
"frame": "{{'' + ((parseInt($get.frame) + 5)%500)}}"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"style": {
"background": "#000000",
"color": "#ffffff",
"border": "none"
},
"header": {
"style": {
"background": "#000000",
"color": "#ffffff"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/action/timer/mario.json",
"view": "web"
}
}
},
"sections": [{
"items": [{
"type": "vertical",
"style": {
"spacing": "10"
},
"components": [{
"type": "label",
"text": "FRAME\nhttps://jasonette.github.io/Jasonpedia/assets/{{$get.index}}.png",
"style": {
"font": "Courier",
"size": "12",
"color": "#ebebeb"
}
}, {
"type": "label",
"text": "COORD\n{{$get.frame}}",
"style": {
"font": "Courier",
"size": "12",
"color": "#ebebeb"
}
}]
}]
}],
"layers": [{
"type": "image",
"url": "https://jasonette.github.io/Jasonpedia/assets/{{$get.index}}.png",
"style": {
"top": "50%",
"left": "{{$get.frame}}",
"height": "50"
}
}]
}
}
}
}
}
================================================
FILE: action/timer/stopwatch.json
================================================
{
"$jason": {
"head": {
"title": "Stopwatch",
"actions": {
"$load": {
"type": "$set",
"options": {
"index": "0"
},
"success": {
"type": "$timer.start",
"options": {
"interval": "1",
"name": "stopwatch",
"repeats": "true",
"action": {
"trigger": "tick"
}
}
}
},
"tick": {
"type": "$set",
"options": {
"index": "{{'' + (parseInt($get.index) + 1)}}"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"style": {
"background": "#000000",
"color": "#ffffff"
},
"header": {
"style": {
"background": "#000000",
"color": "#ffffff"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/action/timer/stopwatch.json",
"view": "web"
}
}
},
"layers": [{
"type": "label",
"text": "{{$get.index}}",
"style": {
"top": "50%",
"left": "50%-100",
"color": "#ffffff",
"font": "Georgia",
"size": "50",
"align": "center",
"width": "200"
}
}]
}
}
}
}
}
================================================
FILE: action/variable/index.json
================================================
{
"$jason": {
"head": {
"title": "Local Variables",
"actions": {
"$load": {
"type": "$set",
"options": {
"blank": "?"
},
"success": {
"type": "$render"
}
},
"$pull": {
"type": "$flush",
"success": {
"type": "$reload"
}
}
},
"templates": {
"body": {
"header": {
"title": "Local Variables"
},
"sections": [
{
"items": [{
"type": "label",
"text": "{{$get.blank}}",
"style": {
"font": "HelveticaNeue-Bold",
"size": "30",
"padding": "20",
"align": "center"
}
}]
},
{
"header": {
"type": "label",
"text": "textfield",
"style": {
"background": "#f5f5f5"
}
},
"items": [
{
"type": "horizontal",
"components": [{
"type": "textfield",
"name": "blank"
}, {
"type": "button",
"text": "Done",
"style": {
"width": "60",
"color": "#ff0000"
},
"action": {
"type": "$render"
}
}]
}
]
},
{
"header": {
"type": "label",
"text": "textarea",
"style": {
"background": "#f5f5f5"
}
},
"items": [
{
"type": "horizontal",
"style": {
"align": "top"
},
"components": [{
"type": "textarea",
"placeholder": "Enter text and press Done",
"name": "blank",
"style": {
"height": "100"
}
}, {
"type": "button",
"text": "Done",
"style": {
"width": "60",
"height": "30",
"color": "#ff0000"
},
"action": {
"type": "$render"
}
}]
}
]
}
]
}
}
}
}
}
================================================
FILE: action/vision/index.json
================================================
{
"$jason": {
"head": {
"title": "Barcode Testing with inline update",
"actions": {
"$vision.ready": {
"trigger": "qr"
},
"$load": {
"type": "$set",
"options": {
"content": "Scanning..."
},
"success": {
"type": "$render"
}
},
"$vision.onscan": {
"type": "$set",
"options": {
"content": "{{$jason.content}}"
},
"success": {
"type": "$render",
"success": {
"type": "$timer.start",
"options": {
"interval": "1",
"name": "timer1",
"action": {
"trigger": "qr2"
}
}
}
}
},
"qr": {
"type": "$set",
"options": {
"content": "Scanning..."
},
"success": {
"type": "$vision.scan",
"success": {
"type": "$render"
}
}
},
"qr2": {
"type": "$vision.scan",
"options": {
"type": "qrcode"
}
}
},
"templates": {
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/action/vision/index.json",
"view": "web"
}
}
},
"style": {
"border": "none"
},
"background": {
"type": "camera",
"options": {
"device": "back"
}
},
"sections": [
{
"items": [
{
"type": "vertical",
"href": {
"url": "{{$get.content}}",
"transition": "modal"
},
"components": [
{
"type": "label",
"text": "{{$get.content}}",
"style": {
"color": "#ffffff",
"font": "Courier",
"size": "16",
"padding": "10",
"background": "rgba(0,0,0,0.2)"
}
}
]
}
]
}
]
}
}
}
}
}
================================================
FILE: core/href/index.json
================================================
{
"$jason": {
"head": {
"title": "Jasonette Href",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"background": "#ffffff",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"padding": "10",
"size": "12"
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/core/href/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"text": "Push transition to another Jason View",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/index.json"
}
},
{
"type": "label",
"text": "Push transition to another Jason View with tabs",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/tabs.json"
}
},
{
"type": "label",
"text": "Modal transition to another Jason View",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/index.json",
"transition": "modal"
}
},
{
"type": "label",
"text": "Modal transition to another Jason View with tabs",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/tabs.json",
"transition": "modal"
}
},
{
"type": "label",
"text": "Open external app (mail)",
"class": "bold",
"href": {
"url": "mailto:ethan.gliechtenstein@gmail.com?subject=It%20works!",
"view": "app"
}
},
{
"type": "label",
"text": "Open a browser",
"class": "bold",
"href": {
"url": "https://twitter.com/intent/user?screen_name=gliechtenstein",
"view": "web"
}
}
]
}
]
}
}
}
================================================
FILE: core/href/tabs.json
================================================
{
"$jason": {
"head": {
"title": "Jasonette Href",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"background": "#ffffff",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"padding": "10",
"size": "12"
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/core/href/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"text": "Push transition to another Jason View",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/index.json"
}
},
{
"type": "label",
"text": "Push transition to another Jason View with tabs",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/tabs.json"
}
},
{
"type": "label",
"text": "Modal transition to another Jason View",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/index.json",
"transition": "modal"
}
},
{
"type": "label",
"text": "Modal transition to another Jason View with tabs",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/tabs.json",
"transition": "modal"
}
},
{
"type": "label",
"text": "Open external app (mail)",
"class": "bold",
"href": {
"url": "mailto:ethan.gliechtenstein@gmail.com?subject=It%20works!",
"view": "app"
}
},
{
"type": "label",
"text": "Open a browser",
"class": "bold",
"href": {
"url": "https://twitter.com/intent/user?screen_name=gliechtenstein",
"view": "web"
}
}
]
}
],
"footer": {
"tabs": {
"style": {
"background": "rgba(255,255,255,0.8)",
"color": "#000000"
},
"items": [{
"image": "https://jasonette.github.io/Jasonpedia/assets/0.png",
"style": {
"height": "21"
},
"url": "https://jasonette.github.io/Jasonpedia/core/href/tabs.json"
}, {
"image": "https://jasonette.github.io/Jasonpedia/assets/2.png",
"style": {
"height": "21"
},
"url": "https://jasonette.github.io/Jasonpedia/core/href/tabs.json"
}, {
"image": "https://jasonette.github.io/Jasonpedia/assets/3.png",
"style": {
"height": "21"
},
"url": "https://jasonette.github.io/Jasonpedia/core/href/tabs.json"
}]
}
}
}
}
}
================================================
FILE: core/index.json
================================================
{
"$jason": {
"head": {
"title": "Core",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/core/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "vertical",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/href/index.json"
},
"components": [{
"type": "label",
"text": "$href",
"class": "bold"
}, {
"type": "label",
"text": "Various types of linking between views",
"class": "normal"
}]
}
]
},
{
"items": [
{
"type": "vertical",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/render/index.json"
},
"components": [{
"type": "label",
"text": "$render",
"class": "bold"
}, {
"type": "label",
"text": "Check out different render options",
"class": "normal"
}]
}
]
},
{
"items": [
{
"type": "vertical",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/snapshot/index.json"
},
"components": [{
"type": "label",
"text": "$snapshot",
"class": "bold"
}, {
"type": "label",
"text": "Take a snapshot of the current screen",
"class": "normal"
}]
}
]
}
]
}
}
}
================================================
FILE: core/render/index.json
================================================
{
"$jason": {
"head": {
"title": "$render",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"title": "$render",
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/core/render/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "vertical",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/render/templates.json"
},
"components": [{
"type": "label",
"text": "Multiple templates",
"class": "bold"
}, {
"type": "label",
"text": "Switching between multiple different templates",
"class": "normal"
}]
}
]
}
]
}
}
}
================================================
FILE: core/render/templates.json
================================================
{
"$jason": {
"head": {
"title": "$render templates",
"actions": {
"$pull": {
"type": "$flush",
"success": {
"type": "$reload"
}
}
},
"data": {
"members": [{
"name": "Bart",
"image": "https://jasonette.github.io/Jasonpedia/assets/bart.png"
}, {
"name": "Homer",
"image": "https://jasonette.github.io/Jasonpedia/assets/homer.jpg"
}, {
"name": "Marge",
"image": "https://jasonette.github.io/Jasonpedia/assets/marge.png"
}, {
"name": "Lisa",
"image": "https://jasonette.github.io/Jasonpedia/assets/lisa.jpg"
}, {
"name": "Maggie",
"image": "https://jasonette.github.io/Jasonpedia/assets/maggie.png"
}]
},
"styles": {
"labels": {
"size": "12",
"font": "HelveticaNeue-Bold",
"align": "center"
},
"left": {
"bottom": "20",
"left": "50",
"width": "100",
"height": "100",
"corner_radius": "50",
"color": "#ffffff",
"background": "rgba(0,0,0,0.7)",
"background": "#F2E205",
"padding": "20"
},
"right": {
"bottom": "20",
"right": "50",
"width": "100",
"height": "100",
"corner_radius": "50",
"color": "#ffffff",
"background": "rgba(0,0,0,0.7)",
"padding": "20"
}
},
"templates": {
"horizontal": {
"style": {
"background": "#f8d728",
"border": "none"
},
"header": {
"style": {
"background": "#f8d728"
}
},
"layers": [{
"type": "label",
"text": "Horizontal",
"class": "labels left",
"action": {
"type": "$render",
"options": {
"template": "horizontal"
}
}
}, {
"type": "label",
"text": "Vertical",
"class": "labels right",
"action": {
"type": "$render"
}
}],
"sections": [{
"type": "horizontal",
"header": {
"type": "image",
"url": "https://jasonette.github.io/Jasonpedia/assets/simpsons.jpg",
"style": {
"width": "100%",
"padding": "0",
"z_index": "-1"
}
},
"items": {
"{{#each members}}": {
"type": "vertical",
"style": {
"width": "200",
"height": "300",
"padding": "10",
"padding_top": "30",
"align": "center"
},
"components": [{
"type": "image",
"url": "{{image}}",
"style": {
"width": "180",
"height": "180",
"padding": "10",
"corner_radius": "90"
}
}, {
"type": "label",
"text": "{{name}}",
"style": {
"font": "ChalkboardSE-Bold",
"size": "25",
"color": "#1192f0"
}
}]
}
}
}]
},
"body": {
"style": {
"background": "#f8d728",
"border": "none"
},
"header": {
"style": {
"background": "#f8d728"
}
},
"layers": [{
"type": "label",
"text": "Horizontal",
"class": "labels left",
"action": {
"type": "$render",
"options": {
"template": "horizontal"
}
}
}, {
"type": "label",
"text": "Vertical",
"class": "labels right",
"action": {
"type": "$render"
}
}],
"sections": [{
"header": {
"type": "image",
"url": "https://jasonette.github.io/Jasonpedia/assets/simpsons.jpg",
"style": {
"width": "100%",
"padding": "0",
"z_index": "-1"
}
},
"items": {
"{{#each members}}": {
"type": "horizontal",
"style": {
"background": "#ffffff"
},
"components": [{
"type": "image",
"url": "{{image}}",
"style": {
"width": "180",
"height": "180",
"padding": "10",
"corner_radius": "90"
}
}, {
"type": "label",
"text": "{{name}}",
"style": {
"font": "ChalkboardSE-Bold",
"size": "25",
"padding": "10",
"color": "#1192f0"
}
}]
}
}
}]
}
}
}
}
}
================================================
FILE: core/snapshot/index.json
================================================
{
"$jason": {
"head": {
"title": "Snapshot",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
},
"$pull": {
"type": "$snapshot",
"success": {
"type": "$util.share",
"options": {
"items": [
{
"type": "image",
"data": "{{$jason.data}}"
}
]
}
}
}
}
},
"body": {
"style": {
"border": "none"
},
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/core/snapshot/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"class": "bold",
"text": "Swipe down to take a snapshot and share"
},
{
"type": "image",
"url": "https://pbs.twimg.com/media/Cu0xSA3WEAAVyA9.jpg",
"style": {
"width": "100%"
}
}
]
}
]
}
}
}
================================================
FILE: demo.json
================================================
{
"$jason": {
"head": {
"title": "Jasopedia",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"size": "15"
},
"padded": {
"padding": "10"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"title": "Jasonpedia",
"style": {
"background": "#8bb92d",
"color": "#ffffff",
"font": "AvenirNext-Bold",
"size": "14"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/demo.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "vertical",
"style": {
"background": "rgba(14,122,254,0.1)",
"padding": "20"
},
"href": {
"url": "mailto:?subject=Documentation&body=https://jasonette.github.io/documentation",
"view": "app"
},
"components": [
{
"type": "label",
"text": "Send yourself Documentation",
"class": "bold",
"style": {
"color": "rgb(14,122,254)"
}
}
]
}
]
},
{
"header": {
"type": "vertical",
"style": {
"background": "#ebebeb"
},
"components": [{
"type": "label",
"class": "bold",
"text": "Tutorial"
}, {
"type": "label",
"class": "normal",
"text": "Simple demos to demonstrate how each module works. Also used for testing purposes."
}]
},
"items": [
{
"type": "label",
"text": "Core",
"class": "bold padded",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/core/index.json"
}
},
{
"type": "label",
"text": "View",
"class": "bold padded",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/index.json"
}
},
{
"type": "label",
"text": "Action",
"class": "bold padded",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/index.json"
}
},
{
"type": "label",
"text": "Template",
"class": "bold padded",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/template/index.json"
}
},
{
"type": "label",
"text": "Web Container",
"class": "bold padded",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/webcontainer/index.json"
}
}
]
},
{
"header": {
"type": "vertical",
"style": {
"background": "#ebebeb"
},
"components": [{
"type": "label",
"class": "bold",
"text": "Showcase"
}, {
"type": "label",
"class": "normal",
"text": "Wrote a cool/useful JSON markup? Send a pull request to https://github.com/Jasonette/Jasonpedia"
}]
},
"items": [{
"type": "label",
"text": "Instagram",
"href": {
"url": "https://raw.githubusercontent.com/Jasonette/Instagram-UI-example/master/home.json",
"transition": "modal"
}
}, {
"type": "label",
"text": "Twitter",
"href": {
"url": "https://raw.githubusercontent.com/Jasonette/Twitter-UI-example/master/home.json",
"transition": "modal"
}
}]
}
]
}
}
}
================================================
FILE: hello.json
================================================
{
"$jason": {
"head": {
"title": "{ ˃̵̑ᴥ˂̵̑}",
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"style": {
"background": "#ffffff",
"border": "none"
},
"sections": [
{
"items": [
{
"type": "vertical",
"style": {
"padding": "30",
"spacing": "20",
"align": "center"
},
"components": [
{
"type": "label",
"text": "It's ALIVE!",
"style": {
"align": "center",
"font": "Courier-Bold",
"size": "18"
}
},
{
"type": "label",
"text": "This is a demo app. You can make your own app by changing the url inside settings.plist",
"style": {
"align": "center",
"font": "Courier",
"padding": "30",
"size": "14"
}
},
{
"type": "label",
"text": "{ ˃̵̑ᴥ˂̵̑}",
"style": {
"align": "center",
"font": "HelveticaNeue-Bold",
"size": "50"
}
}
]
},
{
"type": "label",
"style": {
"align": "right",
"padding": "10",
"color": "#000000",
"font": "HelveticaNeue",
"size": "12"
},
"text": "Check out Live DEMO",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/demo.json",
"fresh": "true"
}
},
{
"type": "label",
"style": {
"align": "right",
"padding": "10",
"color": "#000000",
"font": "HelveticaNeue",
"size": "12"
},
"text": "Watch the tutorial video",
"href": {
"url": "https://www.youtube.com/watch?v=hfevBAAfCMQ",
"view": "Web"
}
},
{
"type": "label",
"style": {
"align": "right",
"padding": "10",
"color": "#000000",
"font": "HelveticaNeue",
"size": "12"
},
"text": "View documentation",
"href": {
"url": "https://jasonette.github.io/documentation",
"view": "Web"
}
}
]
}
]
}
}
}
================================================
FILE: template/csv
================================================
name, descrption, url, icon
FKA Twigs, The artist formerly known as Twigs, https://en.wikipedia.org/wiki/FKA_Twigs, https://jasonette.github.io/Jasonpedia/assets/twigs.png
?, The artist formerly known as Prince, https://en.wikipedia.org/wiki/Prince_(musician), https://jasonette.github.io/Jasonpedia/assets/prince.png
G, The artist formerly known as Google, https://www.google.com, https://jasonette.github.io/Jasonpedia/assets/g.png
Snap, The artist formerly known as Snapchat, https://www.snapchat.com, https://jasonette.github.io/Jasonpedia/assets/snapchat.png
================================================
FILE: template/csv.json
================================================
{
"$jason": {
"head": {
"title": "CSV parser",
"actions": {
"$load": {
"type": "$network.request",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/template/csv",
"dataType": "raw"
},
"success": {
"type": "$convert.csv",
"options": {
"data": "{{$jason}}"
},
"success": {
"type": "$render"
}
}
}
},
"templates": {
"body": {
"header": {
"title": "FKA",
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/csv.json",
"view": "web"
}
}
},
"sections": [
{
"header": {
"type": "horizontal",
"style": {
"background": "rgba(14,122,254,0.1)",
"padding": "20"
},
"components": [{
"style": {
"size": "12"
},
"type": "label",
"text": "This demo parses a CSV at https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/csv and renders it as JSON"
}]
},
"items": {
"{{#each $jason}}": {
"type": "horizontal",
"href": {
"url": "{{url}}",
"view": "Web"
},
"style": {
"padding": "10",
"spacing": "5"
},
"components": [
{
"type": "image",
"style": {
"width": "50"
},
"url": "{{icon}}"
},
{
"type": "vertical",
"components": [
{
"type": "label",
"text": "{{name}}",
"style": {
"font": "HelveticaNeue-Bold",
"size": "14"
}
},
{
"type": "label",
"text": "{{descrption}}",
"style": {
"font": "HelveticaNeue",
"size": "13"
}
}
]
}
]
}
}
}
]
}
}
}
}
}
================================================
FILE: template/each.json
================================================
{
"$jason": {
"head": {
"title": "#each",
"data": {
"users": [{
"profile": "https://pbs.twimg.com/profile_images/557061751150112768/eMwi4Xz2_400x400.jpeg",
"username": "gliechtenstein"
}, {
"profile": "https://pbs.twimg.com/profile_images/660748555452223488/seiYgVbF.png",
"username": "thinkpiecebot"
}, {
"profile": "https://pbs.twimg.com/profile_images/693649835086360577/xPofOC6p.png",
"username": "catsnacks"
}]
},
"templates": {
"body": {
"sections": [{
"items": {
"{{#each users}}": {
"type": "horizontal",
"style": {
"spacing": "10"
},
"components": [{
"type": "image",
"style": {
"width": "50"
},
"url": "{{profile}}"
}, {
"type": "label",
"text": "{{username}}"
}]
}
}
}]
}
}
}
}
}
================================================
FILE: template/html.json
================================================
{
"$jason": {
"head": {
"title": "HTML Template",
"actions": {
"$pull": {
"trigger": "reload"
},
"$show": {
"trigger": "reload"
},
"reload": {
"type": "$network.request",
"options": {
"url": "https://news.ycombinator.com/newest",
"dataType": "html"
},
"success": {
"type": "$render",
"options": {
"type": "html"
},
"success": {
"type": "$util.toast",
"options": {
"text": "Refreshed"
}
}
}
}
},
"templates": {
"body": {
"header": {
"title": "HN",
"style": {
"background": "rgb(246, 246, 239)",
"theme": "light",
"color": "#000000"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/html.json",
"view": "web"
}
}
},
"style": {
"background": "rgb(246, 246, 239)",
"color": "#000000",
"border": "none"
},
"sections": [
{
"header": {
"type": "horizontal",
"style": {
"background": "rgba(14,122,254,0.1)",
"padding": "20"
},
"components": [
{
"style": {
"size": "12"
},
"type": "label",
"text": "This demo parses an HTML content loaded from Hacker News (https://news.ycombinator.com) and renders it into native view"
}
]
},
"items": {
"{{#each $jason.find('tr.athing')}}": {
"type": "horizontal",
"href": {
"url": "https://news.ycombinator.com/{{$(this).next().find('.subtext .age a').attr('href')}}",
"view": "Web"
},
"menu": {
"items": [
{
"text": "Visit\nSite",
"action": {
"type": "$href",
"options": {
"url": "{{$(this).find('td.title a').attr('href')}}",
"view": "Web"
}
}
}
]
},
"style": {
"padding": "4",
"spacing": "10",
"color": "#ff6600",
"background": "rgb(246, 246, 239)"
},
"components": [
{
"type": "label",
"style": {
"font": "HelveticaNeue-Bold",
"size": "10",
"padding": "10",
"width": "50"
},
"text": "{{($(this).next().find('.subtext .score').text().split(' ')[0]).toString()+'\\npoints'}}"
},
{
"type": "vertical",
"style": {
"spacing": "5"
},
"components": [
{
"type": "label",
"text": "{{$(this).find('td.title > a').text()}}",
"style": {
"font": "HelveticaNeue-Bold",
"color": "#ff6600",
"size": "16"
}
},
{
"type": "label",
"style": {
"color": "#aaaaaa",
"font": "HelveticaNeue",
"size": "13"
},
"text": "{{$(this).find('td.title .sitebit').text() + ' ' + $(this).next().find('.subtext').find(':nth-child(3)').text()}}"
}
]
}
]
}
}
}
]
}
}
}
}
}
================================================
FILE: template/if.json
================================================
{
"$jason": {
"head": {
"title": "#if",
"data": {
"users": [{
"profile": "https://pbs.twimg.com/profile_images/557061751150112768/eMwi4Xz2_400x400.jpeg",
"username": "gliechtenstein"
}, {
"username": "guest"
}, {
"profile": "https://pbs.twimg.com/profile_images/693649835086360577/xPofOC6p.png",
"username": "catsnacks"
}, {
"username": "guest"
}, {
"username": "guest"
}]
},
"templates": {
"body": {
"header": {
"title": "#if/#elseif/#else",
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/if.json",
"view": "web"
}
}
},
"sections": [{
"header": {
"type": "label",
"text": "What's going on here:\n\nDisplay the default avatar (egg) for those who don't have an avatar, using the #if and #else logic (view JSON for more)",
"style": {
"background": "#f5f5f5"
}
},
"items": {
"{{#each users}}": {
"type": "horizontal",
"style": {
"spacing": "10"
},
"components": [{
"type": "image",
"style": {
"width": "50"
},
"url": [{
"{{#if 'profile' in this}}": "{{profile}}"
}, {
"{{#else}}": "https://jasonette.github.io/Jasonpedia/assets/egg.png"
}]
}, {
"type": "vertical",
"style": {
"spacing": "5"
},
"components": [{
"type": "label",
"style": {
"font": "HelveticaNeue-Bold",
"size": "12"
},
"text": "{{username}}"
}, {
"type": "label",
"style": {
"background": "#282828",
"corner_radius": "3",
"color": "#c5d3d8",
"padding": "10",
"size": "12",
"font": "Courier"
},
"text": "JSON:\n\n{{JSON.stringify(this, null, ' ')}}"
}]
}]
}
}
}]
}
}
}
}
}
================================================
FILE: template/index.json
================================================
{
"$jason": {
"head": {
"title": "Template",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
},
"gray": {
"background": "#f5f5f5"
}
},
"actions": {
"$foreground": {
"type": "$reload"
},
"$pull": {
"type": "$flush",
"success": {
"type": "$reload"
}
}
},
"data": {
"json_items": [{
"title": "Inline Data",
"description": "Render inline data ($jason.head.data) using template",
"url": "https://jasonette.github.io/Jasonpedia/template/inline.json"
}, {
"title": "Dynamic Data",
"description": "Make a $network.request action to an API and render the template",
"url": "https://jasonette.github.io/Jasonpedia/template/network.json"
}, {
"title": "#each",
"description": "Loop through array using #each keyword",
"url": "https://jasonette.github.io/Jasonpedia/template/each.json"
}, {
"title": "#if | #elseif | #else",
"description": "Use the conditionals to selectively render templates",
"url": "https://jasonette.github.io/Jasonpedia/template/if.json"
}, {
"title": "Use Javascript expressions",
"description": "Jasonette template engine is built on top of native Javascript engine, so you can use any Javascript expression inside {{ }}",
"url": "https://jasonette.github.io/Jasonpedia/template/js.json"
}, {
"title": "Javascript function example",
"description": "Sometimes, just a single Javascript statement is not enough. You can embed a full Javascript function inside {{ }}. Just remember to have a return value, and escape them correctly",
"url": "https://jasonette.github.io/Jasonpedia/template/jsfunction.json"
}],
"nonjson_items": [{
"title": "HTML",
"description": "Transform any HTML content into JSON, which then can be rendered",
"url": "https://jasonette.github.io/Jasonpedia/template/html.json"
}, {
"title": "RSS",
"description": "Transform any RSS content into JSON, which then can be rendered",
"url": "https://jasonette.github.io/Jasonpedia/template/rss.json"
}, {
"title": "CSV",
"description": "Transform any CSV content into JSON, which then can be rendered",
"url": "https://jasonette.github.io/Jasonpedia/template/csv.json"
}]
},
"templates": {
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/index.json",
"view": "web"
}
}
},
"sections": [
{
"header": {
"type": "horizontal",
"style": {
"background": "rgba(14,122,254,0.1)",
"padding": "20"
},
"components": [{
"style": {
"size": "12"
},
"type": "label",
"text": "Note: These demos demonstrate how you can use templates to build a view. The apps themselves will look the same as those not using templates, you will need to look at the JSON to see the difference"
}]
}
}, {
"header": {
"type": "label",
"class": "normal gray",
"text": "JSON Templating"
},
"items": {
"{{#each json_items}}": {
"type": "vertical",
"href": {
"url": "{{url}}"
},
"components": [{
"type": "label",
"text": "{{title}}",
"class": "bold"
}, {
"type": "label",
"text": "{{description}}",
"class": "normal"
}]
}
}
}, {
"header": {
"type": "label",
"class": "normal gray",
"text": "Non-JSON Templating"
},
"items": {
"{{#each nonjson_items}}": {
"type": "vertical",
"href": {
"url": "{{url}}"
},
"components": [{
"type": "label",
"text": "{{title}}",
"class": "bold"
}, {
"type": "label",
"text": "{{description}}",
"class": "normal"
}]
}
}
}
]
}
}
}
}
}
================================================
FILE: template/inline.json
================================================
{
"$jason": {
"head": {
"title": "Inline Template",
"data": {
"profile": "https://pbs.twimg.com/profile_images/557061751150112768/eMwi4Xz2_400x400.jpeg",
"username": "ethan"
},
"templates": {
"body": {
"sections": [{
"items": [{
"type": "horizontal",
"style": {
"spacing": "10"
},
"components": [{
"type": "image",
"style": {
"width": "50"
},
"url": "{{profile}}"
}, {
"type": "label",
"text": "{{username}}"
}]
}]
}]
}
}
}
}
}
================================================
FILE: template/js.json
================================================
{
"$jason": {
"head": {
"title": "Javascript",
"actions": {
"$load": {
"type": "$geo.get",
"options": {
"distance": "100"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"header": {
"title": "Simple Javascript",
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/js.json",
"view": "web"
}
}
},
"sections": [{
"items": [{
"type": "vertical",
"style": {
"spacing": "5"
},
"components": [{
"type": "label",
"text": "We want to take the following return value from $geo.get"
}, {
"type": "label",
"style": {
"background": "#282828",
"corner_radius": "3",
"color": "#c5d3d8",
"padding": "10",
"size": "12",
"font": "Courier"
},
"text": "{{JSON.stringify($jason, null, ' ')}}"
}, {
"type": "label",
"text": "And add an emoji in between the latitude and longitude. To do that we will use Javascript split function to split the string and reconstruct a string with the emoji included."
}]
}, {
"type": "vertical",
"style": {
"spacing": "5"
},
"components": [{
"type": "label",
"text": "Evaluated Result",
"style": {
"font": "HelveticaNeue-Bold",
"size": "12"
}
}, {
"type": "label",
"style": {
"background": "#282828",
"corner_radius": "3",
"color": "#c5d3d8",
"padding": "10",
"size": "12",
"font": "Courier"
},
"text": "{{$jason.coord.split(',')[0] + '📍' + $jason.coord.split(',')[1]}}"
}, {
"type": "label",
"text": "View JSON to see the actual javascript expression that evaluated to below:"
}]
}]
}]
}
}
}
}
}
================================================
FILE: template/jsfunction.json
================================================
{
"$jason": {
"head": {
"title": "Javascript Function",
"actions": {
"$load": {
"type": "$geo.get",
"options": {
"distance": "100"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"header": {
"title": "Simple Javascript",
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/jsfunction.json",
"view": "web"
}
}
},
"sections": [{
"header": {
"type": "label",
"text": "This time, a bit more complex Javascript. We will implement an entire function",
"style": {
"background": "#f5f5f5",
"padding": "20"
}
},
"items": [{
"type": "vertical",
"style": {
"spacing": "5"
},
"components": [{
"type": "label",
"text": "Let's try a function with a for loop"
}, {
"type": "label",
"style": {
"background": "#282828",
"corner_radius": "3",
"color": "#c5d3d8",
"padding": "10",
"size": "12",
"font": "Courier"
},
"text": "var items=[]; for(var i=0; i<10; i++){items.push(i);} return JSON.stringify(items);"
}]
}, {
"type": "vertical",
"style": {
"spacing": "5"
},
"components": [{
"type": "label",
"text": "Evaluated Result",
"style": {
"font": "HelveticaNeue-Bold",
"size": "12"
}
}, {
"type": "label",
"style": {
"background": "#282828",
"corner_radius": "3",
"color": "#c5d3d8",
"padding": "10",
"size": "12",
"font": "Courier"
},
"text": "{{var items=[]; for(var i=0; i<10; i++){items.push(i);} return JSON.stringify(items);}}"
}, {
"type": "label",
"text": "View the JSON to see the actual javascript expression that evaluated to below:"
}]
}]
}]
}
}
}
}
}
================================================
FILE: template/network.json
================================================
{
"$jason": {
"head": {
"title": "JSONPlaceholder demo",
"actions": {
"$load": {
"type": "$network.request",
"options": {
"url": "http://jsonplaceholder.typicode.com/photos"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"style": {
"border": "none"
},
"header": {
"title": "network request & render",
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/network.json",
"view": "web"
}
}
},
"sections": [
{
"header": {
"type": "label",
"text": "This example fetches content from http://jsonplaceholder.typicode.com/photos and renders its results dynamically. View JSON for more details",
"style": {
"background": "#f5f5f5",
"padding": "20"
}
},
"items": {
"{{#each $jason}}": {
"type": "horizontal",
"style": {
"padding": "10",
"spacing": "10"
},
"components": [
{
"type": "image",
"style": {
"width": "50"
},
"url": "{{thumbnailUrl}}"
},
{
"type": "label",
"style": {
"size": "14"
},
"text": "{{title}}"
}
],
"action": {
"type": "$widget.banner",
"options": {
"title": "You selected",
"description": "{{title}}"
}
}
}
}
}
]
}
}
}
}
}
================================================
FILE: template/rss.json
================================================
{
"$jason": {
"head": {
"title": "RSS Reader",
"actions": {
"$pull": {
"trigger": "reload"
},
"$load": {
"trigger": "reload"
},
"reload": {
"type": "$network.request",
"options": {
"url": "https://pitchfork.com/rss/reviews/albums/",
"dataType": "rss"
},
"success": {
"type": "$convert.rss",
"options": {
"data": "{{$jason}}"
},
"success": {
"type": "$render"
}
}
}
},
"templates": {
"body": {
"header": {
"style": {
"background": "rgb(246, 246, 239)",
"theme": "light",
"color": "#000000"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/template/rss.json",
"view": "web"
}
}
},
"style": {
"background": "rgb(246, 246, 239)",
"color": "#000000",
"border": "0"
},
"sections": {
"{{#each $jason}}": {
"header": {
"type": "vertical",
"style": {
"background": "#ffffff",
"padding": "10"
},
"components": [
{
"type": "label",
"style": {
"font": "HelveticaNeue-Bold",
"size": "20"
},
"text": "{{title}}"
},
{
"type": "label",
"text": "{{author}}"
}
]
},
"items": [
{
"type": "image",
"url": "{{image.url}}"
}
]
}
}
}
}
}
}
}
================================================
FILE: view/background/index.json
================================================
{
"$jason": {
"head": {
"title": "Background Styling Example",
"actions": {
"$load": {
"type": "$set",
"options": {
"bg": "#00ff00"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"header": {
"style": {
"background": "rgba(0,0,0,0)",
"color": "#ffffff"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/view/background/index.json",
"view": "web"
},
"style": {
"color": "#ffffff"
}
}
},
"style": {
"background": "{{$get.bg}}"
},
"layers": [
{
"type": "button",
"url": "https://s3.amazonaws.com/www.textcast.co/icons/camera%402x.png",
"style": {
"left": "20",
"bottom": "20",
"width": "30",
"height": "30",
"color": "#ffffff"
},
"action": {
"type": "$snapshot",
"success": {
"type": "$util.share",
"options": {
"items": [
{
"type": "image",
"data": "{{$jason.data}}"
}
]
}
}
}
},
{
"type": "label",
"text": "Red",
"style": {
"background": "rgba(0,0,0,0.7)",
"color": "#ff0000",
"padding": "10",
"right": "20",
"font": "HelveticaNeue-Bold",
"bottom": "220"
},
"action": {
"type": "$set",
"options": {
"bg": "#ff0000"
},
"success": {
"type": "$render"
}
}
},
{
"type": "label",
"text": "Green",
"style": {
"background": "rgba(0,0,0,0.7)",
"color": "#00ff00",
"padding": "10",
"right": "20",
"font": "HelveticaNeue-Bold",
"bottom": "170"
},
"action": {
"type": "$set",
"options": {
"bg": "#00ff00"
},
"success": {
"type": "$render"
}
}
},
{
"type": "label",
"text": "Cat",
"style": {
"background": "rgba(0,0,0,0.7)",
"color": "#ffffff",
"right": "20",
"padding": "10",
"font": "HelveticaNeue-Bold",
"bottom": "120"
},
"action": {
"type": "$set",
"options": {
"bg": "http://i.giphy.com/Is0AJv4CEj9hm.gif"
},
"success": {
"type": "$render"
}
}
},
{
"type": "label",
"text": "Camera",
"style": {
"background": "rgba(0,0,0,0.7)",
"color": "#ffffff",
"right": "20",
"padding": "10",
"font": "HelveticaNeue-Bold",
"bottom": "70"
},
"action": {
"type": "$set",
"options": {
"bg": {
"type": "camera",
"options": {
"device": "back"
}
}
},
"success": {
"type": "$render"
}
}
},
{
"type": "label",
"text": "Mirror",
"style": {
"background": "rgba(0,0,0,0.7)",
"color": "#ffffff",
"right": "20",
"padding": "10",
"font": "HelveticaNeue-Bold",
"bottom": "20"
},
"action": {
"type": "$set",
"options": {
"bg": {
"type": "camera"
}
},
"success": {
"type": "$render"
}
}
}
]
}
}
}
}
}
================================================
FILE: view/component/button/1.json
================================================
{
"$jason": {
"head": {
"title": "Rectangle Button"
},
"body": {
"sections": [{
"items": [{
"type": "vertical",
"style": {
"align": "center"
},
"components": [{
"type": "button",
"style": {
"width": "200",
"height": "100",
"background": "#00ff00",
"color": "#ffffff",
"font": "HelveticaNeue-Bold",
"size": "15"
},
"text": "I'm a button"
}]
}]
}]
}
}
}
================================================
FILE: view/component/button/2.json
================================================
{
"$jason": {
"head": {
"title": "Rounded Button"
},
"body": {
"sections": [{
"items": [{
"type": "vertical",
"style": {
"align": "center"
},
"components": [{
"type": "button",
"style": {
"font": "HelveticaNeue-Bold",
"background": "#0000ff",
"color": "#ffffff",
"width": "200",
"height": "200",
"corner_radius": "100",
"size": "15"
},
"text": "YES"
}]
}]
}]
}
}
}
================================================
FILE: view/component/button/3.json
================================================
{
"$jason": {
"head": {
"title": "Mario Button"
},
"body": {
"style": {
"border": "none"
},
"header": {
"style": {
"shy": "true"
}
},
"sections": [
{
"items": [
{
"type": "image",
"style": {
"padding": "0",
"width": "100%",
"z_index": "-1"
},
"url": "http://cdn.bgr.com/2016/09/super-mario-run.jpg?quality=98&strip=all"
},
{
"type": "vertical",
"style": {
"padding": "20",
"spacing": "20"
},
"components": [
{
"type": "label",
"text": "There are two types of buttons, and we'll show you how they work",
"style": {
"font": "HelveticaNeue-Bold",
"size": "40"
}
},
{
"type": "label",
"text": "There are two types of buttons: image type and text type. You can build them both simply by specifying the type as 'button'. But the difference is what comes next. If the button contains a 'url' attribute, it will be rendered as an image button, like the Mario button below. If the button contains a 'text' attribute, it will be rendered as a text attribute, like the red 'Tap Mario' button below."
}
]
},
{
"type": "horizontal",
"style": {
"padding": "50",
"spacing": "20"
},
"components": [
{
"type": "button",
"text": "Tap Mario =>",
"style": {
"font": "HelveticaNeue-Bold",
"size": "20",
"corner_radius": "3",
"background": "#ff0000"
},
"action": {
"type": "$util.alert",
"options": {
"title": "I said Mario!",
"description": "Tap Mario, not the text."
}
}
},
{
"type": "button",
"url": "https://jasonette.github.io/Jasonpedia/assets/0.png",
"style": {
"width": "50"
},
"action": {
"type": "$audio.play",
"options": {
"url": "https://raw.githubusercontent.com/gliechtenstein/Sounds/master/oh_no.mp3"
}
}
}
]
},
{
"type": "vertical",
"style": {
"spacing": "10"
},
"components": [
{
"type": "label",
"text": "Label type buttons look like this in JSON:"
},
{
"type": "label",
"style": {
"background": "#000000",
"color": "#cecece",
"size": "11",
"padding": "10",
"corner_radius": "3"
},
"text": "{\"type\": \"button\", \"text\": \"Tap Mario => \"}"
}
]
},
{
"type": "vertical",
"style": {
"spacing": "10"
},
"components": [
{
"type": "label",
"text": "Image type buttons look like this in JSON:"
},
{
"type": "label",
"style": {
"background": "#000000",
"color": "#cecece",
"size": "11",
"padding": "10",
"corner_radius": "3"
},
"text": "{\"type\": \"button\", \"url\": \"https://jasonette.github.io/Jasonpedia/assets/0.png\"}"
}
]
}
]
}
]
}
}
}
================================================
FILE: view/component/button/index.json
================================================
{
"$jason": {
"head": {
"title": "Buttons",
"data": {
"items": [
{ "type": "Rectangle button", "url": "https://jasonette.github.io/Jasonpedia/view/component/button/1.json" },
{ "type": "Rounded button", "url": "https://jasonette.github.io/Jasonpedia/view/component/button/2.json" },
{ "type": "Image button", "url": "https://jasonette.github.io/Jasonpedia/view/component/button/3.json" }
]
},
"templates": {
"body": {
"sections": [{
"items": {
"{{#each items}}": {
"type": "label",
"style": {
"padding": "10",
"font": "HelveticaNeue-Bold",
"size": "15"
},
"href": {
"url": "{{url}}"
},
"text": "{{type}}"
}
}
}]
}
}
}
}
}
================================================
FILE: view/component/html/index.json
================================================
{
"$jason": {
"head": {
"title": "HTML"
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/html/index.json",
"view": "web"
}
}
},
"sections": [{
"items": [{
"type": "html",
"css": "img{width: 100%;} p{font-family: Helvetica; font-size: 14px;}",
"text": "<img alt=\"\" src=\"https://cdn0.vox-cdn.com/thumbor/PPvtkzgfvglcclm7DNwByCxjY1M=/0x0:2500x1667/1310x873/cdn0.vox-cdn.com/uploads/chorus_image/image/51427661/nexus-6p-9736.0.0.jpg\" /> <p>Well it turns out Nexus devices <i>are</i> getting Android 7.1 at the same time as Google's new Pixel phones — or at least a developer preview build of it. This evening Google rolled out a preview release of 7.1 Nougat for the Nexus 6P, 5X, and Pixel C tablet. If your device is installed in the Android Beta program, you can install the update right now to get new features like Night Light, long-press app shortcuts, support for new circular icons, and optimizations to touch and display responsiveness among other changes.</p> <p>\"We’re delivering the initial Developer Preview at beta quality for the Nexus lineup of devices,\" Google's Dave Burke wrote in a <a href=\"http://android-developers.blogspot.com/2016/10/android71-dev-preview-available.html\" target=\"_blank\">blog post announcing the release</a>. \"The goal is to tease out any device-specific issues.\" There's a...</p> <p> <a href=\"http://www.theverge.com/circuitbreaker/2016/10/19/13340688/google-android-7-1-developer-preview-now-available\">Continue reading…</a> </p>"
}]
}]
}
}
}
================================================
FILE: view/component/image/index.json
================================================
{
"$jason": {
"head": {
"title": "image"
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/image/index.json",
"view": "web"
}
}
},
"sections": [{
"header": {
"type": "label",
"style": {
"background": "#f5f5f5"
},
"text": "Full width image"
},
"items": [{
"type": "image",
"style": {
"width": "100%",
"padding": "0"
},
"url": "http://i8.mangareader.net/ito-junjis-cat-diary/1/ito-junjis-cat-diary-2241289.jpg"
}]
}, {
"header": {
"type": "label",
"style": {
"background": "#f5f5f5"
},
"text": "rounded image"
},
"items": [{
"type": "vertical",
"style": {
"padding": "50",
"background": "#0000ff",
"align": "center"
},
"components": [{
"type": "image",
"url": "https://pbs.twimg.com/profile_images/557061751150112768/eMwi4Xz2.jpeg",
"style": {
"width": "200",
"corner_radius": "100"
}
}]
}]
}, {
"header": {
"type": "label",
"style": {
"background": "#f5f5f5"
},
"text": "rounded image with transparency"
},
"items": [{
"type": "vertical",
"style": {
"padding": "50",
"background": "#0000ff",
"align": "center"
},
"components": [{
"type": "image",
"url": "https://pbs.twimg.com/profile_images/557061751150112768/eMwi4Xz2.jpeg",
"style": {
"width": "200",
"opacity": "0.3",
"corner_radius": "100"
}
}]
}]
}, {
"header": {
"type": "label",
"style": {
"background": "#f5f5f5"
},
"text": "animated gif"
},
"items": [{
"type": "image",
"url": "https://media.giphy.com/media/13CoXDiaCcCoyk/giphy.gif",
"style": {
"padding": "0",
"width": "100%"
}
}]
}]
}
}
}
================================================
FILE: view/component/index.json
================================================
{
"$jason": {
"head": {
"title": "Component",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
},
"$pull": {
"type": "$flush",
"success": {
"type": "$reload"
}
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"text": "label",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/label/index.json"
}
},
{
"type": "label",
"text": "image",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/image/index.json"
}
},
{
"type": "label",
"text": "button",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/button/index.json"
}
},
{
"type": "label",
"text": "html",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/html/index.json"
}
},
{
"type": "label",
"text": "map",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/map/index.json"
}
},
{
"type": "label",
"text": "slider",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/slider/index.json"
}
},
{
"type": "label",
"text": "textarea",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/textarea/index.json"
}
},
{
"type": "label",
"text": "textfield",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/textfield/index.json"
}
},
{
"type": "label",
"text": "space",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/space/index.json"
}
},
{
"type": "label",
"text": "common styling",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/style/index.json"
}
}
]
}
]
}
}
}
================================================
FILE: view/component/label/index.json
================================================
{
"$jason": {
"head": {
"title": "label"
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/label/index.json",
"view": "web"
}
}
},
"sections": [{
"items": [{
"type": "label",
"text": "Helvetica Neue Bold, 20, orange",
"style": {
"font": "HelveticaNeue-Bold",
"size": "20",
"padding": "20",
"color": "#FFA500"
}
}, {
"type": "label",
"text": "Helvetica Neue Bold, 20, orange, align: right",
"style": {
"font": "HelveticaNeue-Bold",
"align": "right",
"size": "20",
"padding": "20",
"color": "#FFA500"
}
}, {
"type": "label",
"text": "Helvetica Neue Bold, 20, orange, align: center",
"style": {
"font": "HelveticaNeue-Bold",
"align": "center",
"size": "20",
"padding": "20",
"color": "#FFA500"
}
}, {
"type": "label",
"text": "Courier, 13, green",
"style": {
"font": "Courier",
"size": "13",
"padding": "20",
"color": "#00ff00"
}
}, {
"type": "vertical",
"style": {
"align": "center"
},
"components": [{
"type": "label",
"text": "Helvetica Neue Bold, size:20, padding:30, background: #ebebeb",
"style": {
"font": "HelveticaNeue-Bold",
"size": "20",
"color": "#0000ff",
"padding": "30",
"background": "#ebebeb"
}
}]
}, {
"type": "vertical",
"style": {
"align": "center"
},
"components": [{
"type": "label",
"text": "Helvetica Neue, size:20, padding:80, corner_radius: 40, background: #ebebeb",
"style": {
"font": "HelveticaNeue-Bold",
"size": "20",
"color": "#0000ff",
"corner_radius": "40",
"padding": "90",
"background": "#ebebeb"
}
}]
}]
}]
}
}
}
================================================
FILE: view/component/map/index.json
================================================
{
"$jason": {
"head": {
"title": "map",
"styles": {
"padded": {
"padding": "20",
"font": "HelveticaNeue-Bold",
"size": "20"
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/map/index.json",
"view": "web"
}
}
},
"sections": [{
"header": {
"type": "vertical",
"style": {
"padding": "0"
},
"components": [{
"type": "label",
"style": {
"background": "#f5f5f5",
"padding": "10"
},
"text": "Map in a header"
}, {
"type": "map",
"region": {
"coord": "40.7197614,-73.9909211",
"width": "200",
"height": "200"
},
"style": {
"width": "100%",
"height": "150"
}
}]
},
"items": [{
"type": "label",
"class": "padded",
"text": "scroll down to see more"
}, {
"type": "label",
"class": "padded",
"text": "scroll down to see more"
}, {
"type": "label",
"class": "padded",
"text": "scroll down to see more"
}, {
"type": "label",
"class": "padded",
"text": "scroll down to see more"
}, {
"type": "label",
"class": "padded",
"text": "scroll down to see more"
}, {
"type": "label",
"class": "padded",
"text": "scroll down to see more"
}]
}, {
"header": {
"type": "label",
"style": {
"background": "#f5f5f5"
},
"text": "Map with 200x200 region"
},
"items": [{
"type": "map",
"region": {
"coord": "40.7197614,-73.9909211",
"width": "200",
"height": "200"
},
"style": {
"width": "100%",
"height": "300"
}
}]
}, {
"header": {
"type": "label",
"style": {
"background": "#f5f5f5"
},
"text": "Map with pins"
},
"items": [{
"type": "map",
"region": {
"coord": "40.7197614,-73.9909211",
"width": "100",
"height": "100"
},
"pins": [{
"title": "This is a pin",
"description": "It really is.",
"coord": "40.7197614,-73.9909211",
"style": {
"selected": "true"
}
}],
"style": {
"width": "100%",
"height": "300"
}
}]
}]
}
}
}
================================================
FILE: view/component/slider/index.json
================================================
{
"$jason": {
"head": {
"title": "Slider",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"align": "center",
"size": "40"
}
},
"actions": {
"$foreground": {
"type": "$reload"
},
"$pull": {
"type": "$flush",
"success": {
"type": "$reload"
}
},
"$load": {
"type": "$set",
"options": {
"gauge": "0.2"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/slider/index.json",
"view": "web"
}
}
},
"sections": [{
"header": {
"type": "label",
"class": "bold",
"text": "{{'' + $get.gauge}}"
},
"items": [{
"type": "slider",
"name": "gauge",
"style": {
"height": "100",
"width": "50%",
"align": "center",
"color": "#00ff00"
},
"action": {
"type": "$render"
}
}, {
"type": "slider",
"name": "gauge",
"style": {
"height": "100",
"width": "100%",
"align": "center",
"color": "#ff0000"
},
"action": {
"type": "$render"
}
}]
}]
}
}
}
}
}
================================================
FILE: view/component/space/index.json
================================================
{
"$jason": {
"head": {
"title": "Space",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
},
"$pull": {
"type": "$flush",
"success": {
"type": "$reload"
}
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/space/index.json",
"view": "web"
}
}
},
"sections": [
{
"header": {
"type": "label",
"text": "Fixed space",
"style": {
"background": "#f5f5f5"
}
},
"items": [
{
"type": "vertical",
"style": {
"padding": "0"
},
"components": [
{
"type": "label",
"style": {
"background": "#ebebeb"
},
"text": "50px Space below this point",
"class": "bold"
},
{
"type": "space",
"style": {
"height": "50"
}
},
{
"type": "label",
"text": "50px Space above this point",
"style": {
"background": "#ebebeb"
},
"class": "bold"
}
]
}
]
},
{
"header": {
"type": "label",
"style": {
"background": "#f5f5f5"
},
"text": "Flexible space usage. The space component in the middle automatically expands to fill the layout. This type of layout would be not possible without a space component"
},
"items": [{
"type": "horizontal",
"components": [{
"type": "label",
"style": {
"width": "100",
"align": "right"
},
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco"
}, {
"type": "space"
}, {
"type": "label",
"style": {
"width": "50",
"align": "left"
},
"text": "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}]
}]
}
]
}
}
}
================================================
FILE: view/component/style/index.json
================================================
{
"$jason": {
"head": {
"title": "Common component styling",
"data": {
"items": [
{ "type": "Opacity", "url": "https://jasonette.github.io/Jasonpedia/view/component/style/opacity.json" }
]
},
"templates": {
"body": {
"sections": [{
"items": {
"{{#each items}}": {
"type": "label",
"style": {
"padding": "10",
"font": "HelveticaNeue-Bold",
"size": "15"
},
"href": {
"url": "{{url}}"
},
"text": "{{type}}"
}
}
}]
}
}
}
}
}
================================================
FILE: view/component/style/opacity.json
================================================
{
"$jason": {
"head": {
"title": "Opacity",
"description": "No opacity on the left, opacity on the right"
},
"body": {
"style": {
"background": "https://raw.githubusercontent.com/gliechtenstein/images/master/highrise.jpg",
"border": "none"
},
"header": {
"style": {
"background": "rgba(0,0,0,0)",
"color": "#ffffff"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/style/opacity.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "horizontal",
"components": [
{
"type": "label",
"text": "Label",
"style": {
"font": "HelveticaNeue-Bold",
"color": "#ffffff",
"size": "40"
}
},
{
"type": "label",
"text": "Label",
"style": {
"font": "HelveticaNeue-Bold",
"color": "#ffffff",
"size": "40",
"opacity": "0.2"
}
}
]
},
{
"type": "horizontal",
"components": [
{
"type": "image",
"url": "https://raw.githubusercontent.com/gliechtenstein/images/master/perrier.jpg"
},
{
"type": "image",
"url": "https://raw.githubusercontent.com/gliechtenstein/images/master/perrier.jpg",
"style": {
"opacity": "0.2"
}
}
]
},
{
"type": "horizontal",
"components": [
{
"type": "button",
"text": "Button",
"style": {
"font": "HelveticaNeue-Bold",
"color": "#ffffff",
"size": "20"
}
},
{
"type": "button",
"text": "Button",
"style": {
"font": "HelveticaNeue-Bold",
"color": "#ffffff",
"size": "20",
"opacity": "0.2"
}
}
]
},
{
"type": "horizontal",
"components": [
{
"type": "map",
"style": {
"height": "200",
"width": "50%"
},
"region": {
"coord": "40.7197614,-73.9909211",
"width": "100",
"height": "100"
}
},
{
"type": "map",
"region": {
"coord": "40.7197614,-73.9909211",
"width": "100",
"height": "100"
},
"style": {
"height": "200",
"width": "50%",
"opacity": "0.6"
}
}
]
}
]
}
]
}
}
}
================================================
FILE: view/component/textarea/index.json
================================================
{
"$jason": {
"head": {
"title": "textarea",
"styles": {
"padded": {
"padding": "20",
"font": "HelveticaNeue-Bold",
"size": "20"
}
}
},
"body": {
"style": {
"background": "#f5f5f5"
},
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/textarea/index.json",
"view": "web"
}
}
},
"sections": [{
"header": {
"type": "label",
"text": "textarea",
"style": {
"background": "#f5f5f5"
}
},
"items": [
{
"type": "horizontal",
"style": {
"align": "top",
"padding": "0"
},
"components": [{
"type": "textarea",
"name": "blank",
"style": {
"background": "#ffffff",
"height": "200"
}
}, {
"type": "button",
"text": "Done",
"style": {
"width": "60",
"height": "30",
"color": "#ff0000"
},
"action": {
"type": "$util.banner",
"options": {
"title": "Selected Value",
"description": "{{$get.blank}}"
}
}
}]
}
]
}]
}
}
}
================================================
FILE: view/component/textfield/index.json
================================================
{
"$jason": {
"head": {
"title": "textfield example",
"styles": {
"padded": {
"padding": "20",
"font": "HelveticaNeue-Bold",
"size": "20"
}
}
},
"body": {
"style": {
"background": "#f5f5f5"
},
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/component/textfield/index.json",
"view": "web"
}
}
},
"sections": [
{
"header": {
"type": "label",
"text": "textfield",
"style": {
"background": "#f5f5f5"
}
},
"items": [
{
"type": "horizontal",
"style": {
"background": "#ffffff",
"align": "center"
},
"components": [
{
"type": "textfield",
"placeholder": "Enter text and press Done",
"name": "blank"
},
{
"type": "button",
"text": "Done",
"style": {
"width": "60",
"height": "50",
"color": "#ffffff",
"background": "#0000ff"
},
"action": {
"type": "$util.banner",
"options": {
"title": "Selected Value",
"description": "{{$get.blank}}"
}
}
}
]
},
{
"type": "horizontal",
"style": {
"background": "#ffffff",
"align": "center"
},
"components": [
{
"type": "textfield",
"style": {
"secure": "true"
},
"placeholder": "Secure field",
"name": "secure"
},
{
"type": "button",
"text": "Done",
"style": {
"width": "60",
"color": "#ffffff",
"background": "#0000ff"
},
"action": {
"type": "$util.banner",
"options": {
"title": "Selected secure value",
"description": "{{$get.secure}}"
}
}
}
]
},
{
"type": "horizontal",
"style": {
"background": "#ffffff",
"align": "center"
},
"components": [
{
"type": "textfield",
"style": {
"border_color": "#000000"
},
"placeholder": "field with border",
"name": "border"
}
]
}
]
}
]
}
}
}
================================================
FILE: view/footer/index.json
================================================
{
"$jason": {
"head": {
"title": "Footer Examples",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/footer/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"class": "bold",
"text": "Chat Input",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/footer/input.json"
}
},
{
"type": "label",
"class": "bold",
"text": "Tabs",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json",
"transition": "modal"
}
}
]
}
]
}
}
}
================================================
FILE: view/footer/input.json
================================================
{
"$jason": {
"head": {
"title": "Input Footer",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
},
"send": {
"type": "$util.alert",
"options": {
"title": "Message",
"description": "{{$get.message}}"
}
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/footer/input.json",
"view": "web"
}
}
},
"footer": {
"input": {
"left": {
"image": "https://s3.amazonaws.com/www.textcast.co/icons/cam%402x.png",
"action": {
"type": "$media.camera"
}
},
"name": "message",
"placeholder": "Say something...",
"right": {
"text": "Send",
"action": {
"trigger": "send"
}
}
}
}
}
}
}
================================================
FILE: view/footer/tabs.json
================================================
{
"$jason": {
"head": {
"title": "Tabs Footer",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
},
"send": {
"type": "$util.alert",
"options": {
"title": "Message",
"description": "{{$get.message}}"
}
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/footer/tabs.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"text": "Fullscreen transition",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/action/audio/vaultboy/index.json",
"transition": "fullscreen"
}
},
{
"type": "label",
"text": "Next",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json"
}
},
{
"type": "label",
"text": "Next",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json"
}
},
{
"type": "label",
"text": "Next",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json"
}
},
{
"type": "label",
"text": "Next",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json"
}
},
{
"type": "label",
"text": "Next",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json"
}
}
]
}
],
"footer": {
"tabs": {
"style": {
"background": "#ffffff"
},
"items": [
{
"image": "https://s3-us-west-2.amazonaws.com/www.jasonclient.org/topsecret%402x.png",
"text": "Top Secret",
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json"
},
{
"image": "https://s3-us-west-2.amazonaws.com/fm.ethan.jason/info%402x.png",
"text": "Info",
"badge": "2",
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json"
},
{
"image": "https://s3-us-west-2.amazonaws.com/fm.ethan.jason/apps%402x.png",
"text": "Collection",
"url": "https://jasonette.github.io/Jasonpedia/view/footer/tabs.json"
}
]
}
}
}
}
}
================================================
FILE: view/header/header.json
================================================
{
"$jason": {
"head": {
"title": "Header",
"data": {
"items": [
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z"
]
},
"templates": {
"body": {
"style": {
"background": "#222222",
"border": "none"
},
"header": {
"title": "Header/No Header Test",
"style": {
"background": "#ff0000",
"color": "#ffffff"
}
},
"sections": [
{
"items": {
"{{#each items}}": {
"type": "label",
"text": "{{this}}",
"style": {
"color": "#ffffff",
"size": "40",
"padding": "20",
"align": "right"
}
}
}
}
]
}
}
}
}
}
================================================
FILE: view/header/index.json
================================================
{
"$jason": {
"head": {
"title": "Header Example",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$load": {
"type": "$render"
},
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"title": "[Title goes here]",
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/header/index.json",
"view": "web"
}
},
"style": {
"font": "AvenirNext-Heavy",
"size": "18"
},
"search": {
"name": "query",
"placeholder": "Enter keyword",
"action": {
"type": "$util.banner",
"options": {
"title": "{{$get.query}}",
"description": "The content inside the search input is {{$get.query}}"
}
}
}
},
"sections": [{
"items": [{
"type": "label",
"text": "With header",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/header/header.json"
}
}, {
"type": "label",
"text": "No header",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/header/noheader.json"
}
}]
}]
}
}
}
================================================
FILE: view/header/noheader.json
================================================
{
"$jason": {
"head": {
"title": "No Header",
"data": {
"items": [
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z"
]
},
"templates": {
"body": {
"style": {
"background": "#222222",
"border": "none"
},
"layers": [
{
"type": "label",
"text": "👈",
"style": {
"bottom": "20",
"right": "20",
"background": "#ff0000",
"color": "#ffffff",
"width": "100",
"height": "100",
"align": "center",
"size": "30",
"corner_radius": "50"
},
"action": {
"type": "$back"
}
}
],
"sections": [
{
"items": {
"{{#each items}}": {
"type": "label",
"style": {
"color": "#ffffff",
"size": "40",
"padding": "20",
"align": "right"
},
"text": "{{this}}"
}
}
}
]
}
}
}
}
}
================================================
FILE: view/index.json
================================================
{
"$jason": {
"head": {
"title": "Views",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/index.json",
"view": "web"
}
}
},
"sections": [
{
"items": [
{
"type": "label",
"text": "Header",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/header/index.json"
}
},
{
"type": "label",
"text": "Sections",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/section/index.json"
}
},
{
"type": "label",
"text": "Layers",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/index.json"
}
},
{
"type": "label",
"text": "Footer",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/footer/index.json"
}
},
{
"type": "label",
"text": "Layout",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/layout/index.json"
}
},
{
"type": "label",
"text": "Component",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/component/index.json"
}
},
{
"type": "label",
"text": "Background",
"class": "bold",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/background/index.json"
}
}
]
}
]
}
}
}
================================================
FILE: view/layer/dynamic.json
================================================
{
"$jason": {
"head": {
"title": "Dynamic Layers",
"actions": {
"$load": {
"type": "$set",
"options": {
"style": {
"width": "86",
"height": "175",
"bottom": "70",
"left": "50%-43"
}
},
"success": {
"type": "$render"
}
},
"resizable": {
"type": "$set",
"options": {
"style": "{{var new_style = $get.style; new_style['resize']='true'; return new_style;}}"
},
"success": {
"type": "$util.banner",
"options": {
"title": "Now resizable",
"description": "Try pinching Mario with two fingers"
},
"success": {
"type": "$render"
}
}
},
"draggable": {
"type": "$set",
"options": {
"style": "{{var new_style = $get.style; new_style['move']='true'; return new_style;}}"
},
"success": {
"type": "$util.banner",
"options": {
"title": "Now draggable",
"description": "Try dragging Mario around"
},
"success": {
"type": "$render"
}
}
},
"rotatable": {
"type": "$set",
"options": {
"style": "{{var new_style = $get.style; new_style['rotate']='true'; return new_style;}}"
},
"success": {
"type": "$util.banner",
"options": {
"title": "Now rotatable",
"description": "Try rotating Mario with two fingers"
},
"success": {
"type": "$render"
}
}
}
},
"templates": {
"body": {
"style": {
"background": "https://jasonette.github.io/Jasonpedia/assets/mariobackground.jpg"
},
"header": {
"style": {
"background": "rgba(0,0,0,0)"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/layer/dynamic.json",
"view": "web"
}
}
},
"layers": [{
"type": "label",
"text": "IN THIS DEMO, MARIO IS A DYNAMIC LAYER, WHICH MEANS YOU CAN RESIZE, DRAG, ROTATE HIM.\n\nBUT FIRST, PRESS THE BUTTONS TO ACTIVATE EACH FEATURE",
"style": {
"font": "Verdana",
"color": "#fdfdfd",
"size": "15",
"top": "100",
"left": "10%",
"width": "80%",
"height": "150",
"align": "center"
}
}, {
"type": "label",
"text": "Draggable",
"action": {
"trigger": "draggable"
},
"style": {
"align": "center",
"bottom": "30",
"left": "50%-50",
"width": "100",
"padding": "10",
"background": "#6e2111",
"color": "#ffffff",
"corner_radius": "3"
}
}, {
"type": "label",
"text": "Resizable",
"action": {
"trigger": "resizable"
},
"style": {
"align": "center",
"bottom": "30",
"right": "20",
"padding": "10",
"background": "#6e2111",
"color": "#ffffff",
"corner_radius": "3"
}
}, {
"type": "label",
"text": "Rotatable",
"action": {
"trigger": "rotatable"
},
"style": {
"align": "center",
"bottom": "30",
"left": "20",
"padding": "10",
"background": "#6e2111",
"color": "#ffffff",
"corner_radius": "3"
}
}, {
"type": "image",
"url": "https://jasonette.github.io/Jasonpedia/assets/0.png",
"style": "{{$get.style}}"
}]
}
}
}
}
}
================================================
FILE: view/layer/index.json
================================================
{
"$jason": {
"head": {
"title": "Layer",
"styles": {
"bold": {
"font": "HelveticaNeue-CondensedBold",
"padding": "10",
"size": "15"
},
"normal": {
"font": "HelveticaNeue",
"size": "12"
}
},
"actions": {
"$foreground": {
"type": "$reload"
}
}
},
"body": {
"header": {
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/layer/index.json",
"view": "web"
}
}
},
"sections": [
{
"header": {
"type": "label",
"text": "Tutorials",
"style": {
"background": "#f5f5f5"
}
},
"items": [{
"type": "label",
"class": "bold",
"text": "Basic Labels",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/label.json"
}
}, {
"type": "label",
"class": "bold",
"text": "Static layers",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/static.json"
}
}, {
"type": "label",
"class": "bold",
"text": "Dynamic layers",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/dynamic.json"
}
}]
},
{
"header": {
"type": "label",
"text": "Demos",
"style": {
"background": "#f5f5f5"
}
},
"items": [
{
"type": "label",
"class": "bold",
"text": "CatchAll!",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/pokemon/index.json"
}
},
{
"type": "label",
"class": "bold",
"text": "Weather",
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/weather/index.json",
"transition": "modal"
}
}
]
}
]
}
}
}
================================================
FILE: view/layer/label.json
================================================
{
"$jason": {
"head": {
"title": "Basic Layers"
},
"body": {
"header": {
"style": {
"background": "#8bb92d",
"color": "#ffffff"
},
"title": "Label Layer Demo"
},
"layers": [{
"type": "label",
"text": "{top: 74, left: 10}",
"style": {
"top": "74",
"left": "10",
"padding": "10",
"background": "#ff0000",
"color": "#ffffff",
"align": "center"
}
}, {
"type": "label",
"text": "{top: 74, right: 10}",
"style": {
"top": "74",
"right": "10",
"padding": "10",
"background": "#ff0000",
"color": "#ffffff",
"align": "center"
}
}, {
"type": "label",
"text": "{bottom: 10, left: 10}",
"style": {
"bottom": "10",
"left": "10",
"padding": "10",
"background": "#ff0000",
"color": "#ffffff",
"align": "center"
}
}, {
"type": "label",
"text": "{bottom: 10, right: 10}",
"style": {
"bottom": "10",
"right": "10",
"padding": "10",
"background": "#ff0000",
"color": "#ffffff",
"align": "center"
}
}, {
"type": "label",
"text": "{top: 50%-50, left: 50%-50, width: 100, height: 100}",
"style": {
"top": "50%-50",
"left": "50%-50",
"width": "100",
"height": "100",
"background": "#ff0000",
"color": "#ffffff",
"align": "center"
}
}]
}
}
}
================================================
FILE: view/layer/pokemon/backpack.json
================================================
{
"$jason": {
"head": {
"title": "Pokemon Items",
"actions": {
"$load": {
"type": "$network.request",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/pokemon/db.json"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"style": {
"background": "#fcfffc"
},
"nav": {
"style": {
"background": "#fdfffc",
"color": "#4e7174",
"font": "AvenirNext-Regular",
"size": "18"
}
},
"sections": [
{
"items": [
{
"type": "label",
"style": {
"padding": "10",
"background": "#414141",
"color": "#ffffff",
"size": "12"
},
"text": "This app was built with Jasonette, an app that lets you create an app. Learn more here.",
"href": {
"url": "http://www.jasonette.com",
"view": "Web"
}
}
]
},
{
"items": [
{
"type": "vertical",
"style": {
"padding": "15",
"spacing": "3",
"background": "#e9ffde"
},
"components": [
{
"type": "label",
"text": "Catch your own custom monster!",
"style": {
"size": "14",
"color": "#44696c",
"font": "AvenirNext-Bold"
}
},
{
"type": "label",
"text": "Check out what others caught, and upload your own.",
"style": {
"size": "12",
"color": "#44696c",
"font": "AvenirNext-Regular"
}
}
],
"href": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/pokemon/more.json"
}
}
]
},
{
"items": {
"{{#each $jason}}": {
"type": "horizontal",
"style": {
"padding": "10",
"spacing": "10"
},
"action": {
"type": "$close",
"success": {
"type": "$set",
"options": {
"monster": "{{url}}",
"caption": "{{name + ' / CP ???'}}"
},
"success": {
"type": "$render",
"success": {
"type": "$util.banner",
"options": {
"title": "Move and resize",
"description": "You can hide the resize button by tapping the sticker"
}
}
}
}
},
"components": [
{
"type": "image",
"style": {
"width": "80"
},
"url": "{{url}}"
},
{
"type": "vertical",
"components": [
{
"type": "label",
"text": "{{name}}",
"style": {
"color": "#44696c",
"font": "AvenirNext-Regular",
"size": "18"
}
},
{
"type": "label",
"style": {
"color": "#6f8d8d",
"font": "AvenirNext-Regular",
"size": "12"
},
"text": ""
}
]
}
]
}
}
}
]
}
}
}
}
}
================================================
FILE: view/layer/pokemon/db.json
================================================
[
{
"name": "Diglett",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/7/7f/Pokken_Tournament_Diglett.PNG/revision/latest?cb=20160711081831"
},
{
"name": "Chespin",
"url": "http://orig08.deviantart.net/e4f6/f/2013/009/b/e/chespin_3d_model_download_by_bogeymankurt-d5qxbbo.png"
},
{
"name": "Fennekin",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/d/db/Support_Fennekin.png/revision/latest?cb=20160115234126"
},
{
"name": "Psyduck",
"url": "http://www.pokezorworld.com/anime/3d/3dpsyduck.gif"
},
{
"name": "Yveltal",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/9/94/717Yveltal_Pokemon_Rumble_World.png/revision/latest?cb=20160216063748"
},
{
"name": "Articuno",
"url": "http://www.psypokes.com/dex/picdex/stadium2/144.png"
},
{
"name": "Dedenne",
"url": "http://i.imgur.com/3jiPb0O.png"
},
{
"name": "Snivy",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/4/4c/Snivy-PokePark2-Model.png/revision/latest?cb=20140816045543"
},
{
"name": "Tepig",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/1/18/Tepig_%28Pok%C3%A9dex_3D%29.png/revision/latest?cb=20110608232312"
},
{
"name": "Oshawott",
"url": "http://vignette4.wikia.nocookie.net/pokemon/images/9/98/Oshawott-PokePark2-Model.png/revision/latest?cb=20140816052928"
},
{
"name": "Reshiram",
"url": "http://vignette2.wikia.nocookie.net/ssb-tourney/images/4/4b/Reshiram_CG_Art.png/revision/latest?cb=20130911021023"
},
{
"name": "Lapras",
"url": "http://www.psypokes.com/dex/picdex/stadium2/131.png"
},
{
"name": "Tyranitar",
"url": "http://www.psypokes.com/dex/picdex/stadium2/248.png"
},
{
"name": "Emolga",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/d/dc/587Emolga_Pokedex_3D.png/revision/latest?cb=20141108025533"
},
{
"name": "Froakie",
"url": "https://media.pocketmonsters.net/imageboard/60/14315437290054.png"
},
{
"name": "Meloetta",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/a/ad/648Meloetta_3D_Pro.png/revision/latest?cb=20150126030347"
},
{
"name": "Piplup",
"url": "http://vignette1.wikia.nocookie.net/fantendo/images/8/82/PiplupPok%C3%A9Park2.png/revision/latest?cb=20130726110030"
},
{
"name": "Dialga",
"url": "http://vignette1.wikia.nocookie.net/pokemon/images/a/a6/483Dialga_Pokemon_Battle_Revolution.png/revision/latest?cb=20141231204017"
},
{
"name": "Palkia",
"url": "http://vignette1.wikia.nocookie.net/pokemon/images/d/d3/484Palkia_Pokemon_Battle_Revolution.png/revision/latest?cb=20141231204052"
},
{
"name": "Giratina",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/b/b1/487Giratina_Site.png/revision/latest?cb=20140920041457"
},
{
"name": "Pachirisu",
"url": "http://vignette1.wikia.nocookie.net/pokemon/images/f/f7/417Pachirisu_Pokemon_Battle_Revolution.png/revision/latest?cb=20141021151558"
},
{
"name": "Treecko",
"url": "http://vignette1.wikia.nocookie.net/fantendo/images/6/64/SceptilePDIOS.png/revision/latest?cb=20150117124429"
},
{
"name": "Torchic",
"url": "http://media-cerulean.cursecdn.com/avatars/254/50/255.png.png"
},
{
"name": "Mudkip",
"url": "http://orig07.deviantart.net/b0cb/f/2012/185/1/6/mudkip_by_finnishpokemonfan96-d55y3vu.png"
},
{
"name": "Groudon",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/c/cf/383Groudon_Pokemon_Battle_Revolution.png/revision/latest?cb=20140829040352"
},
{
"name": "Kyogre",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/3/3b/382Kyogre_Pokemon_Battle_Revolution.png/revision/latest?cb=20141011054520"
},
{
"name": "Rayquaza",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/7/78/384Rayquaza_Super_Smash_Bros_Brawl.png/revision/latest?cb=20140921015142"
},
{
"name": "Plusle",
"url": "http://i.imgur.com/L2hs7.png"
},
{
"name": "Blastoise",
"url": "http://www.psypokes.com/dex/picdex/stadium2/009.png"
},
{
"name": "Chikorita",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/7/79/152Chikorita_Pok%C3%A9mon_Super_Mystery_Dungeon.png/revision/latest?cb=20150716060154"
},
{
"name": "Cyndaquil",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/d/d6/155Cyndaquil_Pokemon_Mystery_Dungeon_Explorers_of_Time_and_Darkness.png/revision/latest?cb=20150107222137"
},
{
"name": "Totodile",
"url": "http://vignette1.wikia.nocookie.net/pokemon/images/6/67/158Totodile_Pok%C3%A9mon_Super_Mystery_Dungeon.png/revision/latest?cb=20150716060404"
},
{
"name": "Ho-oh",
"url": "http://vignette1.wikia.nocookie.net/pokemon/images/0/06/250Ho-Oh_Pokemon_Mystery_Dungeon_Gates_to_Infinity.png/revision/latest?cb=20150101212702"
},
{
"name": "Lugia",
"url": "http://vignette4.wikia.nocookie.net/pokemon/images/2/27/249Lugia_Pokemon_Battle_Revolution.png/revision/latest?cb=20141024154812"
},
{
"name": "Celebi",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/a/ab/251Celebi_Pokemon_Rumble_U.png/revision/latest?cb=20140921013125"
},
{
"name": "Pichu",
"url": "http://vignette2.wikia.nocookie.net/ssb/images/9/97/Pichumeleeclear.png/revision/latest?cb=20140227140421"
},
{
"name": "Pikachu",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/e/ef/025Pikachu_SSB4.png/revision/latest?cb=20140410201208"
},
{
"name": "Bulbasaur",
"url": "http://vignette1.wikia.nocookie.net/leonhartimvu/images/b/bb/001_Bulbasaur_3D.png/revision/latest?cb=20131106174200"
},
{
"name": "Charmander",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/f/fb/004Charmander_3D_Pro.png/revision/latest?cb=20140901022259"
},
{
"name": "Squirtle",
"url": "http://i.imgur.com/5xpXP0H.png"
},
{
"name": "Eevee",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/a/aa/Support_Eevee.png/revision/latest?cb=20160115235248"
},
{
"name": "Mew",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/7/79/151Mew_Pokemon_Stadium.png/revision/latest?cb=20140315211611"
},
{
"name": "MewTwo",
"url": "http://vignette1.wikia.nocookie.net/pokemon/images/d/da/Mewtwo_SSB4.png/revision/latest?cb=20150403133009"
},
{
"name": "Articuno",
"url": "http://vignette1.wikia.nocookie.net/pokemon/images/5/52/Articuno.png/revision/latest?cb=20160409232041"
},
{
"name": "Zapdos",
"url": "http://vignette3.wikia.nocookie.net/playstationallstarsbattleroyale/images/c/ce/Zapdos_3D.png/revision/latest?cb=20141002204533"
},
{
"name": "Moltres",
"url": "http://cdn.nintendonews.com/wp-content/uploads/2016/07/pokemon_go_moltres.png"
},
{
"name": "Dragonair",
"url": "https://56.media.tumblr.com/0ff7ce436261a96d95f79c2111b0152e/tumblr_o1dsgu3GSs1u5zmd1o5_1280.png"
},
{
"name": "Dragonite",
"url": "http://vignette2.wikia.nocookie.net/pokemon/images/1/12/149Dragonite_Pokemon_Stadium.png/revision/latest?cb=20140126094049"
},
{
"name": "Aerodactyl",
"url": "http://www.psypokes.com/dex/picdex/stadium2/142.png"
},
{
"name": "Kabutops",
"url": "http://www.psypokes.com/dex/picdex/stadium2/141.png"
},
{
"name": "Snorlax",
"url": "http://vignette3.wikia.nocookie.net/pokemon/images/4/49/143Snorlax_3D_Pro.png/revision/latest?cb=20140924022356"
},
{
"name": "Ducklett",
"url": "http://cdn.bulbagarden.net/upload/thumb/4/4b/580Ducklett.png/250px-580Ducklett.png"
}
]
================================================
FILE: view/layer/pokemon/index.json
================================================
{
"$jason": {
"head": {
"title": "Pokemon Cam",
"actions": {
"$load": {
"type": "$set",
"options": {
"monster": "placeholder",
"caption": "placeholder",
"background": {
"type": "camera",
"options": {
"device": "back"
}
}
},
"success": {
"trigger": "camera"
}
},
"toggle_direction": {
"type": "$set",
"options": [
{
"{{#if (typeof $get.background) == 'string' }}": {
"background": {
"type": "camera"
}
}
},
{
"{{#elseif 'options' in $get.background}}": {
"background": {
"type": "camera"
}
}
},
{
"{{#else}}": {
"background": {
"type": "camera",
"options": {
"device": "back"
}
}
}
}
],
"success": {
"type": "$render",
"success": {
"type": "$util.toast",
"options": {
"text": "changed camera direction"
}
}
}
},
"backpack": {
"type": "$href",
"options": {
"url": "https://jasonette.github.io/Jasonpedia/view/layer/pokemon/backpack.json",
"transition": "modal"
}
},
"camera": {
"type": "$set",
"options": {
"data_url": "{{$jason.data_url}}",
"editing": "true",
"ui": "true"
},
"success": {
"type": "$render"
}
}
},
"templates": {
"body": {
"style": {
"background": "{{$get.background}}"
},
"header": {
"title": " ",
"style": {
"background": "rgba(0,0,0,0)",
"color": "rgba(255,255,255,0.3)"
},
"menu": {
"text": "View JSON",
"href": {
"url": "https://github.com/Jasonette/Jasonpedia/blob/gh-pages/view/layer/pokemon/index.json",
"view": "web"
}
}
},
"layers": [
[
{
"{{#if $get.monster && $get.monster != 'placeholder'}}": {
"type": "image",
"style": {
"left": "50%-75",
"bottom": "200",
"width": "150",
"border": "rgba(0,0,0,0)",
"rotate": "true",
"resize": "true",
"move": "true"
},
"name": "monster",
"action": {
"trigger": "toggle"
},
"url": "{{$get.monster}}"
}
}
],
[
{
"{{#if $get.caption && $get.caption != 'placeholder'}}": {
"type": "label",
"name": "annotation",
"style": {
"background": "rgba(0,0,0,0.1)",
"color": "#ffffff",
"bottom": "500",
"align": "center",
"padding": "10",
"left": "50%-125",
"width": "250",
"size": "20",
"font": "AvenirNext-Regular",
"height": "60",
"corner_radius": "30",
"move": "true",
"resize": "true"
},
"action": {
"trigger": "toggle"
},
"text": "{{$get.caption}}"
}
}
],
{
"type": "image",
"style": {
"right": "15",
"top": "60",
"width": "60"
},
"url": "https://s3-us-west-2.amazonaws.com/fm.ethan.jason/pokear.png",
"action": {
"trigger": "toggle_direction"
}
},
{
"type": "image",
"style": {
"left": "15",
"top": "50",
"height": "60"
},
"url": "https://s3-us-west-2.amazonaws.com/fm.ethan.jason/pokerun.png",
"action": {
"type": "$snapshot",
"success": {
"type": "$util.share",
"options": {
"items": [{
"type": "image",
"data": "{{$jason.data}}"
}]
}
}
}
},
{
"type": "image",
"style": {
"right": "10",
"bottom": "10",
"width": "80"
},
"url": "https://s3-us-west-2.amazonaws.com/fm.ethan.jason/pokebackpack.png",
"action": {
"trigger": "backpack"
}
},
{
"type": "image",
"style": {
"right": "10",
"bottom": "95",
"width": "80"
},
"url": "https://s3-us-west-2.amazonaws.com/fm.ethan.jason/pokecamera.png",
"action": {
"type": "$snapshot",
"success": {
"type": "$set",
"options": {
"background": "{{$jason.data_uri}}"
},
"su
gitextract_wtw7z__x/
├── LICENSE
├── README.md
├── action/
│ ├── addressbook.json
│ ├── audio/
│ │ └── vaultboy/
│ │ └── index.json
│ ├── geo/
│ │ └── index.json
│ ├── index.json
│ ├── lambda/
│ │ ├── cat.json
│ │ └── index.json
│ ├── network/
│ │ └── index.json
│ ├── script/
│ │ ├── hejs/
│ │ │ └── index.json
│ │ ├── index.json
│ │ ├── inline/
│ │ │ └── index.json
│ │ └── underscorejs/
│ │ ├── db.json
│ │ ├── index.json
│ │ └── modal.json
│ ├── timer/
│ │ ├── index.json
│ │ ├── mario.json
│ │ └── stopwatch.json
│ ├── variable/
│ │ └── index.json
│ └── vision/
│ └── index.json
├── core/
│ ├── href/
│ │ ├── index.json
│ │ └── tabs.json
│ ├── index.json
│ ├── render/
│ │ ├── index.json
│ │ └── templates.json
│ └── snapshot/
│ └── index.json
├── demo.json
├── hello.json
├── template/
│ ├── csv
│ ├── csv.json
│ ├── each.json
│ ├── html.json
│ ├── if.json
│ ├── index.json
│ ├── inline.json
│ ├── js.json
│ ├── jsfunction.json
│ ├── network.json
│ └── rss.json
├── view/
│ ├── background/
│ │ └── index.json
│ ├── component/
│ │ ├── button/
│ │ │ ├── 1.json
│ │ │ ├── 2.json
│ │ │ ├── 3.json
│ │ │ └── index.json
│ │ ├── html/
│ │ │ └── index.json
│ │ ├── image/
│ │ │ └── index.json
│ │ ├── index.json
│ │ ├── label/
│ │ │ └── index.json
│ │ ├── map/
│ │ │ └── index.json
│ │ ├── slider/
│ │ │ └── index.json
│ │ ├── space/
│ │ │ └── index.json
│ │ ├── style/
│ │ │ ├── index.json
│ │ │ └── opacity.json
│ │ ├── textarea/
│ │ │ └── index.json
│ │ └── textfield/
│ │ └── index.json
│ ├── footer/
│ │ ├── index.json
│ │ ├── input.json
│ │ └── tabs.json
│ ├── header/
│ │ ├── header.json
│ │ ├── index.json
│ │ └── noheader.json
│ ├── index.json
│ ├── layer/
│ │ ├── dynamic.json
│ │ ├── index.json
│ │ ├── label.json
│ │ ├── pokemon/
│ │ │ ├── backpack.json
│ │ │ ├── db.json
│ │ │ ├── index.json
│ │ │ └── more.json
│ │ ├── static.json
│ │ └── weather/
│ │ └── index.json
│ ├── layout/
│ │ ├── horizontal.json
│ │ ├── index.json
│ │ ├── nested.json
│ │ └── vertical.json
│ └── section/
│ └── index.json
└── webcontainer/
├── agent/
│ ├── default.json
│ ├── fn/
│ │ ├── agent.html
│ │ └── index.json
│ ├── hijack.json
│ ├── hybrid.json
│ ├── ignore.json
│ └── index.json
├── animejs.json
├── canvas.json
├── d3gauge.json
├── d3graph.json
├── d3html.json
├── feed/
│ ├── animated_item.json
│ ├── db.json
│ ├── index.json
│ ├── item.json
│ └── special_item.json
├── gaugehtml.json
├── iframe.json
├── index.json
├── lots.json
├── pdf.json
├── phasergame.json
├── svg.json
├── template.json
├── template2.json
├── threejsblocks.json
└── threejsrainbow.json
Condensed preview — 104 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (345K chars).
[
{
"path": "LICENSE",
"chars": 1057,
"preview": "MIT License\n\nCopyright (c) 2016 \n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this s"
},
{
"path": "README.md",
"chars": 4027,
"preview": "# What is this?\nThis repository is 99.9% JSON.\n\n**Each JSON file is an iOS app. And an Android app. Simultaneously.**\n\nA"
},
{
"path": "action/addressbook.json",
"chars": 1296,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Addressbook demo\",\n \"description\": \"$util.addressbook accesses the ad"
},
{
"path": "action/audio/vaultboy/index.json",
"chars": 1413,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Vault boy\",\n \"description\": \"Touch the vault boy to hear him laugh fo"
},
{
"path": "action/geo/index.json",
"chars": 4591,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"$geo\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$render\"\n "
},
{
"path": "action/index.json",
"chars": 13128,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Jasonette Actions\",\n \"styles\": {\n \"bold\": {\n \"font\": "
},
{
"path": "action/lambda/cat.json",
"chars": 163,
"preview": "{\n \"cats\": [\n {\n \"name\": \"Mr. Fisherman\",\n \"image\": \"http://i.giphy.com/OmK8lulOMQ9XO.gif\",\n \"status\""
},
{
"path": "action/lambda/index.json",
"chars": 11171,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Trigger demo\",\n \"styles\": {\n \"code\": {\n \"background\":"
},
{
"path": "action/network/index.json",
"chars": 2727,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"$network\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helvetic"
},
{
"path": "action/script/hejs/index.json",
"chars": 1336,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"he.js encoding Test\",\n \"actions\": {\n \"$load\": {\n \"typ"
},
{
"path": "action/script/index.json",
"chars": 2562,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"$network\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helvetic"
},
{
"path": "action/script/inline/index.json",
"chars": 1737,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Inline JS Test\",\n \"actions\": {\n \"$load\": {\n \"type\": "
},
{
"path": "action/script/underscorejs/db.json",
"chars": 2336,
"preview": "{\n \"tests\": [\n {\n \"title\": \"_.where\",\n \"code\": {\n \"type\": \"$href\",\n \"options\": {\n \""
},
{
"path": "action/script/underscorejs/index.json",
"chars": 1918,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Underscore.js Test\",\n \"actions\": {\n \"$load\": {\n \"type"
},
{
"path": "action/script/underscorejs/modal.json",
"chars": 782,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Code Modal\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$ren"
},
{
"path": "action/timer/index.json",
"chars": 1253,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"$timer\",\n \"styles\": {\n \"bold\": {\n \"font\": \"HelveticaN"
},
{
"path": "action/timer/mario.json",
"chars": 2436,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Mario\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$set\",\n "
},
{
"path": "action/timer/stopwatch.json",
"chars": 1625,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Stopwatch\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$set\""
},
{
"path": "action/variable/index.json",
"chars": 2798,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Local Variables\",\n \"actions\": {\n \"$load\": {\n \"type\": "
},
{
"path": "action/vision/index.json",
"chars": 2576,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Barcode Testing with inline update\",\n \"actions\": {\n \"$vision.r"
},
{
"path": "core/href/index.json",
"chars": 2516,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Jasonette Href\",\n \"styles\": {\n \"bold\": {\n \"font\": \"He"
},
{
"path": "core/href/tabs.json",
"chars": 3421,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Jasonette Href\",\n \"styles\": {\n \"bold\": {\n \"font\": \"He"
},
{
"path": "core/index.json",
"chars": 2282,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Core\",\n \"styles\": {\n \"bold\": {\n \"font\": \"HelveticaNeu"
},
{
"path": "core/render/index.json",
"chars": 1260,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"$render\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helvetica"
},
{
"path": "core/render/templates.json",
"chars": 5508,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"$render templates\",\n \"actions\": {\n \"$pull\": {\n \"type\""
},
{
"path": "core/snapshot/index.json",
"chars": 1485,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Snapshot\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helvetic"
},
{
"path": "demo.json",
"chars": 4442,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Jasopedia\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helveti"
},
{
"path": "hello.json",
"chars": 2932,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"{ ˃̵̑ᴥ˂̵̑}\",\n \"actions\": {\n \"$foreground\": {\n \"type\":"
},
{
"path": "template/csv",
"chars": 566,
"preview": "name, descrption, url, icon\nFKA Twigs, The artist formerly known as Twigs, https://en.wikipedia.org/wiki/FKA_Twigs, http"
},
{
"path": "template/csv.json",
"chars": 2891,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"CSV parser\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$net"
},
{
"path": "template/each.json",
"chars": 1155,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"#each\",\n \"data\": {\n \"users\": [{\n \"profile\": \"https://"
},
{
"path": "template/html.json",
"chars": 4644,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"HTML Template\",\n \"actions\": {\n \"$pull\": {\n \"trigger\":"
},
{
"path": "template/if.json",
"chars": 2724,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"#if\",\n \"data\": {\n \"users\": [{\n \"profile\": \"https://pb"
},
{
"path": "template/index.json",
"chars": 5177,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Template\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helvetic"
},
{
"path": "template/inline.json",
"chars": 760,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Inline Template\",\n \"data\": {\n \"profile\": \"https://pbs.twimg.co"
},
{
"path": "template/js.json",
"chars": 2589,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Javascript\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$geo"
},
{
"path": "template/jsfunction.json",
"chars": 2692,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Javascript Function\",\n \"actions\": {\n \"$load\": {\n \"typ"
},
{
"path": "template/network.json",
"chars": 2228,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"JSONPlaceholder demo\",\n \"actions\": {\n \"$load\": {\n \"ty"
},
{
"path": "template/rss.json",
"chars": 2124,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"RSS Reader\",\n \"actions\": {\n \"$pull\": {\n \"trigger\": \"r"
},
{
"path": "view/background/index.json",
"chars": 4898,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Background Styling Example\",\n \"actions\": {\n \"$load\": {\n "
},
{
"path": "view/component/button/1.json",
"chars": 601,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Rectangle Button\"\n },\n \"body\": {\n \"sections\": [{\n \"items"
},
{
"path": "view/component/button/2.json",
"chars": 627,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Rounded Button\"\n },\n \"body\": {\n \"sections\": [{\n \"items\":"
},
{
"path": "view/component/button/3.json",
"chars": 4391,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Mario Button\"\n },\n \"body\": {\n \"style\": {\n \"border\": \"non"
},
{
"path": "view/component/button/index.json",
"chars": 966,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Buttons\",\n \"data\": {\n \"items\": [\n { \"type\": \"Rectangl"
},
{
"path": "view/component/html/index.json",
"chars": 1763,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"HTML\"\n },\n \"body\": {\n \"header\": {\n \"menu\": {\n \""
},
{
"path": "view/component/image/index.json",
"chars": 2485,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"image\"\n },\n \"body\": {\n \"header\": {\n \"menu\": {\n "
},
{
"path": "view/component/index.json",
"chars": 3474,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Component\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helveti"
},
{
"path": "view/component/label/index.json",
"chars": 2465,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"label\"\n },\n \"body\": {\n \"header\": {\n \"menu\": {\n "
},
{
"path": "view/component/map/index.json",
"chars": 2989,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"map\",\n \"styles\": {\n \"padded\": {\n \"padding\": \"20\",\n "
},
{
"path": "view/component/slider/index.json",
"chars": 1839,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Slider\",\n \"styles\": {\n \"bold\": {\n \"font\": \"HelveticaN"
},
{
"path": "view/component/space/index.json",
"chars": 3194,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Space\",\n \"styles\": {\n \"bold\": {\n \"font\": \"HelveticaNe"
},
{
"path": "view/component/style/index.json",
"chars": 745,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Common component styling\",\n \"data\": {\n \"items\": [\n { "
},
{
"path": "view/component/style/opacity.json",
"chars": 3587,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Opacity\",\n\t\t\t\"description\": \"No opacity on the left, opacity on the right\""
},
{
"path": "view/component/textarea/index.json",
"chars": 1586,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"textarea\",\n \"styles\": {\n \"padded\": {\n \"padding\": \"20\""
},
{
"path": "view/component/textfield/index.json",
"chars": 3284,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"textfield example\",\n \"styles\": {\n \"padded\": {\n \"paddi"
},
{
"path": "view/footer/index.json",
"chars": 1293,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Footer Examples\",\n \"styles\": {\n \"bold\": {\n \"font\": \"H"
},
{
"path": "view/footer/input.json",
"chars": 1298,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Input Footer\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helv"
},
{
"path": "view/footer/tabs.json",
"chars": 3383,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Tabs Footer\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helve"
},
{
"path": "view/header/header.json",
"chars": 1287,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Header\",\n \"data\": {\n \"items\": [\n \"a\",\n \"b\",\n"
},
{
"path": "view/header/index.json",
"chars": 1620,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Header Example\",\n \"styles\": {\n \"bold\": {\n \"font\": \"He"
},
{
"path": "view/header/noheader.json",
"chars": 1645,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"No Header\",\n \"data\": {\n \"items\": [\n \"a\",\n \"b"
},
{
"path": "view/index.json",
"chars": 2502,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Views\",\n \"styles\": {\n \"bold\": {\n \"font\": \"HelveticaNe"
},
{
"path": "view/layer/dynamic.json",
"chars": 4374,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Dynamic Layers\",\n \"actions\": {\n \"$load\": {\n \"type\": \""
},
{
"path": "view/layer/index.json",
"chars": 2373,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Layer\",\n \"styles\": {\n \"bold\": {\n \"font\": \"HelveticaNe"
},
{
"path": "view/layer/label.json",
"chars": 1705,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Basic Layers\"\n },\n \"body\": {\n \"header\": {\n \"style\": {\n "
},
{
"path": "view/layer/pokemon/backpack.json",
"chars": 4739,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Pokemon Items\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$"
},
{
"path": "view/layer/pokemon/db.json",
"chars": 7643,
"preview": "[\n {\n \"name\": \"Diglett\",\n \"url\": \"http://vignette3.wikia.nocookie.net/pokemon/images/7/7f/Pokken_Tournament_Digle"
},
{
"path": "view/layer/pokemon/index.json",
"chars": 6709,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Pokemon Cam\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$se"
},
{
"path": "view/layer/pokemon/more.json",
"chars": 5154,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"More to catch!\",\n \"actions\": {\n \"$foreground\": {\n \"tr"
},
{
"path": "view/layer/static.json",
"chars": 3154,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Static Layers\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$"
},
{
"path": "view/layer/weather/index.json",
"chars": 5314,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Weather\",\n \"offline\": \"true\",\n \"actions\": {\n \"$load\": {\n "
},
{
"path": "view/layout/horizontal.json",
"chars": 3835,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Horizontal Layout\",\n \"styles\": {\n \"note\": {\n \"font\": "
},
{
"path": "view/layout/index.json",
"chars": 1539,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Layouts\",\n \"styles\": {\n \"bold\": {\n \"font\": \"Helvetica"
},
{
"path": "view/layout/nested.json",
"chars": 4725,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Nested Layout\",\n \"styles\": {\n \"note\": {\n \"color\": \"#f"
},
{
"path": "view/layout/vertical.json",
"chars": 1189,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Vertical Layout\",\n \"styles\": {\n \"note\": {\n \"color\": \""
},
{
"path": "view/section/index.json",
"chars": 17041,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Sections Example\",\n \"styles\": {\n \"bold\": {\n \"font\": \""
},
{
"path": "webcontainer/agent/default.json",
"chars": 451,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Behave like a regular browser\",\n \"description\": \"The web container wi"
},
{
"path": "webcontainer/agent/fn/agent.html",
"chars": 507,
"preview": "<html>\n<head>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style>\nbody {\n background: white;\n}"
},
{
"path": "webcontainer/agent/fn/index.json",
"chars": 998,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Jasonette => Web Container $agent function call\",\n \"description\": \"Th"
},
{
"path": "webcontainer/agent/hijack.json",
"chars": 1460,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Selective URL handling\",\n \"description\": \"By attaching an action call"
},
{
"path": "webcontainer/agent/hybrid.json",
"chars": 718,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Jasonbase\",\n \"actions\": {\n \"visit\": [\n {\n "
},
{
"path": "webcontainer/agent/ignore.json",
"chars": 359,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Ignore User Interaction\",\n \"description\": \"Nothing will happen when y"
},
{
"path": "webcontainer/agent/index.json",
"chars": 2762,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"$jason.body.background web container (agent)\",\n \"data\": {\n \"it"
},
{
"path": "webcontainer/animejs.json",
"chars": 4524,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Anime.js Background with controllable UI\",\n \"actions\": {\n \"$lo"
},
{
"path": "webcontainer/canvas.json",
"chars": 4189,
"preview": "{\n \"+\": \"https://jasonette.github.io/Jasonpedia/webcontainer/template2.json\",\n \"title\": \"3000 particles\",\n \"theme\": \""
},
{
"path": "webcontainer/d3gauge.json",
"chars": 1657,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"gauge d3\",\n \"actions\": {\n \"$load\": {\n \"type\": \"$set\","
},
{
"path": "webcontainer/d3graph.json",
"chars": 3509,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"D3 graph app\",\n \"actions\": {\n \"$load\": {\n \"trigger\": "
},
{
"path": "webcontainer/d3html.json",
"chars": 2556,
"preview": "{\n \"html\": \"<!DOCTYPE html> <html><head><meta charset='utf-8'> <style>.axis--x path { display: none; } .line { fill: no"
},
{
"path": "webcontainer/feed/animated_item.json",
"chars": 713,
"preview": "{\n \"item\": {\n \"type\": \"vertical\",\n \"style\": {\n \"padding\": \"0\",\n \"height\": \"400\"\n },\n \"components\""
},
{
"path": "webcontainer/feed/db.json",
"chars": 9193,
"preview": "{\n \"items\": [\n {\n \"avatar\": \"https://pbs.twimg.com/profile_images/557061751150112768/eMwi4Xz2.jpeg\",\n \"use"
},
{
"path": "webcontainer/feed/index.json",
"chars": 949,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Feed\",\n \"data\": {\n \"items\": {\n \"+\": \"items@https://ja"
},
{
"path": "webcontainer/feed/item.json",
"chars": 1246,
"preview": "{\n \"type\": \"horizontal\",\n \"style\": {\n \"spacing\": \"10\",\n \"padding\": \"10\"\n },\n \"components\": [\n {\n \"type"
},
{
"path": "webcontainer/feed/special_item.json",
"chars": 3502,
"preview": "{\n \"item\": {\n \"type\": \"vertical\",\n \"components\": [\n {\n \"type\": \"html\",\n \"style\": {\n \""
},
{
"path": "webcontainer/gaugehtml.json",
"chars": 9141,
"preview": "{\n \"html\": \"<!DOCTYPE html> <html> <head lang='en'> <meta charset='UTF-8'> <title></title> <script src='http://d3js.org"
},
{
"path": "webcontainer/iframe.json",
"chars": 374,
"preview": "{\n \"+\": \"https://jasonette.github.io/Jasonpedia/webcontainer/template.json\",\n \"title\": \"iframe\",\n \"theme\": \"rgba(0,0,"
},
{
"path": "webcontainer/index.json",
"chars": 3252,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"HTML demo\",\n \"data\": {\n \"items\": [\n {\n \"na"
},
{
"path": "webcontainer/lots.json",
"chars": 8832,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"attaching action to inline web container\",\n \"actions\": {\n \"ban"
},
{
"path": "webcontainer/pdf.json",
"chars": 398,
"preview": "{\n \"+\": \"https://jasonette.github.io/Jasonpedia/webcontainer/template.json\",\n \"title\": \"PDF.json\",\n \"theme\": \"#474747"
},
{
"path": "webcontainer/phasergame.json",
"chars": 4453,
"preview": "{\n \"+\": \"https://jasonette.github.io/Jasonpedia/webcontainer/template.json\",\n \"title\": \"Phaser.js Game\",\n \"theme\": \"r"
},
{
"path": "webcontainer/svg.json",
"chars": 3014,
"preview": "{\n \"+\": \"https://jasonette.github.io/Jasonpedia/webcontainer/template2.json\",\n \"title\": \"SVG Clock\",\n \"theme\": \"rgba("
},
{
"path": "webcontainer/template.json",
"chars": 956,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Web Container Background Template\",\n \"description\": \"template with ac"
},
{
"path": "webcontainer/template2.json",
"chars": 876,
"preview": "{\n \"$jason\": {\n \"head\": {\n \"title\": \"Web Container Background Template\",\n \"description\": \"template without"
},
{
"path": "webcontainer/threejsblocks.json",
"chars": 3832,
"preview": "{\n \"+\": \"https://jasonette.github.io/Jasonpedia/webcontainer/template2.json\",\n \"title\": \"Three.js Blocks\",\n \"theme\": "
},
{
"path": "webcontainer/threejsrainbow.json",
"chars": 2479,
"preview": "{\n \"+\": \"https://jasonette.github.io/Jasonpedia/webcontainer/template2.json\",\n \"title\": \"Three.js Rainbow\",\n \"theme\":"
}
]
About this extraction
This page contains the full source code of the Jasonette/Jasonpedia GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 104 files (303.4 KB), approximately 74.1k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.