├── .babelrc
├── .eslintignore
├── .gitignore
├── .nvmrc
├── CNAME
├── Makefile
├── README.md
├── build
└── index.html
├── button
├── api.js
├── code-highlighter
│ ├── CodeHighlighter.js
│ ├── code-highlighter.styl
│ ├── highlight.js
│ └── languages
│ │ ├── http.js
│ │ ├── json.js
│ │ ├── markdown.js
│ │ ├── swift.js
│ │ └── yaml.js
├── components
│ ├── code-highlighter
│ │ ├── CodeHighlighter.js
│ │ ├── code-highlighter.styl
│ │ ├── highlight.js
│ │ └── languages
│ │ │ ├── http.js
│ │ │ ├── json.js
│ │ │ ├── markdown.js
│ │ │ ├── swift.js
│ │ │ └── yaml.js
│ ├── header
│ │ ├── Header.js
│ │ └── header.styl
│ ├── icons
│ │ └── WarnIcon.js
│ ├── logos
│ │ ├── ConsoleRest.js
│ │ ├── Curl.js
│ │ ├── OpenAPI.js
│ │ ├── Paw.js
│ │ ├── PawMini.js
│ │ ├── Postman.js
│ │ └── RAML.js
│ ├── modal
│ │ ├── Modal.js
│ │ └── modal.styl
│ ├── outer
│ │ └── Outer.js
│ ├── pages
│ │ ├── MainPage.js
│ │ ├── SelectionPage.js
│ │ ├── main.styl
│ │ ├── pages.styl
│ │ └── selection.styl
│ ├── simple-select
│ │ ├── SimpleSelect.js
│ │ └── simple-select.styl
│ └── views
│ │ ├── CurlViewer.js
│ │ ├── PawViewer.js
│ │ ├── PostmanViewer.js
│ │ ├── RAMLViewer.js
│ │ ├── SwaggerViewer.js
│ │ ├── UnknownViewer.js
│ │ ├── Viewer.js
│ │ ├── curl-view.styl
│ │ ├── paw-view.styl
│ │ ├── postman-view.styl
│ │ ├── raml-view.styl
│ │ ├── swagger-view.styl
│ │ └── view.styl
├── config.js
├── header
│ ├── Header.js
│ └── header.styl
├── icons
│ └── WarnIcon.js
├── index.build.js
├── index.html
├── index.js
├── index.tpl.js
├── logos
│ ├── ConsoleRest.js
│ ├── Curl.js
│ ├── OpenAPI.js
│ ├── Paw.js
│ ├── PawMini.js
│ ├── Postman.js
│ └── RAML.js
├── modal
│ ├── Modal.js
│ └── modal.styl
├── outer
│ └── Outer.js
├── pages
│ ├── MainPage.js
│ ├── SelectionPage.js
│ ├── main.styl
│ ├── pages.styl
│ └── selection.styl
├── simple-select
│ ├── SimpleSelect.js
│ └── simple-select.styl
├── visual.js
└── worker.js
├── configs
├── button
│ └── webpack.config.babel.js
├── hot
│ └── webpack.config.babel.js
└── website
│ └── webpack.config.babel.js
├── favicon
├── github.io
├── assets
│ ├── buttons
│ │ ├── run_with_blue.svg
│ │ ├── run_with_deep_orange.svg
│ │ ├── run_with_green.svg
│ │ ├── run_with_orange.svg
│ │ ├── run_with_pink.svg
│ │ ├── run_with_purple.svg
│ │ ├── run_with_red.svg
│ │ ├── run_with_turquoise.svg
│ │ └── run_with_yellow.svg
│ ├── console-rest-logo.svg
│ ├── curl-logo.svg
│ ├── drop-area-img.svg
│ ├── favicon_16.png
│ ├── favicon_192.png
│ ├── favicon_32.png
│ ├── favicon_96.png
│ ├── fileformats.svg
│ ├── icon_114.png
│ ├── icon_144.png
│ ├── icon_180.png
│ ├── icon_57.png
│ ├── paw-icon.svg
│ ├── paw-logo.svg
│ ├── paw-screen.png
│ ├── postman-logo-2.svg
│ ├── raml-logo.svg
│ ├── starlights.svg
│ └── swagger-logo.png
├── core
│ ├── app.css
│ ├── main.js
│ └── vendor.js
├── libs
│ ├── api-flow.js
│ ├── console-rest-api.js
│ ├── console-rest-visual.js
│ └── console-rest.js
└── styles
│ └── console-rest-visual.css
├── index.html
├── linting
├── dev.yaml
├── eslint_base.yaml
└── prod.yaml
├── package.json
├── src
├── _analytics
│ └── GAnalytics.js
├── app
│ └── converter
│ │ ├── Converter.js
│ │ └── converter.styl
├── basics
│ ├── body.styl
│ ├── buttons
│ │ ├── EmptyButton.js
│ │ ├── GenericButton.js
│ │ └── button.styl
│ ├── dragdrop
│ │ ├── DropArea.js
│ │ └── droparea.styl
│ ├── filepicker
│ │ ├── FilePicker.js
│ │ └── file-picker.styl
│ ├── inputs
│ │ ├── NestedSelect.js
│ │ ├── SelectField.js
│ │ ├── TextField.js
│ │ ├── input.styl
│ │ └── nested-select.styl
│ ├── media
│ │ ├── Rocket.js
│ │ ├── arrows
│ │ │ ├── DownArrowImg.js
│ │ │ ├── LeftArrow.js
│ │ │ └── UpArrowImg.js
│ │ ├── fileformats.svg
│ │ ├── icons
│ │ │ ├── BetaImg.js
│ │ │ ├── CopyImg.js
│ │ │ ├── LoveImg.js
│ │ │ └── MiniBuildImg.js
│ │ ├── image.styl
│ │ ├── logos
│ │ │ ├── GithubLogo.js
│ │ │ ├── LargeOAIImg.js
│ │ │ ├── LargeRAMLImg.js
│ │ │ ├── LargeSwaggerImg.js
│ │ │ ├── PawLogo.js
│ │ │ └── _ConsoleRestLogo.js
│ │ ├── starlights.svg
│ │ └── status
│ │ │ ├── FailureImg.js
│ │ │ ├── SuccessImg.js
│ │ │ └── WarnImg.js
│ ├── notification
│ │ ├── Notification.js
│ │ └── notification.styl
│ └── paw-interface
│ │ └── PawInterface.js
├── components
│ ├── beta
│ │ ├── Banner.js
│ │ └── banner.styl
│ ├── button-customization
│ │ ├── ButtonCustomization.js
│ │ └── customization.styl
│ ├── collapsible
│ │ ├── Collapsible.js
│ │ └── collapsible.styl
│ ├── color-palette
│ │ ├── ColorPalette.js
│ │ └── color-palette.styl
│ ├── flow-preview
│ │ ├── FlowPreview.js
│ │ └── preview.styl
│ ├── flow-snippet
│ │ ├── FlowSnippet.js
│ │ ├── snippet.styl
│ │ └── snippets
│ │ │ ├── HTMLSnippet.js
│ │ │ ├── JSSnippet.js
│ │ │ └── MarkdownSnippet.js
│ ├── flow-warning
│ │ ├── FlowWarning.js
│ │ └── warning.styl
│ ├── helpers
│ │ ├── ConsoleHelper.js
│ │ ├── CurlHelper.js
│ │ ├── MissingHelper.js
│ │ ├── PawHelper.js
│ │ ├── PostmanHelper.js
│ │ ├── SwaggerRAMLHelper.js
│ │ └── helper-content.styl
│ ├── metadata-editor
│ │ ├── MetadataEditor.js
│ │ └── editor.styl
│ ├── notifier
│ │ ├── Notifier.js
│ │ └── notifier.styl
│ ├── status-bar
│ │ ├── StatusBar.js
│ │ └── status-bar.styl
│ └── tabs
│ │ ├── TabView.js
│ │ ├── TabViewer.js
│ │ └── tabs.styl
├── favicon
├── index.html
├── index.js
├── index_prod.html
├── principles
│ ├── Colors.js
│ ├── blocks.styl
│ ├── border-mixins.styl
│ ├── colors.styl
│ ├── font-mixins.styl
│ ├── gutter-mixins.styl
│ ├── layout-mixins.styl
│ └── padding-mixins.styl
└── templates
│ ├── helper
│ ├── Helper.js
│ └── helper.styl
│ ├── landing
│ ├── Landing.js
│ └── landing.styl
│ └── uploader
│ ├── Uploader.js
│ └── uploader.styl
└── webpack.config.babel.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 'presets': [
3 | 'es2015',
4 | 'stage-0',
5 | 'stage-1',
6 | 'stage-2',
7 | 'stage-3'
8 | ],
9 | 'plugins': ['transform-decorators-legacy', 'transform-runtime',
10 | 'transform-react-jsx']
11 | }
12 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/.eslintignore
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v5.10.0
2 |
--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | console.rest
2 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | # generic
2 | configure:
3 | npm install
4 |
5 | clean:
6 | rm -rf node_modules static
7 |
8 | dev-server:
9 | ./node_modules/.bin/webpack-dev-server --config ./configs/hot/webpack.config.babel.js
10 |
11 | # website
12 | test-website:
13 | ./node_modules/.bin/mocha --require mocha --compilers js:babel-core/register --reporter spec "src/**/__tests__/*-test.js"
14 |
15 | lint-website:
16 | ./node_modules/eslint/bin/eslint.js -c linting/prod.yaml src/
17 |
18 | prod-website:
19 | NODE_ENV=production BUILD_ENV=build ./node_modules/.bin/webpack --config ./configs/website/webpack.config.babel.js
20 |
21 | # button
22 | lint-button:
23 | ./node_modules/eslint/bin/eslint.js -c linting/prod.yaml button/
24 |
25 | prod-button:
26 | NODE_ENV=production BUILD_ENV=build ./node_modules/.bin/webpack --config ./configs/button/webpack.config.babel.js
27 | cp ./button/index.js ./github.io/libs/console-rest.js
28 |
29 | test-button:
30 | ./node_modules/.bin/mocha --require mocha --compilers js:babel-core/register --reporter spec "button/**/__tests__/*-test.js"
31 |
32 | # all
33 | lint: lint-website lint-button
34 |
35 | test: test-website test-button
36 |
37 | prod: prod-website prod-button
38 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Console.REST
2 |
3 | [](https://console-rest-slackin.herokuapp.com)
4 |
5 | Console.REST is a converter service for API description formats and HTTP clients, such as Swagger, RAML, Curl, Postman, and Paw.
6 |
7 | This project is open-source, and can be used in multiple ways:
8 | - as a client-side web service, at [https://console.rest/](https://console.rest).
9 | - as a button present on the documentation of API providers.
10 | - as a Chrome extension for users to use on popular API documentations, based on [apis.guru](https://apis.guru) (Still in development).
11 | - as a JS library that allows users to programmatically convert formats.
12 |
13 | ## Dependencies
14 |
15 | Console.REST uses the open-source library [API-Flow](https://github.com/luckymarmot/API-Flow) to convert between formats. As a standalone, API-Flow is available as a webworker, a web library, and a node module.
16 |
17 | ## Button
18 |
19 | Console.REST provides API providers with 2 snippets to plug into their API docs to allow their users to download them in their preferred format:
20 | - An HTML/JS Snippet for web documentation, that injects itself in the context of the page to give a seamless experience to the user.
21 | - A Markdown Snippet for github documentation, that uses Console.REST as a Service.
22 |
23 | The button looks like this
24 |
25 | [](https://console.rest/#?name=swagger&format=swagger&version=v2.0&uri=https%3A%2F%2Fapi.apis.guru%2Fv2%2Fspecs%2Fxkcd.com%2F1.0.0%2Fswagger.yaml)
26 |
27 | You can read more about how to use the button in your API documentation in the [wiki](https://github.com/luckymarmot/console-rest/wiki).
28 |
29 | ## URL Scheme
30 |
31 | [Console.REST](https://console.rest) exposes a simple API that allows anyone to open it with a file to convert. You can find more information on the API in the [wiki](https://github.com/luckymarmot/console-rest/wiki/window.location.hash).
32 |
33 | ## JS Library
34 |
35 | A stripped down version of Console.REST without any of the visuals is also available for users and API providers that want to integrate the functionalities of Console.REST and API-Flow even further into their projects.
36 |
37 | You can read more about the API of the JS library in the [wiki](https://github.com/luckymarmot/console-rest/wiki/using-the-js-library).
38 |
39 | ## Chrome Extension (Still in development)
40 |
41 | Some API providers may have a Swagger/RAML/etc. but may not have included Console.REST as a Button in their API docs. Thanks to the awesome work of the guys at [apis.guru](https://apis.guru), the extension can offer the functionalities of Console.REST as a button even on pages that don't have the button.
42 |
43 | ## License
44 |
45 | This repository is released under the [MIT License](LICENSE). Feel free to fork, and modify!
46 | Copyright © 2016 Paw Inc.
47 |
48 | ## Contributors
49 |
50 | See [Contributors](https://github.com/luckymarmot/console-rest/graphs/contributors).
51 |
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Console.REST
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/button/code-highlighter/CodeHighlighter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import hljs from './highlight'
4 | import lang_http from './languages/http'
5 | import lang_json from './languages/json'
6 | import lang_yaml from './languages/yaml'
7 | import lang_markdown from './languages/markdown'
8 |
9 | hljs.registerLanguage('http', lang_http)
10 | hljs.registerLanguage('json', lang_json)
11 | hljs.registerLanguage('yaml', lang_yaml)
12 | hljs.registerLanguage('markdown', lang_markdown)
13 |
14 | require('./code-highlighter.styl')
15 |
16 | export default class CodeHighlighter extends Component {
17 | static propTypes = {
18 | input: React.PropTypes.string,
19 | lang: React.PropTypes.string
20 | }
21 | static defaultProps = {
22 | lang: 'http'
23 | }
24 |
25 | tokensToLines(input, tokens) {
26 | let tokenPos = 0
27 | let lines = [ [] ]
28 | for (let token of tokens) {
29 | let subInput = input.substr(tokenPos, token.len)
30 | let subLines = subInput.split('\n')
31 | let i = 0
32 | for (let subLine of subLines) {
33 | if (i > 0) {
34 | lines.push([])
35 | }
36 | lines[lines.length - 1].push({
37 | text: subLine,
38 | className: token.className
39 | })
40 | i += 1
41 | }
42 | tokenPos += token.len
43 | }
44 | return lines
45 | }
46 |
47 | renderLine(line) {
48 | let tokenComponents = []
49 | let count = 0
50 | for (let token of line) {
51 | let className = null
52 | if (token.className) {
53 | className = `hljs-${token.className}`
54 | }
55 | tokenComponents.push(
56 | {token.text || '\r'}
57 | )
58 | count += 1
59 | }
60 | return tokenComponents
61 | }
62 |
63 | renderText() {
64 | const { input, lang } = this.props
65 |
66 | // parse with highlightjs
67 | const tokens = hljs.highlight(lang, input, true).value
68 |
69 | // get lines
70 | const lines = this.tokensToLines(input, tokens)
71 |
72 | let lineComponents = []
73 | let count = 0
74 | for (let line of lines) {
75 | lineComponents.push(
76 | {this.renderLine(line)}
77 | )
78 | count += 1
79 | }
80 | return lineComponents
81 | }
82 |
83 | render() {
84 | const { className } = this.props
85 | return {this.renderText()}
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/button/code-highlighter/code-highlighter.styl:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Atom One Light by Daniel Gamage
4 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax
5 |
6 | base: #fafafa // off-white
7 | mono-1: #383a42 // dark-grey
8 | mono-2: #686b77 // grey
9 | mono-3: #a0a1a7 // light-grey
10 | hue-1: #0184bb
11 | hue-2: #4078f2
12 | hue-3: #a626a4
13 | hue-4: #50a14f
14 | hue-5: #e45649
15 | hue-5-2: #c91243
16 | hue-6: #986801
17 | hue-6-2: #c18401
18 |
19 | */
20 |
21 | /*
22 | Updated hues
23 |
24 | cherry: #D42C69
25 | purple: #863CC6
26 | blue: #2F78CD
27 | turquoise: #26C29F
28 | orange: #EA6E30
29 |
30 | */
31 | .oic
32 | .hljs
33 | display: block
34 | overflow-x: auto
35 | padding: 0.5em
36 | color: #383a42
37 | background: #fafafa
38 |
39 |
40 | .hljs-comment
41 | .hljs-quote
42 | color: #a0a1a7
43 | font-style: italic
44 |
45 |
46 | .hljs-doctag
47 | .hljs-keyword
48 | .hljs-formula
49 | color: #26C29F
50 |
51 | .hljs-section
52 | .hljs-name
53 | .hljs-selector-tag
54 | .hljs-deletion
55 | .hljs-subst
56 | color: #863CC6
57 |
58 |
59 | .hljs-literal
60 | color: #EA6E30
61 |
62 |
63 | .hljs-string
64 | .hljs-regexp
65 | .hljs-addition
66 | .hljs-attribute
67 | .hljs-meta-string
68 | color: #2F78CD
69 |
70 |
71 | .hljs-built_in
72 | .hljs-code
73 | .hljs-class .hljs-title
74 | color: #EA6E30
75 |
76 |
77 | .hljs-attr
78 | .hljs-variable
79 | .hljs-template-variable
80 | .hljs-type
81 | .hljs-selector-class
82 | .hljs-selector-attr
83 | .hljs-selector-pseudo
84 | .hljs-number
85 | color: #D42C69
86 |
87 |
88 | .hljs-symbol
89 | .hljs-bullet
90 | .hljs-link
91 | .hljs-meta
92 | .hljs-selector-id
93 | .hljs-title
94 | color: #2F78CD
95 |
96 |
97 | .hljs-emphasis
98 | font-style: italic
99 |
100 |
101 | .hljs-strong
102 | font-weight: bold
103 |
104 |
105 | .hljs-link
106 | text-decoration: underline
107 |
108 | pre
109 | background-image: none
110 | border: none
111 | overflow-x: visible
112 | white-space pre-wrap
113 | word-wrap break-word
114 | padding 0
115 | line-height 0
116 | counter-reset line
117 | margin 0
118 | font-family: 'Roboto Mono', monospace;
119 | span.line
120 | display block
121 | font-size 12px
122 | line-height 16px
123 | margin-left 15px
124 | padding 0px 10px
125 | position relative
126 | color darken(#7F94A1, 30%)
127 | &:first-child
128 | padding-top 5px
129 |
130 | &:before
131 | counter-increment line
132 | content counter(line)
133 | position absolute
134 | padding 0 .5em
135 | color darken(#F3F5F6, 15%)
136 | margin-left -89px
137 | font-size 10px
138 | user-select none
139 | text-align right
140 | width 70px
141 |
--------------------------------------------------------------------------------
/button/code-highlighter/languages/http.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 |
3 | /*
4 | Language: HTTP
5 | Description: HTTP request and response headers with automatic body highlighting
6 | Author: Ivan Sagalaev
7 | Category: common, protocols
8 | */
9 |
10 | let lang = function(hljs) {
11 | var VERSION = 'HTTP/[0-9\\.]+';
12 | return {
13 | aliases: ['https'],
14 | illegal: '\\S',
15 | contains: [
16 | {
17 | begin: '^' + VERSION, end: '$',
18 | contains: [{className: 'number', begin: '\\b\\d{3}\\b'}]
19 | },
20 | {
21 | begin: '^[A-Z]+ (.*?) ' + VERSION + '$', returnBegin: true, end: '$',
22 | contains: [
23 | {
24 | className: 'string',
25 | begin: ' ', end: ' ',
26 | excludeBegin: true, excludeEnd: true
27 | },
28 | {
29 | begin: VERSION
30 | },
31 | {
32 | className: 'keyword',
33 | begin: '[A-Z]+'
34 | }
35 | ]
36 | },
37 | {
38 | className: 'attribute',
39 | begin: '^\\w', end: ': ', excludeEnd: true,
40 | illegal: '\\n|\\s|=',
41 | starts: {end: '$', relevance: 0}
42 | },
43 | {
44 | begin: '\\n\\n',
45 | starts: {subLanguage: [], endsWithParent: true}
46 | }
47 | ]
48 | };
49 | };
50 |
51 | /*eslint-enable*/
52 |
53 | export default lang
54 |
--------------------------------------------------------------------------------
/button/code-highlighter/languages/json.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | /*
3 | Language: JSON
4 | Author: Ivan Sagalaev
5 | Category: common, protocols
6 | */
7 |
8 | let lang = function(hljs) {
9 | var LITERALS = {literal: 'true false null'};
10 | var TYPES = [
11 | hljs.QUOTE_STRING_MODE,
12 | hljs.C_NUMBER_MODE
13 | ];
14 | var VALUE_CONTAINER = {
15 | end: ',', endsWithParent: true, excludeEnd: true,
16 | contains: TYPES,
17 | keywords: LITERALS
18 | };
19 | var OBJECT = {
20 | begin: '{', end: '}',
21 | contains: [
22 | {
23 | className: 'attr',
24 | begin: '\\s*"', end: '"\\s*:\\s*', excludeBegin: true, excludeEnd: true,
25 | contains: [hljs.BACKSLASH_ESCAPE],
26 | illegal: '\\n',
27 | starts: VALUE_CONTAINER
28 | }
29 | ],
30 | illegal: '\\S'
31 | };
32 | var ARRAY = {
33 | begin: '\\[', end: '\\]',
34 | contains: [hljs.inherit(VALUE_CONTAINER)], // inherit is a workaround for a bug that makes shared modes with endsWithParent compile only the ending of one of the parents
35 | illegal: '\\S'
36 | };
37 | TYPES.splice(TYPES.length, 0, OBJECT, ARRAY);
38 | return {
39 | contains: TYPES,
40 | keywords: LITERALS,
41 | illegal: '\\S'
42 | };
43 | }
44 |
45 | /*eslint-enable*/
46 |
47 | export default lang
48 |
--------------------------------------------------------------------------------
/button/code-highlighter/languages/markdown.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /*
3 | Language: Markdown
4 | Requires: xml.js
5 | Author: John Crepezzi
6 | Website: http://seejohncode.com/
7 | Category: common, markup
8 | */
9 |
10 | let lang = function(hljs) {
11 | return {
12 | aliases: ['md', 'mkdown', 'mkd'],
13 | contains: [
14 | // highlight headers
15 | {
16 | className: 'section',
17 | variants: [
18 | { begin: '^#{1,6}', end: '$' },
19 | { begin: '^.+?\\n[=-]{2,}$' }
20 | ]
21 | },
22 | // inline html
23 | {
24 | begin: '<', end: '>',
25 | subLanguage: 'xml',
26 | relevance: 0
27 | },
28 | // lists (indicators only)
29 | {
30 | className: 'bullet',
31 | begin: '^([*+-]|(\\d+\\.))\\s+'
32 | },
33 | // strong segments
34 | {
35 | className: 'strong',
36 | begin: '[*_]{2}.+?[*_]{2}'
37 | },
38 | // emphasis segments
39 | {
40 | className: 'emphasis',
41 | variants: [
42 | { begin: '\\*.+?\\*' },
43 | { begin: '_.+?_'
44 | , relevance: 0
45 | }
46 | ]
47 | },
48 | // blockquotes
49 | {
50 | className: 'quote',
51 | begin: '^>\\s+', end: '$'
52 | },
53 | // code snippets
54 | {
55 | className: 'code',
56 | variants: [
57 | { begin: '`.+?`' },
58 | { begin: '^( {4}|\t)', end: '$'
59 | , relevance: 0
60 | }
61 | ]
62 | },
63 | // horizontal rules
64 | {
65 | begin: '^[-\\*]{3,}', end: '$'
66 | },
67 | // using links - title and link
68 | {
69 | begin: '\\[.+?\\][\\(\\[].*?[\\)\\]]',
70 | returnBegin: true,
71 | contains: [
72 | {
73 | className: 'string',
74 | begin: '\\[', end: '\\]',
75 | excludeBegin: true,
76 | returnEnd: true,
77 | relevance: 0
78 | },
79 | {
80 | className: 'link',
81 | begin: '\\]\\(', end: '\\)',
82 | excludeBegin: true, excludeEnd: true
83 | },
84 | {
85 | className: 'symbol',
86 | begin: '\\]\\[', end: '\\]',
87 | excludeBegin: true, excludeEnd: true
88 | }
89 | ],
90 | relevance: 10
91 | },
92 | {
93 | begin: '^\\[\.+\\]:',
94 | returnBegin: true,
95 | contains: [
96 | {
97 | className: 'symbol',
98 | begin: '\\[', end: '\\]:',
99 | excludeBegin: true, excludeEnd: true,
100 | starts: {
101 | className: 'link',
102 | end: '$'
103 | }
104 | }
105 | ]
106 | }
107 | ]
108 | };
109 | }
110 |
111 | /* eslint-enable */
112 | export default lang
113 |
--------------------------------------------------------------------------------
/button/code-highlighter/languages/yaml.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | /*
3 | Language: YAML
4 | Author: Stefan Wienert
5 | Requires: ruby.js
6 | Description: YAML (Yet Another Markdown Language)
7 | Category: config
8 | */
9 | let lang = function(hljs) {
10 | var LITERALS = {literal: '{ } true false yes no Yes No True False null'};
11 |
12 | var keyPrefix = '^[ \\-]*';
13 | var keyName = '[a-zA-Z_][\\w\\-]*';
14 | var KEY = {
15 | className: 'attr',
16 | variants: [
17 | { begin: keyPrefix + keyName + ":"},
18 | { begin: keyPrefix + '"' + keyName + '"' + ":"},
19 | { begin: keyPrefix + "'" + keyName + "'" + ":"}
20 | ]
21 | };
22 |
23 | var TEMPLATE_VARIABLES = {
24 | className: 'template-variable',
25 | variants: [
26 | { begin: '\{\{', end: '\}\}' }, // jinja templates Ansible
27 | { begin: '%\{', end: '\}' } // Ruby i18n
28 | ]
29 | };
30 | var STRING = {
31 | className: 'string',
32 | relevance: 0,
33 | variants: [
34 | {begin: /'/, end: /'/},
35 | {begin: /"/, end: /"/}
36 | ],
37 | contains: [
38 | hljs.BACKSLASH_ESCAPE,
39 | TEMPLATE_VARIABLES
40 | ]
41 | };
42 |
43 | return {
44 | case_insensitive: true,
45 | aliases: ['yml', 'YAML', 'yaml'],
46 | contains: [
47 | KEY,
48 | {
49 | className: 'meta',
50 | begin: '^---\s*$',
51 | relevance: 10
52 | },
53 | { // multi line string
54 | className: 'string',
55 | begin: '[\\|>] *$',
56 | returnEnd: true,
57 | contains: STRING.contains,
58 | // very simple termination: next hash key
59 | end: KEY.variants[0].begin
60 | },
61 | { // Ruby/Rails erb
62 | begin: '<%[%=-]?', end: '[%-]?%>',
63 | subLanguage: 'ruby',
64 | excludeBegin: true,
65 | excludeEnd: true,
66 | relevance: 0
67 | },
68 | { // data type
69 | className: 'type',
70 | begin: '!!' + hljs.UNDERSCORE_IDENT_RE,
71 | },
72 | { // fragment id &ref
73 | className: 'meta',
74 | begin: '&' + hljs.UNDERSCORE_IDENT_RE + '$',
75 | },
76 | { // fragment reference *ref
77 | className: 'meta',
78 | begin: '\\*' + hljs.UNDERSCORE_IDENT_RE + '$'
79 | },
80 | { // array listing
81 | className: 'bullet',
82 | begin: '^ *-',
83 | relevance: 0
84 | },
85 | STRING,
86 | hljs.HASH_COMMENT_MODE,
87 | hljs.C_NUMBER_MODE
88 | ],
89 | keywords: LITERALS
90 | };
91 | }
92 | /*eslint-enable*/
93 |
94 | export default lang
95 |
--------------------------------------------------------------------------------
/button/components/code-highlighter/CodeHighlighter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import hljs from './highlight'
4 | import lang_http from './languages/http'
5 | import lang_json from './languages/json'
6 | import lang_yaml from './languages/yaml'
7 | import lang_markdown from './languages/markdown'
8 |
9 | hljs.registerLanguage('http', lang_http)
10 | hljs.registerLanguage('json', lang_json)
11 | hljs.registerLanguage('yaml', lang_yaml)
12 | hljs.registerLanguage('markdown', lang_markdown)
13 |
14 | require('./code-highlighter.styl')
15 |
16 | export default class CodeHighlighter extends Component {
17 | static propTypes = {
18 | input: React.PropTypes.string,
19 | lang: React.PropTypes.string
20 | }
21 | static defaultProps = {
22 | lang: 'http'
23 | }
24 |
25 | tokensToLines(input, tokens) {
26 | let tokenPos = 0
27 | let lines = [ [] ]
28 | for (let token of tokens) {
29 | let subInput = input.substr(tokenPos, token.len)
30 | let subLines = subInput.split('\n')
31 | let i = 0
32 | for (let subLine of subLines) {
33 | if (i > 0) {
34 | lines.push([])
35 | }
36 | lines[lines.length - 1].push({
37 | text: subLine,
38 | className: token.className
39 | })
40 | i += 1
41 | }
42 | tokenPos += token.len
43 | }
44 | return lines
45 | }
46 |
47 | renderLine(line) {
48 | let tokenComponents = []
49 | let count = 0
50 | for (let token of line) {
51 | let className = null
52 | if (token.className) {
53 | className = `hljs-${token.className}`
54 | }
55 | tokenComponents.push(
56 | {token.text || '\r'}
57 | )
58 | count += 1
59 | }
60 | return tokenComponents
61 | }
62 |
63 | renderText() {
64 | const { input, lang } = this.props
65 |
66 | // parse with highlightjs
67 | const tokens = hljs.highlight(lang, input, true).value
68 |
69 | // get lines
70 | const lines = this.tokensToLines(input, tokens)
71 |
72 | let lineComponents = []
73 | let count = 0
74 | for (let line of lines) {
75 | lineComponents.push(
76 | {this.renderLine(line)}
77 | )
78 | count += 1
79 | }
80 | return lineComponents
81 | }
82 |
83 | render() {
84 | const { className } = this.props
85 | return {this.renderText()}
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/button/components/code-highlighter/code-highlighter.styl:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Atom One Light by Daniel Gamage
4 | Original One Light Syntax theme from https://github.com/atom/one-light-syntax
5 |
6 | base: #fafafa // off-white
7 | mono-1: #383a42 // dark-grey
8 | mono-2: #686b77 // grey
9 | mono-3: #a0a1a7 // light-grey
10 | hue-1: #0184bb
11 | hue-2: #4078f2
12 | hue-3: #a626a4
13 | hue-4: #50a14f
14 | hue-5: #e45649
15 | hue-5-2: #c91243
16 | hue-6: #986801
17 | hue-6-2: #c18401
18 |
19 | */
20 |
21 | /*
22 | Updated hues
23 |
24 | cherry: #D42C69
25 | purple: #863CC6
26 | blue: #2F78CD
27 | turquoise: #26C29F
28 | orange: #EA6E30
29 |
30 | */
31 | .oic
32 | .hljs
33 | display: block
34 | overflow-x: auto
35 | padding: 0.5em
36 | color: #383a42
37 | background: #fafafa
38 |
39 |
40 | .hljs-comment
41 | .hljs-quote
42 | color: #a0a1a7
43 | font-style: italic
44 |
45 |
46 | .hljs-doctag
47 | .hljs-keyword
48 | .hljs-formula
49 | color: #26C29F
50 |
51 | .hljs-section
52 | .hljs-name
53 | .hljs-selector-tag
54 | .hljs-deletion
55 | .hljs-subst
56 | color: #863CC6
57 |
58 |
59 | .hljs-literal
60 | color: #EA6E30
61 |
62 |
63 | .hljs-string
64 | .hljs-regexp
65 | .hljs-addition
66 | .hljs-attribute
67 | .hljs-meta-string
68 | color: #2F78CD
69 |
70 |
71 | .hljs-built_in
72 | .hljs-code
73 | .hljs-class .hljs-title
74 | color: #EA6E30
75 |
76 |
77 | .hljs-attr
78 | .hljs-variable
79 | .hljs-template-variable
80 | .hljs-type
81 | .hljs-selector-class
82 | .hljs-selector-attr
83 | .hljs-selector-pseudo
84 | .hljs-number
85 | color: #D42C69
86 |
87 |
88 | .hljs-symbol
89 | .hljs-bullet
90 | .hljs-link
91 | .hljs-meta
92 | .hljs-selector-id
93 | .hljs-title
94 | color: #2F78CD
95 |
96 |
97 | .hljs-emphasis
98 | font-style: italic
99 |
100 |
101 | .hljs-strong
102 | font-weight: bold
103 |
104 |
105 | .hljs-link
106 | text-decoration: underline
107 |
108 | pre
109 | background-image: none
110 | border: none
111 | overflow-x: visible
112 | white-space pre-wrap
113 | word-wrap break-word
114 | padding 0
115 | line-height 0
116 | counter-reset line
117 | margin 0
118 | font-family: 'Roboto Mono', monospace;
119 | span.line
120 | display block
121 | font-size 12px
122 | line-height 16px
123 | margin-left 15px
124 | padding 0px 10px
125 | position relative
126 | color darken(#7F94A1, 30%)
127 | &:first-child
128 | padding-top 5px
129 |
130 | &:before
131 | counter-increment line
132 | content counter(line)
133 | position absolute
134 | padding 0 .5em
135 | color darken(#F3F5F6, 15%)
136 | margin-left -89px
137 | font-size 10px
138 | user-select none
139 | text-align right
140 | width 70px
141 |
--------------------------------------------------------------------------------
/button/components/code-highlighter/languages/http.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 |
3 | /*
4 | Language: HTTP
5 | Description: HTTP request and response headers with automatic body highlighting
6 | Author: Ivan Sagalaev
7 | Category: common, protocols
8 | */
9 |
10 | let lang = function(hljs) {
11 | var VERSION = 'HTTP/[0-9\\.]+';
12 | return {
13 | aliases: ['https'],
14 | illegal: '\\S',
15 | contains: [
16 | {
17 | begin: '^' + VERSION, end: '$',
18 | contains: [{className: 'number', begin: '\\b\\d{3}\\b'}]
19 | },
20 | {
21 | begin: '^[A-Z]+ (.*?) ' + VERSION + '$', returnBegin: true, end: '$',
22 | contains: [
23 | {
24 | className: 'string',
25 | begin: ' ', end: ' ',
26 | excludeBegin: true, excludeEnd: true
27 | },
28 | {
29 | begin: VERSION
30 | },
31 | {
32 | className: 'keyword',
33 | begin: '[A-Z]+'
34 | }
35 | ]
36 | },
37 | {
38 | className: 'attribute',
39 | begin: '^\\w', end: ': ', excludeEnd: true,
40 | illegal: '\\n|\\s|=',
41 | starts: {end: '$', relevance: 0}
42 | },
43 | {
44 | begin: '\\n\\n',
45 | starts: {subLanguage: [], endsWithParent: true}
46 | }
47 | ]
48 | };
49 | };
50 |
51 | /*eslint-enable*/
52 |
53 | export default lang
54 |
--------------------------------------------------------------------------------
/button/components/code-highlighter/languages/json.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | /*
3 | Language: JSON
4 | Author: Ivan Sagalaev
5 | Category: common, protocols
6 | */
7 |
8 | let lang = function(hljs) {
9 | var LITERALS = {literal: 'true false null'};
10 | var TYPES = [
11 | hljs.QUOTE_STRING_MODE,
12 | hljs.C_NUMBER_MODE
13 | ];
14 | var VALUE_CONTAINER = {
15 | end: ',', endsWithParent: true, excludeEnd: true,
16 | contains: TYPES,
17 | keywords: LITERALS
18 | };
19 | var OBJECT = {
20 | begin: '{', end: '}',
21 | contains: [
22 | {
23 | className: 'attr',
24 | begin: '\\s*"', end: '"\\s*:\\s*', excludeBegin: true, excludeEnd: true,
25 | contains: [hljs.BACKSLASH_ESCAPE],
26 | illegal: '\\n',
27 | starts: VALUE_CONTAINER
28 | }
29 | ],
30 | illegal: '\\S'
31 | };
32 | var ARRAY = {
33 | begin: '\\[', end: '\\]',
34 | contains: [hljs.inherit(VALUE_CONTAINER)], // inherit is a workaround for a bug that makes shared modes with endsWithParent compile only the ending of one of the parents
35 | illegal: '\\S'
36 | };
37 | TYPES.splice(TYPES.length, 0, OBJECT, ARRAY);
38 | return {
39 | contains: TYPES,
40 | keywords: LITERALS,
41 | illegal: '\\S'
42 | };
43 | }
44 |
45 | /*eslint-enable*/
46 |
47 | export default lang
48 |
--------------------------------------------------------------------------------
/button/components/code-highlighter/languages/markdown.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | /*
3 | Language: Markdown
4 | Requires: xml.js
5 | Author: John Crepezzi
6 | Website: http://seejohncode.com/
7 | Category: common, markup
8 | */
9 |
10 | let lang = function(hljs) {
11 | return {
12 | aliases: ['md', 'mkdown', 'mkd'],
13 | contains: [
14 | // highlight headers
15 | {
16 | className: 'section',
17 | variants: [
18 | { begin: '^#{1,6}', end: '$' },
19 | { begin: '^.+?\\n[=-]{2,}$' }
20 | ]
21 | },
22 | // inline html
23 | {
24 | begin: '<', end: '>',
25 | subLanguage: 'xml',
26 | relevance: 0
27 | },
28 | // lists (indicators only)
29 | {
30 | className: 'bullet',
31 | begin: '^([*+-]|(\\d+\\.))\\s+'
32 | },
33 | // strong segments
34 | {
35 | className: 'strong',
36 | begin: '[*_]{2}.+?[*_]{2}'
37 | },
38 | // emphasis segments
39 | {
40 | className: 'emphasis',
41 | variants: [
42 | { begin: '\\*.+?\\*' },
43 | { begin: '_.+?_'
44 | , relevance: 0
45 | }
46 | ]
47 | },
48 | // blockquotes
49 | {
50 | className: 'quote',
51 | begin: '^>\\s+', end: '$'
52 | },
53 | // code snippets
54 | {
55 | className: 'code',
56 | variants: [
57 | { begin: '`.+?`' },
58 | { begin: '^( {4}|\t)', end: '$'
59 | , relevance: 0
60 | }
61 | ]
62 | },
63 | // horizontal rules
64 | {
65 | begin: '^[-\\*]{3,}', end: '$'
66 | },
67 | // using links - title and link
68 | {
69 | begin: '\\[.+?\\][\\(\\[].*?[\\)\\]]',
70 | returnBegin: true,
71 | contains: [
72 | {
73 | className: 'string',
74 | begin: '\\[', end: '\\]',
75 | excludeBegin: true,
76 | returnEnd: true,
77 | relevance: 0
78 | },
79 | {
80 | className: 'link',
81 | begin: '\\]\\(', end: '\\)',
82 | excludeBegin: true, excludeEnd: true
83 | },
84 | {
85 | className: 'symbol',
86 | begin: '\\]\\[', end: '\\]',
87 | excludeBegin: true, excludeEnd: true
88 | }
89 | ],
90 | relevance: 10
91 | },
92 | {
93 | begin: '^\\[\.+\\]:',
94 | returnBegin: true,
95 | contains: [
96 | {
97 | className: 'symbol',
98 | begin: '\\[', end: '\\]:',
99 | excludeBegin: true, excludeEnd: true,
100 | starts: {
101 | className: 'link',
102 | end: '$'
103 | }
104 | }
105 | ]
106 | }
107 | ]
108 | };
109 | }
110 |
111 | /* eslint-enable */
112 | export default lang
113 |
--------------------------------------------------------------------------------
/button/components/code-highlighter/languages/yaml.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | /*
3 | Language: YAML
4 | Author: Stefan Wienert
5 | Requires: ruby.js
6 | Description: YAML (Yet Another Markdown Language)
7 | Category: config
8 | */
9 | let lang = function(hljs) {
10 | var LITERALS = {literal: '{ } true false yes no Yes No True False null'};
11 |
12 | var keyPrefix = '^[ \\-]*';
13 | var keyName = '[a-zA-Z_][\\w\\-]*';
14 | var KEY = {
15 | className: 'attr',
16 | variants: [
17 | { begin: keyPrefix + keyName + ":"},
18 | { begin: keyPrefix + '"' + keyName + '"' + ":"},
19 | { begin: keyPrefix + "'" + keyName + "'" + ":"}
20 | ]
21 | };
22 |
23 | var TEMPLATE_VARIABLES = {
24 | className: 'template-variable',
25 | variants: [
26 | { begin: '\{\{', end: '\}\}' }, // jinja templates Ansible
27 | { begin: '%\{', end: '\}' } // Ruby i18n
28 | ]
29 | };
30 | var STRING = {
31 | className: 'string',
32 | relevance: 0,
33 | variants: [
34 | {begin: /'/, end: /'/},
35 | {begin: /"/, end: /"/}
36 | ],
37 | contains: [
38 | hljs.BACKSLASH_ESCAPE,
39 | TEMPLATE_VARIABLES
40 | ]
41 | };
42 |
43 | return {
44 | case_insensitive: true,
45 | aliases: ['yml', 'YAML', 'yaml'],
46 | contains: [
47 | KEY,
48 | {
49 | className: 'meta',
50 | begin: '^---\s*$',
51 | relevance: 10
52 | },
53 | { // multi line string
54 | className: 'string',
55 | begin: '[\\|>] *$',
56 | returnEnd: true,
57 | contains: STRING.contains,
58 | // very simple termination: next hash key
59 | end: KEY.variants[0].begin
60 | },
61 | { // Ruby/Rails erb
62 | begin: '<%[%=-]?', end: '[%-]?%>',
63 | subLanguage: 'ruby',
64 | excludeBegin: true,
65 | excludeEnd: true,
66 | relevance: 0
67 | },
68 | { // data type
69 | className: 'type',
70 | begin: '!!' + hljs.UNDERSCORE_IDENT_RE,
71 | },
72 | { // fragment id &ref
73 | className: 'meta',
74 | begin: '&' + hljs.UNDERSCORE_IDENT_RE + '$',
75 | },
76 | { // fragment reference *ref
77 | className: 'meta',
78 | begin: '\\*' + hljs.UNDERSCORE_IDENT_RE + '$'
79 | },
80 | { // array listing
81 | className: 'bullet',
82 | begin: '^ *-',
83 | relevance: 0
84 | },
85 | STRING,
86 | hljs.HASH_COMMENT_MODE,
87 | hljs.C_NUMBER_MODE
88 | ],
89 | keywords: LITERALS
90 | };
91 | }
92 | /*eslint-enable*/
93 |
94 | export default lang
95 |
--------------------------------------------------------------------------------
/button/components/header/Header.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import ConsoleRestLogo from '../logos/ConsoleRest'
4 |
5 | require('./header.styl')
6 |
7 | export default class Header extends Component {
8 | close() {
9 | if (typeof this.props.onClose === 'function') {
10 | this.props.onClose(...arguments)
11 | }
12 | }
13 |
14 | render() {
15 | let classes = this.props.className || ''
16 | classes += ' oic-header'
17 |
18 | let name = this.props.name || 'API'
19 |
20 | const styles = {
21 | backgroundColor: this.props.theme || 'rgb(61, 51, 85)'
22 | }
23 |
24 | return
25 |
26 |
27 |
28 |
29 | Open {name} As...
30 |
31 |
32 | ×
33 |
34 |
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/button/components/header/header.styl:
--------------------------------------------------------------------------------
1 | .oic .oic-header
2 | color: #ffffff
3 | font-weight: 200
4 | height: 64px
5 | display: flex
6 | flex-direction: row
7 | justify-content: space-between
8 | align-items: stretch
9 | flex-shrink: 0
10 | flex-grow: 0
11 | .logo-container
12 | max-width: 96px
13 | min-width: 96px
14 | width: 96px
15 | margin: 16px
16 | box-sizing: border-box
17 | display: flex
18 | flex-direction: row
19 | justify-content: flex-start
20 | flex-grow: 0
21 | flex-shrink: 0
22 | .logo
23 | width: 100%
24 | .title
25 | justify-content: center
26 | align-items: center
27 | flex-grow: 1
28 | flex-shrink: 0
29 | font-size: 1em
30 | white-space: nowrap
31 | overflow-y: scroll
32 | text-overflow: ellipsis
33 | @media (max-width: 600px)
34 | max-width: calc(100vw - 256px)
35 | @media (min-width: 600px) and (max-width: 960px)
36 | max-width: calc(80vw - 256px)
37 | @media (min-width: 960px) and (max0width: 1280px)
38 | max-width: 512px
39 |
40 | .close
41 | max-width: 96px
42 | width: 96px
43 | margin: 16px
44 | box-sizing: border-box
45 | justify-content: flex-end
46 | align-items: center
47 | height: 32px
48 | flex-grow: 0
49 | flex-shrink: 0
50 | cursor: pointer
51 |
--------------------------------------------------------------------------------
/button/components/icons/WarnIcon.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class CurlLogo extends Component {
4 | clicked() {
5 | if (typeof this.props.onClick === 'function') {
6 | this.props.onClick(...arguments)
7 | }
8 | }
9 |
10 | render() {
11 | let classes = this.props.className
12 | /* eslint-disable max-len */
13 | return
16 |
17 |
18 |
19 | /* eslint-enable max-len */
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/button/components/logos/Curl.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class CurlLogo extends Component {
4 | clicked() {
5 | if (typeof this.props.onClick === 'function') {
6 | this.props.onClick(...arguments)
7 | }
8 | }
9 |
10 | render() {
11 | let classes = this.props.className
12 | /* eslint-disable max-len */
13 | return
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | CURL
24 |
25 |
26 |
27 |
28 |
29 |
30 | /* eslint-enable max-len */
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/button/components/logos/Paw.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class PawLogo extends Component {
4 | clicked() {
5 | if (typeof this.props.onClick === 'function') {
6 | this.props.onClick(...arguments)
7 | }
8 | }
9 |
10 | render() {
11 | let classes = this.props.className
12 | /* eslint-disable max-len */
13 | return
15 |
16 |
17 |
18 |
22 |
23 |
24 |
26 |
27 |
29 |
30 |
31 |
33 |
34 |
36 |
37 |
41 |
42 |
43 | /* eslint-enable max-len */
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/button/components/logos/PawMini.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class PawMiniLogo extends Component {
4 | clicked() {
5 | if (typeof this.props.onClick === 'function') {
6 | this.props.onClick(...arguments)
7 | }
8 | }
9 |
10 | render() {
11 | let classes = this.props.className
12 | /* eslint-disable max-len */
13 | return
16 |
17 |
22 |
23 |
24 | /* eslint-enable max-len */
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/button/components/modal/modal.styl:
--------------------------------------------------------------------------------
1 | .oic-outer
2 | z-index: 1000000
3 | display: flex
4 | align-items: center
5 | justify-content: center
6 | position: fixed
7 | top: 0
8 | left: 0
9 | right: 0
10 | bottom: 0
11 | width: 100vw
12 | height: 100vh
13 | font-size: 16px
14 | background-color: rgba(17,10,34,0.75)
15 | transition: opacity 0.4s ease-in-out
16 |
17 | .oic
18 | flex-grow: 0
19 | flex-shrink: 0
20 | overflow: hidden
21 | display: flex
22 | flex-direction: column
23 | flex-wrap: nowrap
24 | align-items: stretch
25 | justify-content: space-between
26 | text-align: center
27 | font-family: sans-serif
28 | background-color: #ffffff
29 | min-width: 0
30 | min-height: 0
31 |
32 | .oic-middle
33 | display: flex
34 | flex-direction: column
35 | justify-content: center
36 | align-items: center
37 | width: inherit
38 | height: inherit
39 |
40 | /* mdpi */
41 | @media (min-width: 600px) and (max-width: 960px)
42 | .oic
43 | width: 80%
44 | max-width: 100%
45 | height: 576px
46 | max-height: 100%
47 |
48 | .oic-container
49 | flex-basis: 90%
50 |
51 | /* mdpi */
52 | @media (min-width: 960px)
53 | .oic
54 | width: 768px
55 | height: 576px
56 |
57 | .oic-container
58 | flex-basis: 90%
59 |
60 | /* mdpi */
61 | @media (max-width: 600px)
62 | .oic
63 | width: 100%
64 | height: 100%
65 |
66 | .oic-container
67 | flex-basis: 95%
68 |
69 | .oic.fadein
70 | animation: fadeinkeyframes linear 0.4s
71 | animation-iteration-count: 1
72 | animation-timing-function: ease-in-out
73 |
74 | @keyframes fadeinkeyframes
75 | 0%
76 | transform: translate(0px, -800px)
77 | opacity: 0
78 |
79 | 100%
80 | transform: translate(0px, 0px)
81 | opacity: 1
82 |
83 | .oic.fadeout
84 | animation: fadeoutkeyframes linear 0.4s
85 | animation-iteration-count: 1
86 | animation-timing-function: ease-in-out
87 |
88 | @keyframes fadeoutkeyframes
89 | 0%
90 | transform: translate(0px, 0px)
91 | opacity: 1
92 |
93 | 100%
94 | transform: translate(0px, -800px)
95 | opacity: 0
96 |
--------------------------------------------------------------------------------
/button/components/outer/Outer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import Modal from '../modal/Modal'
4 |
5 | export default class OuterContainer extends Component {
6 | constructor(props) {
7 | super(props)
8 |
9 | this.state = {
10 | open: true,
11 | hidden: false
12 | }
13 | }
14 |
15 | componentWillReceiveProps() {
16 | this.setState({
17 | open: true,
18 | hidden: false
19 | })
20 | }
21 |
22 | close(ev) {
23 | if (ev.target === this.refs.outer || ev.target === this.refs.middle) {
24 | this.setState({
25 | open: false,
26 | hidden: false
27 | })
28 | }
29 | }
30 |
31 | forceClose() {
32 | this.setState({
33 | open: false,
34 | hidden: false
35 | })
36 | }
37 |
38 | animationFinished() {
39 | if (this.state.open) {
40 | this.setState({
41 | hidden: false
42 | })
43 | } else {
44 | this.setState({
45 | hidden: true
46 | })
47 | }
48 | }
49 |
50 | render() {
51 | let style = {
52 | display: this.state.hidden ? 'none' : 'flex',
53 | opacity: this.state.open ? 1 : 0,
54 | zIndex: 1000000
55 | }
56 |
57 | let classes = this.state.open ? 'fadein' : 'fadeout'
58 |
59 | return
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/button/components/pages/main.styl:
--------------------------------------------------------------------------------
1 | .oic-main
2 | display: flex
3 | flex-direction: column
4 | justify-content: flex-start
5 | .oic-tab-bar
6 | display: flex
7 | flex-direction: row
8 | justify-content: space-around
9 | align-items: stretch
10 | height: 48px
11 | flex-shrink: 0
12 | flex-grow: 0
13 | .tab-view
14 | cursor: pointer
15 | display: flex
16 | justify-content: center
17 | align-items: center
18 | flex-grow: 1
19 | flex-shrink: 1
20 | flex-basis: 0
21 | font-size: 0.9em
22 | border-bottom: 2px solid #D8D6DD
23 | &.active
24 | border-bottom: 2px solid #D42C69
25 |
26 | .oic-tab-content
27 | flex-grow: 1
28 | flex-shrink: 1
29 | display: flex
30 | flex-direction: column
31 | justify-content: space-between
32 |
--------------------------------------------------------------------------------
/button/components/pages/pages.styl:
--------------------------------------------------------------------------------
1 | .oic-page
2 | display: flex
3 | flex-direction: column
4 | justify-content: center
5 | align-items: stretch
6 | flex-grow: 1
7 | flex-shrink: 1
8 | height: calc(100% - 64px)
9 |
--------------------------------------------------------------------------------
/button/components/simple-select/SimpleSelect.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | require('./simple-select.styl')
4 |
5 | export default class SimpleSelect extends Component {
6 | constructor(props) {
7 | super(props)
8 |
9 | this.state = {
10 | name: this.props.default.name,
11 | value: this.props.default.value,
12 | mode: this.props.default.mode,
13 | active: false
14 | }
15 | }
16 |
17 | showOptions() {
18 | this.setState({
19 | active: true
20 | })
21 |
22 | this.close = () => {
23 | this.hideOptions(null)
24 | }
25 |
26 | document.addEventListener('click', this.close)
27 | }
28 |
29 | hideOptions(option) {
30 | if (option !== null) {
31 | this.setState({
32 | name: option.name,
33 | value: option.value,
34 | active: false
35 | })
36 | } else {
37 | this.setState({
38 | active: false
39 | })
40 | }
41 |
42 | document.removeEventListener('click', this.close)
43 | }
44 |
45 | onComponentWillUnmount() {
46 | document.removeEventListener('click', this.close)
47 | }
48 |
49 | hideOptionsFunc(option) {
50 | return () => {
51 | return this.hideOptions(option)
52 | }
53 | }
54 |
55 | renderOptionsTitle() {
56 | if (this.props.title) {
57 | return
58 | {this.props.title}
59 |
60 | }
61 |
62 | return null
63 | }
64 |
65 | renderOptions() {
66 | return
67 | {this.renderOptionsTitle()}
68 | {this.props.options.map(option => {
69 | let classes = 'oic-select-option'
70 |
71 | if (option.name === this.state.name) {
72 | classes += ' selected'
73 | } else if (option.mode === 'new') {
74 | classes += ' new'
75 | }
76 |
77 | return
80 | {option.name}
81 |
82 | })}
83 |
84 | }
85 |
86 | render() {
87 | let classes = this.props.className || ''
88 | let style = this.props.style || {}
89 | classes += ' oic-simple-select'
90 | /* eslint-disable max-len */
91 | return
92 | {this.state.name}
93 | {this.renderOptions()}
94 |
95 | /* eslint-enable max-len */
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/button/components/views/CurlViewer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Viewer from './Viewer'
4 |
5 | require('./curl-view.styl')
6 |
7 | export default class CurlViewer extends Viewer {
8 | constructor(props) {
9 | super(props)
10 |
11 | this.viewClass = 'oic-curl-view'
12 | this.contentClass = 'oic-curl-preview'
13 | this.extension = 'md'
14 | }
15 |
16 | renderActionBar() {
17 | let buttonStyle = {}
18 | if (this.props.theme) {
19 | buttonStyle = {
20 | backgroundColor: this.props.theme
21 | }
22 | }
23 |
24 | return
25 |
28 | Download file
29 |
30 |
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/button/components/views/PawViewer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Viewer from './Viewer'
4 |
5 | require('./paw-view.styl')
6 |
7 | export default class PawViewer extends Viewer {
8 | static importerMap = {
9 | swagger: 'com.luckymarmot.PawExtensions.SwaggerImporter',
10 | raml: 'com.luckymarmot.PawExtensions.RAMLImporter',
11 | postman: 'com.luckymarmot.PawExtensions.PostmanImporter',
12 | curl: 'com.luckymarmot.PawExtensions.cURLImporter'
13 | }
14 |
15 | constructor(props) {
16 | super(props)
17 |
18 | this.viewClass = 'oic-paw-view'
19 | this.displayErrors = false
20 | this.displayLoading = false
21 | }
22 |
23 | renderView() {
24 | return
25 |
26 |
The most advanced API tool for Mac
27 |
28 | Paw is a full-featured HTTP client that lets you test
29 | the APIs you build or consume. It has a beautiful
30 | native OS X interface to compose requests, inspect server
31 | responses and generate client code out-of-the-box.
32 |
33 |
34 | Watch Video
35 |
36 |
39 | Discover Paw
40 |
41 |
42 |
43 |
44 |
45 |
46 | }
47 |
48 | renderActionBar() {
49 | let buttonStyle = {}
50 | if (this.props.theme) {
51 | buttonStyle = {
52 | backgroundColor: this.props.theme
53 | }
54 | }
55 |
56 | /* eslint-disable no-console */
57 | let url = 'paw://new.document/open?'
58 | if (this.props.converter.url) {
59 | url += 'url=' + encodeURIComponent(this.props.converter.url)
60 | } else {
61 | url += 'text=' + encodeURIComponent(this.props.converter.content)
62 | }
63 |
64 | const format = (this.props.converter.source || {}).format || 'swagger'
65 | const importer = PawViewer.importerMap[format]
66 |
67 | url += '&importer=' + importer
68 |
69 | return
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/button/components/views/PostmanViewer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Viewer from './Viewer'
4 |
5 | require('./postman-view.styl')
6 |
7 | export default class PostmanViewer extends Viewer {
8 | static versions = [
9 | {
10 | value: 'v1.0',
11 | name: 'Postman v1.0'
12 | }
13 | ]
14 |
15 | constructor(props) {
16 | super(props)
17 |
18 | this.viewClass = 'oic-postman-view'
19 | this.extension = '.postman_dump.json'
20 | }
21 |
22 | renderView() {
23 | return
24 |
Run In Postman
25 |
26 |
27 | Download File
28 |
29 |
30 | Open Postman
31 |
32 |
33 | Import File
34 |
35 |
36 |
37 | VIDEO
40 |
41 |
42 | }
43 |
44 | renderRunInPostmanButton(collectionId) {
45 | const buttonStyle = {
46 | backgroundColor: '#ffffff'
47 | }
48 |
49 | const link = 'https://www.getpostman.com/run-collection/' + collectionId
50 |
51 | return
57 | }
58 |
59 | renderRunInPostmanButtonIfNeeded() {
60 | if (this.props.source.format === 'postman') {
61 | try {
62 | const data = JSON.parse(this.props.converter.content)
63 | const collectionId = data.id ||
64 | (data.info || {})._postman_id ||
65 | null
66 | if (collectionId) {
67 | return this.renderRunInPostmanButton(collectionId)
68 | }
69 | } catch (e) {
70 | return null
71 | }
72 | }
73 |
74 | return null
75 | }
76 |
77 | renderActionBar() {
78 | let buttonStyle = {}
79 | if (this.props.theme) {
80 | buttonStyle = {
81 | backgroundColor: this.props.theme
82 | }
83 | }
84 |
85 | return
86 | {this.renderRunInPostmanButtonIfNeeded()}
87 |
90 | Download Postman File
91 |
92 |
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/button/components/views/RAMLViewer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Viewer from './Viewer'
4 |
5 | import SimpleSelect from '../simple-select/SimpleSelect'
6 |
7 | require('./raml-view.styl')
8 |
9 | export default class RAMLViewer extends Viewer {
10 | static versions = [
11 | {
12 | value: 'v0.8',
13 | name: 'RAML v0.8'
14 | }
15 | ]
16 |
17 | constructor(props) {
18 | super(props)
19 |
20 | this.viewClass = 'oic-raml-view'
21 | this.contentClass = 'oic-raml-preview'
22 | this.extension = 'raml'
23 | }
24 |
25 | renderActionBar() {
26 | let buttonStyle = {}
27 | if (this.props.theme) {
28 | buttonStyle = {
29 | backgroundColor: this.props.theme
30 | }
31 | }
32 |
33 | return
34 |
35 |
39 |
40 |
42 | Download RAML file
43 |
44 |
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/button/components/views/SwaggerViewer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import Viewer from './Viewer'
4 |
5 | import SimpleSelect from '../simple-select/SimpleSelect'
6 |
7 | require('./swagger-view.styl')
8 |
9 | export default class SwaggerViewer extends Viewer {
10 | static versions = [
11 | {
12 | value: 'v2.0',
13 | name: 'Swagger v2.0'
14 | }
15 | ]
16 |
17 | constructor(props) {
18 | super(props)
19 |
20 | this.viewClass = 'oic-swagger-view'
21 | this.contentClass = 'oic-swagger-preview'
22 | this.extension = 'swagger.json'
23 | }
24 |
25 | renderActionBar() {
26 | let buttonStyle = {}
27 | if (this.props.theme) {
28 | buttonStyle = {
29 | backgroundColor: this.props.theme
30 | }
31 | }
32 |
33 | return
34 |
35 |
39 |
40 |
43 | Download Swagger file
44 |
45 |
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/button/components/views/UnknownViewer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class UnknownViewer extends Component {
4 | render() {
5 | let classes = this.props.className
6 | /* eslint-disable max-len */
7 | return
8 | Unknown Content is Awesome!
9 |
10 | /* eslint-enable max-len */
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/button/components/views/curl-view.styl:
--------------------------------------------------------------------------------
1 | .oic-view .oic-view-content.oic-curl-preview
2 | overflow: scroll
3 | padding-left: 32px
4 | padding-right: 8px
5 | padding-top: 8px
6 | padding-bottom: 8px
7 | display: block
8 | text-align: left
9 | box-sizing: border-box
10 |
11 | .oic-view.oic-curl-view
12 | position: relative
13 | &:before
14 | content: ''
15 | width: 0
16 | height: calc(100% - 48px)
17 | position: absolute
18 | border: 1px solid darken(#F3F5F6, 5%)
19 | top: 0
20 | left 48px
21 |
--------------------------------------------------------------------------------
/button/components/views/paw-view.styl:
--------------------------------------------------------------------------------
1 | .oic-view .oic-view-content.oic-paw-content
2 | display: flex
3 | flex-direction: row
4 | justify-content: center
5 | align-items: stretch
6 | padding-top: 16px
7 | box-sizing: border-box
8 | .oic-paw-text-panel
9 | font-size: 0.9em
10 | padding-left: 16px
11 | padding-right: 16px
12 | box-sizing: border-box
13 | flex-grow: 1
14 | flex-shrink: 1
15 | flex-basis: 0
16 | display: flex
17 | flex-direction: column
18 | justify-content: flex-start
19 | align-items: center
20 | h3
21 | color: rgb(61, 51, 85)
22 | font-size: 1.25em
23 | font-weight: 400
24 | margin: 0
25 | padding: 0
26 | padding-top: 16px
27 | padding-bottom: 16px
28 | .oic-paw-support
29 | flex-grow: 0
30 | flex-shrink: 0
31 | text-align: justify
32 | line-height: 1.5
33 | .oic-paw-video
34 | flex-grow: 0
35 | flex-shrink: 0
36 | margin-top: 8px
37 | margin-bottom: 8px
38 | padding: 8px
39 | .oic-paw-action-button
40 | flex-grow: 0
41 | flex-shrink: 0
42 | text-decoration: none
43 | color: inherit
44 | cursor: pointer
45 | margin: 8px
46 | padding: 8px
47 | box-sizing: border-box
48 | width: calc(70% - 16px)
49 | flex-basis: 0
50 | flex-grow: 0
51 | flex-shrink: 0
52 | border: 1px solid #f00
53 |
54 | @media (min-width: 960px)
55 | .oic-paw-img-panel
56 | flex-grow: 1
57 | flex-shrink: 1
58 | flex-basis: 0
59 | @media (max-width: 960px)
60 | .oic-paw-text-panel
61 | flex-grow: 0.8
62 | .oic-paw-img-panel
63 | display: none
64 |
65 | .oic-paw-view
66 | .oic-action-button
67 | text-decoration: none
68 |
--------------------------------------------------------------------------------
/button/components/views/postman-view.styl:
--------------------------------------------------------------------------------
1 | .oic-view .oic-view-content.oic-postman-content
2 | display: flex
3 | flex-direction: column
4 | justify-content: space-between
5 | align-items: stretch
6 | padding-top: 16px
7 | padding-bottom: 16px
8 | box-sizing: border-box
9 | h3
10 | color: rgb(61, 51, 85)
11 | margin: 0
12 | padding: 16px
13 | font-size: 1.25em
14 | font-weight: 400
15 | .oic-postman-support
16 | display: flex
17 |
18 | @media (min-width: 960px)
19 | .oic-postman-support
20 | flex-direction: row
21 | justify-content: center
22 | padding-left: 32px
23 | padding-right: 32px
24 | .oic-postman-step
25 | padding-top: 16px
26 | padding-bottom: 16px
27 | flex-basis: 0
28 | flex-grow: 1
29 | flex-shrink: 1
30 | .oic-postman-video
31 | justify-content:center
32 | align-items: center
33 | iframe
34 | width: 456px
35 | height: 256px
36 |
37 | @media (max-width: 960px)
38 | .oic-postman-support
39 | flex-direction: column
40 | .oic-postman-step
41 | padding-top: 8px
42 | padding-bottom: 8px
43 |
--------------------------------------------------------------------------------
/button/components/views/raml-view.styl:
--------------------------------------------------------------------------------
1 | .oic-view .oic-view-content.oic-raml-preview
2 | overflow: scroll
3 | padding-left: 32px
4 | padding-right: 8px
5 | padding-top: 8px
6 | padding-bottom: 8px
7 | display: block
8 | text-align: left
9 | box-sizing: border-box
10 |
11 | .oic-view.oic-raml-view
12 | position: relative
13 | &:before
14 | content: ''
15 | width: 0
16 | height: calc(100% - 48px)
17 | position: absolute
18 | border: 1px solid darken(#F3F5F6, 5%)
19 | top: 0
20 | left 48px
21 |
--------------------------------------------------------------------------------
/button/components/views/swagger-view.styl:
--------------------------------------------------------------------------------
1 | .oic-view .oic-view-content.oic-swagger-preview
2 | overflow: scroll
3 | padding-left: 32px
4 | padding-right: 8px
5 | padding-top: 8px
6 | padding-bottom: 8px
7 | display: block
8 | text-align: left
9 | box-sizing: border-box
10 |
11 | .oic-view.oic-swagger-view
12 | position: relative
13 | &:before
14 | content: ''
15 | width: 0
16 | height: calc(100% - 48px)
17 | position: absolute
18 | border: 1px solid darken(#F3F5F6, 5%)
19 | top: 0
20 | left 48px
21 |
--------------------------------------------------------------------------------
/button/components/views/view.styl:
--------------------------------------------------------------------------------
1 | .oic-view
2 | display: flex
3 | flex-direction: column
4 | flex-grow: 1
5 | flex-shrink: 1
6 | .oic-view-content
7 | flex-grow: 1
8 | flex-shrink: 1
9 | .oic-action-bar
10 | border-top: 2px solid #D8D6DD
11 | height: 48px
12 | flex-shrink: 0
13 | flex-grow: 0
14 | display: flex
15 | flex-direction: row
16 | justify-content: center
17 | box-sizing: border-box
18 | padding-left: 8px
19 | padding-right: 8px
20 | .oic-action-button
21 | max-width: calc(50% - 16px)
22 | cursor: pointer
23 | font-size: 0.9em
24 | margin: 8px
25 | background-color: #D42C69
26 | color: #ffffff
27 | padding: 8px
28 | box-sizing: border-box
29 | flex-grow: 1
30 | flex-shrink: 1
31 | display: flex
32 | flex-direction: row
33 | justify-content: center
34 | align-items: center
35 |
36 | &.oic-progress-view
37 | justify-content: center
38 | align-items: center
39 | color: rgba(61, 51, 85, 0.8)
40 | .oic-progress-bar
41 | margin-top: 16px
42 | margin-bottom: 16px
43 | flex-grow: 0
44 | width: 400px
45 | height: 8px
46 | border-radius: 4px
47 | border: 1px solid #D8D6DD
48 | > div
49 | height: inherit;
50 | flex-grow: 0
51 | flex-shrink: 0
52 | background-color: #D8D6DD
53 |
54 | &.oic-error-view
55 | justify-content: center
56 | align-items: center
57 | .oic-error-icon
58 | fill: #D8D6DD
59 | width: 128px
60 | height: 128px
61 | .oic-error-info
62 | color: #3D3355
63 | flex-grow: 0
64 | flex-shrink: 0
65 | height: 128px
66 |
--------------------------------------------------------------------------------
/button/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | // libURL: '../github.io/libs/api-flow.js',
3 | libURL: 'https://console.rest/github.io/libs/api-flow.js',
4 | theme: {
5 | color: '#00AAFF'
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/button/header/Header.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import ConsoleRestLogo from '../logos/ConsoleRest'
4 |
5 | require('./header.styl')
6 |
7 | export default class Header extends Component {
8 | close() {
9 | if (typeof this.props.onClose === 'function') {
10 | this.props.onClose(...arguments)
11 | }
12 | }
13 |
14 | render() {
15 | let classes = this.props.className || ''
16 | classes += ' oic-header'
17 |
18 | let name = this.props.name || 'API'
19 |
20 | const styles = {
21 | backgroundColor: this.props.theme || 'rgb(61, 51, 85)'
22 | }
23 |
24 | return
25 |
26 |
27 |
28 |
29 | Open {name} As...
30 |
31 |
32 | ×
33 |
34 |
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/button/header/header.styl:
--------------------------------------------------------------------------------
1 | .oic .oic-header
2 | color: #ffffff
3 | font-weight: 200
4 | height: 64px
5 | display: flex
6 | flex-direction: row
7 | justify-content: space-between
8 | align-items: stretch
9 | flex-shrink: 0
10 | flex-grow: 0
11 | .logo-container
12 | max-width: 96px
13 | min-width: 96px
14 | width: 96px
15 | margin: 16px
16 | box-sizing: border-box
17 | display: flex
18 | flex-direction: row
19 | justify-content: flex-start
20 | flex-grow: 0
21 | flex-shrink: 0
22 | .logo
23 | width: 100%
24 | .title
25 | justify-content: center
26 | align-items: center
27 | flex-grow: 1
28 | flex-shrink: 0
29 | font-size: 1em
30 | white-space: nowrap
31 | overflow-y: scroll
32 | text-overflow: ellipsis
33 | @media (max-width: 600px)
34 | max-width: calc(100vw - 256px)
35 | @media (min-width: 600px) and (max-width: 960px)
36 | max-width: calc(80vw - 256px)
37 | @media (min-width: 960px) and (max0width: 1280px)
38 | max-width: 512px
39 |
40 | .close
41 | max-width: 96px
42 | width: 96px
43 | margin: 16px
44 | box-sizing: border-box
45 | justify-content: flex-end
46 | align-items: center
47 | height: 32px
48 | flex-grow: 0
49 | flex-shrink: 0
50 | cursor: pointer
51 |
--------------------------------------------------------------------------------
/button/icons/WarnIcon.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class CurlLogo extends Component {
4 | clicked() {
5 | if (typeof this.props.onClick === 'function') {
6 | this.props.onClick(...arguments)
7 | }
8 | }
9 |
10 | render() {
11 | let classes = this.props.className
12 | /* eslint-disable max-len */
13 | return
16 |
17 |
18 |
19 | /* eslint-enable max-len */
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/button/index.build.js:
--------------------------------------------------------------------------------
1 | let resolve
2 | let reject
3 | let consoleRestApiPromise = new Promise(function(_resolve, _reject) {
4 | resolve = _resolve
5 | reject = _reject
6 | })
7 |
8 | const loadVisuals = function() {
9 | const protocol = document.location.protocol === 'https:' ? 'https' : 'http'
10 | const apiUrl = protocol + '://' +
11 | 'localhost:8888/build/console-rest-visual.js'
12 |
13 | const consoleRestApi = document.createElement('script')
14 | consoleRestApi.src = apiUrl
15 | consoleRestApi.type = 'text/javascript'
16 | consoleRestApi.async = 'true'
17 |
18 | const s = document.getElementsByTagName('script')[0]
19 | s.parentNode.insertBefore(consoleRestApi, s)
20 |
21 | consoleRestApi.addEventListener('load', function() {
22 | resolve(window.ConsoleRest)
23 | })
24 |
25 | consoleRestApi.addEventListener('error', function() {
26 | reject(window.ConsoleRest)
27 | })
28 |
29 | consoleRestApi.addEventListener('abort', function() {
30 | reject(window.ConsoleRest)
31 | })
32 | }
33 |
34 | document.addEventListener('DOMContentLoaded', loadVisuals)
35 |
36 | window.ConsoleRest = {
37 | ready: consoleRestApiPromise
38 | }
39 |
--------------------------------------------------------------------------------
/button/index.html:
--------------------------------------------------------------------------------
1 |
2 | Dummy Page for API-Flow button
3 |
4 |
5 |
13 | Toto
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/button/index.js:
--------------------------------------------------------------------------------
1 | let resolve
2 | let reject
3 | let consoleRestApiPromise = new Promise(function(_resolve, _reject) {
4 | resolve = _resolve
5 | reject = _reject
6 | })
7 |
8 | const loadVisuals = function() {
9 | const protocol = document.location.protocol === 'https:' ? 'https' : 'http'
10 | const apiUrl = protocol + '://' +
11 | 'console.rest/github.io/libs/console-rest-visual.js'
12 | const styleUrl = protocol + '://' +
13 | 'console.rest/github.io/styles/console-rest-visual.css'
14 |
15 | const consoleRestApi = document.createElement('script')
16 | consoleRestApi.src = apiUrl
17 | consoleRestApi.type = 'text/javascript'
18 | consoleRestApi.async = 'true'
19 |
20 | const consoleRestStyle = document.createElement('link')
21 | consoleRestStyle.rel = 'stylesheet'
22 | consoleRestStyle.href = styleUrl
23 |
24 | const s = document.getElementsByTagName('script')[0]
25 | s.parentNode.insertBefore(consoleRestStyle, s)
26 | s.parentNode.insertBefore(consoleRestApi, s)
27 |
28 | consoleRestApi.addEventListener('load', function() {
29 | resolve(window.ConsoleRest)
30 | })
31 |
32 | consoleRestApi.addEventListener('error', function() {
33 | reject(window.ConsoleRest)
34 | })
35 |
36 | consoleRestApi.addEventListener('abort', function() {
37 | reject(window.ConsoleRest)
38 | })
39 | }
40 |
41 | document.addEventListener('DOMContentLoaded', loadVisuals)
42 |
43 | window.ConsoleRest = {
44 | ready: consoleRestApiPromise
45 | }
46 |
--------------------------------------------------------------------------------
/button/index.tpl.js:
--------------------------------------------------------------------------------
1 | let resolve
2 | let reject
3 | let consoleRestApiPromise = new Promise(function(_resolve, _reject) {
4 | resolve = _resolve
5 | reject = _reject
6 | })
7 |
8 | const loadVisuals = function() {
9 | const protocol = document.location.protocol === 'https:' ? 'https' : 'http'
10 | const apiUrl = protocol + '://' +
11 | // 'localhost:8000/dist-2/visual.js'
12 | // 'localhost:8888/../github.io/libs/console-rest-visual.js'
13 | 'console.rest/github.io/libs/console-rest-visual.js'
14 | const styleUrl = protocol + '://' +
15 | // 'localhost:8000/dist-2/styles/app.css'
16 | // 'localhost:8888/../github.io/libs/console-rest-visual.js'
17 | 'console.rest/github.io/styles/console-rest-visual.css'
18 |
19 | const consoleRestApi = document.createElement('script')
20 | consoleRestApi.src = apiUrl
21 | consoleRestApi.type = 'text/javascript'
22 | consoleRestApi.async = 'true'
23 |
24 | const consoleRestStyle = document.createElement('link')
25 | consoleRestStyle.rel = 'stylesheet'
26 | consoleRestStyle.href = styleUrl
27 |
28 | const s = document.getElementsByTagName('script')[0]
29 | s.parentNode.insertBefore(consoleRestStyle, s)
30 | s.parentNode.insertBefore(consoleRestApi, s)
31 |
32 | consoleRestApi.addEventListener('load', function() {
33 | resolve(window.ConsoleRest)
34 | })
35 |
36 | consoleRestApi.addEventListener('error', function() {
37 | reject(window.ConsoleRest)
38 | })
39 |
40 | consoleRestApi.addEventListener('abort', function() {
41 | reject(window.ConsoleRest)
42 | })
43 | }
44 |
45 | document.addEventListener('DOMContentLoaded', loadVisuals)
46 |
47 | window.ConsoleRest = {
48 | ready: consoleRestApiPromise
49 | }
50 |
--------------------------------------------------------------------------------
/button/logos/Curl.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class CurlLogo extends Component {
4 | clicked() {
5 | if (typeof this.props.onClick === 'function') {
6 | this.props.onClick(...arguments)
7 | }
8 | }
9 |
10 | render() {
11 | let classes = this.props.className
12 | /* eslint-disable max-len */
13 | return
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | CURL
24 |
25 |
26 |
27 |
28 |
29 |
30 | /* eslint-enable max-len */
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/button/logos/Paw.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class PawLogo extends Component {
4 | clicked() {
5 | if (typeof this.props.onClick === 'function') {
6 | this.props.onClick(...arguments)
7 | }
8 | }
9 |
10 | render() {
11 | let classes = this.props.className
12 | /* eslint-disable max-len */
13 | return
15 |
16 |
17 |
18 |
22 |
23 |
24 |
26 |
27 |
29 |
30 |
31 |
33 |
34 |
36 |
37 |
41 |
42 |
43 | /* eslint-enable max-len */
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/button/logos/PawMini.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class PawMiniLogo extends Component {
4 | clicked() {
5 | if (typeof this.props.onClick === 'function') {
6 | this.props.onClick(...arguments)
7 | }
8 | }
9 |
10 | render() {
11 | let classes = this.props.className
12 | /* eslint-disable max-len */
13 | return
16 |
17 |
22 |
23 |
24 | /* eslint-enable max-len */
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/button/modal/modal.styl:
--------------------------------------------------------------------------------
1 | .oic-outer
2 | z-index: 1000000
3 | display: flex
4 | align-items: center
5 | justify-content: center
6 | position: fixed
7 | top: 0
8 | left: 0
9 | right: 0
10 | bottom: 0
11 | width: 100vw
12 | height: 100vh
13 | font-size: 16px
14 | background-color: rgba(17,10,34,0.75)
15 | transition: opacity 0.4s ease-in-out
16 |
17 | .oic
18 | flex-grow: 0
19 | flex-shrink: 0
20 | overflow: hidden
21 | display: flex
22 | flex-direction: column
23 | flex-wrap: nowrap
24 | align-items: stretch
25 | justify-content: space-between
26 | text-align: center
27 | font-family: sans-serif
28 | background-color: #ffffff
29 | min-width: 0
30 | min-height: 0
31 |
32 | .oic-middle
33 | display: flex
34 | flex-direction: column
35 | justify-content: center
36 | align-items: center
37 | width: inherit
38 | height: inherit
39 |
40 | /* mdpi */
41 | @media (min-width: 600px) and (max-width: 960px)
42 | .oic
43 | width: 80%
44 | max-width: 100%
45 | height: 576px
46 | max-height: 100%
47 |
48 | .oic-container
49 | flex-basis: 90%
50 |
51 | /* mdpi */
52 | @media (min-width: 960px)
53 | .oic
54 | width: 768px
55 | height: 576px
56 |
57 | .oic-container
58 | flex-basis: 90%
59 |
60 | /* mdpi */
61 | @media (max-width: 600px)
62 | .oic
63 | width: 100%
64 | height: 100%
65 |
66 | .oic-container
67 | flex-basis: 95%
68 |
69 | .oic.fadein
70 | animation: fadeinkeyframes linear 0.4s
71 | animation-iteration-count: 1
72 | animation-timing-function: ease-in-out
73 |
74 | @keyframes fadeinkeyframes
75 | 0%
76 | transform: translate(0px, -800px)
77 | opacity: 0
78 |
79 | 100%
80 | transform: translate(0px, 0px)
81 | opacity: 1
82 |
83 | .oic.fadeout
84 | animation: fadeoutkeyframes linear 0.4s
85 | animation-iteration-count: 1
86 | animation-timing-function: ease-in-out
87 |
88 | @keyframes fadeoutkeyframes
89 | 0%
90 | transform: translate(0px, 0px)
91 | opacity: 1
92 |
93 | 100%
94 | transform: translate(0px, -800px)
95 | opacity: 0
96 |
--------------------------------------------------------------------------------
/button/outer/Outer.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import Modal from '../modal/Modal'
4 |
5 | export default class OuterContainer extends Component {
6 | constructor(props) {
7 | super(props)
8 |
9 | this.state = {
10 | open: true,
11 | hidden: false
12 | }
13 | }
14 |
15 | componentWillReceiveProps() {
16 | this.setState({
17 | open: true,
18 | hidden: false
19 | })
20 | }
21 |
22 | close(ev) {
23 | if (ev.target === this.refs.outer || ev.target === this.refs.middle) {
24 | this.setState({
25 | open: false,
26 | hidden: false
27 | })
28 | }
29 | }
30 |
31 | forceClose() {
32 | this.setState({
33 | open: false,
34 | hidden: false
35 | })
36 | }
37 |
38 | animationFinished() {
39 | if (this.state.open) {
40 | this.setState({
41 | hidden: false
42 | })
43 | } else {
44 | this.setState({
45 | hidden: true
46 | })
47 | }
48 | }
49 |
50 | render() {
51 | let style = {
52 | display: this.state.hidden ? 'none' : 'flex',
53 | opacity: this.state.open ? 1 : 0,
54 | zIndex: 1000000
55 | }
56 |
57 | let classes = this.state.open ? 'fadein' : 'fadeout'
58 |
59 | return
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/button/pages/main.styl:
--------------------------------------------------------------------------------
1 | .oic-main
2 | display: flex
3 | flex-direction: column
4 | justify-content: flex-start
5 | .oic-tab-bar
6 | display: flex
7 | flex-direction: row
8 | justify-content: space-around
9 | align-items: stretch
10 | height: 48px
11 | flex-shrink: 0
12 | flex-grow: 0
13 | .tab-view
14 | cursor: pointer
15 | display: flex
16 | justify-content: center
17 | align-items: center
18 | flex-grow: 1
19 | flex-shrink: 1
20 | flex-basis: 0
21 | font-size: 0.9em
22 | border-bottom: 2px solid #D8D6DD
23 | &.active
24 | border-bottom: 2px solid #D42C69
25 |
26 | .oic-tab-content
27 | flex-grow: 1
28 | flex-shrink: 1
29 | display: flex
30 | flex-direction: column
31 | justify-content: space-between
32 |
--------------------------------------------------------------------------------
/button/pages/pages.styl:
--------------------------------------------------------------------------------
1 | .oic-page
2 | display: flex
3 | flex-direction: column
4 | justify-content: center
5 | align-items: stretch
6 | flex-grow: 1
7 | flex-shrink: 1
8 | height: calc(100% - 64px)
9 |
--------------------------------------------------------------------------------
/button/simple-select/SimpleSelect.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | require('./simple-select.styl')
4 |
5 | export default class SimpleSelect extends Component {
6 | constructor(props) {
7 | super(props)
8 |
9 | this.state = {
10 | name: this.props.default.name,
11 | value: this.props.default.value,
12 | mode: this.props.default.mode,
13 | active: false
14 | }
15 | }
16 |
17 | showOptions() {
18 | this.setState({
19 | active: true
20 | })
21 |
22 | this.close = () => {
23 | this.hideOptions(null)
24 | }
25 |
26 | document.addEventListener('click', this.close)
27 | }
28 |
29 | hideOptions(option) {
30 | if (option !== null) {
31 | this.setState({
32 | name: option.name,
33 | value: option.value,
34 | active: false
35 | })
36 | } else {
37 | this.setState({
38 | active: false
39 | })
40 | }
41 |
42 | document.removeEventListener('click', this.close)
43 | }
44 |
45 | onComponentWillUnmount() {
46 | document.removeEventListener('click', this.close)
47 | }
48 |
49 | hideOptionsFunc(option) {
50 | return () => {
51 | return this.hideOptions(option)
52 | }
53 | }
54 |
55 | renderOptionsTitle() {
56 | if (this.props.title) {
57 | return
58 | {this.props.title}
59 |
60 | }
61 |
62 | return null
63 | }
64 |
65 | renderOptions() {
66 | return
67 | {this.renderOptionsTitle()}
68 | {this.props.options.map(option => {
69 | let classes = 'oic-select-option'
70 |
71 | if (option.name === this.state.name) {
72 | classes += ' selected'
73 | } else if (option.mode === 'new') {
74 | classes += ' new'
75 | }
76 |
77 | return
80 | {option.name}
81 |
82 | })}
83 |
84 | }
85 |
86 | render() {
87 | let classes = this.props.className || ''
88 | let style = this.props.style || {}
89 | classes += ' oic-simple-select'
90 | /* eslint-disable max-len */
91 | return
92 | {this.state.name}
93 | {this.renderOptions()}
94 |
95 | /* eslint-enable max-len */
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/favicon:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/favicon
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_blue.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_deep_orange.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_green.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_orange.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_pink.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_purple.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_red.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_turquoise.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/buttons/run_with_yellow.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | Run API With…
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Run API With…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/favicon_16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/favicon_16.png
--------------------------------------------------------------------------------
/github.io/assets/favicon_192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/favicon_192.png
--------------------------------------------------------------------------------
/github.io/assets/favicon_32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/favicon_32.png
--------------------------------------------------------------------------------
/github.io/assets/favicon_96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/favicon_96.png
--------------------------------------------------------------------------------
/github.io/assets/icon_114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/icon_114.png
--------------------------------------------------------------------------------
/github.io/assets/icon_144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/icon_144.png
--------------------------------------------------------------------------------
/github.io/assets/icon_180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/icon_180.png
--------------------------------------------------------------------------------
/github.io/assets/icon_57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/icon_57.png
--------------------------------------------------------------------------------
/github.io/assets/paw-icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | paw-footer-icon
5 | Created with Sketch.
6 |
7 |
8 |
13 |
14 |
--------------------------------------------------------------------------------
/github.io/assets/paw-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
8 |
9 |
10 |
11 |
15 |
16 |
17 |
19 |
20 |
22 |
23 |
24 |
26 |
27 |
29 |
30 |
34 |
35 |
--------------------------------------------------------------------------------
/github.io/assets/paw-screen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/paw-screen.png
--------------------------------------------------------------------------------
/github.io/assets/swagger-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luckymarmot/console-rest/a331e64887d17988073d892e1ee6d9d801576d62/github.io/assets/swagger-logo.png
--------------------------------------------------------------------------------
/github.io/libs/console-rest.js:
--------------------------------------------------------------------------------
1 | let resolve
2 | let reject
3 | let consoleRestApiPromise = new Promise(function(_resolve, _reject) {
4 | resolve = _resolve
5 | reject = _reject
6 | })
7 |
8 | const loadVisuals = function() {
9 | const protocol = document.location.protocol === 'https:' ? 'https' : 'http'
10 | const apiUrl = protocol + '://' +
11 | 'console.rest/github.io/libs/console-rest-visual.js'
12 | const styleUrl = protocol + '://' +
13 | 'console.rest/github.io/styles/console-rest-visual.css'
14 |
15 | const consoleRestApi = document.createElement('script')
16 | consoleRestApi.src = apiUrl
17 | consoleRestApi.type = 'text/javascript'
18 | consoleRestApi.async = 'true'
19 |
20 | const consoleRestStyle = document.createElement('link')
21 | consoleRestStyle.rel = 'stylesheet'
22 | consoleRestStyle.href = styleUrl
23 |
24 | const s = document.getElementsByTagName('script')[0]
25 | s.parentNode.insertBefore(consoleRestStyle, s)
26 | s.parentNode.insertBefore(consoleRestApi, s)
27 |
28 | consoleRestApi.addEventListener('load', function() {
29 | resolve(window.ConsoleRest)
30 | })
31 |
32 | consoleRestApi.addEventListener('error', function() {
33 | reject(window.ConsoleRest)
34 | })
35 |
36 | consoleRestApi.addEventListener('abort', function() {
37 | reject(window.ConsoleRest)
38 | })
39 | }
40 |
41 | document.addEventListener('DOMContentLoaded', loadVisuals)
42 |
43 | window.ConsoleRest = {
44 | ready: consoleRestApiPromise
45 | }
46 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Console.REST
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |