src/widgets/layout-box/js/layout-box.js

   1 /*
   2  * jQuery Mobile Widget @VERSION
   3  *
   4  * This software is licensed under the MIT licence (as defined by the OSI at
   5  * http://www.opensource.org/licenses/mit-license.php)
   6  *
   7  * ***************************************************************************
   8  * Copyright (C) 2011 by Intel Corporation Ltd.
   9  *
  10  * Permission is hereby granted, free of charge, to any person obtaining a
  11  * copy of this software and associated documentation files (the "Software"),
  12  * to deal in the Software without restriction, including without limitation
  13  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  14  * and/or sell copies of the Software, and to permit persons to whom the
  15  * Software is furnished to do so, subject to the following conditions:
  16  *
  17  * The above copyright notice and this permission notice shall be included in
  18  * all copies or substantial portions of the Software.
  19  *
  20  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  21  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  22  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  23  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  24  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  25  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  26  * DEALINGS IN THE SOFTWARE.
  27  * ***************************************************************************
  28  *
  29  * Authors: Elliot Smith <elliot.smith@intel.com>
  30  */
  31
  32 // Horizontal/vertical box layout extension.
  33 //
  34 // This will arrange the child elements of a container in a horizontal
  35 // or vertical row. This only makes sense if your container is a div
  36 // and contains children which are also divs; the children should
  37 // also have a height and width set in CSS, otherwise the layout
  38 // manager won't know what to do with them.
  39 //
  40 // Apply it by setting data-layout="hbox" or data-layout="vbox" (vertical
  41 // on a container element or calling $(element).layouthbox() or
  42 // $(element).layoutvbox().
  43 //
  44 // Usually, you would use a div as the container to get the right effect
  45 // (an element with display:block).
  46 //
  47 // Options can be set programmatically:
  48 //
  49 //   $(element).layouthbox('option', 'scrollable', false)
  50 //   $(element).layoutvbox('option', 'scrollable', false)
  51 //
  52 // or via a data-layout-options attribute on the container:
  53 //
  54 //   <div data-layout="hbox" data-layout-options='{"hgap":5}'>
  55 //       <div>child 1</div>
  56 //       <div>child 2</div>
  57 //   </div>
  58 //
  59 //   <div data-layout="vbox" data-layout-options='{"vgap":5}'>
  60 //       <div>child 1</div>
  61 //       <div>child 2</div>
  62 //   </div>
  63 //
  64 // If you change any options after creating the widget, call
  65 // $(element).layout*box('refresh') to have them picked up.
  66 // However, note that it's currently not feasible to turn off scrolling
  67 // once it's on (as calling scrollview('destroy') doesn't remove the
  68 // scrollview custom mouse handlers).
  69 //
  70 // There is one major difference between the horizontal and
  71 // vertical box layouts: if scrollable=false, the horizontal layout
  72 // will clip children which overflow the edge of the parent container;
  73 // by comparison, the vertical container will grow vertically to
  74 // accommodate the height of its children. This mirrors the behaviour
  75 // of jQuery Mobile, where elements only ever expand horizontally
  76 // to fill the width of the window; but will expand vertically forever,
  77 // unless the page height is artificially constrained.
  78 //
  79 // Options:
  80 //
  81 //   {Integer} hgap (default=0)
  82 //   Horizontal gap (in pixels) between the child elements. Only has
  83 //   an effect on hbox.
  84 //
  85 //   {Integer} vgap (default=0)
  86 //   Vertical gap (in pixels) between the child elements. Only has
  87 //   an effect on vbox.
  88 //
  89 //   {Boolean} scrollable (default=true; can only be set at create time)
  90 //   Set to true to enable a scrollview on the
  91 //   container. If false, children will be clipped if
  92 //   they fall outside the edges of the container after
  93 //   layouting.
  94 //
  95 //   {Boolean} showScrollBars (default=true)
  96 //   Set to false to hide scrollbars on the container's scrollview.
  97 //   Has no effect is scrollable=false
  98
  99 (function ( $, undefined ) {
 100
 101         // hbox
 102         $.widget( "tizen.layouthbox", $.tizen.jlayoutadaptor, {
 103                 fixed: {
 104                         type: 'flexGrid',
 105                         rows: 1,
 106                         direction: 'x',
 107                         initSelector: ':jqmData(layout="hbox")'
 108                 },
 109
 110                 _create: function () {
 111                         if ( !this.options.hgap ) {
 112                                 this.options.hgap = 0;
 113                         }
 114
 115                         $.tizen.jlayoutadaptor.prototype._create.apply( this, arguments );
 116                 }
 117         } );
 118
 119         $( document ).bind( "pagecreate", function ( e ) {
 120                 $( $.tizen.layouthbox.prototype.fixed.initSelector, e.target )
 121                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 122                         .layouthbox();
 123         } );
 124
 125         // vbox
 126         $.widget( "tizen.layoutvbox", $.tizen.jlayoutadaptor, {
 127                 fixed: {
 128                         type: 'flexGrid',
 129                         columns: 1,
 130                         direction: 'y',
 131                         initSelector: ':jqmData(layout="vbox")'
 132                 },
 133
 134                 _create: function () {
 135                         if ( !this.options.vgap ) {
 136                                 this.options.vgap = 0;
 137                         }
 138
 139                         $.tizen.jlayoutadaptor.prototype._create.apply( this, arguments );
 140                 }
 141         } );
 142
 143         $( document ).bind( "pagecreate", function ( e ) {
 144                 $( $.tizen.layoutvbox.prototype.fixed.initSelector, e.target )
 145                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 146                         .layoutvbox();
 147         } );
 148
 149 }( jQuery ) );