samples/web/Sample/Tizen/Web App/Modello_SDL/project/app/controlls/ScrollBar.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.ScrollBar
  29  * @desc ScrollBar component for List component
  30  * @category Controlls
  31  * @filesource app/controlls/ScrollBar.js
  32  * @version 1.0
  33  */
  34
  35 SDL.ScrollBar = Em.ContainerView.extend( {
  36
  37     /** Define enable/disable scrollbar */
  38     classNameBindings:
  39         [
  40             'scrollBarIsDisabled:is-disabled'
  41         ],
  42
  43     /** Componet class */
  44     classNames: 'scrollbar',
  45
  46     /** Childs views */
  47     childViews:
  48         [
  49             'upButton',
  50             'bar',
  51             'downButton'
  52         ],
  53
  54     /** current page */
  55     currentPage: 1,
  56
  57     /** Pages count */
  58     pageCount: 0,
  59
  60     listHeight: 250,
  61
  62     /** On/OF scrollbar */
  63     scrollBarIsDisabled: false,
  64
  65     /** Define bar height */
  66     sbHeight: function() {
  67         /** Max bar height */
  68         this.maxHeight = this.listHeight - 102;
  69         if( this.pageCount <= 1 ){
  70             return this.maxHeight + 1;
  71         }else{
  72             return( this.maxHeight / this.pageCount );
  73         }
  74     }.property( 'pageCount' ),
  75
  76     /** Position of bar */
  77     sbTop: function() {
  78         if( this.get( 'currentPage' ) == 0 ){
  79             return 0;
  80         }else{
  81             return ( this.maxHeight - this.get( 'sbHeight' ) ) / ( this.get( 'pageCount' ) - 1 ) * this.get( 'currentPage' ) + 1;
  82         }
  83     }.property( 'currentPage', 'pageCount' ),
  84
  85     /** Support function */
  86     scrollbarBodyStyleAttributes: function() {
  87         return 'height: ' + ( this.get( 'listHeight' ) - 1 ) + 'px;';
  88     }.property( 'listHeight' ),
  89
  90     /** Support function */
  91     sbBodyStyleAttributes: function() {
  92         return 'height: ' + ( this.get( 'listHeight' ) - 100 - 1 ) + 'px;';
  93     }.property( 'listHeight' ),
  94
  95     sbStyleAttributes: function() {
  96         return 'height: ' + this.get( 'sbHeight' ) + 'px; ' + 'top: ' + this.get( 'sbTop' ) + 'px';
  97     }.property( 'currentPage', 'pageCount' ),
  98
  99     /** Define scroll up button "disable" status */
 100     sbUpButtonIsDisabled: function() {
 101         if( this.get( 'currentPage' ) < 1 ){
 102             return true;
 103         }else{
 104             return false;
 105         }
 106     }.property( 'currentPage', 'pageCount' ),
 107
 108     /** Define scroll down button "disable" status */
 109     sbDownButtonIsDisabled: function() {
 110         if( ( this.pageCount - 1 ) > this.get( 'currentPage' ) ){
 111             return false;
 112         }else{
 113             return true;
 114         }
 115     }.property( 'currentPage', 'pageCount' ),
 116
 117     attributeBindings:
 118         [
 119             'scrollbarBodyStyleAttributes:style'
 120         ],
 121
 122     /** Bottom for scroll up */
 123     upButton: SDL.Button.extend( {
 124         classNames:
 125             [
 126                 'sb-top',
 127                 'button'
 128             ],
 129         action: 'sbUp',
 130         target: 'parentView.parentView',
 131         disabledBinding: 'parentView.sbUpButtonIsDisabled',
 132         icon: 'images/list/scrollbar/button-up-active.png',
 133         timer: 200
 134     } ),
 135
 136     /** Bottom for scroll down */
 137     downButton: SDL.Button.extend( {
 138         classNames:
 139             [
 140                 'sb-bottom',
 141                 'button'
 142             ],
 143         action: 'sbDown',
 144         target: 'parentView.parentView',
 145         disabledBinding: 'parentView.sbDownButtonIsDisabled',
 146         icon: 'images/list/scrollbar/button-down-active.png',
 147         timer: 200
 148     } ),
 149
 150     /** Scrollbar track */
 151     bar: Em.View.extend( {
 152         barBodyStyleBinding: 'parentView.sbBodyStyleAttributes',
 153         barStyleBinding: 'parentView.sbStyleAttributes',
 154         cancelAnimationBinding: 'parentView.parentView.cancelAnimation',
 155
 156         layout: Em.Handlebars.compile( '<div class="sb-body" {{bindAttr style="view.barBodyStyle"}}>' + '{{yield}}' + '</div>' ),
 157
 158         template: Em.Handlebars
 159                         .compile( '<div class="sb-bar" ' + '{{bindAttr style="view.barStyle"}}' + '{{bindAttr class="view.cancelAnimation:cancelBarAnimation"}}>' + '</div>' )
 160     } )
 161 } );