samples/web/Sample/Tizen/Web App/Modello_SDL/project/app/controlls/MenuList.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.MenuList
  29  * @desc
  30  * @category Controlls
  31  * @filesource app/controlls/MenuList.js
  32  * @version 1.0
  33  */
  34
  35 SDL.MenuList = Em.ContainerView.extend( {
  36
  37     /**
  38      * Add new item to container
  39      *
  40      * @param buttons: SoftButton[]
  41      */
  42     addItems: function( buttons, appId ) {
  43
  44         this.deleteItems();
  45
  46         if( buttons ){
  47             for( var i = 0; i < buttons.length; i++ ){
  48                 this.get( 'content.childViews' ).pushObject( SDL.Button.create( SDL.PresetEventsCustom, {
  49                     text: buttons[i].text,
  50                     icon: buttons[i].image,
  51                     softButtonId: buttons[i].softButtonID,
  52                     systemAction: buttons[i].systemAction,
  53                     groupName: this.groupName,
  54                     appId: appId
  55                 } ) );
  56             }
  57         }
  58     },
  59
  60     /**
  61      * Delete existing Soft Buttons from container
  62      */
  63     deleteItems: function() {
  64
  65         this.get( 'content.childViews' ).removeObjects( this.get( 'content.childViews' ).filterProperty( 'softButtonId' ) );
  66     },
  67
  68     classNames:
  69         [
  70             'ffw_list_menu'
  71         ],
  72
  73     attributeBindings:
  74         [
  75             'elementHeight:style'
  76         ],
  77
  78     // Position of current page
  79     page: 0,
  80
  81     // Items per one page
  82     itemsOnPage: 5,
  83
  84     // Height of one item
  85     ITEM_HEIGHT: 50,
  86
  87     pageHeight: function() {
  88         return this.itemsOnPage * this.ITEM_HEIGHT;
  89     }.property( 'this.itemsOnPage' ),
  90
  91     elementHeight: function() {
  92         return 'height:' + String( this.get( 'pageHeight' ) + this.ITEM_HEIGHT - 2 ) + 'px;';
  93     }.property( 'this.pageHeight' ),
  94
  95     // Position of content block
  96     contentPositon: function() {
  97         return 'top:' + String( -( this.get( 'page' ) * this.get( 'pageHeight' ) ) ) + 'px; height:'
  98                         + String( this.get( 'pageHeight' ) - ( Boolean( this.get( 'onLastPage' ) && this.get( 'page' ) ) * this.ITEM_HEIGHT ) ) + 'px;';
  99     }.property( 'onLastPage' ),
 100
 101     // Property for show or hide 'down' button
 102     onLastPage: function() {
 103         return( ( this.get( 'page' ) * this.itemsOnPage ) < ( this.get( 'content.childViews.length' ) - this.itemsOnPage ) );
 104     }.property( 'page', 'content.childViews.length' ),
 105
 106     // Handeler to go previous page
 107     pageUp: function() {
 108         if( this.get( 'page' ) ){
 109             this.set( 'page', ( this.get( 'page' ) - 1 ) );
 110         }
 111     },
 112
 113     // Handeler to go next page
 114     pageDown: function() {
 115         if( this.get( 'onLastPage' ) ){
 116             this.set( 'page', ( this.get( 'page' ) + 1 ) );
 117         }
 118     },
 119
 120     childViews:
 121         [
 122             'upButton',
 123             'content',
 124             'downButton'
 125         ],
 126
 127     upButton: SDL.Button.extend( {
 128
 129         classNames:
 130             [
 131                 'control',
 132                 'up_button'
 133             ],
 134
 135         hidden: function() {
 136             if( this.get( 'parentView.page' ) ){
 137                 return false;
 138             }else{
 139                 return true;
 140             }
 141         }.property( 'parentView.page' ),
 142
 143         templateName: 'icon',
 144
 145         icon: 'images/media/ico_arrow_up.png',
 146
 147         action: 'pageUp',
 148
 149         target: 'parentView'
 150     } ),
 151
 152     downButton: SDL.Button.extend( {
 153
 154         classNames:
 155             [
 156                 'control',
 157                 'down_button'
 158             ],
 159
 160         hidden: function() {
 161             if( this.get( 'parentView.onLastPage' ) ){
 162                 return false;
 163             }else{
 164                 return true;
 165             }
 166         }.property( 'parentView.onLastPage' ),
 167
 168         templateName: 'icon',
 169
 170         icon: 'images/media/ico_arrow_down.png',
 171
 172         action: 'pageDown',
 173
 174         target: 'parentView'
 175     } ),
 176
 177     content: Em.ContainerView.extend( {
 178
 179         classNames:
 180             [
 181                 'content'
 182             ],
 183
 184         attributeBindings:
 185             [
 186                 'parentView.contentPositon:style'
 187             ]
 188     } )
 189 } );