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. footer does not exist and addBackBtn is set to "footer"
  47                                 * 2. user define data-add-Back-Btn = "false"
  48                                 */
  49                         if ( status != "external" ) {
  50                                 if ( $elPage.data().page.options.addBackBtn == "none" || ( $elPage.data().page.options.addBackBtn == "footer" && $elPage.data().page.options.footerExist == false )  ) {
  51                                         return true;
  52                                 }
  53                         }
  54
  55                         attachElement = ( $elPage.data().page.options.addBackBtn === "header" ) ? $elHeader : $elFooter;
  56
  57                         backBtn = $( "<a href='#' class='ui-btn-back' data-" + $.mobile.ns + "rel='back'></a>" )
  58                                         .buttonMarkup( {icon: "header-back-btn", theme : "s"} );
  59
  60                         if ( status == "external" ) {
  61                                 if ( $el.is(".ui-page") ) {
  62                                         $elHeader = $el.find( ":jqmData(role='header')" );
  63                                         $elFooter = $el.find( ":jqmData(role='footer')" );
  64                                         attachElement = ( target === "header" ) ? $elHeader : $elFooter;
  65                                 } else {
  66                                         attachElement = $el;
  67                                 }
  68                                 if ( attachElement.find(".ui-btn-back").length == 0 ) {
  69                                         backBtn.prependTo( attachElement );
  70                                 }
  71                         }
  72
  73                         if ( $elPage.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) ) {
  74                                 if ( attachElement.find(".ui-btn-back").length == 0) {
  75                                         backBtn.prependTo( attachElement );
  76                                 }
  77                         }
  78
  79                                 /* jQM 1.1.0 does not need this code.
  80                                    navigation.js control whole back buttons. */
  81                                 /*
  82                                 backBtn.bind( "vclick", function( event ) {
  83                                         window.history.back();
  84                                 });
  85                                 */
  86                 },
  87
  88                 _disableSelection : function () {
  89                         var self = this,
  90                                 $el = self.element,
  91                                 $elHeader = $el.jqmData( "role" ) === "header" ? $el : $el.siblings( ":jqmData(role='header')" ),
  92                                 $elFooter = $el.jqmData( "role" ) === "footer" ? $el : $el.siblings( ":jqmData(role='footer')" );
  93
  94                         // disable selection
  95                         $.mobile.tizen.disableSelection( $elHeader );
  96                         $.mobile.tizen.disableSelection( $elFooter );
  97
  98                         // disable context menu
  99                         $.mobile.tizen.disableContextMenu( $elHeader );
 100                         $.mobile.tizen.disableContextMenu( $elFooter );
 101                 },
 102
 103                 addBackBtn : function ( target ) {
 104                         this._addBackbutton( target, "external" );
 105                 },
 106
 107
 108                 show: function () {
 109                         var self = $( this.element );
 110                         self.show();
 111                         self.siblings( ".ui-content" ).pagelayout( "updatePageLayout" );
 112                 },
 113
 114                 hide: function () {
 115                         var self = $( this.element );
 116                         self.hide();
 117                         self.siblings( ".ui-content" ).pagelayout( "updatePageLayout" );
 118                 },
 119
 120         });
 121         $( document ).bind("pagecreate", function ( e ) {
 122                 $.mobile.barlayout.prototype.enhanceWithin( e.target );
 123         });
 124 })( jQuery );