src/widgets/pagelist/js/jquery.mobile.tizen.pagelist.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 // pagelist widget
  30 //
  31 // Given an element, this widget collects all links contained in the descendants of the element and constructs
  32 // a popupwindow widget containing numbered buttons for each encountered link.
  33 //
  34 // You can mark any one element in your document with "data-pagelist='true'" and a pagelist will be created that
  35 // will allow the user to navigate between the pages linked to within the element.
  36 //
  37 // Currently, only one pagelist can exist in a document and, once created, it cannot be modified.
  38
  39 (function ( $, undefined ) {
  40
  41         window.ensureNS( "jQuery.mobile.tizen" );
  42
  43         $.widget( "tizen.pagelist", $.tizen.widgetex, {
  44                 _htmlProto: {
  45                         ui: {
  46                                 pageList: "#pagelist",
  47                                 button:   "#pagelist-button",
  48                                 rowBreak: "#pagelist-rowbreak"
  49                         }
  50                 },
  51                 _create: function () {
  52                         var self = this,
  53                                 popPageList = false,
  54                                 idx = 0;
  55
  56                         this._ui.button.remove();
  57                         this._ui.rowBreak.remove();
  58                         this._ui.pageList
  59                                 .appendTo( $( "body" ) )
  60                                 .popupwindow()
  61                                 .bind( "vclick", function ( e ) {
  62                                         $( this ).popupwindow( "close" );
  63                                 } );
  64
  65                         this.element.find( "a[href]" ).each( function ( elemIdx, elem ) {
  66                                 if ( idx > 0 && ( ( idx % 10 ) != 0 ) ) {
  67                                         self._ui.pageList.append( self._ui.rowBreak.clone() );
  68                                 }
  69
  70                                 self._ui.button
  71                                         .clone()
  72                                         .attr( "href", $( elem ).attr( "href" ) )
  73                                         .text( ++idx )
  74                                         .appendTo( self._ui.pageList )
  75                                         .buttonMarkup()
  76                                         .bind( "vclick", function () { self._ui.pageList.popupwindow( "close" ); } )
  77                                         .find( ".ui-btn-inner" )
  78                                         .css( { padding: 2 } );
  79                         } );
  80
  81                         $( document ).bind( "keydown", function ( e ) {
  82                                 popPageList = ( e.keyCode === $.mobile.keyCode.CONTROL );
  83                         } );
  84                         $( document ).bind( "keyup", function ( e ) {
  85                                 if ( e.keyCode === $.mobile.keyCode.CONTROL && popPageList ) {
  86                                         var maxDim = { cx: 0, cy: 0 };
  87                                         self._ui.pageList.popupwindow( "open", undefined, 0 );
  88                                         self._ui.pageList.find( "a" )
  89                                                 .each( function () {
  90                                                         var btn = $( this ),
  91                                                                 dim = {
  92                                                                         cx: btn.outerWidth( true ),
  93                                                                         cy: btn.outerHeight( true )
  94                                                                 };
  95
  96                                                         // Make sure things will be even later, because padding cannot have decimals - apparently :-S
  97                                                         if ( dim.cx % 2 ) {
  98                                                                 btn.css( "padding-left", parseInt( btn.css( "padding-left" ), 10 ) + 1 );
  99                                                         }
 100                                                         if ( dim.cy % 2 ) {
 101                                                                 btn.css( "padding-bottom", parseInt( btn.css( "padding-bottom" ), 10 ) + 1 );
 102                                                         }
 103
 104                                                         maxDim.cx = Math.max( maxDim.cx, dim.cx );
 105                                                         maxDim.cy = Math.max( maxDim.cy, dim.cy );
 106                                                 } )
 107                                                 .each( function () {
 108                                                         var padding = {
 109                                                                         h: Math.max( 0, ( maxDim.cx - $( this ).outerWidth( true ) ) / 2 ),
 110                                                                         v: Math.max( 0, ( maxDim.cy - $( this ).outerHeight( true ) ) / 2 )
 111                                                                 },
 112                                                                 btn = $( this ),
 113                                                                 inner = btn.find( ".ui-btn-inner" );
 114
 115                                                         inner.css( {
 116                                                                 "padding-left"          : parseInt( inner.css( "padding-left" ), 10 ) + padding.h,
 117                                                                 "padding-top"           : parseInt( inner.css( "padding-top" ), 10 ) + padding.v,
 118                                                                 "padding-right"         : parseInt( inner.css( "padding-right" ), 10 ) + padding.h,
 119                                                                 "padding-bottom"        : parseInt( inner.css( "padding-bottom" ), 10 ) + padding.v
 120                                                         } );
 121                                                         btn[( ( btn.attr( "href" ) === "#" + $.mobile.activePage.attr( "id" ) ) ? "addClass" : "removeClass" )]( "ui-btn-active" );
 122                                                 } );
 123                                         e.stopPropagation();
 124                                         e.preventDefault();
 125                                 }
 126                                 popPageList = false;
 127                         } );
 128                 }
 129         } );
 130
 131         // Look for an element marked as a pagelist and assign $.mobile.tizen.pagelist with a newly created pagelist.
 132         // If $.mobile.tizen.pagelist is already assigned, ignore any new "data-pagelist='true'" designations.
 133         $( document ).bind( "pagecreate create", function ( e ) {
 134                 $( ":jqmData(pagelist='true')", e.target )
 135                         .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 136                         .each( function () {
 137                                 if ( $.mobile.tizen.pagelist === undefined ) {
 138                                         $.extend( $.mobile.tizen, {
 139                                                 pagelist: $( this ).pagelist()
 140                                         } );
 141                                 }
 142                                 return false;
 143                         } );
 144         } );
 145
 146 }( jQuery ) );