src/widgets/nocontents/js/jquery.mobile.tizen.nocontents.js

   1 /* ***************************************************************************
   2  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   3  *
   4  * Permission is hereby granted, free of charge, to any person obtaining a
   5  * copy of this software and associated documentation files (the "Software"),
   6  * to deal in the Software without restriction, including without limitation
   7  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   8  * and/or sell copies of the Software, and to permit persons to whom the
   9  * Software is furnished to do so, subject to the following conditions:
  10  *
  11  * The above copyright notice and this permission notice shall be included in
  12  * all copies or substantial portions of the Software.
  13  *
  14  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  19  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  20  * DEALINGS IN THE SOFTWARE.
  21  * ***************************************************************************
  22  *
  23  *      Author: Minkyu Kang <mk7.kang@samsung.com>
  24  */
  25
  26 /*
  27  * nocontents widget
  28  *
  29  * HTML Attributes
  30  *
  31  *  data-role: set to 'nocontents'.
  32  *  data-type: type of nocontents. You can set text, picture, multimedia and unnamed.
  33  *
  34  *  Deprecated in Tizen 2.0 beta : data-text1, data-text2
  35  *
  36  * APIs
  37  *
  38  *  N/A
  39  *
  40  * Events
  41  *
  42  *  N/A
  43  *
  44  * Examples
  45  *
  46  * Default
  47  * <div data-role="nocontents" id="nocontents">
  48  *              <p> Unnamed Type </p>
  49  *              <p> Text </p>
  50  * </div>
  51  *
  52  *
  53  * Text Type
  54  * <div data-role="nocontents" id="nocontents" data-type="text"></div>
  55  *
  56  * Picture Type
  57  * <div data-role="nocontents" id="nocontents" data-type="picture"></div>
  58  *
  59  * Multimedia Type
  60  * <div data-role="nocontents" id="nocontents" data-type="multimedia"></div>
  61  *
  62  * Unnamed Type
  63  * <div data-role="nocontents" id="nocontents"></div>
  64  * or
  65  * <div data-role="nocontents" id="nocontents" data-type="unnamed"></div>
  66  *
  67  */
  68
  69 (function ( $, window, undefined ) {
  70         $.widget( "tizen.nocontents", $.mobile.widget, {
  71                 max_height: 0,
  72                 icon_img: null,
  73                 text_bg: null,
  74
  75                 _get_height: function () {
  76                         var $page = $('.ui-page'),
  77                                 $content = $page.children('.ui-content'),
  78                                 $header = $page.children('.ui-header'),
  79                                 $footer = $page.children('.ui-footer'),
  80                                 $view = $content.children('.ui-scrollview-view'),
  81                                 header_h = $header.outerHeight() || 0,
  82                                 footer_h = $footer.outerHeight() || 0,
  83                                 padding_t = (parseFloat( $content.css('padding-top') ) || 0) +
  84                                                 (parseFloat( $view.css('padding-top') ) || 0),
  85                                 padding_b = (parseFloat( $content.css('padding-bottom') ) || 0) +
  86                                                 (parseFloat( $view.css('padding-bottom') ) || 0),
  87                                 content_h = $( window ).height() - header_h - footer_h -
  88                                         (padding_t + padding_b);
  89
  90                         return content_h;
  91                 },
  92
  93                 _align: function () {
  94                         var content_height = this._get_height(),
  95                                 icon_height = this.icon_img.height(),
  96                                 icon_width = this.icon_img.width(),
  97                                 text_height = 0,
  98                                 content_gap = 0,
  99                                 text_top = 0,
 100                                 icon_top = 0,
 101                                 i;
 102
 103                         if ( this.text_bg.length ) {
 104                                 text_height = $( this.text_bg[0] ).height() * this.text_bg.length;
 105                                 content_gap = $( this.text_bg[0] ).height();
 106                         }
 107
 108                         icon_top = ( content_height - ( icon_height + content_gap + text_height ) ) / 2;
 109
 110                         if ( icon_top < content_gap ) {
 111                                 icon_top = content_gap;
 112                         }
 113
 114                         this.icon_img.css( 'left',
 115                                 ( $( window ).width() - icon_width ) / 2 );
 116                         this.icon_img.css( 'top', icon_top );
 117
 118                         text_top = icon_top + icon_height + content_gap;
 119
 120                         for ( i = 0; i < this.text_bg.length; i++ ) {
 121                                 $( this.text_bg[i] ).css( 'top', text_top );
 122                                 text_top += $( this.text_bg[i] ).height();
 123                         }
 124                 },
 125
 126                 _create: function () {
 127                         var elem = this.element,
 128                                 icon_type = $( this.element ).jqmData('type');
 129
 130                         switch ( icon_type ) {
 131                         case "picture":
 132                         case "multimedia":
 133                         case "text":
 134                                 break;
 135                         default:
 136                                 icon_type = "unnamed";
 137                                 break;
 138                         }
 139
 140                         $( elem ).addClass( "ui-nocontents" );
 141                         this.icon_img = $('<div class="ui-nocontents-icon-' +
 142                                         icon_type + '">');
 143
 144                         this.text_bg = $( elem ).find("p").addClass("ui-nocontents-text");
 145
 146                         $( elem ).prepend( this.icon_img );
 147
 148                         this._align();
 149
 150                         $( window ).bind( 'resize', function () {
 151                                 $( elem ).nocontents( 'refresh' );
 152                         });
 153                 },
 154
 155                 refresh: function () {
 156                         this._align();
 157                 }
 158         });
 159
 160         $( document ).bind( "pagecreate create", function ( e ) {
 161                 $( e.target ).find(":jqmData(role='nocontents')").nocontents();
 162         });
 163 }( jQuery, this ));