Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
source$="[[source]]" // The source URL of the media
sticky-corner$="[[stickyCorner]]" // When user scrolls a playing video off-screen,
which corner will it stick to? Values are:
top-right (default), top-left, bottom-left, bottom-right,
and none (to turn sticky off)
thumbnail-src$="[[thumbnailSrc]]" // Optional thumbanil/cover image url
width$="[[width]]"> // The width of the media
<div slot="caption">Optional caption info.</div>
// render function static get template() { return html` <style> :host { display: block; margin: 0 0 15px; } .video-caption { font-style: italic; margin: 0; padding: 8px; @apply --video-player-caption-theme; }</style>
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
import {} from "@polymer/polymer/lib/elements/dom-if.js";
import { FlattenedNodesObserver } from "@polymer/polymer/lib/utils/flattened-nodes-observer.js";
// This blows up for some reason
// import './lib/media-image-caption.js'
// import './lib/media-image-citation.js'
/**
* `media-image`
* `A simple image presentaiton with minor documented options`
* @demo demo/index.html
*/
class MediaImage extends SchemaBehaviors(PolymerElement) {
constructor() {
super();
import("@polymer/iron-image/iron-image.js");
import("@polymer/iron-icons/iron-icons.js");
afterNextRender(this, function() {
this.HAXWiring = new HAXWiring();
this.HAXWiring.setup(MediaImage.haxProperties, MediaImage.tag, this);
});
}
static get template() {
return html`
<style>
:host {
display: block;
width: auto;
margin: auto;</style>
source$="[[source]]" // The source URL of the media
sticky-corner$="[[stickyCorner]]" // When user scrolls a playing video off-screen,
which corner will it stick to? Values are:
top-right (default), top-left, bottom-left, bottom-right,
and none (to turn sticky off)
thumbnail-src$="[[thumbnailSrc]]" // Optional thumbanil/cover image url
width$="[[width]]"> // The width of the media
<div slot="caption">Optional caption info.</div>
/**
* Copyright 2019 The Pennsylvania State University
* @license Apache-2.0, see License.md for full text.
*/
import { LitElement, html, css } from "lit-element/lit-element.js";
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
import "@lrnwebcomponents/es-global-bridge/es-global-bridge.js";
/**
* `wave-player`
* `A player for visualizing a sound file`
* @demo demo/index.html
* @customElement wave-player
*/
class WavePlayer extends SchemaBehaviors(LitElement) {
static get styles() {
return [
css`
:host {
height: 150px;
background-color: var(--dark-primary-color);
display: block;
}
paper-icon-button {
position: absolute;
}
.title,
.subtitle {
transition: all 0.5s ease;
```html
Another awesome feature is dynamically load PDF file. So you can change the src
attribute of the element and document will be automatically reloaded (checkout the demo):
@demo demo/index.html @hero hero.svg */ class PdfElement extends SchemaBehaviors(PolymerElement) { constructor() { super(); import("@polymer/paper-card/paper-card.js"); import("@polymer/app-layout/app-toolbar/app-toolbar.js"); import("@polymer/paper-spinner/paper-spinner.js"); } static get template() { return html` <style> :host { display: block; width: 100%; height: 100%; }
app-toolbar.pdf-toolbar {</style>
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
import { afterNextRender } from "@polymer/polymer/lib/utils/render-status.js";
import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
/**
* `simple-image`
* `A minimalist image that modals and presents info cleanly.`
* @demo demo/index.html
*/
class SimpleImage extends SchemaBehaviors(PolymerElement) {
constructor() {
super();
afterNextRender(this, function() {
this.HAXWiring = new HAXWiring();
this.HAXWiring.setup(SimpleImage.haxProperties, SimpleImage.tag, this);
});
}
static get template() {
return html`
<style>
:host {
display: block;
}
@-webkit-keyframes simple-animate {
0% {
opacity: 0;</style>
import { LitElement, html, css } from "lit-element/lit-element.js";
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
/**
* `stop-note`
* `A note that directs people to an action item of different warning levels`
* @demo demo/index.html
* @customElement stop-note
*/
class StopNote extends SchemaBehaviors(LitElement) {
/**
* LitElement constructable styles enhancement
*/
static get styles() {
return [
css`
:host {
display: block;
width: auto;
--background-color: #f7f7f7;
--accent-color: #d32f2f;
margin-bottom: 20px;
}
iron-icon {
height: 100px;
import { LitElement, html, css } from "lit-element/lit-element.js";
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
import { licenseList } from "@lrnwebcomponents/license-element/license-element.js";
/**
* `citation-element`
* @customElement citation-element
* An element dedicated to presenting and managing a correct citation on the web
* both visually as well as semantically with simple inputs.
* @demo demo/index.html
*/
class CitationElement extends SchemaBehaviors(LitElement) {
/**
* LitElement constructable styles enhancement
*/
static get styles() {
return [
css`
:host {
display: block;
color: var(--license-text-color);
}
:host([display-method="footnote"]) {
visibility: hidden;
opacity: 0;
}
:host([display-method="popup"]) {
display: block;
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
/**
* `simple-image`
* @customElement simple-image
* `A minimalist image that modals and presents info cleanly.`
* @demo demo/index.html
*/
class SimpleImage extends SchemaBehaviors(PolymerElement) {
static get template() {
return html`
<style>
:host {
display: block;
}
@-webkit-keyframes simple-animate {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
import { SchemaBehaviors } from "@lrnwebcomponents/schema-behaviors/schema-behaviors.js";
/**
* `to-do`
* @customElement to-do
* @demo demo/index.html
*/
class ToDo extends SchemaBehaviors(PolymerElement) {
constructor() {
super();
import("@polymer/paper-checkbox/paper-checkbox.js");
import("@polymer/paper-button/paper-button.js");
import("@polymer/paper-card/paper-card.js");
import("@polymer/paper-input/paper-input.js");
}
static get template() {
return html`
<style>
:host {
display: block;
}
:host([hide-form]) ul {
border: 1px solid black;
}</style>