WebCompDev / COMPONENTS

Commit 15df8c68e126c51be3736a8566697b05a250a793

Authored by Luigi Serra
1 parent e134e536

search bar controllet

Inline Side-by-side
Showing 1 changed file with 153 additions and 0 deletions
controllets/search-panel-controllet/search-panel-controllet.html 0 → 100644
  View file @15df8c6
  1 +<!--
  2 +@license
  3 + The MIT License (MIT)
  4 +
  5 + Copyright (c) 2015 Dipartimento di Informatica - Università di Salerno - Italy
  6 +
  7 + Permission is hereby granted, free of charge, to any person obtaining a copy
  8 + of this software and associated documentation files (the "Software"), to deal
  9 + in the Software without restriction, including without limitation the rights
  10 + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11 + copies of the Software, and to permit persons to whom the Software is
  12 + furnished to do so, subject to the following conditions:
  13 +
  14 + The above copyright notice and this permission notice shall be included in
  15 + all copies or substantial portions of the Software.
  16 +
  17 + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18 + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19 + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20 + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21 + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22 + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23 + THE SOFTWARE.
  24 +-->
  25 +
  26 +<!--
  27 +* Developed by :
  28 +* ROUTE-TO-PA Project - grant No 645860. - www.routetopa.eu
  29 +*
  30 +-->
  31 +
  32 +<link rel="import" href="../../bower_components/polymer/polymer.html">
  33 +<link rel="import" href="../../bower_components/paper-styles/color.html">
  34 +<link rel="import" href="../../bower_components/paper-input/paper-input.html">
  35 +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
  36 +<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html">
  37 +<link rel="import" href="../../bower_components/neon-animation/neon-animatable.html">
  38 +<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
  39 +
  40 +<!--
  41 +`text-element-controllet` is a text area with heading. It fires an event when the text value is modified. This event can be useful when you have to monitor many af this elements.
  42 +
  43 +
  44 +Example:
  45 +
  46 + <text-element-controllet heading="myField"
  47 + description="myFieldDescription"
  48 + number="1">
  49 + </text-element-controllet>
  50 +
  51 +
  52 +@element text-element-controllet
  53 +@status beta
  54 +@homepage
  55 +@group controllets
  56 +-->
  57 +
  58 +
  59 +<dom-module id="search-panel-controllet">
  60 + <template>
  61 +
  62 + <style is="custom-style">
  63 +
  64 + paper-input.search-text{
  65 + --paper-input-container-input-color: #ffffff;
  66 + --paper-input-container-focus-color: #ffffff;
  67 + --paper-input-container-color: #ffffff;
  68 + position : absolute;
  69 + right: 5px;
  70 + top: -20px;
  71 +
  72 + }
  73 +
  74 + neon-animated-pages{
  75 + width: 30vw;
  76 + }
  77 +
  78 + </style>
  79 + <div class="horizontal layout">
  80 + <neon-animated-pages selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
  81 + <neon-animatable></neon-animatable>
  82 + <neon-animatable><paper-input class="search-text" label="search" autosave="search_text" results="5" transition="fade-in-animation"></paper-input></neon-animatable>
  83 + </neon-animated-pages>
  84 + <paper-icon-button icon="search" class="dropdown-trigger" on-click="_toggleClick"></paper-icon-button>
  85 + </div>
  86 +
  87 + </template>
  88 +
  89 + <script>
  90 +
  91 + Polymer({
  92 +
  93 + is: 'search-panel-controllet',
  94 +
  95 + /**
  96 + * Fired when the user change the text value
  97 + *
  98 + * @event search-panel-controllet_content-changed
  99 + */
  100 +
  101 + properties: {
  102 + timer :{
  103 + type: Number,
  104 + value : 0
  105 + },
  106 + selected : {
  107 + type: Number,
  108 + value : 0
  109 + },
  110 + entryAnimation : {
  111 + type: String,
  112 + value: ""
  113 + },
  114 + exitAnimation : {
  115 + type: String,
  116 + value: ""
  117 + }
  118 + },
  119 + _toggleClick: function(e){
  120 + if(this.selected == 0) {
  121 + this.entryAnimation = 'fade-in-animation';//'slide-from-right-animation';
  122 + this.exitAnimation = 'fade-out-animation';//'slide-left-animation';
  123 + this.selected = 1;
  124 + }else{
  125 + this.entryAnimation = 'fade-in-animation';//'slide-from-left-animation';
  126 + this.exitAnimation = 'fade-out-animation';//'slide-right-animation';
  127 + this.selected = 0;
  128 + }
  129 + },
  130 + /**
  131 + * Callback related to text change
  132 + *
  133 + * @method _valueChanged
  134 + *
  135 + * @param {Event} e
  136 + */
  137 + _valueChanged : function(oldvalue, newValue){
  138 + clearTimeout (this.timer);
  139 + this.timer = setTimeout(this.fire('text-element-controllet_content-changed', {newValue: newValue}), 2000);
  140 + },
  141 + /**
  142 + * It returns the value in text area
  143 + *
  144 + * @method getValue
  145 + */
  146 + getValue : function(){
  147 + return this.$.text.value;
  148 + }
  149 + });
  150 +
  151 + </script>
  152 +
  153 +</dom-module>
0 \ No newline at end of file 154 \ No newline at end of file