epi-cms-property.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../properties-from-ancestor-behavior/properties-from-ancestor-behavior.html">
<!-- TODO add loading animation and error handing, e.g. just use ix-loading-ui-placeholder -->
<dom-module id="epi-cms-property">
    <template>
        <iron-ajax url="[[_url]]"
                   auto handle-as="text" id="epiServerContentRequest"
                   on-response="handleResponse">
        </iron-ajax>
    </template>
    <script>
        Polymer({
            is: 'epi-cms-property',
            behaviors: [
                PropertiesFromAncestorBehavior({
                    /** Id of the CMS page that holds the property - Look for "cms-page-id" in container HTML to see where it's declared. If none is found, will fall back to global variable cmsPageId.
                        Remarks: The property name needs be 'cms*' and not 'CMS*' because otherwise Polymer generates the invalid '-' at the beginning
                    */ 
                    cmsPageId: { defaultValue: window.cmsPageId, },
                }),
            ],
            properties: {
                propertyName: {
                    type: String
                },
                _url: {
                    type: String,
                    computed: '_computeUrl(cmsPageId, propertyName)'
                },
            },
            _computeUrl: function (cmsPageId, propertyName) {
                return cmsPageId && ('/api/episerver/page/' + cmsPageId + '/property/' + propertyName);
            },
            handleResponse: function (event, requestWebComponent) {
                var content = requestWebComponent.response;
                this.hidden = !content;

                var contentType = requestWebComponent.xhr.getResponseHeader("Content-Type");
                if(contentType && contentType.toLowerCase().indexOf('text/html') === 0)
                    this.innerHTML = content; // We don't want Shadow DOM to allow natural styling from rules in parent shadow scope. Polymer doesn't make it easy - https://github.com/Polymer/polymer/issues/222
                else
                    this.innerText = content;
            },
        });
    </script>
</dom-module>