select-single.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-single selected="" backend="http://demo9131812.mockable.io/items">
        <input type="hidden" name="member_id" />
    </select-single>

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

   <template>

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

    * {

        box-sizing: border-box;

    }

    ul {

        display: inline;
    }

    .delete {

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

    .item {

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

    input {

        width: 100%;
        display: inline-block;
    }

    input:focus {

        background: #eee;
    }

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

        background: #eee;
    }

    #container {
        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;
    }


    #selected {
      border: 1px solid #EEE;
      padding: 2px 2px 2px 6px ;
      display: block;
   }

   small {

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

</style>


    <slot></slot>

    <template is="dom-if" if="{{selected_private}}">

        <div id="selected" on-click="show_input">

            <strong >{{selected_private._title}}</strong> <small>{{selected_private._description }}</small>
            <button type="button" name="reset_value" class="delete" on-click="reset_to_null">X</button>
        </div>

    </template>


    <div id="container">

        <input id="query" on-keyup="handleup" on-keydown="handledown" type="text" autofocus="{{autofocus}}" value="" 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$="[[arrayItem(items.*,index,'class')]]" 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="select_down"></iron-a11y-keys>
    <iron-a11y-keys target="[[target]]" keys="pageup up"     on-keys-pressed="select_up"></iron-a11y-keys>
    <iron-a11y-keys target="[[target]]" keys="enter"         on-keys-pressed="select_enter"></iron-a11y-keys>
    <iron-a11y-keys target="[[target]]" keys="esc"           on-keys-pressed="select_esc"></iron-a11y-keys>

  </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-single',

    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.class = "item";

            if ( idx === these.preselected ) {

                item.class = "item active";
            }

            these.set('items.'+idx+ '.class' ,item.class);

        });
    },

    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]);
    },

    select_enter: 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;
    },

    select_esc: function(e) {

        e.preventDefault();
        this.items = [];

        this.reset_to_preset();

        return false;
    },

    select_set: function(set) {

        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.selected = set;
        this.selected_private    = set;
        this.return_hidden.value = set._return;

        this.$.query.value  = "";
        this.query          = "";
        this.items          = [];

        if ( this.hideOnSelect === true )  {
            this.$.query.style.display = "none";
        }

        if ( this.nextElement ) {

             this.nextElement.focus();
        }

        this.fire("select-single-set", set);


        return false;
    },


    select_down: 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;
    },


    select_up: 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.select_enter(e);

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

           this.select_leave(e);

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

            this.select_esc(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.select_leave(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;
    },

   select_leave: function(e) {

        var these = this;

        this.message = undefined;

        var requests = these.$.backend.activeRequests;

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

        this.items = [];

        if ( this.selected_private !== undefined ) {

            this.reset_to_preset();
        }
   },

    hresponse: function(request) {

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

            this.message = "";


            this.items       = request.detail.response.items;
            this.update_items();

            if ( this.items.length === 0) {

                this.message = "No matching entry found.";

            } else {

                this.message = undefined;
            }

        } else {

        }
    },

    // Reset to empty field and value
    reset_to_null: function(e) {

        e.preventDefault();

        this.return_hidden.value = "";
        this.items               = [];
        this.selected_private    = undefined;
        this.selected            = undefined;


        if ( this.hideOnSelect === true ) {

            this.$.query.style.display = "inline-block";
            this.$.query.focus();
        }


        this.fire("select-single-set", {});

        return false;
    },


    show_input: function() {

        this.selected_private    = undefined;

        if ( this.hideOnSelect === true ) {

            this.$.query.style.display = "inline-block";
            this.$.query.focus();
        }

        return false;

    },

    // Reset to
    reset_to_preset: function() {

        if ( this.hideOnSelect  && typeof this.selected === "object" )  {

            this.$.query.style.display = "none";

            var current = this.return_hidden.value;

            this.return_hidden.value    = this.template_return.parse(this.selected);
            this.selected._title        = this.template_title.parse(this.selected);
            this.selected._return       = this.template_return.parse(this.selected);
            this.selected._description  = this.template_description.parse(this.selected);

            this.selected_private = this.selected;

            if ( current != this.return_hidden.value ) {
                this.fire("select-single-set", this.selected);
            }

        } else {

            this.reset_to_null;
        }
    },

    properties: {

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

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

        /**
          * 'hideOnSelect' - when selected, hide input
          */
        hideOnSelect: {

            type: Boolean,
            value: true,
        },

        /**
        * 'selected' the current selected object
        */
        selected:  Object,


        /**
          *
          */
        selected_private: Object,

        /**
        * 'items' the list of items
        */
        items:    {
            type:   Array,
            notify: true
        },

        /**
          * 'backend' - URL for the backend
        */
        backend:    String,

        message:    String,

        /**
          *
          */
        preselected: Number,

        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",
        }


    },


    // 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.target = these;

        // Get next Element for auto focus
        this.return_hidden =  Polymer.dom(this).querySelector('input');

        var current_name = this.return_hidden.name;
        var form = upTo(this,'form').elements;
        var forEach = Array.prototype.forEach;

        var found  = false;
        var foundi = 0;

        forEach.call(form, function(x) {

            if ( found === true ) {

                foundi++;

                if ( foundi == 2 ) {
                    these.nextElement = x ;
                }
            }

            if ( current_name === x.name && x.name !== undefined ) {
                found = true;
            }
        });



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

        // Auf Vorgabe setzen
        this.reset_to_preset();

        this.fire("select-single-set", this.selected );

        window.addEventListener('click', these.select_leave.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.select_leave.bind(these));

    },

    // Element Behavior

  });

</script>