samples/web/Sample/Tizen/Web App/Modello_SDL/project/app/controlls/Button.js

   1 /*
   2  * Copyright (c) 2013, Ford Motor Company All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are met:
   6  *  · Redistributions of source code must retain the above copyright notice,
   7  * this list of conditions and the following disclaimer.
   8  *  · Redistributions in binary form must reproduce the above copyright notice,
   9  * this list of conditions and the following disclaimer in the documentation
  10  * and/or other materials provided with the distribution.
  11  *  · Neither the name of the Ford Motor Company nor the names of its
  12  * contributors may be used to endorse or promote products derived from this
  13  * software without specific prior written permission.
  14  *
  15  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  16  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  17  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
  18  * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
  19  * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
  20  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
  21  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
  22  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
  23  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
  24  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
  25  * POSSIBILITY OF SUCH DAMAGE.
  26  */
  27 /**
  28  * @name SDL.Button
  29  * @desc Universal button component for SDL application
  30  * @category Controlls
  31  * @filesource app/controlls/Button.js
  32  * @version 1.0
  33  */
  34
  35 SDL.Button = Em.View.extend( Ember.TargetActionSupport, {
  36     classNames:
  37         [
  38             'ffw-button',
  39             'notpressed'
  40         ],
  41
  42     classNameBindings:
  43         [
  44             'pressed',
  45             'disabled',
  46             'hidden'
  47         ],
  48
  49     /** Pressed state binding */
  50     pressed: false,
  51
  52     /** Disable actions on button */
  53     disabled: false,
  54
  55     /** Button icon class */
  56     icon: null,
  57
  58     /** Button text */
  59     text: null,
  60
  61     rightText: null,
  62
  63     target: this.target ? this.target : this,
  64
  65     /** Arrow icon */
  66     arrow: false,
  67
  68     /** Button timer flag */
  69     timer: 0,
  70
  71     timerId: null,
  72     /** Touch leave event flag */
  73     touchleave: false,
  74
  75     onDown: true,
  76
  77     helpMode: false,
  78     /**  */
  79     targetElement: null,
  80
  81     actionDown: function( event ) {
  82         if( this.get( 'disabled' ) ){
  83             return;
  84         }
  85
  86         var self = this;
  87
  88         this.set( 'pressed', true );
  89         /** Set Mouse Leave Event Flag to false */
  90         this.set( 'mouseleave', false );
  91
  92
  93         // Default trigger action
  94         if( this.onDown ){
  95             this.triggerAction();
  96         }
  97
  98         // Call trigger with timeout
  99         if( this.timer ){
 100             this.timerId = setInterval( function() {
 101                 self.triggerAction();
 102             }, this.timer );
 103         }
 104     },
 105
 106     actionUp: function( event ) {
 107         this.set( 'pressed', false );
 108
 109         if( this.timer ){
 110             clearInterval( this.timerId );
 111         }
 112
 113         if( this.get( 'disabled' ) ){
 114             if( this.touchleave == true ){
 115                 this.set( 'touchleave', false );
 116             }
 117             return;
 118         }
 119
 120         if( !this.onDown ){
 121             this.triggerAction();
 122         }
 123     },
 124
 125     /** Only for desktop */
 126     mouseLeave: function( event ) {
 127         this.set( 'pressed', false );
 128
 129         if( this.timer ){
 130             clearInterval( this.timerId );
 131         }
 132     },
 133
 134     /**
 135      * Only for IOS Simulation of mouseleave event for touch
 136      * devices If target element looses focus during touch move
 137      * event events dont trigger
 138      */
 139     touchMove: function( event ) {
 140         /** Set Mouse Leave Event Flag to true */
 141         this.set( 'touchleave', this.targetElement !== document.elementFromPoint( event.originalEvent.touches[0].pageX, event.originalEvent.touches[0].pageY ) );
 142     },
 143
 144     // component default template
 145     defaultTemplate: Em.Handlebars.compile( '<img class="ico" {{bindAttr src="view.icon"}} />' + '<span>{{view.text}}</span>' ),
 146
 147     templates: {
 148         text: Em.Handlebars.compile( '<span>{{view.text}}</span>' ),
 149
 150         icon: Em.Handlebars.compile( '<img class="ico" {{bindAttr src="view.icon"}} />' ),
 151
 152         rightText: Em.Handlebars.compile( '<img class="ico" {{bindAttr src="view.icon"}} />' + '<span>{{view.text}}</span>'
 153                         + '<span class="right_text">{{view.rightText}}</span>' ),
 154
 155         arrow: Em.Handlebars.compile( '<img class="ico" {{bindAttr src="view.icon"}} />' + '<span>{{view.text}}</span>'
 156                         + '<img class="arrow-ico" src="images/common/arrow_ico.png" />' ),
 157
 158         rightIcon: Em.Handlebars.compile( '<img class="ico" {{bindAttr src="view.icon"}} />' + '<span>{{view.text}}</span>'
 159                         + '<img class="right_ico" {{bindAttr src="view.righticon"}} />' )
 160     }
 161 } );