app/scripts/views/Toolbar.js
/**
   * Renders the toolbar.
   *
   * @return {HTMLElement} The rendered element
   */
Renders the toolbar.
@return {HTMLElement} The rendered element
Renders the toolbar . @return { HTMLElement } The rendered element
render() {
    console.log('Render toolbar');
    const transform = `w_${this.element.clientWidth},h_${this.element.clientHeight},c_fit`;
    const url = `http://images.cdn.yle.fi/image/upload/${transform}/${this.program.imageId}.png`;
    const backgroundStyle = `
      background: url(${url}) no-repeat center bottom;
      background-size: cover;
      width: 100%;
      height: 100%;
    `;
    bind(this.headerTitle)`${ this.program.channel }`;
    bind(this.tabBar)`${
      this.channels.map((c) => wire(c)`
        <a class="${ this.tabStyle(c) }" href="${ `#channels/${c.id}` }">${ c.title }</a>
      `)
    }`;
    bind(this.headerBackground)`<div style="${backgroundStyle}"></div>`;
    return this.element;
  }
render ( ) { console . log ( 'Render toolbar' ) ; const transform = ` ${ this . element . clientWidth } ${ this . element . clientHeight } ` ; const url = ` ${ transform } ${ this . program . imageId } ` ; const backgroundStyle = ` ${ url } ` ; bind ( this . headerTitle ) ` ${ this . program . channel } ` ; bind ( this . tabBar ) ` ${ this . channels . map ( ( c ) => wire ( c ) ` ${ this . tabStyle ( c ) } ${ ` ${ c . id } ` } ${ c . title } ` ) } ` ; bind ( this . headerBackground ) ` ${ backgroundStyle } ` ; return this . element ; }
Renders the toolbar.
Renders the toolbar .
// Render the elements