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-text1: top message.
  33  *  data-text2: bottom message.
  34  *  data-type: type of nocontents. You can set text, picture, multimedia and unnamed.
  35  *
  36  * APIs
  37  *
  38  *  N/A
  39  *
  40  * Events
  41  *
  42  *  N/A
  43  *
  44  * Examples
  45  *
  46  * Text Type
  47  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="text"></div>
  48  *
  49  * Picture Type
  50  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="picture"></div>
  51  *
  52  * Multimedia Type
  53  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="multimedia"></div>
  54  *
  55  * Unnamed Type
  56  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2"></div>
  57  * or
  58  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="unnamed"></div>
  59  *
  60  */
  61
  62 (function ( $, window, undefined ) {
  63         $.widget( "tizen.nocontents", $.mobile.widget, {
  64
  65                 max_height: 0,
  66                 container: null,
  67                 icon_img: null,
  68                 text0_bg: null,
  69                 text1_bg: null,
  70
  71                 _get_height: function () {
  72                         var $page = $('.ui-page'),
  73                                 $content = $page.children('.ui-content'),
  74                                 $header = $page.children('.ui-header'),
  75                                 $footer = $page.children('.ui-footer'),
  76                                 header_h = $header.outerHeight() || 0,
  77                                 footer_h = $footer.outerHeight() || 0,
  78                                 padding_t = parseFloat( $content.css('padding-top') ) || 0,
  79                                 padding_b = parseFloat( $content.css('padding-bottom') ) || 0,
  80                                 content_h = $(window).height() - header_h - footer_h -
  81                                         (padding_t + padding_b) * 2,
  82                                 container_h = this.container.height();
  83
  84                         return ( content_h < container_h ? container_h : content_h );
  85                 },
  86
  87                 _align: function () {
  88                         var content_height = this._get_height(),
  89                                 icon_height = this.icon_img.height(),
  90                                 icon_width = this.icon_img.width(),
  91                                 content_gap = 46,
  92                                 text0_height = this.text0_bg.height() || 0,
  93                                 text1_height = this.text1_bg.height() || 0,
  94                                 text_top = 0,
  95                                 icon_top = (content_height -
  96                                         (icon_height + content_gap +
  97                                          text0_height + text1_height)) / 2;
  98
  99                         if ( icon_top < content_gap ) {
 100                                 icon_top = content_gap;
 101                         }
 102
 103                         this.container.height( content_height );
 104
 105                         this.icon_img.css( 'left',
 106                                 ($(window).width() - icon_width) / 2 );
 107                         this.icon_img.css( 'top', icon_top );
 108
 109                         text_top = icon_top + icon_height + content_gap;
 110
 111                         this.text0_bg.css( 'top', text_top );
 112                         this.text1_bg.css( 'top', text_top + text0_height );
 113                 },
 114
 115                 _create: function () {
 116                         var icon_type = $( this.element ).jqmData('type'),
 117                                 text = new Array(2);
 118
 119                         if ( icon_type === undefined ||
 120                                         (icon_type !== "picture" &&
 121                                          icon_type !== "multimedia" &&
 122                                          icon_type !== "text") ) {
 123                                 icon_type = "unnamed";
 124                         }
 125
 126                         text[0] = $( this.element ).jqmData('text1');
 127                         text[1] = $( this.element ).jqmData('text2');
 128
 129                         if ( text[0] === undefined ) {
 130                                 text[0] = "";
 131                         }
 132
 133                         if ( text[1] === undefined ) {
 134                                 text[1] = "";
 135                         }
 136
 137                         this.container = $('<div class="ui-nocontents"/>');
 138                         this.icon_img = $('<div class="ui-nocontents-icon-' +
 139                                         icon_type + '"/>');
 140
 141                         this.text0_bg = $('<div class="ui-nocontents-text">' +
 142                                         text[0] + '<div>');
 143                         this.text1_bg = $('<div class="ui-nocontents-text">' +
 144                                         text[1] + '<div>');
 145
 146                         this.container.append( this.icon_img );
 147                         this.container.append( this.text0_bg );
 148                         this.container.append( this.text1_bg );
 149
 150                         $( this.element ).append( this.container );
 151
 152                         this._align();
 153                 }
 154         });
 155
 156         $( document ).bind( "pagecreate create", function ( e ) {
 157                 $( e.target ).find(":jqmData(role='nocontents')").nocontents();
 158         });
 159 } ( jQuery, this ));