com.vaadin.polymer.marked.widget.MarkedElement Maven / Gradle / Ivy
/*
* This code was generated with Vaadin Web Component GWT API Generator,
* from marked-element project by The Polymer Project Authors (https://polymer.github.io/AUTHORS.txt)
* that is licensed with https://polymer.github.io/LICENSE.txt license.
*/
package com.vaadin.polymer.marked.widget;
import com.vaadin.polymer.marked.element.*;
import com.vaadin.polymer.PolymerWidget;
import com.vaadin.polymer.elemental.*;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.core.client.JavaScriptObject;
/**
* Element wrapper for the marked library.
* <marked-element> accepts Markdown source, and renders it to a child
element with the class markdown-html. This child element can be styled
as you would a normal DOM element. If you do not provide a child element
with the markdown-html class, the Markdown source will still be rendered,
but to a shadow DOM child that cannot be styled.
* The Markdown source can be specified either via the markdown attribute:
* <marked-element markdown="`Markdown` is _awesome_!">
* <div class="markdown-html"></div>
* </marked-element>
*
*
*
Or, you can provide it via a <script type="text/markdown"> element child:
* <marked-element>
* <div class="markdown-html"></div>
* <script type="text/markdown">
* Check out my markdown!
*
* We can even embed elements without fear of the HTML parser mucking up their
* textual representation:
*
* ```html
* <awesome-sauce>
* <div>Oops, I'm about to forget to close this div.
* </awesome-sauce>
* ```
* </script>
* </marked-element>
*
*
*
Note that the <script type="text/markdown"> approach is static. Changes to
the script content will not update the rendered markdown!
* Styling
* If you are using a child with the markdown-html class, you can style it
as you would a regular DOM element:
* .markdown-html p {
* color: red;
* }
*
* .markdown-html td:first-child {
* padding-left: 24px;
* }
*
*
*
*/
public class MarkedElement extends PolymerWidget {
/**
* Default Constructor.
*/
public MarkedElement() {
this("");
}
/**
* Constructor used by UIBinder to create widgets with content.
*/
public MarkedElement(String html) {
super(MarkedElementElement.TAG, MarkedElementElement.SRC, html);
}
/**
* Gets a handle to the Polymer object's underlying DOM element.
*/
public MarkedElementElement getPolymerElement() {
try {
return (MarkedElementElement) getElement();
} catch (ClassCastException e) {
jsinteropError();
return null;
}
}
/**
* The markdown source that should be rendered by this element.
*
* JavaScript Info:
* @property markdown
* @type String
*
*/
public String getMarkdown(){
return getPolymerElement().getMarkdown();
}
/**
* The markdown source that should be rendered by this element.
*
* JavaScript Info:
* @property markdown
* @type String
*
*/
public void setMarkdown(String value) {
getPolymerElement().setMarkdown(value);
}
/**
*
*
* JavaScript Info:
* @method outputElement
*
*/
public void outputElement() {
getPolymerElement().outputElement();
}
/**
* Renders markdown into this element’s DOM.
* This is automatically called whenever the markdown property is changed.
* The only case where you should be calling this is if you are providing
markdown via <script type="text/markdown"> after this element has been
constructed (or updating that markdown).
*
* JavaScript Info:
* @method render
*
*/
public void render() {
getPolymerElement().render();
}
/**
* Renders markdown to HTML when the element is attached.
* This serves a dual purpose:
*
* Prevents unnecessary work (no need to render when not visible).
* attached fires top-down, so we can give ancestors a chance to
register listeners for the syntax-highlight event before we render
any markdown.
*
*
* JavaScript Info:
* @method attached
*
*/
public void attached() {
getPolymerElement().attached();
}
/**
*
*
* JavaScript Info:
* @method detached
*
*/
public void detached() {
getPolymerElement().detached();
}
}