Skip to content

Commit be32de5

Browse files
jarrodekjarrodek
committed
Update: Updated demo pages for the element.
1 parent 45267e8 commit be32de5

File tree

4 files changed

+91
-13
lines changed

4 files changed

+91
-13
lines changed

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
"paper-item": "PolymerElements/paper-item#^1.2.1",
6060
"raml-docs-helpers": "advanced-rest-client/raml-docs-helpers#^1.0.5",
6161
"app-route": "PolymerElements/app-route#^1.0.0",
62-
"raml-aware": "advanced-rest-client/raml-aware#^1.0.3"
62+
"raml-aware": "advanced-rest-client/raml-aware#^1.0.3",
63+
"paper-toggle-button": "PolymerElements/paper-toggle-button#<2"
6364
},
6465
"ignore": [
6566
"**/.*",

‎demo/app.html‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<title>API Console</title>
1818
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
1919
<link rel="import" href="../../raml-docs-helpers/raml-docs-parser.html">
20-
<link rel="import" href="../../paper-checkbox/paper-checkbox.html">
20+
<link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
2121
<link rel="import" href="../../app-route/app-location.html">
2222
<link rel="import" href="../api-console.html">
2323

@@ -43,18 +43,14 @@
4343

4444
.wrapper {
4545
position: relative;
46+
background-color: #fff;
4647
@apply(--layout-flex);
4748
}
4849

4950
api-console {
5051
background-color: #fff;
5152
}
5253

53-
:root {
54-
--paper-checkbox-unchecked-color: #fff;
55-
--paper-checkbox-label-color: #fff;
56-
}
57-
5854
.powered-by {
5955
@apply(--layout-horizontal);
6056
@apply(--layout-center-center);
@@ -66,13 +62,40 @@
6662
a img {
6763
text-underline: none;
6864
}
65+
66+
.console-controls {
67+
padding: 4px 12px;
68+
@apply --layout-horizontal;
69+
@apply --layout-center;
70+
}
71+
72+
.console-controls > * {
73+
margin-right: 12px;
74+
}
75+
76+
.console-controls paper-toggle-button {
77+
cursor: pointer;
78+
}
79+
80+
.console-controls {
81+
--paper-toggle-button-checked-button-color: #00A2DF;
82+
}
83+
84+
raml-docs-parser {
85+
margin: 4px 12px;
86+
}
6987
</style>
7088
</head>
7189

7290
<body unresolved>
7391
<app-location use-hash-as-path></app-location>
7492

7593
<div id="content">
94+
<div class="console-controls">
95+
<paper-toggle-button data-action="parser" checked>Display RAML parser</paper-toggle-button>
96+
<paper-toggle-button data-action="noTryIt">No try it</paper-toggle-button>
97+
<paper-toggle-button data-action="narrow">Render narrow</paper-toggle-button>
98+
</div>
7699
<raml-docs-parser></raml-docs-parser>
77100
<div class="wrapper">
78101
<api-console>

‎demo/app.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
apiconsole.app.setInitialRouteData();
3535
apiconsole.app.addParserListeners();
3636
apiconsole.app.observeRouteEvents();
37+
apiconsole.app.observeConsoleControls();
3738
};
3839

3940
apiconsole.app.setInitialRouteData = function() {
@@ -159,6 +160,32 @@
159160
};
160161
};
161162

163+
apiconsole.app.observeConsoleControls = function() {
164+
var toggles = document.querySelectorAll('.console-controls paper-toggle-button');
165+
for (var i = 0, len = toggles.length; i < len; i++) {
166+
toggles[i].addEventListener('checked-changed', apiconsole.app.consoleControlsChanged);
167+
}
168+
};
169+
170+
apiconsole.app.consoleControlsChanged = function(e) {
171+
var action = e.target.dataset.action;
172+
switch (action) {
173+
case 'parser':
174+
var parser = document.querySelector('raml-docs-parser');
175+
if (e.detail.value) {
176+
parser.removeAttribute('hidden');
177+
} else {
178+
parser.setAttribute('hidden', true);
179+
}
180+
break;
181+
case 'noTryIt':
182+
case 'narrow':
183+
var apiConsole = document.querySelector('api-console');
184+
apiConsole[action] = e.detail.value;
185+
break;
186+
}
187+
};
188+
162189
// Notifys user when something went wrong...
163190
apiconsole.app.notifyInitError = function(message) {
164191
window.alert('Cannot initialize API console. ' + message);

‎demo/index.html‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
1919
<link rel="import" href="../../raml-docs-helpers/raml-docs-parser.html">
2020
<link rel="import" href="../../paper-checkbox/paper-checkbox.html">
21+
<link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
2122
<link rel="import" href="../api-console.html">
2223
<link rel="import" href="../../font-roboto/roboto.html">
2324

@@ -43,6 +44,7 @@
4344

4445
.wrapper {
4546
position: relative;
47+
background-color: #fff;
4648
@apply(--layout-flex);
4749
}
4850

@@ -56,8 +58,8 @@
5658
}
5759

5860
.powered-by {
59-
@apply(--layout-horizontal);
60-
@apply(--layout-center-center);
61+
@apply --layout-horizontal;
62+
@apply --layout-center-center;
6163
padding: 12px 0px;
6264
border-top: 1px rgba(0,0,0,0.24) solid;
6365
margin: 8px 12px 0 12px;
@@ -66,18 +68,43 @@
6668
a img {
6769
text-underline: none;
6870
}
71+
72+
.console-controls {
73+
padding: 4px 12px;
74+
@apply --layout-horizontal;
75+
@apply --layout-center;
76+
}
77+
78+
.console-controls > * {
79+
margin-right: 12px;
80+
}
81+
82+
.console-controls paper-toggle-button {
83+
cursor: pointer;
84+
}
85+
86+
.console-controls {
87+
--paper-toggle-button-checked-button-color: #00A2DF;
88+
}
89+
90+
raml-docs-parser {
91+
margin: 4px 12px;
92+
}
6993
</style>
7094
</head>
7195

7296
<body unresolved>
7397
<template is="dom-bind" id="app">
7498

7599
<div id="content">
76-
<raml-docs-parser raml="{{raml}}"></raml-docs-parser>
100+
<div class="console-controls">
101+
<paper-toggle-button checked="{{parserEnabled}}">Display RAML parser</paper-toggle-button>
102+
<paper-toggle-button checked="{{noTryIt}}">No try it</paper-toggle-button>
103+
<paper-toggle-button checked="{{narrow}}">Render narrow</paper-toggle-button>
104+
</div>
105+
<raml-docs-parser raml="{{raml}}" hidden$="[[!parserEnabled]]"></raml-docs-parser>
77106
<div class="wrapper">
78107
<api-console raml="[[raml]]" append-headers="X-key: my-api-key\nOther-header:value" narrow="[[narrow]]" manual-navigation="[[manualNavigation]]" navigation-opened="{{navigationOpened}}" no-try-it="[[noTryIt]]">
79-
<paper-checkbox nav checked="{{noTryIt}}">No try it</paper-checkbox>
80-
<paper-checkbox nav checked="{{narrow}}">Render narrow</paper-checkbox>
81108
<paper-checkbox nav checked="{{manualNavigation}}">Manual navigation</paper-checkbox>
82109
<button nav hidden="[[!manualNavigation]]" on-tap="toggleNavigation">Toggle navigation</button>
83110
<div class="powered-by" nav-addon>
@@ -90,7 +117,7 @@
90117
<script>
91118
(function(scope) {
92119
'use strict';
93-
// scope.navigationOpened = false;
120+
scope.parserEnabled = true;
94121
scope.toggleNavigation = function() {
95122
if (scope.navigationOpened === undefined) {
96123
scope.navigationOpened = true;

0 commit comments

Comments
 (0)