select-multi.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../iron-a11y-keys/iron-a11y-keys.html">

<script src="../uri.js/src/URI.min.js"></script>
<!--
An element providing a solution to no problem in particular.

Example:

    <select-multi name="cginame" backend="http://demo9131812.mockable.io/items">
        <select-multi-item value="11">Titel</select-multi-item>
        <select-multi-item value="33">Titel</select-multi-item>
        <select-multi-item value="99">Titel</select-multi-item>
    </select-multi>

@demo
-->
<dom-module id="select-multi">

   <template>

    <style>
    :host {
      display: inline-block;
      cursor: pointer;
    }

    * {
        box-sizing: border-box;
    }

    ul {
        display: inline;
    }
        
    .delete {

        margin: 0 0 0 6px;
        float: right;         
    }

    .item {

        border-top: 1px solid #eee;
        padding: 4px 5px;
        margin: 0;
        display: block;
        cursor: pointer;
        background: #fff;
        text-align: left;
    }

    input {

        width: 100%;
        display: inline-block;
        padding: 4px 8px 3px 8px;
        border: 1px inset #eee;
    }

    input:focus {

        background: #fff;
    }

    .item.active,
    .item:hover,
    .item:focus {

        background: #eee;
    }

    #container {
        display: inline-block;
        position: relative;
    }  

    #container input {
        display: inline-block;

    }   

    #result {
        position: absolute;
        top: 20px;
        left: 0;
        width: 500px;
        padding: 0;
        z-index: 9999;
        box-shadow: 10px 9px 40px -2px rgba(217,217,217,1);
        background: #fff;
        max-height: 200px;
        overflow-y: auto;
        background: #FFFFD7;
    }

    #message {
        position: absolute;
        top: 25px;
        left: 0;
        width: 500px;
        padding: 0;
        z-index: 99999;
        box-shadow: 10px 9px 40px -2px rgba(217,217,217,1);
        background: #fff;
        color: #900;
        font-weight: bold;
        line-height: 20px;
    }

    #result.hide {

        display: none;
    }

   small {
    
       font-size: 80%;
       color: #999;
   }

</style>

    
    <slot></slot>

    <div id="container">

        <input id="query" on-keyup="handleup" on-keydown="handledown" type="text" autofocus="{{autofocus}}" value="{{userInput::input}}" placeholder$="{{placeholder}}" autocomplete="off"/>
        
        <div id="message">
            <template is="dom-if" if="{{message}}">
            <strong>{{message}}</strong>    
            </template>
        </div>

        <div id="result"><template id="resultlist" is="dom-repeat" items="{{items}}">
            <span class$="[[item.xclass]]" style$="[[item.style]]" on-click="select_click" result-id$="{{ index }}"><span on-click="select_click" result-id$="{{ index }}">[[item._title]]</span> <small on-click="select_click" result-id$="{{ index }}">[[ item._description ]]</small></span>
        </template></div>

    </div>

   <iron-ajax
    id="backend"
    handle-as="json"
    on-response="hresponse"
    debounce-duration="150"></iron-ajax> 

    <iron-a11y-keys target="[[target]]" keys="pagedown down" on-keys-pressed="selectDown"></iron-a11y-keys>
    <iron-a11y-keys target="[[target]]" keys="pageup up"     on-keys-pressed="selectUp"></iron-a11y-keys>
    <iron-a11y-keys target="[[target]]" keys="enter"         on-keys-pressed="selectEnter"></iron-a11y-keys>
    <iron-a11y-keys target="[[target]]" keys="esc"           on-keys-pressed="selectEsc"></iron-a11y-keys>

  </template>

</dom-module>

<dom-module id="select-multi-item">

    <template>

    <style>
        :host {
          display: inline-block;
          cursor: pointer;
          border: 1px inset #eee;
          padding: 2px 5px;
          background: #fff;
        }

        button {
            
            color: #900;
            border: 0 none;
            background: transparent;
            padding: 3px;
            margin: 0;
            cursor: pointer;
        }

        * {
            box-sizing: border-box;
        }

    </style>
        
        <slot>{{content}}</slot>
        <input type="hidden" name="{{name}}" value="{{value}}" /> 
        <button type="button" id="delete">X</button>

  </template>

</dom-module>

<script>

(function (global) {

  var Template = function (str) {
    this.template = str || '';

    Object.defineProperties( this, {
      modifier: {
        writable: true,
        value: this._modifier
      }
    });

    return this;
  }

  Object.defineProperties( Template.prototype, {
    _regex: {
      writable: false,
      value: /#{(((?!{).)*)}/g
    },

    _modifier: {
      writable: false,
      value: function ( match, key ) {
        return this[key] || '';
      }
    },

    parse: {
      writable: false,
      value: function (data) {
        return this.template.replace(this._regex, this.modifier.bind(data));
      }
    }
  });

  global['Template'] = Template;

}(this));


function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }

  // Many DOM methods return null if they don't 
  // find the element they are searching for
  // It would be OK to omit the following and just
  // return undefined
  return null;
}

  Polymer({

    is: 'select-multi-item',
 
    properties: {

        value: String,
        content: String,
        name: String
    },

 
    // Element Lifecycle

    ready: function() {
      // `ready` is called after all elements have been configured, but
      // propagates bottom-up. This element's children are ready, but parents
      // are not.
      //
      // This is the point where you should make modifications to the DOM (when
      // necessary), or kick off any processes the element wants to perform.
    },

    attached: function() {
      // `attached` fires once the element and its parents have been inserted
      // into a document.
      //
      // This is a good place to perform any work related to your element's
      // visual state or active behavior (measuring sizes, beginning animations,
      // loading resources, etc).

        var these = this;

        these.$.delete.addEventListener('click', function() { 
            
            these.remove()
        } );

        these.parentNode = these.parentNode;
        these.name = these.parentNode.name; 
    },

    detached: function() {
      // The analog to `attached`, `detached` fires when the element has been
      // removed from a document.
      //
      // Use this to clean up anything you did in `attached`.

    }
  });

  Polymer({

    is: 'select-multi',

    update_items: function() {

        var these = this;
       
        var new_items = [];

        these.items.forEach(function(item,idx,arr) {

            item._title         = these.template_title.parse(item);
            item._description   = these.template_description.parse(item);
            
            item.xclass = "item";

            if ( idx === these.preselected ) {
                item.xclass = "item active";
            }
           
            console.dir(item.xclass)

        });
    },

    arrayItem: function(change, index, path) {
        // this.get(path, root) returns a value for a path
        // relative to a root object.
        return this.get(path, change.base[index]);
    },

    selectEnter: function(e) {
       
        e.preventDefault();
        var idx             = this.preselected;
        this.select_set(this.items[idx]);
        return false;
    },

    
    select_click: function(e) {

        e.preventDefault();
        var idx             = e.target.attributes.getNamedItem('result-id').value;
        this.select_set(this.items[idx]);
        return false;
    },

    selectEsc: function(e) {

        e.preventDefault();
        this.items = [];
        return false;
    },

    select_set: function(set) {

        var these = this;

        if ( set === undefined) {
            return false
        }

        set._return = this.template_return.parse(set);
        set._title  = this.template_title.parse(set);
        set._description = this.template_description.parse(set);

        this.$.query.value  = "";
        this.query          = "";
        this.items          = [];
     
        // attach new child …
        var newItem = document.createElement('select-multi-item');
       
        newItem.content = set._title;
        newItem.value   = set._return;
        newItem.name    = these.name;

        these.appendChild(newItem);
       
        this.fire("select-multi-set", set);

        return false;
    },

    selectDown: function(e) {

        if (this.items.length === 0) 
            return;

        if (this.preselected < (this.items.length - 1 )) {
        
            this.preselected++;

        } else { 

            this.preselected = -1;
        }
            
        this.update_items();
        
        return false;
    },


    selectUp: function(e) {

        if (this.items.length === 0) 
            return;
            
        if (this.preselected > -1) {
         
            this.preselected--; 
        }

        this.update_items();
        
         return false;
    },


    handledown: function(e) { 

        this.message = undefined;

        if (  (e.keyCode || e.which || e.charCode || 0) == 13 ) {       // Enter
            
            this.selectEnter(e);

        } else if (  (e.keyCode || e.which || e.charCode || 0) == 9 ) { // Tab

           this.selectLeave(e);

        } else if ( ( e.keyCode || e.which || e.charCode || 0 ) == 27 ) {   // Escape

            this.selectEsc(e);

        } else {

        }
    },

    handleup: function(e) { 
       
        this.message = undefined;

        if (  (e.keyCode || e.which || e.charCode || 0) == 13 ) {       // Enter
        } else if (  (e.keyCode || e.which || e.charCode || 0) == 9 ) { // Tab
        } else if ( ( e.keyCode || e.which || e.charCode || 0 ) == 27 ) {   // Escape

        } else {

            this.setajax();
        }
    },


    handleblur: function(e) {

        this.message = undefined;
        this.selectLeave(e);
    },

    setajax: function(e) {
            
        var these = this;

        if( this.query !== this.$.query.value ) {      

            var requests = these.$.backend.activeRequests;

            requests.forEach( function(request) {
                request.abort();
                //these.$.backend.discardRequest(request);
            });        
            
            this.query = this.$.query.value;

            var uri    = new URI(this.backend);
            var params = uri.search(true);
            params.query = this.query;

            this.message = "Searching …";

            this.$.backend.url    = uri.query("").toString();
            this.$.backend.params = params;
            this.$.backend.generateRequest();
        }

        return false;
    },

   selectLeave: function(e) {

        var these = this;

        this.message = undefined;

        var requests = these.$.backend.activeRequests;

        requests.forEach( function(request) {
              request.abort();
        });

        this.items = [];
   },

    hresponse: function(request) {

        if ( request.detail.response !== null ) { 

            this.message = "";
            this.items       = request.detail.response.items || request.detail.response;
            this.update_items();

            if ( this.items.length === 0) {
            
                this.message = "No matching entry found.";
            
            } else {

                this.message = undefined;
            }

        } else {

        }
    },


    show_input: function() {

        return false;
    },

    properties: {

      /**
       * `multiple` indicates that the element should handle more then one value.
       * NOT IMPLEMENTED
       */

        autofocus: {
            type: Boolean,
            value: false
        },

        xclass: String,

        /**
        * 'items' the list of items
        */        
        items:    {
            type:   Array,
            notify: true
        },
        
        /** 
          * 'backend' - URL for the backend
        */
        backend:    String,
        
        message:    String,
        
        query: String,

        /**
         * 'format' default id
        */

        formatReturn: { 
            
            type: String,
            value: "#{id}"
        },

        formatTitle: {
            type: String,
            value: "#{title}",
        },

        formatDescription: {

            type: String,
            value: "#{description}",
        },

        placeholder: {

            type: String,
            value: "Type for search",
        },

        name: String,
       
        userInput: {
            type: String,
            notify: true,
        },
        
        target: {
            type: Object
        },

    },

 
    // Element Lifecycle

    ready: function() {
      // `ready` is called after all elements have been configured, but
      // propagates bottom-up. This element's children are ready, but parents
      // are not.
      //
      // This is the point where you should make modifications to the DOM (when
      // necessary), or kick off any processes the element wants to perform.

       this.target = this.$.query;
    },

    attached: function() {
      // `attached` fires once the element and its parents have been inserted
      // into a document.
      //
      // This is a good place to perform any work related to your element's
      // visual state or active behavior (measuring sizes, beginning animations,
      // loading resources, etc).

        var these = this;

        this.template_return        = new Template(this.formatReturn);
        this.template_title         = new Template(this.formatTitle);
        this.template_description   = new Template(this.formatDescription);

        window.addEventListener('click', these.selectLeave.bind(these) );
    
    },

    detached: function() {
      // The analog to `attached`, `detached` fires when the element has been
      // removed from a document.
      //
      // Use this to clean up anything you did in `attached`.

      window.removeEventListener('click', these.selectLeave.bind(these));

    },

    // Element Behavior
  
  });

</script>