View all @lrnwebcomponents/schema-behaviors analysis

How to use @lrnwebcomponents/schema-behaviors - 10 common examples

To help you get started, we’ve selected a few @lrnwebcomponents/schema-behaviors examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

elmsln / lrnwebcomponents / elements / video-player / video-player.es6.js View on Github

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]]"&gt;                              // The width of the media             
  <div slot="caption">Optional caption info.</div>

@demo demo/index.html
@customElement video-player */ class VideoPlayer extends MediaBehaviorsVideo( A11yBehaviors(SchemaBehaviors(SimpleColorsPolymer)) ) {

// 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>

elmsln / lrnwebcomponents / elements / media-image / media-image.es6.js View on Github

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>

elmsln / lrnwebcomponents / elements / video-player / video-player.js View on Github

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]]"&gt;                              // The width of the media             
  <div slot="caption">Optional caption info.</div>

@demo demo/index.html
@customElement video-player */ class VideoPlayer extends MediaBehaviorsVideo( A11yBehaviors(SchemaBehaviors(SimpleColorsPolymer)) ) { // 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>

elmsln / lrnwebcomponents / elements / wave-player / src / wave-player.js View on Github

/**
 * 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;

elmsln / lrnwebcomponents / elements / pdf-element / pdf-element.js View on Github

```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>
```

elmsln / lrnwebcomponents / elements / simple-image / simple-image.es6.js View on Github

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>

elmsln / lrnwebcomponents / elements / stop-note / stop-note.umd.js View on Github

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;

elmsln / lrnwebcomponents / elements / citation-element / src / citation-element.js View on Github

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;

elmsln / lrnwebcomponents / elements / simple-image / src / simple-image.js View on Github

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>

elmsln / lrnwebcomponents / elements / to-do / to-do.js View on Github

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>