@operato/scene-news-ticker 0.1.5

package/src/news-ticker-element.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './news-ticker-horizontal'
+import './news-ticker-vertical'
+
+import { html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('ox-news-ticker')
+export default class ThingsNewsTicker extends LitElement {
+  @property({ type: String }) textData: string = ''
+  @property({ type: String }) fontFamily: string = ''
+  @property({ type: String }) fontColor: string = ''
+  @property({ type: String }) fontSize: string = ''
+  @property({ type: String }) textAlign: string = ''
+  @property({ type: Boolean }) isReverse: boolean = false
+  @property({ type: Boolean }) isTextOverflowed: boolean = false
+  @property({ type: String }) direction?: 'vertical' | 'horizontal'
+  @property({ type: Number }) duration: number = 30000
+
+  render() {
+    return html`
+      ${this.direction == 'vertical'
+        ? html`
+            <ox-news-ticker-vertical
+              .duration=${this.duration}
+              .isReverse=${this.isReverse}
+              .isTextOverflowed=${this.isTextOverflowed}
+              .textData=${this.textData}
+            ></ox-news-ticker-vertical>
+          `
+        : html`
+            <ox-news-ticker-horizontal
+              .duration=${this.duration}
+              .isReverse=${this.isReverse}
+              .isTextOverflowed=${this.isTextOverflowed}
+              .textData=${this.textData}
+            ></ox-news-ticker-horizontal>
+          `}
+    `
+  }
+
+  updated() {
+    this.style.setProperty('--ox-news-ticker-font-family', this.fontFamily)
+    this.style.setProperty('--ox-news-ticker-font-size', this.fontSize)
+    this.style.setProperty('--ox-news-ticker-font-color', this.fontColor)
+    this.style.setProperty('--ox-news-ticker-text-align', this.textAlign)
+  }
+}

package/src/news-ticker-horizontal.ts

@@ -0,0 +1,128 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+@customElement('ox-news-ticker-horizontal')
+export default class ThingsNewsTickerHorizontal extends LitElement {
+  static styles = [
+    css`
+      :host * {
+        box-sizing: border-box;
+      }
+
+      :host .ticker-wrap {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        overflow: hidden;
+        height: 100%;
+        background-color: rgba(#000, 0.9);
+        padding-left: var(--ox-news-ticker-wrapper-padding-left);
+        box-sizing: content-box;
+        font-family: var(--ox-news-ticker-font-family);
+      }
+
+      :host .ticker-wrap .ticker {
+        display: inline-block;
+        min-width: 100%;
+        text-align: var(--ox-news-ticker-text-align);
+        height: 4rem;
+        line-height: 4rem;
+        white-space: nowrap;
+        padding-right: var(--ox-news-ticker-container-padding-right);
+        box-sizing: content-box;
+      }
+
+      :host .ticker-wrap .ticker__item {
+        display: inline-block;
+        font-size: var(--ox-news-ticker-font-size);
+        color: var(--ox-news-ticker-font-color);
+      }
+
+      :host body {
+        padding-bottom: 5rem;
+      }
+      :host h1,
+      :host h2,
+      :host p {
+        padding: 0 5%;
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) isReverse: boolean = false
+  @property({ type: Boolean }) isTextOverflowed?: boolean
+  @property({ type: Number }) duration: number = 30000
+  @property({ type: String }) textData: string = ''
+
+  private _anim?: Animation
+
+  @query('.ticker-wrap .ticker') animationTargetEl!: Element
+
+  get currentAnimation() {
+    return this._anim
+  }
+
+  set currentAnimation(anim) {
+    this._anim = anim
+  }
+
+  get textLines() {
+    return this.textData.split('\n')
+  }
+
+  render() {
+    return html`
+      <div class="ticker-wrap">
+        <div class="ticker">${this.textLines.map(t => html` <div class="ticker__item">${t}</div> `)}</div>
+      </div>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (
+      changes.has('textData') ||
+      changes.has('duration') ||
+      changes.has('isReverse') ||
+      changes.has('isTextOverflowed')
+    ) {
+      this.style.setProperty('--ox-news-ticker-wrapper-padding-left', this.isTextOverflowed ? '100%' : '0')
+      this.style.setProperty('--ox-news-ticker-container-padding-right', this.isTextOverflowed ? '100%' : '0')
+
+      this.startAnimation()
+    }
+  }
+
+  startAnimation() {
+    this.stopAnimation()
+
+    if (!this.isTextOverflowed) return
+
+    this.currentAnimation = this.animationTargetEl.animate(
+      [
+        {
+          transform: 'translate3d(0, 0, 0)',
+          visibility: 'hidden'
+        },
+        {
+          transform: 'translate3d(-100%, 0, 0)',
+          visibility: 'visible'
+        }
+      ],
+      {
+        duration: this.duration,
+        iterations: Infinity,
+        direction: this.isReverse ? 'reverse' : 'normal'
+      }
+    )
+  }
+
+  stopAnimation() {
+    if (this.currentAnimation) {
+      this.currentAnimation.cancel()
+    }
+  }
+}

package/src/news-ticker-vertical.ts

@@ -0,0 +1,125 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import 'web-animations-js'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+const CUBIC_BEZIER_EASING = 'cubic-bezier(1, 0, 0.5, 0)'
+
+@customElement('ox-news-ticker-vertical')
+export default class ThingsNewsTickerVertical extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        white-space: nowrap;
+      }
+
+      #news_ticker {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+      }
+
+      li {
+        display: flex;
+        height: 100%;
+        align-items: center;
+        overflow: hidden;
+        text-align: var(--ox-news-ticker-text-align, left);
+      }
+
+      #news_ticker a {
+        width: 100%;
+        line-height: normal;
+        color: var(--ox-news-ticker-font-color, black);
+        text-decoration: none;
+        font-size: var(--ox-news-ticker-font-size, 13px);
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) isReverse: boolean = false
+  @property({ type: Number }) duration: number = 30000
+  @property({ type: String }) textData: string = ''
+
+  private _anim?: Animation
+
+  @query('#news_ticker > ul') animationTargetEl!: Element
+
+  get currentAnimation() {
+    return this._anim
+  }
+
+  set currentAnimation(anim) {
+    this._anim = anim
+  }
+
+  get textLines() {
+    return this.textData.split('\n')
+  }
+
+  render() {
+    return html`
+      <div id="news_ticker">
+        <ul>
+          ${this.textLines.map(t => html` <li><a href="#">${t}</a></li> `)}
+        </ul>
+      </div>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('textData') || changes.has('duration') || changes.has('isReverse')) {
+      this.startAnimation()
+    }
+  }
+
+  startAnimation() {
+    this.stopAnimation()
+
+    var frames = this.createAnimationFrames()
+    this.currentAnimation = this.animationTargetEl.animate(frames, {
+      duration: this.textLines.length * this.duration,
+      iterations: Infinity,
+      direction: this.isReverse ? 'reverse' : 'normal'
+    })
+  }
+
+  stopAnimation() {
+    if (this.currentAnimation) this.currentAnimation.cancel()
+  }
+
+  createAnimationFrames() {
+    var textLinesLength = this.textLines.length
+    var frames = this.textLines.map((t, i) => {
+      return {
+        transform: `translateY(${-(i / textLinesLength) * 100}%)`,
+        offset: (1 / textLinesLength) * i,
+        easing: CUBIC_BEZIER_EASING
+      }
+    })
+
+    frames.push({
+      transform: `translateY(0)`,
+      offset: 1,
+      easing: CUBIC_BEZIER_EASING
+    })
+
+    return frames
+  }
+}

package/src/news-ticker.ts

@@ -0,0 +1,128 @@
+/*
+ * Copyright © 2017 HatioLab Inc. All rights reserved.
+ */
+
+import './news-ticker-element'
+
+import { Component, error, HTMLOverlayElement } from '@hatiolab/things-scene'
+
+import ThingsNewsTicker from './news-ticker-element'
+
+const NATURE = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'direction',
+      name: 'direction',
+      property: {
+        options: [
+          {
+            display: 'horizontal',
+            value: 'horizontal'
+          },
+          {
+            display: 'vertical',
+            value: 'vertical'
+          }
+        ]
+      }
+    },
+    {
+      type: 'checkbox',
+      label: 'reverse',
+      name: 'reverse'
+    },
+    {
+      type: 'number',
+      label: 'duration',
+      name: 'duration',
+      placeholder: 'seconds'
+    }
+  ],
+  help: 'scene/component/news-ticker'
+}
+
+export default class NewsTicker extends HTMLOverlayElement {
+  get nature() {
+    return NATURE
+  }
+
+  get hasTextProperty() {
+    return true
+  }
+
+  get tagName() {
+    return 'ox-news-ticker'
+  }
+
+  createElement() {
+    super.createElement()
+
+    this.setState('text', '#{data}')
+
+    var element = this.element
+
+    element.style.overflow = 'hidden'
+  }
+
+  /* component.property => element.property */
+  setElementProperties(element: HTMLElement) {
+    try {
+      var {
+        direction = 'horizontal',
+        reverse,
+        textAlign,
+        fontColor = 'black',
+        fontSize = 13,
+        font,
+        duration = 30
+      } = this.state
+
+      var text = this.text
+
+      var isReverse = reverse
+      var isTextOverflowed = this.isTextOverflowed
+
+      var newsTicker = element as ThingsNewsTicker
+
+      newsTicker.direction = direction
+      newsTicker.duration = duration * 1000
+      newsTicker.fontColor = fontColor
+      newsTicker.fontFamily = font
+      newsTicker.fontSize = `${fontSize}px`
+      newsTicker.textAlign = textAlign
+      newsTicker.isReverse = isReverse
+      newsTicker.isTextOverflowed = isTextOverflowed
+      newsTicker.textData = text
+    } catch (e) {
+      error(e)
+    }
+  }
+
+  get isTextOverflowed() {
+    var { width } = this.bounds
+    var span = document.createElement('span')
+
+    // @ts-ignore
+    span.style.font = this.font
+    span.style.position = 'fixed'
+    span.style.left = '-100%'
+    span.style.visibility = 'none'
+
+    span.textContent = this.text
+
+    document.body.appendChild(span)
+
+    var textBounds = span.getBoundingClientRect()
+    var isOverflowed = width < textBounds.width
+
+    document.body.removeChild(span)
+
+    return isOverflowed
+  }
+}
+
+Component.register('news-ticker', NewsTicker)

package/test/basic-test.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright © 2017 HatioLab Inc. All rights reserved.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"
+    />
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <!-- Step 1: import the element to test -->
+    <link rel="import" href="../things-scene-news-ticker.html" />
+  </head>
+  <body>
+    <!-- You can use the document as a place to set up your fixtures. -->
+    <test-fixture id="things-scene-news-ticker-fixture">
+      <template>
+        <things-scene-news-ticker>
+          <h2>things-scene-news-ticker</h2>
+        </things-scene-news-ticker>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('<things-scene-news-ticker>', function() {
+        var myEl
+
+        setup(function() {
+          myEl = fixture('things-scene-news-ticker-fixture')
+        })
+
+        test('defines the "author" property', function() {
+          assert.equal(myEl.author.name, 'Dimitri Glazkov')
+          assert.equal(
+            myEl.author.image,
+            'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg'
+          )
+        })
+
+        test('says hello', function() {
+          assert.equal(
+            myEl.sayHello(),
+            'things-scene-news-ticker says, Hello World!'
+          )
+
+          var greetings = myEl.sayHello('greetings Earthlings')
+          assert.equal(
+            greetings,
+            'things-scene-news-ticker says, greetings Earthlings'
+          )
+        })
+
+        test('fires lasers', function(done) {
+          myEl.addEventListener('things-scene-news-ticker-lasers', function(
+            event
+          ) {
+            assert.equal(event.detail.sound, 'Pew pew!')
+            done()
+          })
+          myEl.fireLasers()
+        })
+
+        test('distributed children', function() {
+          var els = myEl.getContentChildren()
+          assert.equal(els.length, 1, 'one distributed node')
+          assert.equal(
+            els[0],
+            myEl.querySelector('h2'),
+            'content distributed correctly'
+          )
+        })
+      })
+    </script>
+  </body>
+</html>

package/test/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright © 2017 HatioLab Inc. All rights reserved.  
+-->
+<html><head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'basic-test.html',
+        'basic-test.html?dom=shadow'
+      ]);
+    </script>
+
+</body></html>

package/test/unit/test-news-ticker.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright © 2017 HatioLab Inc. All rights reserved.
+ */
+
+import './util'
+
+import { expect } from 'chai'
+
+import '../../bower_components/things-scene-core/things-scene-min'
+import { NewsTicker } from '../../src/index'
+
+describe('news-ticker', function() {
+  var board
+
+  beforeEach(function() {
+    board = scene.create({
+      model: {
+        components: [
+          {
+            id: 'news-ticker',
+            type: 'news-ticker'
+          }
+        ]
+      }
+    })
+  })
+
+  it('component should be found by its id.', function() {
+    var component = board.findById('news-ticker')
+
+    expect(!!component).not.to.equal(false)
+  })
+})

package/test/unit/util.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright © 2017 HatioLab Inc. All rights reserved.  
+ */
+
+var noop = () => {}
+
+global.Canvas = require('canvas');
+
+Canvas.prototype.setAttribute = noop;
+Canvas.prototype.style = {};
+
+global.Image = Canvas.Image;
+global.screen = {
+  width: 1280,
+  height: 800
+};
+
+global.window = global;
+
+global.addEventListener = noop;
+global.location = {};
+global.getComputedStyle = noop;

package/things-scene.config.js

@@ -0,0 +1,24 @@
+const icon = new URL('./icons/icon-news-ticker.png', import.meta.url).href
+
+var templates = [
+  {
+    type: 'news-ticker',
+    description: 'news-ticker',
+    group: 'etc',
+    /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
+    icon,
+    model: {
+      type: 'news-ticker',
+      left: 10,
+      top: 10,
+      width: 300,
+      height: 50,
+      duration: 5,
+      text: '#{data}'
+    }
+  }
+]
+
+export default {
+  templates
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "src",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node"]
+  },
+  "include": ["**/*.ts", "*.d.ts"]
+}