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

   1 ( function ( $, undefined ) {
   2
   3         $.widget( "mobile.barlayout", $.mobile.widget, {
   4                 options: {
   5                         addBackBtn: false ,
   6                         backBtnText: "Back",
   7                         initSelector: ":jqmData(role='header'), :jqmData(role='footer')"
   8                 },
   9                 _create: function () {
  10                         var self = this;
  11                         /* this call api will be moved to jquery.mobile.page.section.js patch */
  12                         /* call _generateFooter in header(just 1 time in first step) because to calculate another layout width footer/header */
  13                         /* skip below step to attach bind/addclass only 1 time */
  14                         self._generateFooter();
  15                         self._addBackbutton();
  16                         self._disableSelection();
  17                 },
  18
  19                 /* Make dummy footer
  20                 *  because minimum fixed bar needs to attach back button
  21                 *  check footer exist on current page, then check footer-Exist option check */
  22                 _generateFooter: function () {
  23                         var self = this,
  24                                 $el = self.element,
  25                                 $elPage = $el.closest( ".ui-page" ),
  26                                 dummyFooter;
  27
  28                         if ( $elPage.children(":jqmData(role='footer')").length == 0 && $elPage.data().page.options.footerExist != false ) {
  29                                 dummyFooter = $( "<div data-role='footer' class='ui-footer ui-bar-s ui-footer-fixed fade ui-fixed-overlay' data-position='fixed'></div>" )
  30                                         .insertAfter( $elPage.find( ".ui-content" ) );
  31                         }
  32                 },
  33
  34                 _addBackbutton: function ( target, status ) {
  35                         // need to add parameter target wherels this requert occurs header/footer
  36                         var self = this,
  37                                 $el = self.element,
  38                                 $elHeader = $el.jqmData( "role" ) === "header" ? $el : $el.siblings( ":jqmData(role='header')" ),
  39                                 $elFooter = $el.jqmData( "role" ) === "footer" ? $el : $el.siblings( ":jqmData(role='footer')" ),
  40                                 $elPage = $el.closest( ".ui-page" ),
  41                                 backBtn,
  42                                 attachElement = $elFooter,
  43                                 o = $elPage.data( "page" ).options;
  44
  45                                 /* Back button skip case :
  46                                 * 1. tabbar
  47                                 * 2. footer does not exist and addBackBtn is set to "footer"
  48                                 * 3. user define data-add-Back-Btn = "false"
  49                                 */
  50                         if ( status != "external" ) {
  51                                 if ( ( $elFooter.children( ":jqmData(role='controlbar')" ).jqmData( "style" ) == "tabbar" && $elPage.jqmData( "addBackBtn" ) != "header" )
  52                                                 || $elPage.data().page.options.addBackBtn == "none" || ( $elPage.data().page.options.addBackBtn == "footer" && $elPage.data().page.options.footerExist == false )  ) {
  53                                         return true;
  54                                 }
  55                         }
  56
  57                         attachElement = ( $elPage.data().page.options.addBackBtn === "header" ) ? $elHeader : $elFooter;
  58
  59                         backBtn = $( "<a href='#' class='ui-btn-back' data-" + $.mobile.ns + "rel='back'></a>" )
  60                                         .buttonMarkup( {icon: "header-back-btn", theme : "s"} );
  61
  62                         if ( status == "external" ) {
  63                                 if ( $el.is(".ui-page") ) {
  64                                         $elHeader = $el.find( ":jqmData(role='header')" );
  65                                         $elFooter = $el.find( ":jqmData(role='footer')" );
  66                                         attachElement = ( target === "header" ) ? $elHeader : $elFooter;
  67                                 } else {
  68                                         attachElement = $el;
  69                                 }
  70                                 if ( attachElement.find(".ui-btn-back").length == 0 ) {
  71                                         backBtn.prependTo( attachElement );
  72                                 }
  73                         }
  74
  75                         if ( $elPage.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) ) {
  76                                 if ( attachElement.find(".ui-btn-back").length == 0) {
  77                                         backBtn.prependTo( attachElement );
  78                                 }
  79                         }
  80
  81                                 /* jQM 1.1.0 does not need this code.
  82                                    navigation.js control whole back buttons. */
  83                                 /*
  84                                 backBtn.bind( "vclick", function( event ) {
  85                                         window.history.back();
  86                                 });
  87                                 */
  88                 },
  89
  90                 _disableSelection : function () {
  91                         var self = this,
  92                                 $el = self.element,
  93                                 $elHeader = $el.jqmData( "role" ) === "header" ? $el : $el.siblings( ":jqmData(role='header')" ),
  94                                 $elFooter = $el.jqmData( "role" ) === "footer" ? $el : $el.siblings( ":jqmData(role='footer')" );
  95
  96                         // disable selection
  97                         $.mobile.tizen.disableSelection( $elHeader );
  98                         $.mobile.tizen.disableSelection( $elFooter );
  99
 100                         // disable context menu
 101                         $.mobile.tizen.disableContextMenu( $elHeader );
 102                         $.mobile.tizen.disableContextMenu( $elFooter );
 103                 },
 104
 105                 addBackBtn : function ( target ) {
 106                         this._addBackbutton( target, "external" );
 107                 },
 108
 109
 110                 show: function () {
 111                         var self = $( this.element );
 112                         self.show();
 113                         self.siblings( ".ui-content" ).pagelayout( "updatePageLayout" );
 114                 },
 115
 116                 hide: function () {
 117                         var self = $( this.element );
 118                         self.hide();
 119                         self.siblings( ".ui-content" ).pagelayout( "updatePageLayout" );
 120                 },
 121
 122         });
 123         $( document ).bind("pagecreate", function ( e ) {
 124                 $.mobile.barlayout.prototype.enhanceWithin( e.target );
 125         });
 126 })( jQuery );