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

   1 /*
   2         Author: Minkyu Kang <mk7.kang@samsung.com>
   3 */
   4
   5 /*
   6  * nocontents widget
   7  *
   8  * HTML Attributes
   9  *
  10  *  data-role: set to 'nocontents'.
  11  *  data-text1: top message.
  12  *  data-text2: bottom message.
  13  *  data-type: type of nocontents. You can set text, picture, multimedia and unnamed.
  14  *
  15  * APIs
  16  *
  17  *  N/A
  18  *
  19  * Events
  20  *
  21  *  N/A
  22  *
  23  * Examples
  24  *
  25  * Text Type
  26  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="text"></div>
  27  *
  28  * Picture Type
  29  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="picture"></div>
  30  *
  31  * Multimedia Type
  32  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="multimedia"></div>
  33  *
  34  * Unnamed Type
  35  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2"></div>
  36  * or
  37  * <div data-role="nocontents" id="nocontents" data-text1="Text1" data-text2="Text2" data-type="unnamed"></div>
  38  *
  39  */
  40
  41 (function ( $, window, undefined ) {
  42         $.widget( "tizen.nocontents", $.mobile.widget, {
  43
  44                 max_height: 0,
  45                 container: null,
  46                 icon_img: null,
  47                 text0_bg: null,
  48                 text1_bg: null,
  49
  50                 _get_height: function () {
  51                         var $page = $('.ui-page'),
  52                                 $content = $page.children('.ui-content'),
  53                                 $header = $page.children('.ui-header'),
  54                                 $footer = $page.children('.ui-footer'),
  55                                 content_h = 0,
  56                                 header_h = $header.outerHeight() || 0,
  57                                 footer_h = $footer.outerHeight() || 0,
  58                                 padding_t = parseFloat( $content.css('padding-top') ) || 0,
  59                                 padding_b = parseFloat( $content.css('padding-bottom') ) || 0;
  60
  61                         content_h = window.innerHeight - header_h - footer_h -
  62                                         (padding_t + padding_b) * 2;
  63
  64                         var container_h = this.container.height();
  65
  66                         return ( content_h < container_h ? container_h : content_h );
  67                 },
  68
  69                 _align: function () {
  70                         var content_height = this._get_height(),
  71                                 icon_height = this.icon_img.height(),
  72                                 icon_width = this.icon_img.width(),
  73                                 content_gap = 46,
  74                                 text0_height = this.text0_bg.height() || 0,
  75                                 text1_height = this.text1_bg.height() || 0,
  76                                 icon_top = (content_height -
  77                                         (icon_height + content_gap +
  78                                          text0_height + text1_height)) / 2;
  79
  80                         if ( icon_top < content_gap ) {
  81                                 icon_top = content_gap;
  82                         }
  83
  84                         this.container.height( content_height );
  85
  86                         this.icon_img.css( 'left',
  87                                 (window.innerWidth - icon_width) / 2 );
  88                         this.icon_img.css( 'top', icon_top );
  89
  90                         var text_top = icon_top + icon_height + content_gap;
  91
  92                         this.text0_bg.css( 'top', text_top );
  93                         this.text1_bg.css( 'top', text_top + text0_height );
  94                 },
  95
  96                 _create: function () {
  97                         var icon_type = $( this.element ).attr('data-type');
  98
  99                         if ( icon_type === undefined ||
 100                                 (icon_type !== "picture" &&
 101                                  icon_type !== "multimedia" &&
 102                                  icon_type !== "text") ) {
 103                                 icon_type = "unnamed";
 104                         }
 105
 106                         var text = new Array(2);
 107
 108                         text[0] = $( this.element ).attr('data-text1');
 109                         text[1] = $( this.element ).attr('data-text2');
 110
 111                         if ( text[0] === undefined ) {
 112                                 text[0] = "";
 113                         }
 114
 115                         if ( text[1] === undefined ) {
 116                                 text[1] = "";
 117                         }
 118
 119                         this.container = $('<div class="ui-nocontents"/>');
 120                         this.icon_img = $('<div class="ui-nocontents-icon-' +
 121                                         icon_type + '"/>');
 122
 123                         this.text0_bg = $('<div class="ui-nocontents-text">' +
 124                                         text[0] + '<div>');
 125                         this.text1_bg = $('<div class="ui-nocontents-text">' +
 126                                         text[1] + '<div>');
 127
 128                         this.container.append( this.icon_img );
 129                         this.container.append( this.text0_bg );
 130                         this.container.append( this.text1_bg );
 131
 132                         $( this.element ).append( this.container );
 133
 134                         this._align();
 135                 }
 136         });
 137
 138         $( document ).bind( "pagecreate create", function ( e ) {
 139                 $( e.target ).find(":jqmData(role='nocontents')").nocontents();
 140         });
 141 } ( jQuery, this ));