designer

designer.html

<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-field/core-field.html">
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      body {
        font-family: sans-serif;
      }
      core-drawer-panel {
        background: rgb(51, 51, 51);
      }
      core-toolbar {
        background-color: rgb(0, 85, 0);
      }
      .content {
        padding: 20px;
      }
      core-drawer-panel:not([narrow]) #navicon {
        display: none;
      }
      #core_field {
        position: relative;
        background-color: rgb(136, 136, 136);
      }
      #core_icon_button {
        position: relative;
      }
    </style>
    <core-drawer-panel transition id="drawerPanel" touch-action>
      <core-header-panel id="core_header_panel" drawer>
        <core-toolbar id="navheader'">
          <core-field id="core_field" icon="search" theme="core-light-theme" center horizontal layout>
            <core-icon icon="search" id="core_icon"></core-icon>
            <core-input willvalidate placeholder="text input" id="core_input" flex></core-input>
          </core-field>
        </core-toolbar>
        <core-menu selected="0" selectedindex="0" id="core_menu">
          <core-item id="core_item" label="One" horizontal center layout active></core-item>
          <core-item id="core_item1" label="Two" horizontal center layout></core-item>
        </core-menu>
      </core-header-panel>
      <core-header-panel id="core_header_panel1" main>
        <core-toolbar id="mainheader">
          <paper-icon-button icon="menu" id="navicon" on-tap="{{ toggleDrawer }}"></paper-icon-button>
          <span id="span" flex>Title</span>
          <core-icon-button icon="fullscreen" id="fullscreen_button" theme="core-light-theme" on-tap="{{toggleFullscreen}}"></core-icon-button>
        </core-toolbar>
        <div id="div" class="content">
          If drawer is hidden, press button to display drawer.
        </div>
      </core-header-panel>
    </core-drawer-panel>
  </template>

  <script>

    var App = App || {
    	getFullscreenElement: function() {
        return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
      },
      isFullscreenEnabled: function() {
        return document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
      },
      isFullscreen: function() {
        return document.isFullscreen || document.mozIsFullScreen || document.webkitIsFullScreen;
      },
      launchFullscreen: function(element) {
        if (element.requestFullscreen) { element.requestFullscreen(); }
        else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); }
        else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); }
        else if (element.msRequestFullscreen) { element.msRequestFullscreen(); }
      },
      exitFullscreen: function() {
        if (document.exitFullscreen) { document.exitFullscreen(); }
        else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
        else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
      }
    };
    Polymer({
      toggleDrawer: function () {
      	this.$.drawerPanel.togglePanel();
      },
      toggleFullscreen: function() {
//        if (App.isFullscreenEnabled()) {
          if (!App.isFullscreen()) {
            console.log("going fullscreen");
          	App.launchFullscreen(document.documentElement);
            this.$.fullscreen_button.icon = "fullscreen-exit";
          } else {
            console.log("exiting fullscreen");
          	App.exitFullscreen();
            this.$.fullscreen_button.icon = "fullscreen";
          }
//        } else {
//        	return false;
//        }
      }
    });

  </script>

</polymer-element>