<!DOCTYPE html>
<html>
<div data-role="page" class="type-interior" data-add-back-btn="true">
+ <style type="text/css">
+ label.ui-input-text {
+ width: 20%
+ }
+ </style>
<div data-role="header" >
<h1>Entry</h1>
</div><!-- /header -->
</div>
<div class="content" data-role="content">
<ul data-role="listview" data-icon="1line-textonly">
- <li><a href="#center_info" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center info popup</a></li>
- <li><a href="#center_title" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center title popup</a></li>
- <li><a href="#center_basic_1btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center basic 1 button popup</a></li>
- <li><a href="#center_basic_2btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center basic 2 button popup</a></li>
- <li><a href="#center_basic_3btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center basic 3 button popup</a></li>
- <li><a href="#center_title_1btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center title 1 button popup</a></li>
- <li><a href="#center_title_2btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center title 2 button popup</a></li>
- <li><a href="#center_title_3btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center title 3 button popup</a></li>
- <li><a href="#center_button_vertical" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_button vertical</a></li>
- <li><a href="#center_checkbox" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_checkbox</a></li>
- <li><a href="#center_liststyle_1btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_list style 1 button popup</a></li>
- <li><a href="#center_liststyle_2btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_list style 2 button popup</a></li>
- <li><a href="#center_liststyle_3btn" data-inline="true" data-rel="popupwindow" aria-haspopup="true">Center_list style 3 button popup</a></li>
+ <li><a href="#center_info" data-inline="true" data-rel="popup" data-position-to="window">Center info popup</a></li>
+ <li><a href="#center_title" data-inline="true" data-rel="popup" data-position-to="window">Center title popup</a></li>
+ <li><a href="#center_basic_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center basic 1 button popup</a></li>
+ <li><a href="#center_basic_2btn" data-inline="true" data-rel="popup" data-position-to="window">Center basic 2 button popup</a></li>
+ <li><a href="#center_basic_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center basic 3 button popup</a></li>
+ <li><a href="#center_title_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center title 1 button popup</a></li>
+ <li><a href="#center_title_2btn" data-inline="true" data-rel="popup" data-position-to="window">Center title 2 button popup</a></li>
+ <li><a href="#center_title_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center title 3 button popup</a></li>
+ <li><a href="#center_button_vertical" data-inline="true" data-rel="popup" data-position-to="window">Center_button vertical</a></li>
+ <li><a href="#center_checkbox" data-inline="true" data-rel="popup" data-position-to="window">Center_checkbox</a></li>
+ <li><a href="#center_liststyle_1btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 1 button popup</a></li>
+ <li><a href="#center_liststyle_2btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 2 button popup</a></li>
+ <li><a href="#center_liststyle_3btn" data-inline="true" data-rel="popup" data-position-to="window">Center_list style 3 button popup</a></li>
</ul>
<!-- text only -->
- <div id="center_info" data-role="popupwindow" data-style="center_info">
- <div
data-role="text"> <p>
+ <div id="center_info" data-role="popup" class="center_info">
+ <div
class="ui-popup-text"> <p>
Pop-up dialog box, a child
window that blocks user inter-
act to the parent windows
</div>
<!-- popup title-text -->
- <div id="center_title" data-role="popupwindow" data-style="center_title">
- <p data-role="title">
+ <div id="center_title" data-role="popup" class="center_title">
+ <p class="ui-popup-title">
Popup title
</p>
- <p data-role="text">
+ <p class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
</div>
<!-- popup basic+text+1button -->
- <div id="center_basic_1btn" data-role="popupwindow" data-style="center_basic_1btn">
- <p data-role="text">
+ <div id="center_basic_1btn" data-role="popup" class="center_basic_1btn">
+ <p class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
</p>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Text Button" />
</div>
</div>
<!-- popup basic+text+2button -->
- <div id="center_basic_2btn" data-role="popupwindow" data-style="center_basic_2btn">
- <p data-role="text">
+ <div id="center_basic_2btn" data-role="popup" class="center_basic_2btn">
+ <p class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
</p>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Text Button" />
<input type="button" value="Text Button" />
</div>
</div>
<!-- popup basic+text+3button -->
- <div id="center_basic_3btn" data-role="popupwindow" data-style="center_basic_3btn">
- <p data-role="text">
+ <div id="center_basic_3btn" data-role="popup" class="center_basic_3btn">
+ <p class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
</p>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Button1" />
<input type="button" value="Button2" />
<input type="button" value="Button3" />
</div>
<!-- popup title+text+1button -->
- <div id="center_title_1btn" data-role="popupwindow" data-style="center_title_1btn">
- <p data-role="title">
+ <div id="center_title_1btn" data-role="popup" class="center_title_1btn">
+ <p class="ui-popup-title">
Popup title
</p>
- <p data-role="text">
+ <p class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
</p>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Text Button" />
</div>
</div>
<!-- popup title+text+2button -->
- <div id="center_title_2btn" data-role="popupwindow" data-style="center_title_2btn">
- <p data-role="title">
+ <div id="center_title_2btn" data-role="popup" class="center_title_2btn">
+ <p class="ui-popup-title">
Popup title
</p>
- <p data-role="text">
+ <p class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
</p>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Text Button" />
<input type="button" value="Text Button" />
</div>
</div>
<!-- popup title+text+3button -->
- <div id="center_title_3btn" data-role="popupwindow" data-style="center_title_3btn">
- <p data-role="title">
+ <div id="center_title_3btn" data-role="popup" class="center_title_3btn">
+ <p class="ui-popup-title">
Popup title
</p>
- <p data-role="text">
+ <p class="ui-popup-text">
Pop-up dialog box, a child
window that blocks user interact
to the parent windows
</p>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Button1" />
<input type="button" value="Button2" />
<input type="button" value="Button3" />
</div>
<!-- popup center_button_vertical -->
- <div id="center_button_vertical" data-role="popupwindow" data-style="center_button_vertical">
- <p data-role="text">
+ <div id="center_button_vertical" data-role="popup" class="center_button_vertical">
+ <p class="ui-popup-text">
File 01.jpg
already in use
</p>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Replace" />
<input type="button" value="Rename" />
<input type="button" value="Cancel" />
</div>
<!-- popup checkbox -->
- <div id="center_checkbox" data-role="popupwindow" data-style="center_checkbox">
- <p data-role="text">
+ <div id="center_checkbox" data-role="popup" class="center_checkbox">
+ <p class="ui-popup-text">
Use packet data must
be enabled to access
data service.
Change settings?
</p>
- <div data-role="check-bg">
+ <div class="ui-popup-check-bg">
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">Don't ask again</label>
</div>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Text" />
<input type="button" value="Text" />
</div>
</div>
<!-- popup liststyle 1 button -->
- <div id="center_liststyle_1btn" data-role="popupwindow" data-style="center_liststyle_1btn">
- <p data-role="title">
+ <div id="center_liststyle_1btn" data-role="popup" class="center_liststyle_1btn">
+ <p class="ui-popup-title">
Popup title
</p>
- <div data-role="scroller-bg">
- <ul data-role="listview" data-icon="1line-textonly" data-scroll="y">
+ <div class="ui-popup-scroller-bg" data-scroll="y">
+ <ul data-role="listview" data-icon="1line-textonly">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
<li><a href="#">List item 9</a></li>
</ul>
</div>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Text Button" />
</div>
</div>
<!-- popup liststyle 2 button -->
- <div id="center_liststyle_2btn" data-role="popupwindow" data-style="center_liststyle_2btn">
- <p data-role="title">
+ <div id="center_liststyle_2btn" data-role="popup" class="center_liststyle_2btn">
+ <p class="ui-popup-title">
Popup title
</p>
- <div data-role="scroller-bg">
- <ul data-role="listview" data-icon="1line-textonly" data-scroll="y">
+ <div class="ui-popup-scroller-bg" data-scroll="y">
+ <ul data-role="listview" data-icon="1line-textonly">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
<li><a href="#">List item 9</a></li>
</ul>
</div>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Text Button" />
<input type="button" value="Text Button" />
</div>
</div>
<!-- popup liststyle 3 button -->
- <div id="center_liststyle_3btn" data-role="popupwindow" data-style="center_liststyle_3btn">
- <p data-role="title">
+ <div id="center_liststyle_3btn" data-role="popup" class="center_liststyle_3btn">
+ <p class="ui-popup-title">
Popup title
</p>
- <div data-role="scroller-bg">
- <ul data-role="listview" data-icon="1line-textonly" data-scroll="y">
+ <div class="ui-popup-scroller-bg" data-scroll="y">
+ <ul data-role="listview" data-icon="1line-textonly">
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
<li><a href="#">List item 9</a></li>
</ul>
</div>
- <div data-role="button-bg">
+ <div class="ui-popup-button-bg">
<input type="button" value="Button" />
<input type="button" value="Button" />
<input type="button" value="Button" />
+ // Support fake label
+ if ( label.length == 0 ) {
+ label = $( "<label for='" + input[ 0 ].id +
-+ "' style='display:block;width:1px;height:1px;'></label>" );
++ "'></label>" );
+ }
+
// Expose for other methods
}
}
},
-+
++
+ _addCheckboxRadioClasses: function( containers )
+ {
+ var i, inputAttr, len = containers.length;
--- /dev/null
+From dc926a4b6bd820cc6fa50dabba5066073a56c9b5 Mon Sep 17 00:00:00 2001
+From: Daehyeon Jung <darrenh.jung@samsung.com>
+Date: Thu, 9 Aug 2012 10:53:27 +0900
+Subject: [PATCH] JQM: merge navigation from 1.2.0a for popup
+
+Signed-off-by: Jung, Daehyeon <darrenh.jung@samsung.com>
+---
+ .../js/jquery.mobile.navigation.js | 96 ++++++++++++++++++--
+ 1 file changed, 86 insertions(+), 10 deletions(-)
+
+diff --git a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.navigation.js b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.navigation.js
+index ad2f67c..f6e11b3 100644
+--- a/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.navigation.js
++++ b/libs/js/jquery-mobile-1.1.0/js/jquery.mobile.navigation.js
+@@ -138,6 +138,10 @@ define( [
+ return relUrl;
+ }
+
++ if ( absUrl === undefined ) {
++ absUrl = documentBase;
++ }
++
+ var relObj = path.parseUrl( relUrl ),
+ absObj = path.parseUrl( absUrl ),
+ protocol = relObj.protocol || absObj.protocol,
+@@ -168,7 +172,8 @@ define( [
+ } else if ( path.isSameDomain( u, documentBase ) ) {
+ return u.hrefNoHash.replace( documentBase.domain, "" );
+ }
+- return absUrl;
++
++ return window.decodeURIComponent(absUrl);
+ },
+
+ //get path from current hash, or from a file path
+@@ -211,6 +216,10 @@ define( [
+ return path.stripHash( hash.replace( /\?.*$/, "" ).replace( dialogHashKey, "" ) );
+ },
+
++ isHashValid: function( hash ) {
++ return ( /^#[^#]+$/ ).test( hash );
++ },
++
+ //check whether a url is referencing the same domain, or an external domain or different protocol
+ //could be mailto, etc
+ isExternal: function( url ) {
+@@ -253,7 +262,20 @@ define( [
+ if ( u.protocol !== "" ) {
+ return ( u.hash && ( u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ) ) );
+ }
+- return (/^#/).test( u.href );
++ return ( /^#/ ).test( u.href );
++ },
++
++
++ // Some embedded browsers, like the web view in Phone Gap, allow cross-domain XHR
++ // requests if the document doing the request was loaded via the file:// protocol.
++ // This is usually to allow the application to "phone home" and fetch app specific
++ // data. We normally let the browser handle external/cross-domain urls, but if the
++ // allowCrossDomainPages option is true, we will allow cross-domain http/https
++ // requests to go through our page loading logic.
++ isPermittedCrossDomainRequest: function( docUrl, reqUrl ) {
++ return $.mobile.allowCrossDomainPages &&
++ docUrl.protocol === "file:" &&
++ reqUrl.search( /^https?:/ ) !== -1;
+ }
+ },
+
+@@ -307,7 +329,7 @@ define( [
+ $.each( urlHistory.stack, function( i, historyEntry ) {
+
+ //if the url is in the stack, it's a forward or a back
+- if( opts.currentUrl === historyEntry.url ) {
++ if ( decodeURIComponent( opts.currentUrl ) === decodeURIComponent( historyEntry.url ) ) {
+ //define back and forward by whether url is older or newer than current page
+ back = i < urlHistory.activeIndex;
+ forward = !back;
+@@ -398,7 +420,7 @@ define( [
+
+ //remove active classes after page transition or error
+ function removeActiveLinkClass( forceRemoval ) {
+- if( !!$activeClickedLink && ( !$activeClickedLink.closest( '.ui-page-active' ).length || forceRemoval ) ) {
++ if ( !!$activeClickedLink && ( !$activeClickedLink.closest( "." + $.mobile.activePageClass ).length || forceRemoval ) ) {
+ $activeClickedLink.removeClass( $.mobile.activeBtnClass );
+ }
+ $activeClickedLink = null;
+@@ -667,7 +689,8 @@ define( [
+ // attribute and in need of enhancement.
+ if ( page.length === 0 && dataUrl && !path.isPath( dataUrl ) ) {
+ page = settings.pageContainer.children( "#" + dataUrl )
+- .attr( "data-" + $.mobile.ns + "url", dataUrl );
++ .attr( "data-" + $.mobile.ns + "url", dataUrl )
++ .jqmData( "url", dataUrl );
+ }
+
+ // If we failed to find a page in the DOM, check the URL to see if it
+@@ -1002,6 +1025,16 @@ define( [
+ if( fromPage && fromPage[0] === toPage[0] && !settings.allowSamePageTransition ) {
+ isPageTransitioning = false;
+ mpc.trigger( "pagechange", triggerData );
++
++ // Even if there is no page change to be done, we should keep the urlHistory in sync with the hash changes
++ if ( settings.fromHashChange ) {
++ urlHistory.directHashChange({
++ currentUrl: url,
++ isBack: function() {},
++ isForward: function() {}
++ });
++ }
++
+ return;
+ }
+
+@@ -1033,6 +1066,9 @@ define( [
+ }
+ } catch(e) {}
+
++ // Record whether we are at a place in history where a dialog used to be - if so, do not add a new history entry and do not change the hash either
++ var alreadyThere = false;
++
+ // If we're displaying the page as a dialog, we don't want the url
+ // for the dialog content to be used in the hash. Instead, we want
+ // to append the dialogHashKey to the url of the current page.
+@@ -1041,7 +1077,24 @@ define( [
+ // be an empty string. Moving the undefined -> empty string back into
+ // urlHistory.addNew seemed imprudent given undefined better represents
+ // the url state
++
++ // If we are at a place in history that once belonged to a dialog, reuse
++ // this state without adding to urlHistory and without modifying the hash.
++ // However, if a dialog is already displayed at this point, and we're
++ // about to display another dialog, then we must add another hash and
++ // history entry on top so that one may navigate back to the original dialog
++ if ( active.url.indexOf( dialogHashKey ) > -1 && !$.mobile.activePage.is( ".ui-dialog" ) ) {
++ settings.changeHash = false;
++ alreadyThere = true;
++ }
++
+ url = ( active.url || "" ) + dialogHashKey;
++
++ // tack on another dialogHashKey if this is the same as the initial hash
++ // this makes sure that a history entry is created for this dialog
++ if ( urlHistory.activeIndex === 0 && url === urlHistory.initialDst ) {
++ url += dialogHashKey;
++ }
+ }
+
+ // Set the location hash.
+@@ -1068,7 +1121,7 @@ define( [
+ || ( isDialog ? $.mobile.defaultDialogTransition : $.mobile.defaultPageTransition );
+
+ //add page to history stack if it's not back or forward
+- if( !historyDir ) {
++ if ( !historyDir && !alreadyThere ) {
+ urlHistory.addNew( url, settings.transition, pageTitle, pageUrl, settings.role );
+ }
+
+@@ -1193,8 +1246,7 @@ define( [
+
+ url = path.makeUrlAbsolute( url, getClosestBaseUrl($this) );
+
+- //external submits use regular HTTP
+- if( path.isExternal( url ) || target ) {
++ if ( ( path.isExternal( url ) && !path.isPermittedCrossDomainRequest( documentUrl, url ) ) || target ) {
+ return;
+ }
+
+@@ -1344,7 +1396,7 @@ define( [
+ //this may need to be more specific as we use data-rel more
+ role = $link.attr( "data-" + $.mobile.ns + "rel" ) || undefined;
+
+- $.mobile.changePage( href, { transition: transition, reverse: reverse, role: role } );
++ $.mobile.changePage( href, { transition: transition, reverse: reverse, role: role, link: $link } );
+ event.preventDefault();
+ });
+
+@@ -1369,6 +1421,9 @@ define( [
+ //transition is false if it's the first page, undefined otherwise (and may be overridden by default)
+ transition = $.mobile.urlHistory.stack.length === 0 ? "none" : undefined,
+
++ // "navigate" event fired to allow others to take advantage of the more robust hashchange handling
++ navEvent = new $.Event( "navigate" ),
++
+ // default options for the changPage calls made after examining the current state
+ // of the page and the hash
+ changePageOptions = {
+@@ -1377,6 +1432,17 @@ define( [
+ fromHashChange: true
+ };
+
++ if ( 0 === urlHistory.stack.length ) {
++ urlHistory.initialDst = to;
++ }
++
++ // We should probably fire the "navigate" event from those places that make calls to _handleHashChange,
++ // and have _handleHashChange hook into the "navigate" event instead of triggering it here
++ $.mobile.pageContainer.trigger( navEvent );
++ if ( navEvent.isDefaultPrevented() ) {
++ return;
++ }
++
+ //if listening is disabled (either globally or temporarily), or it's a dialog hash
+ if( !$.mobile.hashListeningEnabled || urlHistory.ignoreNextHashChange ) {
+ urlHistory.ignoreNextHashChange = false;
+@@ -1432,6 +1498,14 @@ define( [
+ // since the hashchange could've been the result of a forward/backward navigation
+ // that crosses from an external page/dialog to an internal page/dialog.
+ to = ( typeof to === "string" && !path.isPath( to ) ) ? ( path.makeUrlAbsolute( '#' + to, documentBase ) ) : to;
++
++ // If we're about to go to an initial URL that contains a reference to a non-existent
++ // internal page, go to the first page instead. We know that the initial hash refers to a
++ // non-existent page, because the initial hash did not end up in the initial urlHistory entry
++ if ( to === path.makeUrlAbsolute( '#' + urlHistory.initialDst, documentBase ) &&
++ urlHistory.stack.length && urlHistory.stack[0].url !== urlHistory.initialDst.replace( dialogHashKey, "" ) ) {
++ to = $.mobile.firstPage;
++ }
+ $.mobile.changePage( to, changePageOptions );
+ } else {
+ //there's no hash, go to the first page in the dom
+@@ -1441,7 +1515,9 @@ define( [
+
+ //hashchange event handler
+ $window.bind( "hashchange", function( e, triggered ) {
+- $.mobile._handleHashChange( location.hash );
++ // Firefox auto-escapes the location.hash as for v13 but
++ // leaves the href untouched
++ $.mobile._handleHashChange( path.parseUrl(location.href).hash );
+ });
+
+ //set page min-heights to be device specific
+--
+1.7.9.5
+
}
},
-
-+
++
+ _addRightBtnClasses: function( containers )
+ {
+ var i, btnAttr, len = containers.length;
Name: web-ui-fw
-Version: 0.1.45
+Version: 0.1.47
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
###############################
%changelog
+* Mon Sep 10 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.47
+- FIX:
+ - scrollveiw: fix height of view
+ - searchbar: support placeholder
+- Spec changes:
+ - add ui-text-ellipsis class
+
+* Fri Sep 07 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.46
+- FIX:
+ - scrollview: scrolling bug fix
+ - controlbar: fix width of controlbar item
+- Spec changes:
+ - searchbar: don't hide icon
+ - popup: update JQM poup widget
+
* Fri Sep 05 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.45
- FIX:
- controlbar: set correct controlbar width of last element
/* non-js content hiding */
.ui-nojs { position: absolute; left: -9999px; }
+
+/* text-ellipsis: width must not be 'auto' */
+.ui-text-ellipsis {
+ .LESStext-ellipsis();
+}
+
display: inline-block;
vertical-align: middle;
margin-left: 40 * @unit_base;
+ min-height: @checkbox-radio-size-height;
}
.ui-icon {
position: absolute;
\r
.ui-image-search {\r
position: absolute;\r
- top: 0;\r
- left: 0;\r
- width : 100%;\r
+ top: 0px;\r
+ left: 0px;\r
+ width : 42 * @unit_base;\r
+ height : 42 * @unit_base;\r
margin: 16 * @unit_base;\r
}\r
\r
-.ui-image-searchfield:after {\r
- margin-left: 58 * @unit_base;\r
- content: "Search";\r
- color: @color_searchbar_default_text;\r
-}\r
-\r
/* orientation adjustments - incomplete!*/\r
-@media all and (min-width: 720*@unit_base){\r
+@media all and (min-width: 721*@unit_base){\r
label.ui-input-text {\r
vertical-align: top;\r
display: inline-block;\r
- width: 20%;\r
margin: 0 2% 0 0\r
}\r
input.ui-input-text,\r
.ui-input-text {\r
height: 74 * @unit_base;\r
padding : 0px;\r
- margin-left : 10 * @unit_base;\r
+ margin-left : 74 * @unit_base;\r
}\r
}\r
.ui-input-search-default {\r
.ui-btn-text {
position: relative;
a.ui-link-inherit {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
+ .LESStext-ellipsis();
}
}
&:last-child,
padding-right : 16 * @unit_base;
display: block;
- overflow:hidden;
- white-space : nowrap;
- text-overflow : ellipsis;
+ white-space: nowrap; // default: 1line
}
+ .ui-btn-inner a.ui-link-inherit {
+ .LESStext-ellipsis();
+ }
+
+
.ui-toggleswitch {
&:last-child {
top : 50%;
}
a {
- overflow:hidden;
- white-space : nowrap;
- text-overflow : ellipsis;
+ .LESStext-ellipsis();
padding-right : 16 * @unit_base; /* ellipsis for normal text */
}
}
font-weight: bold;
display: block;
margin: .6em 0;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
+ .LESStext-ellipsis();
}
.ui-li-thumb,
right : 16 * @unit_base;
top : 16 * @unit_base;
- overflow:hidden;
- white-space : nowrap;
- text-overflow : ellipsis;
width : 95%;
+ .LESStext-ellipsis();
> img {
position : relative;
right : 16 * @unit_base;
top : 16 * @unit_base;
- overflow:hidden;
- white-space : nowrap;
- text-overflow : ellipsis;
width : 60%;
+ .LESStext-ellipsis();
> img {
width: @list-smallicon-size;
top: 70 * @unit_base;
margin-top: 0px;
- overflow:hidden;
- white-space : nowrap;
- text-overflow : ellipsis;
-
- /* ellipsis for multiline list */
width : 90%;
+ .LESStext-ellipsis();
}
.ui-li-icon-sub-right,
.LESSimg-expand-icon;
}
.ui-li-expanded {
- overflow: hidden;
+ overflow-x: hidden;
}
.ui-li-expand-transition-show {
visibility: visible;
--- /dev/null
+.ui-popup-screen {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ position: absolute;
+ filter: Alpha(Opacity=50);
+ opacity: 0;
+}
+
+.ui-popup-screen-background-hack {
+ background-color: black;
+ filter: Alpha(Opacity=0);
+}
+
+@-webkit-keyframes popup-fadein {
+ from { opacity: 0; }
+ to { opacity: 0.5; }
+}
+
+@-moz-keyframes popup-fadein {
+ from { opacity: 0; }
+ to { opacity: 0.5; }
+}
+
+@-webkit-keyframes popup-fadeout {
+ from { opacity: 0.5; }
+ to { opacity: 0; }
+}
+
+@-moz-keyframes popup-fadeout {
+ from { opacity: 0.5; }
+ to { opacity: 0; }
+}
+
+.ui-popup-screen.fade.in {
+ opacity: 0.5;
+ -webkit-animation-name: popup-fadein;
+ -moz-animation-name: popup-fadein;
+}
+
+.ui-popup-screen.fade.out {
+ opacity: 0;
+ -webkit-animation-name: popup-fadeout;
+ -moz-animation-name: popup-fadeout;
+}
+
+.ui-popup.ui-content,
+.ui-popup .ui-content {
+ overflow: visible;
+}
+
+.ui-popup > img {
+ width: auto;
+ height: auto;
+ max-width: 100%;
+ max-height: 100%;
+ vertical-align: middle;
+}
+.ui-popup iframe {
+ vertical-align: middle;
+}
+
+@media all and (min-width: 450px){
+ .ui-popup .ui-field-contain label.ui-submit,
+ .ui-popup .ui-field-contain .ui-controlgroup-label,
+ .ui-popup .ui-field-contain label.ui-select,
+ .ui-popup .ui-field-contain label.ui-input-text {
+ font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em;
+ }
+ .ui-popup .ui-field-contain .ui-btn.ui-submit,
+ .ui-popup .ui-field-contain .ui-controlgroup-controls,
+ .ui-popup .ui-field-contain .ui-select,
+ .ui-popup .ui-field-contain input.ui-input-text,
+ .ui-popup .ui-field-contain textarea.ui-input-text,
+ .ui-popup .ui-field-contain .ui-input-search {
+ width: 100%; display: block;
+ }
+}
+
+.ui-popup > .ui-btn-left,
+.ui-popup > .ui-btn-right {
+ position: absolute;
+ top: -9px;
+ margin: 0;
+ z-index: 1101;
+}
+.ui-popup > .ui-btn-left { left: -9px; }
+.ui-popup > .ui-btn-right { right: -9px; }
/*
* Common definition for theme
+ * 'config.less' in each theme must include this file.
*/
@font_size_default: 36px; // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS!
-webkit-transform: @method;
-o-transform: @method;
}
+
+// Mixin : text ellipsis
+.LESStext-ellipsis() {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ overflow-x: hidden;
+}
+
--- /dev/null
+@import "config.less";
+
+/* Resource color mapping table
+
+@color_popup_title_bg: popup_title_bg.png
+@color_popup_text_bg: popup_bg.png
+@color_popup_button_bg: popup_button_bg.png
+@color_popup_font: Popup title & default
+@color_popup_text_font: Popup text
+
+*/
+
+
+@popup-text-padding-vert: 22 * @unit_base;
+@popup-text-padding-hori: 16 * @unit_base;
+@popup-ratio: 86.12%;
+
+.ui-popup-screen {
+ background: #000000;
+ opacity: 0.7;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: @z_base_popup;
+}
+
+.ui-popup-container {
+ position: absolute;
+ width: @popup-ratio;
+ color: @color_popup_font;
+ z-index: (@z_base_popup + 1) !important;
+ background: @color_popup_text_bg;
+
+ .ui-body-s {
+ background: none;
+ }
+
+ // --------- common style in popup ------------- //
+ .ui-popup-title {
+ width: 100%;
+ height: 100%;
+ font-size: @font_size_popup_basic_style_title;
+ background: @color_popup_title_bg;
+ }
+
+ p.ui-popup-title {
+ color: @color_popup_font;
+ margin: 0*@unit_base 0*@unit_base;
+ padding: 13*@unit_base 0*@unit_base;
+ }
+
+ .ui-popup-text {
+ margin-top: @popup-text-padding-vert;
+ margin-bottom: @popup-text-padding-vert;
+ color: @color_popup_text_font;
+ font-size: @font_size_popup_info_style;
+ background: @color_popup_text_bg;
+ text-align: center;
+ }
+
+ // ----------------------------------------------------- //
+
+ .center_info {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ // .ui-popup-text
+ }
+
+ .center_title {
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-title
+ // .ui-popup-text
+ }
+
+ .center_basic_1btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-text
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 402*@unit_base;
+ height: 74*@unit_base;
+ margin:auto;
+
+ }
+ }
+ }
+ .center_basic_2btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-text
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 274*@unit_base;
+ height: 74*@unit_base;
+ margin-top: 0*@unit_base;
+ margin-bottom: 0*@unit_base;
+ margin-left: 5*@unit_base;
+ margin-right: 5*@unit_base;
+
+ display: inline-block;
+ }
+ }
+ }
+ .center_basic_3btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-text
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 186*@unit_base;
+ height: 74*@unit_base;
+ margin-top: 0*@unit_base;
+ margin-bottom: 0*@unit_base;
+ margin-left: 5*@unit_base;
+ margin-right: 5*@unit_base;
+
+ display: inline-block;
+ }
+ }
+ }
+ .center_title_1btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-title
+ // .ui-popup-text
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 402*@unit_base;
+ height: 74*@unit_base;
+ margin:auto;
+
+ }
+ }
+ }
+ .center_title_2btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-title
+ // .ui-popup-text
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 274*@unit_base;
+ height: 74*@unit_base;
+ margin-top: 0*@unit_base;
+ margin-bottom: 0*@unit_base;
+ margin-left: 5*@unit_base;
+ margin-right: 5*@unit_base;
+
+ display: inline-block;
+ }
+ }
+ }
+ .center_title_3btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-title
+ // .ui-popup-text
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 186*@unit_base;
+ height: 74*@unit_base;
+ margin-top: 0*@unit_base;
+ margin-bottom: 0*@unit_base;
+ margin-left: 5*@unit_base;
+ margin-right: 5*@unit_base;
+
+ display: inline-block;
+ }
+ }
+ }
+ .center_button_vertical {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-text
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 1px;
+ padding-bottom: 16*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 356*@unit_base;
+ height: 74*@unit_base;
+ margin-top: 16*@unit_base;
+ margin-bottom: 0*@unit_base;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ }
+ }
+ .center_checkbox {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-text
+
+ .ui-popup-check-bg {
+ font-size: @font_size_popup_info_style;
+ background: @color_popup_text_bg;
+ width: 100%;
+ padding-top: 0*@unit_base;
+ padding-bottom: 22*@unit_base;
+ vertical-align: middle;
+
+ .ui-checkbox {
+ .ui-btn {
+ text-align: center;
+ background: @color_popup_text_bg;
+ border: 0*@unit_base;
+
+ .ui-btn-inner {
+ border: 0*@unit_base;
+ }
+ }
+ }
+ }
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 274*@unit_base;
+ height: 74*@unit_base;
+ margin-top: 0*@unit_base;
+ margin-bottom: 0*@unit_base;
+ margin-left: 5*@unit_base;
+ margin-right: 5*@unit_base;
+
+ display: inline-block;
+ }
+ }
+ }
+ .center_liststyle_1btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-title
+
+ .ui-popup-scroller-bg {
+ width: 100%;
+ overflow: hidden;
+ background: @color_popup_scroller_bg;
+ height: 512*@unit_base;
+ }
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 402*@unit_base;
+ height: 74*@unit_base;
+ margin:auto;
+
+ }
+ }
+ }
+ .center_liststyle_2btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-title
+
+ .ui-popup-scroller-bg {
+ width: 100%;
+ overflow: hidden;
+ background: @color_popup_scroller_bg;
+ height: 512*@unit_base;
+ }
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 274*@unit_base;
+ height: 74*@unit_base;
+ margin-top: 0*@unit_base;
+ margin-bottom: 0*@unit_base;
+ margin-left: 5*@unit_base;
+ margin-right: 5*@unit_base;
+
+ display: inline-block;
+ }
+ }
+ }
+ .center_liststyle_3btn {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ // .ui-popup-title
+
+ .ui-popup-scroller-bg {
+ width: 100%;
+ overflow: hidden;
+ background: @color_popup_scroller_bg;
+ height: 512*@unit_base;
+ }
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 186*@unit_base;
+ height: 74*@unit_base;
+ margin-top: 0*@unit_base;
+ margin-bottom: 0*@unit_base;
+ margin-left: 5*@unit_base;
+ margin-right: 5*@unit_base;
+
+ display: inline-block;
+ }
+ }
+ }
+
+ .center_progressbar {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ .ui-popup-text {
+ font-size: @font_size_popup_center_progressbar_title;
+ font-color: @color_popup_center_progressbar_title;
+ background: @color_popup_text_bg;
+ width: 100%;
+ height: 70*@unit_base;
+ p {
+ height: 100%;
+ text-align: center;
+ padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
+ }
+ }
+
+ .ui-popup-text-bottom-bg {
+ font-size: @font_size_popup_center_progressbar_title;
+ font-color: @color_popup_center_progressbar_title;
+ background: @color_popup_text_bg;
+ width: 100%;
+ vertical-align: middle;
+
+ .text-left {
+ width: 40%;
+ height: 48*@unit_base;
+ padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
+ text-align: left;
+
+ display: inline-block;
+ }
+ .text-right {
+ width: 40%;
+ height: 48*@unit_base;
+ padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
+ text-align: right;
+
+ display: inline-block;
+ }
+
+ }
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 402*@unit_base;
+ height: 74*@unit_base;
+ margin:auto;
+
+ }
+ }
+
+ .ui-popup-progress-bg {
+ background: @color_popup_text_bg;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .centertext_progressbar {
+
+ .LESSdisplaybox();
+ .LESSbox-orient(vertical);
+ .LESSbox-align(center);
+ .LESSbox-pack(center);
+
+ text-align: center;
+
+ .ui-popup-text {
+ font-size: @font_size_popup_center_progressbar_title;
+ font-color: @color_popup_center_progressbar_title;
+ background: @color_popup_text_bg;
+ width: 100%;
+ padding-top: 22*@unit_base;
+ padding-bottom: 16*@unit_base;
+ p {
+ text-align: center;
+ }
+ }
+
+ .ui-popup-text-bottom-bg {
+ font-size: @font_size_popup_center_progressbar_title;
+ font-color: @color_popup_center_progressbar_title;
+ background: @color_popup_text_bg;
+ width: 100%;
+ vertical-align: middle;
+
+ .text-left {
+ width: 40%;
+ height: 40*@unit_base;
+ padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
+ text-align: left;
+
+ display: inline-block;
+ }
+ .text-right {
+ width: 40%;
+ height: 40*@unit_base;
+ padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
+ text-align: right;
+
+ display: inline-block;
+ }
+
+ }
+
+ .ui-popup-button-bg {
+ font-size: @font_size_popup_button_text;
+ background: @color_popup_button_bg;
+ width: 100%;
+ padding-top: 11*@unit_base;
+ padding-bottom: 11*@unit_base;
+ vertical-align: middle;
+
+ .ui-btn {
+ width: 402*@unit_base;
+ height: 74*@unit_base;
+ margin:auto;
+
+ }
+ }
+
+ .ui-popup-progress-bg {
+ background: @color_popup_text_bg;
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .ui-btn{
+ .LESSpopup_button_style;
+ }
+ .ui-btn.ui-btn-hover-s{
+ .LESSpopup_button_hover_style;
+ }
+ .ui-btn.ui-btn-down-s{
+ .LESSpopup_button_press_style;
+ }
+}
width: 100%;
overflow: hidden;
background: @color_popup_scroller_bg;
-
- .ui-listview {
- height: 512*@unit_base;
- }
+ height: 512*@unit_base;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
.popup-scroller-bg {
width: 100%;
overflow: hidden;
- background: black;
-
- .ui-listview {
- height: 512*@unit_base;
- }
+ background: @color_popup_scroller_bg;
+ height: 512*@unit_base;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
.popup-scroller-bg {
width: 100%;
overflow: hidden;
- background: black;
-
- .ui-listview {
- height: 512*@unit_base;
- }
+ background: @color_popup_scroller_bg;
+ height: 512*@unit_base;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
*/
.ui-content.ui-scrollview-clip {
padding: 0;
- padding-bottom: 16 * @unit_base;
}
.ui-content.ui-scrollview-clip > div.ui-scrollview-view {
margin: 0;
- padding: 16 * @unit_base;
+ padding-left: 16 * @unit_base;
+ padding-right: 16 * @unit_base;
}
/*
../common/jquery.mobile.tizen.scrollview.handler.less.css \
../common/jquery.mobile.tizen.virtualgridview.less.css \
../common/jquery.mobile.tizen.multimediaview.less.css \
+ ../common/jquery.mobile.popup.css \
+ ../common/jquery.mobile.tizen.popup.less.css
all: prepare css images js
@style-title-extended-4btn-radio-width : 171 * @unit_base;
@style-back-btn-left : 44 * @unit_base;
-@style-back-btn-arrow-top : 5 * @unit_base;
+@style-back-btn-arrow-top : 30 * @unit_base;
@style-title-min-height : 62 * @unit_base;
@style-title-extended-margin : -30 * @unit_base;
../common/jquery.mobile.tizen.scrollview.handler.less.css \
../common/jquery.mobile.tizen.virtualgridview.less.css \
../common/jquery.mobile.tizen.multimediaview.less.css \
+ ../common/jquery.mobile.popup.css \
+ ../common/jquery.mobile.tizen.popup.less.css
all: prepare css images js
@style-title-extended-4btn-radio-width : 171 * @unit_base;
@style-back-btn-left : 44 * @unit_base;
-@style-back-btn-arrow-top : 5 * @unit_base;
+@style-back-btn-arrow-top : 30 * @unit_base;
@style-title-min-height : 62 * @unit_base;
@style-title-extended-margin : -30 * @unit_base;
/* Back button skip case :
* 1. tabbar
- * 2. footer does not exit
+ * 2. footer does not exist and addBackBtn is set to "footer"
* 3. user define data-add-Back-Btn = "false"
*/
if ( status != "external" ) {
- if ( $elFooter.children( ":jqmData(role='controlbar')" ).jqmData( "style" ) == "tabbar" || $elPage.data().page.options.footerExist == false || $elPage.data().page.options.addBackBtn == "none" ) {
+ if ( $elFooter.children( ":jqmData(role='controlbar')" ).jqmData( "style" ) == "tabbar" || $elPage.data().page.options.addBackBtn == "none" || ( $elPage.data().page.options.addBackBtn == "footer" && $elPage.data().page.options.footerExist == false ) ) {
return true;
}
}
if ( elapsed >= duration ) {
self._timerID = 0;
self._setScrollPosition( x, y );
+ self._$clip.trigger("scrollend");
} else {
ec = efunc( elapsed / duration, elapsed, 0, 1, duration );
self._setScrollPosition( sx + ( dx * ec ), sy + ( dy * ec ) );
scrollJump: false,
},
+ _getViewHeight: function () {
+ return this._$view.height() + this._view_offset;
+ },
+
_makePositioned: function ( $ele ) {
if ( $ele.css("position") === "static" ) {
$ele.css( "position", "relative" );
},
_create: function () {
- var $page = $('.ui-page'),
- direction,
+ var direction,
self = this;
this._$clip = $( this.element ).addClass("ui-scrollview-clip");
this._makePositioned( this._$view );
this._$view.css( { left: 0, top: 0 } );
- this._view_height = this._$view.height();
+
+ this._view_offset = this._$view.offset().top - this._$clip.offset().top;
+ this._view_height = this._getViewHeight();
this._sx = 0;
this._sy = 0;
if ( vt ) {
c = this._$clip.height();
- v = this._$view.height() +
- parseFloat( this._$view.css("padding-top") );
+ v = this._getViewHeight();
vt.start( this._sy, speedY,
duration, (v > c) ? -(v - c) : 0, 0 );
}
if ( dirLock !== "x" && this._vTracker ) {
- scroll_height = $v.height() - $c.height() +
- parseFloat( $c.css("padding-top") ) +
- parseFloat( $c.css("padding-bottom") );
+ scroll_height = this._getViewHeight() - $c.height();
this._outerScroll( y, scroll_height );
this._setCalibration( x, y );
- if ( this._outerScrolling ) {
- return;
- }
-
x = this._sx;
y = this._sy;
if ( sm === "translate" ) {
this._setElementTransform( $sbt, "0px",
- -y / $v.height() * $sbt.parent().height() + "px",
+ -y / this._getViewHeight() * $sbt.parent().height() + "px",
duration );
} else {
- $sbt.css( "top", -y / $v.height() * 100 + "%" );
+ $sbt.css( "top", -y / this._getViewHeight() * 100 + "%" );
}
}
}
$c.bind( "updatelayout", function ( e ) {
- var $page = $c.parentsUntil("ui-page"),
- sy,
- vh;
+ var sy,
+ vh,
+ view_h = self._getViewHeight();
- if ( !$c.height() || !$v.height() ) {
+ if ( !$c.height() || !view_h ) {
self.scrollTo( 0, 0, 0 );
return;
}
- sy = $c.height() - $v.height();
- vh = $v.height() - self._view_height;
+ sy = $c.height() - view_h;
+ vh = view_h - self._view_height;
- self._view_height = $v.height();
+ self._view_height = view_h;
if ( vh == 0 || vh > $c.height() / 2 ) {
return;
});
$( window ).bind( "resize", function ( e ) {
- var $page = $c.parentsUntil("ui-page"),
- focused;
+ var focused,
+ view_h = self._getViewHeight();
+
+ if ( $(".ui-page-active").get(0) !== self._page.get(0) ) {
+ return;
+ }
- if ( !$c.height() || !$v.height() ) {
+ if ( !$c.height() || !view_h ) {
return;
}
/* calibration - after triggered throttledresize */
setTimeout( function () {
- if ( self._sy < $c.height() - $v.height() ) {
+ if ( self._sy < $c.height() - self._getViewHeight() ) {
self.scrollTo( 0, self._sy,
self.options.snapbackDuration );
}
}, 260 );
- self._view_height = $v.height();
+ self._view_height = view_h;
+ });
+
+ $( document ).one( "pageshow", function ( e ) {
+ self._page = $(".ui-page-active");
+ self._view_offset = self._$view.offset().top - self._$clip.offset().top;
+ self._view_height = self._getViewHeight();
});
},
if ( this._vTracker ) {
ch = $c.height();
- vh = $v.height();
+ vh = this._getViewHeight();
this._maxY = ch - vh;
if ( this._maxY > 0 ) {
}
if ( controlbar_filter.length ) {
- element_width = Math.floor( controlbar_filter.outerWidth() / element_count );
- controlbar_filter.find("li:last").width( controlbar_filter.outerWidth() - element_width * ( element_count - 1 ) );
+ element_width = controlbar_filter.find("li:first").width();
+ controlbar_filter.find("li:last").width( controlbar_filter.width() - element_width * ( element_count - 1 ) );
}
});
element_count = controlbar_filter.find( 'li' ).length;
if ( controlbar_filter.length ) {
- element_width = Math.floor( controlbar_filter.outerWidth() / element_count );
- controlbar_filter.find("li:last").width( controlbar_filter.outerWidth() - element_width * ( element_count - 1 ) );
+ element_width = controlbar_filter.find("li:first").width();
+ controlbar_filter.find("li:last").width( controlbar_filter.width() - element_width * ( element_count - 1 ) );
}
});
$( $li[current] ).addClass("current");
$div.jqmData( "list", $li );
$div.circularview();
- if ( !obj._reflow ) {
- obj._reflow = function () {
- $div.circularview("reflow");
- };
- $(window).bind("resize", obj._reflow);
- }
// cause ctxpopup forced to subtract 10
if( $(window).width() / 2 < target.offset().left ) {
newLeft = -10;
});
$div.circularview( 'centerTo', '.current', 500 );
+ $div.bind( 'scrollend' , function ( e ) {
+ if ( !obj._reflow ) {
+ obj._reflow = function () {
+ $div.circularview("reflow");
+ };
+ $(window).bind("resize", obj._reflow);
+ }
+ });
}
return ui;
}
matchBtn.unbind( 'vclick', this.clickHandler );
}
- $( ".ui-triangle-image" ).css( "right", ( matchBtn.width() / 2 + matchBtn.width() * siblingBtnCnt - arrowCenter) / scaleFactor + "px");
+ $( ".ui-triangle-image" ).css( "right", ( matchBtn.width() / 2 + matchBtn.width() * siblingBtnCnt - ( arrowCenter / scaleFactor ) ) + "px");
$( ".ui-triangle-image" ).css( "left", "auto" );
}
},
.css( "height", $elFooter.height() );
}
+ $elFooter.show();
+
/* Header position fix(remove transition) */
next_id = $( event.target ).attr( "id" );
if ( !o.visibleOnPageShow ) {
self.hide( true );
}
+ self._IMEShown = false;
self.setHeaderFooter( event );
} )
.bind( "webkitAnimationStart animationstart updatelayout", function ( e, data ) {
--- /dev/null
+/*
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Popup windows
+//>>label: Popups
+//>>group: Widgets
+//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
+//>>css.structure: ../css/structure/jquery.mobile.popup.css,../css/structure/jquery.mobile.transition.css,../css/structure/jquery.mobile.transition.fade.css
+
+define( [ "jquery",
+ "../jquery.mobile.widget",
+ "../jquery.mobile.navigation",
+ "depend!../jquery.hashchange[jquery]" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+*/
+(function( $, undefined ) {
+
+ function fitSegmentInsideSegment( winSize, segSize, offset, desired ) {
+ var ret = desired;
+
+ if ( winSize < segSize ) {
+ // Center segment if it's bigger than the window
+ ret = offset + ( winSize - segSize ) / 2;
+ } else {
+ // Otherwise center it at the desired coordinate while keeping it completely inside the window
+ ret = Math.min( Math.max( offset, desired - segSize / 2 ), offset + winSize - segSize );
+ }
+
+ return ret;
+ }
+
+ function windowCoords() {
+ var $win = $( window );
+
+ return {
+ x: $win.scrollLeft(),
+ y: $win.scrollTop(),
+ cx: ( window.innerWidth || $win.width() ),
+ cy: ( window.innerHeight || $win.height() )
+ };
+ }
+
+ $.widget( "mobile.popup", $.mobile.widget, {
+ options: {
+ theme: null,
+ overlayTheme: null,
+ shadow: true,
+ corners: true,
+ transition: "none",
+ positionTo: "origin",
+ tolerance: null,
+ initSelector: ":jqmData(role='popup')"
+ },
+
+ _eatEventAndClose: function( e ) {
+ e.preventDefault();
+ e.stopImmediatePropagation();
+ this.close();
+ },
+
+ _handleWindowKeyUp: function( e ) {
+ if ( this._isOpen && e.keyCode === $.mobile.keyCode.ESCAPE ) {
+ this._eatEventAndClose( e );
+ }
+ },
+
+ _maybeRefreshTimeout: function() {
+ var winCoords = windowCoords();
+
+ if ( this._resizeData ) {
+ if ( winCoords.x === this._resizeData.winCoords.x &&
+ winCoords.y === this._resizeData.winCoords.y &&
+ winCoords.cx === this._resizeData.winCoords.cx &&
+ winCoords.cy === this._resizeData.winCoords.cy ) {
+ // timeout not refreshed
+ return false;
+ } else {
+ // clear existing timeout - it will be refreshed below
+ clearTimeout( this._resizeData.timeoutId );
+ }
+ }
+
+ this._resizeData = {
+ timeoutId: setTimeout( $.proxy( this, "_resizeTimeout" ), 200 ),
+ winCoords: winCoords
+ };
+
+ return true;
+ },
+
+ _resizeTimeout: function() {
+ if ( !this._maybeRefreshTimeout() ) {
+ // effectively rapid-open the popup while leaving the screen intact
+ this.element.trigger( "popupbeforeposition" );
+ this._ui.container
+ .removeClass( "ui-selectmenu-hidden" )
+ .offset( this._placementCoords( this._desiredCoords( undefined, undefined, "window" ) ) )
+ .attr( "tabindex", "0" )
+ .focus();
+
+ this._resizeData = null;
+ this._orientationchangeInProgress = false;
+ }
+ },
+
+ _handleWindowResize: function( e ) {
+ if ( this._isOpen ) {
+ this._maybeRefreshTimeout();
+ }
+ },
+
+ _handleWindowOrientationchange: function( e ) {
+ if ( !this._orientationchangeInProgress ) {
+ // effectively rapid-close the popup while leaving the screen intact
+ this._ui.container
+ .addClass( "ui-selectmenu-hidden" )
+ .removeAttr( "style" )
+ .removeAttr( "tabindex" );
+
+ this._orientationchangeInProgress = true;
+ }
+ },
+
+ _create: function() {
+ var ui = {
+ screen: $( "<div class='ui-screen-hidden ui-popup-screen fade'></div>" ),
+ placeholder: $( "<div style='display: none;'><!-- placeholder --></div>" ),
+ container: $( "<div class='ui-popup-container ui-selectmenu-hidden'></div>" )
+ },
+ thisPage = this.element.closest( ".ui-page" ),
+ myId = this.element.attr( "id" ),
+ self = this;
+
+ if ( thisPage.length === 0 ) {
+ thisPage = $( "body" );
+ }
+
+ // Apply the proto
+ thisPage.append( ui.screen );
+ ui.container.insertAfter( ui.screen );
+ // Leave a placeholder where the element used to be
+ ui.placeholder.insertAfter( this.element );
+ if ( myId ) {
+ ui.screen.attr( "id", myId + "-screen" );
+ ui.container.attr( "id", myId + "-popup" );
+ ui.placeholder.html( "<!-- placeholder for " + myId + " -->" );
+ }
+ ui.container.append( this.element );
+
+ // Add class to popup element
+ this.element.addClass( "ui-popup" );
+
+ // Define instance variables
+ $.extend( this, {
+ _page: thisPage,
+ _ui: ui,
+ _fallbackTransition: "",
+ _currentTransition: false,
+ _prereqs: null,
+ _isOpen: false,
+ _tolerance: null,
+ _resizeData: null,
+ _orientationchangeInProgress: false,
+ _globalHandlers: [
+ {
+ src: $( window ),
+ handler: {
+ orientationchange: $.proxy( this, "_handleWindowOrientationchange" ),
+ resize: $.proxy( this, "_handleWindowResize" ),
+ keyup: $.proxy( this, "_handleWindowKeyUp" )
+ }
+ }
+ ]
+ });
+
+ $.each( this.options, function( key, value ) {
+ // Cause initial options to be applied by their handler by temporarily setting the option to undefined
+ // - the handler then sets it to the initial value
+ self.options[ key ] = undefined;
+ self._setOption( key, value, true );
+ });
+
+ ui.screen.bind( "vclick", $.proxy( this, "_eatEventAndClose" ) );
+
+ $.each( this._globalHandlers, function( idx, value ) {
+ value.src.bind( value.handler );
+ });
+ },
+
+ _applyTheme: function( dst, theme ) {
+ var classes = ( dst.attr( "class" ) || "").split( " " ),
+ alreadyAdded = true,
+ currentTheme = null,
+ matches,
+ themeStr = String( theme );
+
+ while ( classes.length > 0 ) {
+ currentTheme = classes.pop();
+ matches = currentTheme.match( /^ui-body-([a-z])$/ );
+ if ( matches && matches.length > 1 ) {
+ currentTheme = matches[ 1 ];
+ break;
+ } else {
+ currentTheme = null;
+ }
+ }
+
+ if ( theme !== currentTheme ) {
+ dst.removeClass( "ui-body-" + currentTheme );
+ if ( ! ( theme === null || theme === "none" ) ) {
+ dst.addClass( "ui-body-" + themeStr );
+ }
+ }
+ },
+
+ _setTheme: function( value ) {
+ this._applyTheme( this.element, value );
+ },
+
+ _setOverlayTheme: function( value ) {
+ this._applyTheme( this._ui.screen, value );
+
+ if ( $.mobile.browser.ie ) {
+ this._ui.screen.toggleClass(
+ "ui-popup-screen-background-hack",
+ ( this._ui.screen.css( "background-color" ) === "transparent" &&
+ this._ui.screen.css( "background-image" ) === "none" &&
+ this._ui.screen.css( "background" ) === undefined ) );
+ }
+
+ if ( this._isOpen ) {
+ this._ui.screen.addClass( "in" );
+ }
+ },
+
+ _setShadow: function( value ) {
+ this.element.toggleClass( "ui-overlay-shadow", value );
+ },
+
+ _setCorners: function( value ) {
+ this.element.toggleClass( "ui-corner-all", value );
+ },
+
+ _applyTransition: function( value ) {
+ this._ui.container.removeClass( this._fallbackTransition );
+ if ( value && value !== "none" ) {
+ this._fallbackTransition = $.mobile._maybeDegradeTransition( value );
+ this._ui.container.addClass( this._fallbackTransition );
+ }
+ },
+
+ _setTransition: function( value ) {
+ if ( !this._currentTransition ) {
+ this._applyTransition( value );
+ }
+ },
+
+ _setTolerance: function( value ) {
+ var tol = { t: 30, r: 15, b: 30, l: 15 };
+
+ if ( value ) {
+ var ar = String( value ).split( "," );
+
+ $.each( ar, function( idx, val ) { ar[ idx ] = parseInt( val, 10 ); } );
+
+ switch( ar.length ) {
+ // All values are to be the same
+ case 1:
+ if ( !isNaN( ar[ 0 ] ) ) {
+ tol.t = tol.r = tol.b = tol.l = ar[ 0 ];
+ }
+ break;
+
+ // The first value denotes top/bottom tolerance, and the second value denotes left/right tolerance
+ case 2:
+ if ( !isNaN( ar[ 1 ] ) ) {
+ tol.t = tol.b = ar[ 1 ];
+ }
+ if ( !isNaN( ar[ 0 ] ) ) {
+ tol.l = tol.r = ar[ 0 ];
+ }
+ break;
+
+ // The array contains values in the order top, right, bottom, left
+ case 4:
+ if ( !isNaN( ar[ 1 ] ) ) {
+ tol.t = ar[ 1 ];
+ }
+ if ( !isNaN( ar[ 2 ] ) ) {
+ tol.r = ar[ 2 ];
+ }
+ if ( !isNaN( ar[ 3 ] ) ) {
+ tol.b = ar[ 3 ];
+ }
+ if ( !isNaN( ar[ 0 ] ) ) {
+ tol.l = ar[ 0 ];
+ }
+ break;
+
+ default:
+ break;
+ }
+ }
+
+ this._tolerance = tol;
+ },
+
+ _setOption: function( key, value ) {
+ var setter = "_set" + key.charAt( 0 ).toUpperCase() + key.slice( 1 );
+
+ if ( this[ setter ] !== undefined ) {
+ this[ setter ]( value );
+ }
+ if ( key !== "initSelector" ) {
+ // Record the option change in the options and in the DOM data-* attributes
+ $.mobile.widget.prototype._setOption.apply( this, arguments );
+ this.element.attr( "data-" + ( $.mobile.ns || "" ) + ( key.replace( /([A-Z])/, "-$1" ).toLowerCase() ), value );
+ }
+ },
+
+ // Try and center the overlay over the given coordinates
+ _placementCoords: function( desired ) {
+ // rectangle within which the popup must fit
+ var
+ winCoords = windowCoords(),
+ rc = {
+ x: this._tolerance.l,
+ y: winCoords.y + this._tolerance.t,
+ cx: winCoords.cx - this._tolerance.l - this._tolerance.r,
+ cy: winCoords.cy - this._tolerance.t - this._tolerance.b
+ },
+ menuSize, ret;
+
+ // Clamp the width of the menu before grabbing its size
+ this._ui.container.css( "max-width", rc.cx );
+ menuSize = {
+ cx: this._ui.container.outerWidth( true ),
+ cy: this._ui.container.outerHeight( true )
+ };
+
+ // Center the menu over the desired coordinates, while not going outside
+ // the window tolerances. This will center wrt. the window if the popup is too large.
+ ret = {
+ x: fitSegmentInsideSegment( rc.cx, menuSize.cx, rc.x, desired.x ),
+ y: fitSegmentInsideSegment( rc.cy, menuSize.cy, rc.y, desired.y )
+ };
+
+ // Make sure the top of the menu is visible
+ ret.y = Math.max( 0, ret.y );
+
+ // If the height of the menu is smaller than the height of the document
+ // align the bottom with the bottom of the document
+
+ // fix for $( document ).height() bug in core 1.7.2.
+ var docEl = document.documentElement, docBody = document.body,
+ docHeight = Math.max( docEl.clientHeight, docBody.scrollHeight, docBody.offsetHeight, docEl.scrollHeight, docEl.offsetHeight );
+
+ ret.y -= Math.min( ret.y, Math.max( 0, ret.y + menuSize.cy - docHeight ) );
+
+ return { left: ret.x, top: ret.y };
+ },
+
+ _immediate: function() {
+ if ( this._prereqs ) {
+ $.each( this._prereqs, function( key, val ) {
+ val.resolve();
+ });
+ }
+ },
+
+ _createPrereqs: function( screenPrereq, containerPrereq, whenDone ) {
+ var self = this, prereqs;
+
+ // It is important to maintain both the local variable prereqs and self._prereqs. The local variable remains in
+ // the closure of the functions which call the callbacks passed in. The comparison between the local variable and
+ // self._prereqs is necessary, because once a function has been passed to .animationComplete() it will be called
+ // next time an animation completes, even if that's not the animation whose end the function was supposed to catch
+ // (for example, if an abort happens during the opening animation, the .animationComplete handler is not called for
+ // that animation anymore, but the handler remains attached, so it is called the next time the popup is opened
+ // - making it stale. Comparing the local variable prereqs to the widget-level variable self._prereqs ensures that
+ // callbacks triggered by a stale .animationComplete will be ignored.
+
+ prereqs = {
+ screen: $.Deferred(),
+ container: $.Deferred()
+ };
+
+ prereqs.screen.then( function() {
+ if ( prereqs === self._prereqs ) {
+ screenPrereq();
+ }
+ });
+
+ prereqs.container.then( function() {
+ if ( prereqs === self._prereqs ) {
+ containerPrereq();
+ }
+ });
+
+ $.when( prereqs.screen, prereqs.container ).done( function() {
+ if ( prereqs === self._prereqs ) {
+ self._prereqs = null;
+ whenDone();
+ }
+ });
+
+ self._prereqs = prereqs;
+ },
+
+ _animate: function( args ) {
+ if ( this.options.overlayTheme && args.additionalCondition ) {
+ this._ui.screen
+ .removeClass( args.classToRemove )
+ .addClass( args.screenClassToAdd )
+ .animationComplete( $.proxy( args.prereqs.screen, "resolve" ) );
+ } else {
+ args.prereqs.screen.resolve();
+ }
+
+ if ( args.transition && args.transition !== "none" ) {
+ if ( args.applyTransition ) {
+ this._applyTransition( args.transition );
+ }
+ this._ui.container
+ .addClass( args.containerClassToAdd )
+ .removeClass( args.classToRemove )
+ .animationComplete( $.proxy( args.prereqs.container, "resolve" ) );
+ } else {
+ args.prereqs.container.resolve();
+ }
+ },
+
+ // The desired coordinates passed in will be returned untouched if no reference element can be identified via
+ // desiredPosition.positionTo. Nevertheless, this function ensures that its return value always contains valid
+ // x and y coordinates by specifying the center middle of the window if the coordinates are absent.
+ _desiredCoords: function( x, y, positionTo ) {
+ var dst = null, offset, winCoords = windowCoords();
+
+ // Establish which element will serve as the reference
+ if ( positionTo && positionTo !== "origin" ) {
+ if ( positionTo === "window" ) {
+ x = winCoords.cx / 2 + winCoords.x;
+ y = winCoords.cy / 2 + winCoords.y;
+ } else {
+ try {
+ dst = $( positionTo );
+ } catch( e ) {
+ dst = null;
+ }
+ if ( dst ) {
+ dst.filter( ":visible" );
+ if ( dst.length === 0 ) {
+ dst = null;
+ }
+ }
+ }
+ }
+
+ // If an element was found, center over it
+ if ( dst ) {
+ offset = dst.offset();
+ x = offset.left + dst.outerWidth() / 2;
+ y = offset.top + dst.outerHeight() / 2;
+ }
+
+ // Make sure x and y are valid numbers - center over the window
+ if ( $.type( x ) !== "number" || isNaN( x ) ) {
+ x = winCoords.cx / 2 + winCoords.x;
+ }
+ if ( $.type( y ) !== "number" || isNaN( y ) ) {
+ y = winCoords.cy / 2 + winCoords.y;
+ }
+
+ return { x: x, y: y };
+ },
+
+ _openPrereqsComplete: function() {
+ this._ui.container.addClass( "ui-popup-active" );
+ this._isOpen = true;
+ this._ui.container.attr( "tabindex", "0" ).focus();
+ this.element.trigger( "popupafteropen" );
+ },
+
+ _open: function( options ) {
+ var coords, transition;
+
+ // Make sure options is defined
+ options = ( options || {} );
+
+ // Copy out the transition, because we may be overwriting it later and we don't want to pass that change back to the caller
+ transition = options.transition;
+
+ // Give applications a chance to modify the contents of the container before it appears
+ this.element.trigger( "popupbeforeposition" );
+
+ coords = this._placementCoords( this._desiredCoords( options.x, options.y, options.positionTo || this.options.positionTo || "origin" ) );
+
+ // Count down to triggering "popupafteropen" - we have two prerequisites:
+ // 1. The popup window animation completes (container())
+ // 2. The screen opacity animation completes (screen())
+ this._createPrereqs(
+ $.noop,
+ $.noop,
+ $.proxy( this, "_openPrereqsComplete" ) );
+
+ if ( transition ) {
+ this._currentTransition = transition;
+ this._applyTransition( transition );
+ } else {
+ transition = this.options.transition;
+ }
+
+ if ( !this.options.theme ) {
+ this._setTheme( this._page.jqmData( "theme" ) || $.mobile.getInheritedTheme( this._page, "c" ) );
+ }
+
+ this._ui.screen.removeClass( "ui-screen-hidden" );
+
+ this._ui.container
+ .removeClass( "ui-selectmenu-hidden" )
+ .offset( coords );
+
+ this._animate({
+ additionalCondition: true,
+ transition: transition,
+ classToRemove: "",
+ screenClassToAdd: "in",
+ containerClassToAdd: "in",
+ applyTransition: false,
+ prereqs: this._prereqs
+ });
+ },
+
+ _closePrereqScreen: function() {
+ this._ui.screen
+ .removeClass( "out" )
+ .addClass( "ui-screen-hidden" );
+ },
+
+ _closePrereqContainer: function() {
+ this._ui.container
+ .removeClass( "reverse out" )
+ .addClass( "ui-selectmenu-hidden" )
+ .removeAttr( "style" );
+ },
+
+ _closePrereqsDone: function() {
+ this._ui.container.removeAttr( "tabindex" );
+ this.element.trigger( "popupafterclose" );
+ },
+
+ _close: function() {
+ this._ui.container.removeClass( "ui-popup-active" );
+ this._isOpen = false;
+
+ // Count down to triggering "popupafterclose" - we have two prerequisites:
+ // 1. The popup window reverse animation completes (container())
+ // 2. The screen opacity animation completes (screen())
+ this._createPrereqs(
+ $.proxy( this, "_closePrereqScreen" ),
+ $.proxy( this, "_closePrereqContainer" ),
+ $.proxy( this, "_closePrereqsDone" ) );
+
+ this._animate( {
+ additionalCondition: this._ui.screen.hasClass( "in" ),
+ transition: ( this._currentTransition || this.options.transition ),
+ classToRemove: "in",
+ screenClassToAdd: "out",
+ containerClassToAdd: "reverse out",
+ applyTransition: true,
+ prereqs: this._prereqs
+ });
+ },
+
+ _destroy: function() {
+ // Put the element back to where the placeholder was and remove the "ui-popup" class
+ this._setTheme( "none" );
+ this.element
+ .insertAfter( this._ui.placeholder )
+ .removeClass( "ui-popup ui-overlay-shadow ui-corner-all" );
+ this._ui.screen.remove();
+ this._ui.container.remove();
+ this._ui.placeholder.remove();
+
+ // Unbind handlers that were bound to elements outside this.element (the window, in this case)
+ $.each( this._globalHandlers, function( idx, oneSrc ) {
+ $.each( oneSrc.handler, function( eventType, handler ) {
+ oneSrc.src.unbind( eventType, handler );
+ });
+ });
+ },
+
+ open: function( options ) {
+ $.mobile.popup.popupManager.push( this, arguments );
+ },
+
+ close: function() {
+ $.mobile.popup.popupManager.pop( this );
+ }
+ });
+
+ // Popup manager, whose policy is to ignore requests for opening popups when a popup is already in
+ // the process of opening, or already open
+ $.mobile.popup.popupManager = {
+ _currentlyOpenPopup: null,
+ _popupIsOpening: false,
+ _popupIsClosing: false,
+ _abort: false,
+
+ _handlePageBeforeChange: function( e, data ) {
+ var parsedDst, toUrl;
+
+ if ( typeof data.toPage === "string" ) {
+ parsedDst = data.toPage;
+ } else {
+ parsedDst = data.toPage.jqmData( "url" );
+ }
+ parsedDst = $.mobile.path.parseUrl( parsedDst );
+ toUrl = parsedDst.pathname + parsedDst.search + parsedDst.hash;
+
+ if ( this._myUrl !== toUrl ) {
+ this._onHashChange( true );
+ }
+ },
+
+ // Call _onHashChange if the hash changes /after/ the popup is on the screen
+ // Note that placing the popup on the screen can itself cause a hashchange,
+ // because the dialogHashKey may need to be added to the URL.
+ _navHook: function( whenHooked ) {
+ var self = this, dstHash;
+ function realInstallListener() {
+ $( window ).one( "navigate.popup", function() {
+ self._onHashChange();
+ });
+ whenHooked();
+ }
+
+ self._myUrl = $.mobile.activePage.jqmData( "url" );
+ $.mobile.pageContainer.one( "pagebeforechange.popup", $.proxy( this, "_handlePageBeforeChange" ) );
+ if ( $.mobile.hashListeningEnabled ) {
+ var activeEntry = $.mobile.urlHistory.getActive(),
+ dstTransition,
+ currentIsDialog = $.mobile.activePage.is( ".ui-dialog" ),
+ hasHash = ( activeEntry.url.indexOf( $.mobile.dialogHashKey ) > -1 ) && !currentIsDialog;
+
+ if ( $.mobile.urlHistory.activeIndex === 0 ) {
+ dstTransition = $.mobile.defaultDialogTransition;
+ } else {
+ dstTransition = activeEntry.transition;
+ }
+
+ if ( hasHash ) {
+ realInstallListener();
+ } else {
+ $( window ).one( "navigate.popupBinder", function() {
+ realInstallListener();
+ });
+ dstHash = activeEntry.url + $.mobile.dialogHashKey;
+ if ( $.mobile.urlHistory.activeIndex === 0 && dstHash === $.mobile.urlHistory.initialDst ) {
+ dstHash += $.mobile.dialogHashKey;
+ }
+ $.mobile.urlHistory.ignoreNextHashChange = currentIsDialog;
+ $.mobile.urlHistory.addNew( dstHash, dstTransition, activeEntry.title, activeEntry.pageUrl, activeEntry.role );
+ $.mobile.path.set( dstHash );
+ }
+ } else {
+ whenHooked();
+ }
+ },
+
+ _navUnhook: function( abort ) {
+ if ( abort ) {
+ $( window ).unbind( "navigate.popupBinder navigate.popup" );
+ }
+
+ if ( $.mobile.hashListeningEnabled && !abort ) {
+ window.history.back();
+ }
+ else {
+ this._onHashChange();
+ }
+ $.mobile.activePage.unbind( "pagebeforechange.popup" );
+ },
+
+ push: function( popup, args ) {
+ var self = this;
+
+ if ( !self._currentlyOpenPopup ) {
+ self._currentlyOpenPopup = popup;
+
+ self._navHook(function() {
+ self._popupIsOpening = true;
+ self._currentlyOpenPopup.element.one( "popupafteropen", function() {
+ self._popupIsOpening = false;
+ });
+ self._currentlyOpenPopup._open.apply( self._currentlyOpenPopup, args );
+ if ( !self._popupIsOpening && self._abort ) {
+ self._currentlyOpenPopup._immediate();
+ }
+ });
+ }
+ },
+
+ pop: function( popup ) {
+ if ( popup === this._currentlyOpenPopup && !this._popupIsClosing ) {
+ this._popupIsClosing = true;
+ if ( this._popupIsOpening ) {
+ this._currentlyOpenPopup.element.one( "popupafteropen", $.proxy( this, "_navUnhook" ) );
+ } else {
+ this._navUnhook();
+ }
+ }
+ },
+
+ _handlePopupAfterClose: function() {
+ this._popupIsClosing = false;
+ this._currentlyOpenPopup = null;
+ $( this ).trigger( "done" );
+ },
+
+ _onHashChange: function( immediate ) {
+ this._abort = immediate;
+
+ if ( this._currentlyOpenPopup ) {
+ if ( immediate && this._popupIsOpening ) {
+ this._currentlyOpenPopup._immediate();
+ }
+ this._popupIsClosing = true;
+ this._currentlyOpenPopup.element.one( "popupafterclose", $.proxy( this, "_handlePopupAfterClose" ) );
+ this._currentlyOpenPopup._close();
+ if ( immediate && this._currentlyOpenPopup ) {
+ this._currentlyOpenPopup._immediate();
+ }
+ }
+ }
+ };
+
+ $.mobile.popup.handleLink = function( $link ) {
+ var closestPage = $link.closest( ":jqmData(role='page')" ),
+ scope = ( ( closestPage.length === 0 ) ? $( "body" ) : closestPage ),
+ popup = $( $link.attr( "href" ), scope[0] ),
+ offset;
+ if ( popup.data( "popup" ) ) {
+ offset = $link.offset();
+ popup.popup( "open", {
+ x: offset.left + $link.outerWidth() / 2,
+ y: offset.top + $link.outerHeight() / 2,
+ transition: $link.jqmData( "transition" ),
+ positionTo: $link.jqmData( "position-to" )
+ });
+
+ // If this link is not inside a popup, re-focus onto it after the popup(s) complete
+ // For some reason, a $.proxy( $link, "focus" ) doesn't work as the handler
+ if ( $link.parents( ".ui-popup-container" ).length === 0 ) {
+ $( $.mobile.popup.popupManager ).one( "done", function() {
+ $link.focus();
+ });
+ }
+ }
+
+ //remove after delay
+ setTimeout( function() {
+ $link.removeClass( $.mobile.activeBtnClass );
+ }, 300 );
+ };
+
+ $( document ).bind( "pagebeforechange", function( e, data ) {
+ if ( data.options.role === "popup" ) {
+ $.mobile.popup.handleLink( data.options.link );
+ e.preventDefault();
+ }
+ });
+
+ $( document ).bind( "pagecreate create", function( e ) {
+ $.mobile.popup.prototype.enhanceWithin( e.target, true );
+ });
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+/*
+});
+//>>excludeEnd("jqmBuildExclude");
+*/
popup.find( ":jqmData(role='check-bg')" )
.wrapAll( "<div class='popup-check-bg'></div>" );
popup.find( ":jqmData(role='scroller-bg')" )
- .wrapAll( "<div class='popup-scroller-bg'></div>" );
+ .addClass( "popup-scroller-bg" );
popup.find( ":jqmData(role='text-bottom-bg')" )
.wrapAll( "<div class='popup-text-bottom-bg'></div>" );
popup.find( ":jqmData(role='text-left')" )
},
_create: function () {
+ console.warn("popupwindow() was deprecated. use popup() instead.");
var thisPage = this.element.closest(":jqmData(role='page')"),
self = this;
themeclass = " ui-body-" + theme,
focusedEl,
clearbtn,
- searchicon,
cancelbtn,
defaultText,
defaultTextClass,
newClassName,
newStyle,
newDiv,
+ searchimage,
inputedText;
function toggleClear() {
cancelbtn
.addClass( "ui-btn-cancel-show" )
.removeClass( "ui-btn-cancel-hide" );
- searchicon.hide();
}
function hideCancel() {
.addClass( "ui-btn-cancel-hide" )
.removeClass( "ui-btn-cancel-show" );
- if ( input.val() == "" ) {
- searchicon.show();
- }
-
toggleClear();
}
//SLP --start search bar with cancel button
focusedEl.wrapAll( "<div class='input-search-bar'></div>" );
- searchicon = $("<div class='ui-image-search ui-image-searchfield'></div>")
- .bind('click', function ( event ) {
- if ( input.attr( "disabled" ) == "disabled" ) {
- return false;
- }
- searchicon.hide();
-
- input
- .blur()
- .focus();
- } )
- .appendTo( focusedEl );
-
cancelbtn = $( "<a href='#' class='ui-input-cancel' title='clear text'>Cancel</a>" )
.bind('click', function ( event ) {
if ( input.attr( "disabled" ) == "disabled" ) {
shadow: true
} );
+ searchimage = $("<div class='ui-image-search'></div>").appendTo( focusedEl );
+
// Input Focused
input
.focus( function () {
focusedEl.removeClass( $.mobile.focusClass );
});
- // Input Blured
- /* When user touch on page, it's same to blur */
- /* FIXME : if there is no problem, please remove this codes..
- $( "div.input-search-bar" ).tap( function ( event ) {
- if ( input.attr( "disabled" ) == "disabled" ) {
- return false;
- }
- input.focus();
- event.stopPropagation();
- } );
-
- var currentPage = input.closest( ".ui-page" );
- $( currentPage ).bind("tap", function ( e ) {
- if ( input.attr( "disabled" ) == "disabled" ) {
- return;
- }
-
- if ( $( input ).is( ":focus" ) ) {
- focusedEl.removeClass( "ui-focus" );
- hideCancel();
- input.blur();
- }
- } );*/
-
// Default Text
defaultText = input.jqmData( "default-text" );
} );
}
- if ( input.val() ) {
- searchicon.hide();
+ if ( !input.attr("placeholder") ) {
+ input.attr( "placeholder", "Search" );
}
},
slider_bar,
handle_press,
popupEnabledAttr,
- icon;
+ icon,
+ text_right,
+ text_left;
// apply jqm slider
inputElement.slider();
// hide the slider input element proper
inputElement.hide();
+ // FIXME: workaround for list elipse
+ if ( inputElement.parent().hasClass("ui-li") ) {
+ inputElement.parent().css( "overflow", "visible" );
+ }
+
self.popup = $('<div class="ui-slider-popup"></div>');
// set the popup according to the html attribute
break;
case 'text':
+ text_left = ( inputElement.attr('data-text-left') === undefined ) ? '' : inputElement.attr('data-text-left').substring( 0, 3 );
+ text_right = ( inputElement.attr('data-text-right') === undefined ) ? '' : inputElement.attr('data-text-right').substring( 0, 3 );
slider.before( $('<div class="ui-slider-left-text">' +
'<span style="position:relative;top:0.4em;">' +
- inputElement.attr('data-text-left').substring( 0, 3) +
+ text_left +
'</span></div>') );
slider.after( $('<div class="ui-slider-right-text">' +
'<span style="position:relative;top:0.4em;">' +
- inputElement.attr('data-text-right').substring( 0, 3) +
+ text_right +
'</span></div>') );
break;
}
projects / framework / web / web-ui-fw.git / commitdiff