floating-pane.html

<!---
TODO: on window resize ensure that pane isn't off screen, and move on screen if needed.

TODO: this shoudl be implemented in terms pf IronOverlayBehavior
-->

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="floating-pane">

<style>
.pane_title{
background: #333;
color: #fff;
font-weight: bold;
padding: 5px;
display: flex;
flex-direction: row;
min-height: 14px;
}
:host{
position: fixed;
top: 0px;
left: 0px;
min-width: 200px;
max-width: 400px;
max-height: 600px;
background-color: rgba(255,255,255,0.92);
z-index: 100;
cursor: move;
box-shadow: 3px 3px 7px #999;
display: flex;
flex-direction: column;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07);
}
.pane_title.wide{
min-width: 360px;
}
.pane_body{
padding: 5px;
border: 1px solid #000;
flex: 2;
overflow-y: auto;
}
.grabber{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.grabber:hover{
@apply(--grabber-hover);
}
::content > .nodrag{
cursor: default;
display: table; /* gives auto width, while still being display-block-like */
}
input{
font-size: 0.8em;
width: 130px;
margin: -2px;
}
.flexer{
flex:2;
display: inline-block;
}
</style>
<template>
    <div class$="pane_title [[_wide(has_search)]]">
        <content select=".pane_title"></content>
        <div class="flexer"></div>
        <input id="search_input" type="search" hidden$="{{!has_search}}" value="{{search_text::input}}"
            placeholder="[[search_placeholder]]" on-focus="_search_focus" on-blur="_search_blur" on-mousedown="_stop_propagation">
    </div>
    <div class="pane_body"><content></content></div>
    <div class="grabber" hidden$="{{!grabber_mode}}" on-mouseup="toggle"></div>
</template>

<script>

(function(){

var top_z_index = 100;

Polymer({
    is: 'floating-pane',
    behaviors: [Polymer.IronResizableBehavior],
    properties: {
        grabber_mode: {
            type: Boolean,
            value: false,
            notify: true
        },
        has_search: {
            type: Boolean,
            value: false,
            notify: true
        },
        search_text: {
            type: String,
            value: "",
            notify: true
        },
        search_placeholder: {
            type: String,
            value: "search",
            notify: true,   
        },
        disable_shortcuts: {
            type: Boolean,
            notify: true,
            value: false
        },
        initial_x:{
            type: Number,
            notify: true,
            value: 400
        },
        initial_y:{
            type: Number,
            notify: true,
            value: 400
        }, 
        width: {
            type: String,
            notify: true,
            value: '',
            observer: '_set_width'
        }
    }, listeners: {
        'mousedown': '_on_drag_start'
    }, observers: [
        '_set_initial_position(initial_x, initial_y)'
    ], attached: function(){
        this.style.zIndex = ++top_z_index;
    }, _stop_propagation: function(e){
        e.stopPropagation(); 
    }, _set_width: function(v){
        if(v){
            this.style.width = v;
            this.style.maxWidth = 'initial';    
            this.style.minWidth = 'initial';
        } else {
            this.style.width = '';
            this.style.maxWidth = '';   
            this.style.minWidth = '';
        }
    }, _on_drag_start: function(e){
        // if the mouse-down element or any of its ancestors has the "nodrag" class then dont start the dragging.
        // TODO: switch to using Polymer's tap event
        var el = e.target;
        while(el !== e.currentTarget){
            for(let c of el.classList){
                if(c === 'nodrag'){
                    return;   
                }
            }
            el = el.parentNode;
        }
        var offset = this.getBoundingClientRect();
        e.preventDefault();
        this.style.zIndex = ++top_z_index;
        this._drag_off_left = e.clientX-offset.left;
        this._drag_off_top = e.clientY-offset.top;
        if(! this._on_drag_move_bound){
            this._on_drag_move_bound = this._on_drag_move.bind(this);
            this._on_drag_end_bound = this._on_drag_end.bind(this);
        }        
        document.addEventListener('mousemove', this._on_drag_move_bound, true);
        document.addEventListener('mouseup', this._on_drag_end_bound, true); 
    }, _on_drag_move: function(e) {
        this._translate(e.clientX - this._drag_off_left, e.clientY - this._drag_off_top);
    }, _on_drag_end: function(e){
        document.removeEventListener('mousemove', this._on_drag_move_bound, true);
        document.removeEventListener('mouseup', this._on_drag_end_bound, true); 
    }, _translate: function(x, y){
        this.transform('translate(' + x + "px, " + y + "px)");
    }, _wide: function(v){
        return v ? "wide" : "";
    }, toggle: function(){
        if(this.hidden){
            this.removeAttribute('hidden');
            this.style.zIndex = ++top_z_index;
        } else {
            this.setAttribute('hidden', "true");            
            this.fire('close')
        }
        this.notifyResize();
    }, _search_focus: function(){
        this.set('disable_shortcuts', true); 
    }, _search_blur: function(){
        this.set('disable_shortcuts', false);
    }, _set_initial_position: function(x, y){
        this._translate(x, y);
    }
});


})();
</script>
</dom-module>