Created
March 23, 2018 07:15
-
-
Save nektro/b1b8499a7394fc5dd411a5391e530541 to your computer and use it in GitHub Desktop.
Bootstrapping HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| 'use strict'; | |
| import { create_element } from "https://rawgit.com/Nektro/modules.js/439458f/src/create_element.js"; | |
| export function createUIWindow(model) { | |
| const view = model.map(x => createComponent(x)); | |
| for (const ele of view) { | |
| document.body.appendChild(ele.render()); | |
| window.addEventListener('scroll', e => { | |
| const y = e.target.scrollingElement.scrollTop; | |
| const h = document.querySelector('.ios.header').firstElementChild; | |
| const v = h.classList.contains('visible'); | |
| const b = h.classList.contains('bottom'); | |
| if (y >= 45) { | |
| if (!(v)) { | |
| h.classList.add('visible'); | |
| } | |
| } | |
| else { | |
| if (v) { | |
| h.classList.remove('visible'); | |
| } | |
| } | |
| if (y >= 74) { | |
| if (!(b)) { | |
| h.classList.add('bottom'); | |
| } | |
| } | |
| else { | |
| if (b) { | |
| h.classList.remove('bottom'); | |
| } | |
| } | |
| }, false); | |
| } | |
| } | |
| function createComponent(o) { | |
| switch (o.type) { | |
| case 'title': return new UIHeader(o.label); | |
| case 'view-table': return new UITableView(...o.children.map(x => createComponent(x))); | |
| case 'view-table-cell': return new UITableViewCell(o.color, o.img_url, o.label); | |
| } | |
| return null; | |
| } | |
| export class UIHeader { | |
| constructor(labl) { | |
| this.label = labl; | |
| } | |
| render() { | |
| return create_element('div', new Map().set('class','ios header'), [ | |
| create_element('div', undefined, [ | |
| create_element('div', undefined, [document.createTextNode(this.label)]) | |
| ]), | |
| create_element('h1', undefined, [document.createTextNode(this.label)]) | |
| ]); | |
| } | |
| } | |
| export class UIView { | |
| // | |
| } | |
| export class UITableView extends UIView { | |
| constructor(...cells) { | |
| super(); | |
| this.cells = cells; | |
| } | |
| render() { | |
| return create_element( | |
| 'ul', | |
| new Map().set('class','ios menu-list'), | |
| this.cells.map(x => x.render()) | |
| ); | |
| } | |
| } | |
| export class UITableViewCell { | |
| constructor(color, icon, title) { | |
| this.color = color; | |
| this.icon = icon; | |
| this.title = title; | |
| } | |
| render() { | |
| return create_element('li', undefined, [ | |
| create_element('span', new Map().set('class', `icon ${this.color}`), [ | |
| create_element('img', new Map().set('src', this.icon).set('class',`${this.color === '' ? '' : 'pad'}`)) | |
| ]), | |
| create_element('span', undefined, [document.createTextNode(this.title)]) | |
| ]); | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root{--ios-red:#ff3b30;--ios-orange:#ff9500;--ios-yellow:#fc0;--ios-green:#4cd964;--ios-teal:#5ac8fa;--ios-blue:#007aff;--ios-purple:#5856d6;--ios-pink:#ff2d55}body{margin:0;background-color:#eee;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', sans-serif}body .ios.header{display:block;min-height:fit-content;background-color:white}body .ios.header>div{display:flex;justify-content:center;align-items:center;position:fixed;top:0px;background-color:white;min-width:100vw;opacity:0;transition:opacity .33s}body .ios.header>div div{padding:0.75em;font-weight:bold;font-size:1em}body .ios.header>div.visible{opacity:1}body .ios.header>div.bottom{border-bottom:1px solid rgba(0,0,0,0.1)}body .ios.header>h1{margin:0;padding:2.2em 0 0.33em 0.5em;border-bottom:1px solid rgba(0,0,0,0.2)}body .ios.menu-list{padding:0;margin:2em 0}body .ios.menu-list li{display:flex;flex-direction:row;background-color:#fff;line-height:2.5em;max-height:2.5em;border-bottom:1px solid rgba(0,0,0,0.1)}body .ios.menu-list li:nth-child(1){border-top:1px solid rgba(0,0,0,0.1)}body .ios.menu-list li span{vertical-align:middle}body .ios.menu-list li>span:nth-child(1){padding:0 1em}body .ios.menu-list li>span:nth-child(1).icon{display:flex;justify-content:center;align-items:center;min-height:26px;min-width:26px}body .ios.menu-list li>span:nth-child(1).icon img{background-color:black;color:white;border-radius:0.5em;max-height:28px;max-width:28px}body .ios.menu-list li>span:nth-child(1).icon img.pad{max-height:22px;max-width:22px;padding:.2em}body .ios.menu-list li>span:nth-child(1).icon.red img{background-color:var(--ios-red)}body .ios.menu-list li>span:nth-child(1).icon.orange img{background-color:var(--ios-orange)}body .ios.menu-list li>span:nth-child(1).icon.yellow img{background-color:var(--ios-yellow)}body .ios.menu-list li>span:nth-child(1).icon.green img{background-color:var(--ios-green)}body .ios.menu-list li>span:nth-child(1).icon.teal img{background-color:var(--ios-teal)}body .ios.menu-list li>span:nth-child(1).icon.blue img{background-color:var(--ios-blue)}body .ios.menu-list li>span:nth-child(1).icon.purple img{background-color:var(--ios-purple)}body .ios.menu-list li>span:nth-child(1).icon.pink img{background-color:var(--ios-pink)}body .ios.menu-list li>span:nth-child(1).icon.gray img{background-color:#888}body .ios.menu-list li>span:nth-child(2){flex-grow:1} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| // https://developer.apple.com/ios/human-interface-guidelines/visual-design/color/ | |
| --ios-red: rgb(255, 59, 48); | |
| --ios-orange: rgb(255, 149, 0); | |
| --ios-yellow: rgb(255, 204, 0); | |
| --ios-green: rgb(76, 217, 100); | |
| --ios-teal: rgb(90, 200, 250); | |
| --ios-blue: rgb(0, 122, 255); | |
| --ios-purple: rgb(88, 86, 214); | |
| --ios-pink: rgb(255, 45, 85); | |
| } | |
| body { | |
| margin: 0; | |
| background-color: #eee; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', sans-serif | |
| } | |
| body { | |
| .ios { | |
| &.header { | |
| display: block; | |
| min-height: fit-content; | |
| background-color: white; | |
| > div { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: fixed; | |
| top: 0px; | |
| background-color: white; | |
| min-width: 100vw; | |
| opacity: 0; | |
| transition: opacity .33s; | |
| div { | |
| padding: 0.75em; | |
| font-weight: bold; | |
| font-size: 1em; | |
| } | |
| &.visible { | |
| opacity: 1; | |
| } | |
| &.bottom { | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| } | |
| > h1 { | |
| margin: 0; | |
| padding: 2.2em 0 0.33em 0.5em; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.2); | |
| } | |
| } | |
| &.menu-list { | |
| padding: 0; | |
| margin: 2em 0; | |
| li { | |
| display: flex; | |
| flex-direction: row; | |
| background-color: #fff; | |
| line-height: 2.5em; | |
| max-height: 2.5em; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| &:nth-child(1) { | |
| border-top: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| span { | |
| vertical-align: middle; | |
| } | |
| > span { | |
| &:nth-child(1) { | |
| padding: 0 1em; | |
| &.icon { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 26px; | |
| min-width: 26px; | |
| img { | |
| background-color: black; | |
| color: white; | |
| border-radius: 0.5em; | |
| max-height: 28px; | |
| max-width: 28px; | |
| &.pad { | |
| max-height: 22px; | |
| max-width: 22px; | |
| padding: .2em; | |
| } | |
| } | |
| &.red img { background-color: var(--ios-red); } | |
| &.orange img { background-color: var(--ios-orange); } | |
| &.yellow img { background-color: var(--ios-yellow); } | |
| &.green img { background-color: var(--ios-green); } | |
| &.teal img { background-color: var(--ios-teal); } | |
| &.blue img { background-color: var(--ios-blue); } | |
| &.purple img { background-color: var(--ios-purple); } | |
| &.pink img { background-color: var(--ios-pink); } | |
| &.gray img { background-color: #888; } | |
| } | |
| } | |
| &:nth-child(2) { | |
| flex-grow: 1; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <title>iOS 11</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> | |
| <link rel="stylesheet" href="./_uikit.min.css"> | |
| <script type="module" src="./script.js"></script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| 'use script'; | |
| // | |
| import * as UIKit from "./_uikit.js"; | |
| // | |
| const pageView = [ | |
| { | |
| type: "title", | |
| label: "Settings" | |
| }, | |
| { | |
| type: "view-table", | |
| children: [ | |
| { type: "view-table-cell", color: 'orange', img_url: 'https://png.icons8.com/ios/32/ffffff/airplane-mode-on-filled.png', label: 'Airplane Mode' }, | |
| { type: "view-table-cell", color: 'blue', img_url: 'https://png.icons8.com/ios/32/ffffff/wifi-filled.png', label: 'Wi-Fi' }, | |
| { type: "view-table-cell", color: 'blue', img_url: 'https://png.icons8.com/ios/32/ffffff/bluetooth-filled.png', label: 'Bluetooth' }, | |
| { type: "view-table-cell", color: 'green', img_url: 'https://png.icons8.com/ios/32/ffffff/radio-tower-filled.png', label: 'Cellular' }, | |
| ] | |
| }, | |
| { | |
| type: "view-table", | |
| children: [ | |
| { type: "view-table-cell", color: 'red', img_url: 'https://png.icons8.com/ios/32/ffffff/notification-center.png', label: 'Notifications' }, | |
| { type: "view-table-cell", color: 'gray', img_url: 'https://png.icons8.com/ios/32/ffffff/switch.png', label: 'Control Center' }, | |
| { type: "view-table-cell", color: 'purple', img_url: 'https://png.icons8.com/ios/32/ffffff/do-not-disturb-2-filled.png', label: 'Do Not Disturb' }, | |
| ] | |
| }, | |
| { | |
| type: "view-table", | |
| children: [ | |
| { type: "view-table-cell", color: 'gray', img_url: 'https://png.icons8.com/ios/32/ffffff/settings.png', label: 'General' }, | |
| { type: "view-table-cell", color: 'blue', img_url: 'https://png.icons8.com/ios/32/ffffff/sentence-case-filled.png', label: 'Display & Brightness' }, | |
| { type: "view-table-cell", color: 'teal', img_url: 'https://png.icons8.com/ios/32/ffffff/panorama.png', label: 'Wallpaper' }, | |
| { type: "view-table-cell", color: 'red', img_url: 'https://png.icons8.com/ios/32/ffffff/high-volume.png', label: 'Sounds' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://9to5mac.files.wordpress.com/2016/06/siri1.png', label: 'Siri & Search' }, | |
| { type: "view-table-cell", color: 'red', img_url: 'https://png.icons8.com/ios/32/ffffff/fingerprint.png', label: 'Touch ID & Passwords' }, | |
| { type: "view-table-cell", color: 'orange', img_url: 'https://png.icons8.com/ios/32/ffffff/siren.png', label: 'Emergency SOS' }, | |
| { type: "view-table-cell", color: 'green', img_url: 'https://png.icons8.com/ios/32/ffffff/empty-battery-filled.png', label: 'Battery' }, | |
| { type: "view-table-cell", color: 'blue', img_url: 'https://png.icons8.com/ios/32/ffffff/hand-filled.png', label: 'Privacy' }, | |
| ] | |
| }, | |
| { | |
| type: "view-table", | |
| children: [ | |
| { type: "view-table-cell", color: '', img_url: 'https://pbs.twimg.com/profile_images/941404148188061696/w25-myxT_400x400.jpg', label: 'iTunes & App Store' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://support.apple.com/library/content/dam/edam/applecare/images/en_US/applepay/ios9-wallet-applepay-app-icon.png', label: 'Wallet & Apple Pay' }, | |
| ] | |
| }, | |
| { | |
| type: "view-table", | |
| children: [ | |
| { type: "view-table-cell", color: 'gray', img_url: 'https://png.icons8.com/ios/32/ffffff/key-filled.png', label: 'Accounts & Passwords' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://developer.apple.com/ios/human-interface-guidelines/images/icons/app_icons/Mail.png', label: 'Mail' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://assets.ifttt.com/images/channels/79/icons/on_color_large.png', label: 'Contacts' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://www.macsolutionsplus.com/wp-content/uploads/2016/06/iOS-Calendar-icon.png', label: 'Calendar' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-notes-app-icon.png', label: 'Notes' }, | |
| { type: "view-table-cell", color: '', img_url: 'http://benjaminmayo.co.uk/images/30.png', label: 'Reminders' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://developer.apple.com/ios/human-interface-guidelines/images/icons/app_icons/Phone.png', label: 'Phone' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://cdn.iconscout.com/public/images/icon/free/png-256/messages-ios-brand-logo-37990c21ead440f7-256x256.png', label: 'Messages' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://support.apple.com/library/content/dam/edam/applecare/images/en_US/iOS/ios9-facetime-icon.png', label: 'FaceTime' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://developer.apple.com/ios/human-interface-guidelines/images/icons/app_icons/Maps.png', label: 'Maps' }, | |
| { type: "view-table-cell", color: '', img_url: 'http://cdn.osxdaily.com/wp-content/uploads/2014/05/compass-icon-ios-300x300.png', label: 'Compass' }, | |
| { type: "view-table-cell", color: '', img_url: 'http://www.iblogapple.com/wp-content/uploads/2017/01/safari-icon-ios-10.png', label: 'Safari' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://support.apple.com/library/content/dam/edam/applecare/images/en_US/ios/ios11-news-app-icon.png', label: 'News' }, | |
| ] | |
| }, | |
| { | |
| type: "view-table", | |
| children: [ | |
| { type: "view-table-cell", color: '', img_url: 'https://help.apple.com/ios/tips/assets/TIP072E27E24_P1/en/IC_Music-Web@2x.png', label: 'Music' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://cdn.iconscout.com/public/images/icon/free/png-512/tv-ios-37c5a36f58586b8c-512x512.png', label: 'TV' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://developer.apple.com/ios/human-interface-guidelines/images/icons/app_icons/Photos.png', label: 'Photos' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://i.pinimg.com/236x/9e/9b/29/9e9b2958edd0ea4dc487da38caca0850--transparent-school-stuff.jpg', label: 'Camera' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://developer.apple.com/ios/human-interface-guidelines/images/icons/app_icons/Podcast.png', label: 'Podcasts' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://www1.in.tum.de/lehrstuhl_1/images/projects/sgd-ws13/tutorials/multiplyer-games/gamecenter.jpg', label: 'Game Center' }, | |
| ] | |
| }, | |
| { | |
| type: "view-table", | |
| children: [ | |
| { type: "view-table-cell", color: '', img_url: 'https://png.icons8.com/ios/32/ffffff/network-cable-filled.png', label: 'TV Provider' }, | |
| ] | |
| }, | |
| { | |
| type: "view-table", | |
| children: [ | |
| { type: "view-table-cell", color: '', img_url: 'https://lh3.googleusercontent.com/tBQouybR60opLNoFHcP8TXfSdCJso6SoiftJvU_d7xuM9ayeVG_k8MkHlq36yV5myNnT=w300', label: '2048' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://lh3.googleusercontent.com/P21GXiQ1Mquqgog3p2G7nDSoAjNiNWREcQlXcwlWLmjjRCvo7-QR5SRT4hSOLJ0SUfCy=w300', label: 'AdCap!' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://is1-ssl.mzstatic.com/image/thumb/Purple128/v4/56/e3/ae/56e3aeb5-76b9-152b-a59b-e511dba85088/AppIcon-1x_U007emarketing-85-220-0-8.png/246x0w.jpg', label: 'AdComm' }, | |
| { type: "view-table-cell", color: '', img_url: 'https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/22/ce/36/22ce364e-95e2-0ccc-6654-1e759270d076/mzl.aqojsjzo.png/246x0w.jpg', label: 'Angry Birds' }, | |
| { type: "view-table-cell", color: '', img_url: '', label: '... ...' } | |
| ] | |
| }, | |
| ]; | |
| // | |
| UIKit.createUIWindow(pageView); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment