api-console-assets
Version:
This repo only exists to publish api console components to npm
141 lines (130 loc) • 4.2 kB
HTML
<!--
@license
Copyright 2016 The Advanced REST client authors
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<!--
`<raml-aware>` Element that is aware of the RAML content.
The element contains the same RAML data as other elements whenever their
location in the document. The RAML data are encapsulated in `scope` attribute.
By default the `scope` is `default`. If you create two `<raml-aware>`s with
different scopes then changing one raml will not affect the other.
Setting a RAML data on a `<raml-aware>` will notify other awares with the same
scopes about the change and update their RAML data so it can be transfered
between different parts of application on even different web components.
### Example
```html
<raml-aware raml="{{raml}}" scope="request"></raml-aware>
<raml-aware raml="{{importRaml}}" scope="import"></raml-aware>
```
```javascript
var r1 = document.querySelector('raml-aware[scope="request"]');
var r2 = document.querySelector('raml-aware[scope="import"]');
r1.raml = {};
r2.raml = null;
assert(r1.raml !== r2.raml);
```
@group RAML Elements
@element raml-aware
@demo demo/index.html
@hero hero.svg
-->
<script>
(function() {
'use strict';
var RAMLAware = {
defaultScope: 'default',
ramlAwares: [],
/**
* Store for RAML definitions.
* @type {Object<String, Object>} The key is a scope (`default` by default)
* and the value is the RAML definition for this scope.
*/
raml: {},
attachRamlAware: function(aware) {
if (this.ramlAwares.indexOf(aware) === -1) {
this.ramlAwares.push(aware);
this.scopeChanged(aware);
}
},
detachRamlAware: function(aware) {
var index = this.ramlAwares.indexOf(aware);
if (index !== -1) {
this.ramlAwares.splice(index, 1);
} else {
console.warn('The aware wasn\'t attached!');
}
},
/**
* [setRaml description]
* @param {HTMLElement} srcAware The aware that notified about the change
*/
setRaml: function(srcAware) {
var scope = srcAware.scope || this.defaultScope;
var raml = srcAware.raml || undefined;
this.raml[scope] = raml;
var defaultScope = this.defaultScope;
this.ramlAwares.forEach(function(aware) {
if (aware === srcAware) {
return;
}
var localScope = aware.scope || defaultScope;
if (localScope !== scope) {
return;
}
aware.raml = raml;
});
},
scopeChanged: function(aware) {
var scope = aware.scope || this.defaultScope;
aware.raml = this.raml[scope];
}
};
Polymer({
is: 'raml-aware',
properties: {
/**
* Scope for the RAML file.
* Different awares may have different scope and keep different RAML objects.
* It can be useful when one aware supports request panel and another
* RAML import for example. In this case first one may have scope not set
* (`default` scope) and second one `import` scope. Then both RAMLs are
* encapsulated to the scope.
*/
scope: String,
// The RAML definition.
raml: {
type: Object,
notify: true
}
},
observers: [
'_scopeChanged(scope)',
'_ramlChanged(raml.*)',
],
attached: function() {
RAMLAware.attachRamlAware(this);
},
detached: function() {
RAMLAware.detachRamlAware(this);
},
// Update RAML data for selected scope.
_scopeChanged: function() {
RAMLAware.scopeChanged(this);
},
// Notifies other awares about RAML change.
_ramlChanged: function() {
RAMLAware.setRaml(this);
}
});
})();
</script>