desk-popup.html

<!--
@license
Copyright (c) 2016 The Jviz Project Authors. All rights reserved.
The Jviz Project is under the MIT License. See https://github.com/jviz/jviz/blob/dev/LICENSE
-->

<!-- Import components -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../jviz/jviz.html">
<link rel="import" href="../jviz-styles/jviz-styles.html">
<link rel="import" href="../jviz-icons/jviz-icons.html">

<!-- Import desk components -->
<link rel="import" href="../desk-styles/desk-styles.html">

<!-- Import popup elements -->
<link rel="import" href="./desk-popup-obfuscator.html">

<!-- Popup element -->
<dom-module id="desk-popup">
  <template>
    <style>
      /* Host style */
      :host
      {
        --desk-popup--padding: 10px;
      }
      :host
      {
        display: none;
      }
      :host[visible]
      {
        display: block;
      }

      /* Popup div */
      :host .popup
      {
        display: block;
        width: calc(96% - 2 * var(--desk-popup--padding));
        height: calc(96% - 2 * var(--desk-popup--padding));
        z-index: 3001;
        position: fixed;
        top: 2%;
        left: 2%;
        padding: var(--desk-popup--padding);
        background-color: var(--jviz-white);
        border-radius: 5px;
      }
      :host .popup .header
      {
        display: block;
        width: 100%;
        height: 30px;
        margin-bottom: 5px;
      }
      :host .popup .header .text
      {
        display: inline-block;
        height: 30px;
        font-size: 18px;
        font-weight: bold;
        line-height: 30px;
        float: left;
      }
      :host .popup .header .icon
      {
        cursor: pointer;
        float: right;
        opacity: 0.7;
        transition: all 0.3s;
      }
      :host .popup .header .icon:hover
      {
        opacity: 1.0;
      }
      :host .popup .content
      {
        display: block;
        width: 100%;
        height: calc(100% - 35px);
        overflow-x: auto;
      }
    </style>
    <div class="popup">
      <!-- Popup header -->
      <div class="header">
        <div class="text">{{ header }}</div>
        <jviz-icons id="close" class="icon" icon="close" size="30px" color="navy"></jviz-icons>
      </div>
      <!-- Popup content -->
      <div class="content">
        <content></content>
      </div>
    </div>
    <desk-popup-obfuscator></desk-popup-obfuscator>
  </template>
</dom-module>

<!-- Popup element logic -->
<script>
  //Initialize the desktop popup element
  var desk_popup = { is: 'desk-popup' };

  //Popup properties
  desk_popup.properties = {};
  desk_popup.properties.visible = { type: Boolean, value: false, reflectToAttribute: true };
  desk_popup.properties.header = { type: String, reflectToAttribute: true, value: '' };

  //Attached event
  desk_popup.attached = function()
  {
    //Save this
    var self = this;

    //Add the close click listener
    jviz.dom.mouse_down(this.$.close, function()
    {
      //Emit the close event
      var result = self.fire('close', {}, { cancelable: true });

      //Check if the action has been canceled
      if(result.defaultPrevented === false)
      {
        //Close the popup
        return self.hide();
      }
    });
  };

  //Show the popup
  desk_popup.show = function(){ this.visible = true; };

  //Hide the popup
  desk_popup.hide = function(){ this.visible = false; };

  //Register the desktop popup element
  Polymer(desk_popup);
</script>