src/widgets/common/js/jquery.mobile.tizen.jlayoutadaptor.js

   1 /*
   2  *
   3  * This software is licensed under the MIT licence (as defined by the OSI at
   4  * http://www.opensource.org/licenses/mit-license.php)
   5  *
   6  * ***************************************************************************
   7  * Copyright (C) 2011 by Intel Corporation Ltd.
   8  *
   9  * Permission is hereby granted, free of charge, to any person obtaining a
  10  * copy of this software and associated documentation files (the "Software"),
  11  * to deal in the Software without restriction, including without limitation
  12  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  13  * and/or sell copies of the Software, and to permit persons to whom the
  14  * Software is furnished to do so, subject to the following conditions:
  15  *
  16  * The above copyright notice and this permission notice shall be included in
  17  * all copies or substantial portions of the Software.
  18  *
  19  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  20  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  21  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  22  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  23  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  24  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  25  * DEALINGS IN THE SOFTWARE.
  26  * ***************************************************************************
  27  */
  28
  29 // Wrapper round the jLayout functions to enable it to be used
  30 // for creating jQuery Mobile layout extensions.
  31 //
  32 // See the layouthbox and layoutvbox widgets for usage examples.
  33 (function ($, undefined) {
  34
  35 $.widget("tizen.jlayoutadaptor", $.mobile.widget, {
  36     options: {
  37         hgap: null,
  38         vgap: null,
  39         scrollable: true,
  40         showScrollBars: true,
  41         direction: null
  42     },
  43
  44     _create: function () {
  45         var self = this,
  46             options = this.element.data('layout-options'),
  47             page = $(this.element).closest(':jqmData(role="page")');
  48
  49         $.extend(this.options, options);
  50
  51         if (page && !page.is(':visible')) {
  52             this.element.hide();
  53
  54             page.bind('pageshow', function () {
  55                 self.refresh();
  56             });
  57         }
  58         else {
  59             this.refresh();
  60         }
  61     },
  62
  63     refresh: function () {
  64         var container;
  65         var config = $.extend(this.options, this.fixed);
  66
  67         if (config.scrollable) {
  68             if (!(this.element.children().is('.ui-scrollview-view'))) {
  69                 // create the scrollview
  70                 this.element.scrollview({direction: config.direction,
  71                                          showScrollBars: config.showScrollBars});
  72             }
  73             else if (config.showScrollBars) {
  74                 this.element.find('.ui-scrollbar').show();
  75             }
  76             else {
  77                 this.element.find('.ui-scrollbar').hide();
  78             }
  79
  80             container = this.element.find('.ui-scrollview-view');
  81         }
  82         else {
  83             container = this.element;
  84         }
  85
  86         container.layout(config);
  87
  88         this.element.show();
  89
  90         if (config.scrollable) {
  91             // get the right/bottom edge of the last child after layout
  92             var lastItem = container.children().last();
  93
  94             var edge;
  95
  96             var scrollview = this.element.find('.ui-scrollview-view');
  97
  98             if (config.direction === 'x') {
  99                 edge = lastItem.position().left +
 100                        lastItem.outerWidth(true);
 101
 102                 // set the scrollview's view width to the original width
 103                 scrollview.width(edge);
 104
 105                 // set the parent container's height to the height of
 106                 // the scrollview
 107                 this.element.height(scrollview.height());
 108             }
 109             else if (config.direction === 'y') {
 110                 edge = lastItem.position().top +
 111                        lastItem.outerHeight(true);
 112
 113                 // set the scrollview's view height to the original height
 114                 scrollview.height(edge);
 115
 116                 // set the parent container's width to the width of the
 117                 // scrollview
 118                 this.element.width(scrollview.width());
 119             }
 120         }
 121     }
 122 });
 123
 124 })(jQuery);