Export 0.1.61
[platform/framework/web/web-ui-fw.git] / 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-active'),
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                         $content.height( content_h );
91
92                         return content_h;
93                 },
94
95                 _align: function () {
96                         var content_height = this._get_height(),
97                                 icon_height = this.icon_img.height(),
98                                 text_height = 0,
99                                 content_gap = 0,
100                                 text_top = 0,
101                                 icon_top = 0,
102                                 i;
103
104                         if ( this.text_bg.length ) {
105                                 text_height = $( this.text_bg[0] ).height() * this.text_bg.length;
106                                 content_gap = $( this.text_bg[0] ).height();
107                         }
108
109                         icon_top = ( content_height - ( icon_height + content_gap + text_height ) ) / 2;
110
111                         if ( icon_top < content_gap ) {
112                                 icon_top = content_gap;
113                         }
114
115                         this.icon_img.css( 'top', icon_top );
116
117                         text_top = icon_top + icon_height + content_gap;
118
119                         for ( i = 0; i < this.text_bg.length; i++ ) {
120                                 $( this.text_bg[i] ).css( 'top', text_top );
121                                 text_top += $( this.text_bg[i] ).height();
122                         }
123                 },
124
125                 _create: function () {
126                         var elem = this.element,
127                                 icon_type = $( this.element ).jqmData('type');
128
129                         switch ( icon_type ) {
130                         case "picture":
131                         case "multimedia":
132                         case "text":
133                                 break;
134                         default:
135                                 icon_type = "unnamed";
136                                 break;
137                         }
138
139                         $( elem ).addClass( "ui-nocontents" );
140                         this.icon_img = $('<div class="ui-nocontents-icon-' +
141                                         icon_type + '">');
142
143                         this.text_bg = $( elem ).find("p").addClass("ui-nocontents-text");
144
145                         $( elem ).prepend( this.icon_img );
146
147                         this._align();
148
149                         $( window ).bind( 'resize', function () {
150                                 $( elem ).nocontents( 'refresh' );
151                         });
152                 },
153
154                 refresh: function () {
155                         this._align();
156                 }
157         });
158
159         $( document ).bind( "pagecreate create", function ( e ) {
160                 $( e.target ).find(":jqmData(role='nocontents')").nocontents();
161         });
162 }( jQuery, this ));