emh-xml-viewer.html

<link rel="import" href="../polymer/polymer.html"/>
<script type="text/javascript" src="XMLDisplay.js"></script>

<!--

`emh-xml-viewer` is a div that displays an interactive XML allowing the user to expand and collapse XML data.

Example:

    <emh-xml-viewer url="test.xml"></emh-xml-viewer>
    <emh-xml-viewer string="<foo><bar/></foo>"></emh-xml-viewer>


### Styling

The following custom properties and mixins are also available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--emh-xml-viewer-background-color` | The background color of the viewer. | `lightgrey`
`--emh-xml-viewer-utility-color` | The color of the tag &lt; &gt; | `black`
`--emh-xml-viewer-node-name-color` | The color of the name of the node | `#800080`	
`--emh-xml-viewer-attribute-name-color` | The color of the name of an attribute | `black`
`--emh-xml-viewer-attribute-value-color` | The color of the value of an attribute | `blue`
`--emh-xml-viewer-node-value-color` | The color of the value of the node | `black`
`--emh-xml-viewer-element-border-color` | The color of the vertical lines from a node's start to end  | `#00FF66`
`--emh-xml-viewer-clickable-color` | The color of the '+' and '-' for expanding and collapsing a node | `#800080`

@demo demo/index.html
-->

<dom-module id="emh-xml-viewer">
  <template>
    <style is="custom-style">
      :host {
        display: block;
        background-color: var(--emh-xml-viewer-background-color, lightgrey);
      }
      .Utility {
      color: var(--emh-xml-viewer-utility-color, black);
      }	
      .NodeName {
      font-weight:bold;
      color: var(--emh-xml-viewer-node-name-color, #800080);	
      }
      .AttributeName 
      {
      font-weight:bold;
      color: var(--emh-xml-viewer-attribute-name-color, black);
      }
      .AttributeValue
      {
      color: var(--emh-xml-viewer-attribute-value-color, blue);
      }
      .NodeValue
      {
      color: var(--emh-xml-viewer-node-value-color, black);
      }
      .Element {
      border-left-color:var(--emh-xml-viewer-element-border-color, #00FF66);
      border-left-width:thin;
      border-left-style:solid;
      padding-top:0px;
      margin-top:10px;
      }
      .Clickable {	
      font-weight:900;
      font-size:large;
      color: var(--emh-xml-viewer-clickable-color, #800080);	
      cursor:pointer;
      
      vertical-align:middle;
      }
    </style>
    <div id="XMLHolder"></div>
  </template>

  <script>
    Polymer({

      is: 'emh-xml-viewer',

      properties: {
        /* The URL to the XML file for the XML Viewer to load from. */
        url: {
          type: String,
          notify: true, 
          observer: '_urlChanged'
        },
        /* The XML file encoded as a string for the XML Viewer to load. */
        string: {
          type: String,
          notify: true, 
          observer: '_stringChanged'
        }
      },
      _urlChanged: function() {
        LoadXML(this.$.XMLHolder, this.url);
      },
      _stringChanged: function() {
        LoadXMLString(this.$.XMLHolder, this.string);
      }
      
    });
  </script>
</dom-module>