--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-viewport-width="device-width">
+ </script>
+
+ <title>Tizen UI Scaling</title>
+
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Scaling:device-width</h1>
+ </div>
+ <div data-role="content">
+ <ul id="log">
+ </ul>
+ <ul id="link" data-role="listview">
+ </ul>
+ </div>
+ <div data-role="footer">
+ </div>
+ </div>
+ <script src="log.js"></script>
+</div>
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-viewport-width="720">
+ </script>
+
+ <title>Tizen UI Scaling</title>
+
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Scaling:720</h1>
+ </div>
+ <div data-role="content">
+ <ul id="log">
+ </ul>
+ <ul id="link" data-role="listview">
+ </ul>
+ </div>
+ <div data-role="footer">
+ </div>
+ </div>
+ <script src="log.js"></script>
+</div>
--- /dev/null
+index.device_width.html
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-viewport-width="screen-width">
+ </script>
+
+ <title>Tizen UI Scaling</title>
+
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Scaling:screen-width</h1>
+ </div>
+ <div data-role="content">
+ <ul id="log">
+ </ul>
+ <ul id="link" data-role="listview">
+ </ul>
+ </div>
+ <div data-role="footer">
+ </div>
+ </div>
+ <script src="log.js"></script>
+</div>
--- /dev/null
+$( window ).load( function () {
+ ( function writeLog() {
+ var log = $("#log"),
+ viewport = $('head').find('meta[name="viewport"]'),
+ htmlFontSize = $('html').css('font-size');
+
+ function item(text) {
+ return $("<li></li>").text(text);
+ }
+ log.append( item( "viewport content: " + viewport.attr("content") ) );
+ log.append( item( "html fontsize: " + htmlFontSize) );
+ } () );
+
+ ( function addLink() {
+ var link = $("#link"),
+ links = {
+ device_width: "index.device_width.html",
+ fixed_width: "index.fixed_width.html",
+ screen_width: "index.screen_width.html"
+ };
+ for ( idx in links ) {
+ link.append('<li><a href="' + links[idx] + '" rel="external">' + idx + '</a>' );
+ }
+ link.listview('refresh');
+ } () );
+} );
+
--- /dev/null
+../../build/tizen-web-ui-fw
\ No newline at end of file
<li><a href="#slider-demo">Slider</a></li>
<li><a href="widgets/imageslider.html">ImageSlider</a></li>
<li><a href="widgets/segmentctrl.html">Segment Control</a></li>
+ <li><a href="widgets/buttonGrouping.html">Group Control(new segment)</a></li>
<li><a href="widgets/day-selector.html" >Day Selector</a></li>
<li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
<li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
<li class="ui-li-1line-btn2">List item 8<div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div></li>
<li class="ui-li-1line-btn2">List item 9<div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div></li>
<li class="ui-li-1line-btn2">List item 10<div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div></li>
- <li>List item 11<div data-role="button" data-inline="true" data-icon="editminus" data-style="edit"
- style="position: absolute; top: 0px; margin-top: 0px; left:70%"></div></li>
- <li>List item 12<div data-role="button" data-inline="true" data-style="edit"
- style="position: absolute; top: 0px; margin-top: 0px; left:70%">Delete</div></li>
+ <li>List item 11<div data-role="button" data-inline="true" data-icon="editminus" data-style="edit" ></div></li>
+ <li>List item 12<div data-role="button" data-inline="true" data-style="edit" >Delete</div></li>
</ul>
</div>
</div>
--- /dev/null
+<div data-role="page">
+
+ <div data-role="header" data-position="fixed">
+ <h1>Button grouping</h1>
+ </div><!-- /header -->
+
+
+ <div data-role="content">
+ <p>1. Groupped 2 button</p>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button">Back Button</a>
+ <a href="index.html" data-role="button">Next Button</a>
+ </div>
+ <br>
+ <p>2. Groupped 3 button</p>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button">Back Button</a>
+ <a href="index.html" data-role="button">Save Button</a>
+ <a href="index.html" data-role="button">Next Button</a>
+ </div>
+ <br>
+ <p>3. Groupped 4 button</p>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="index.html" data-role="button">Back</a>
+ <a href="index.html" data-role="button">Save</a>
+ <a href="index.html" data-role="button">Stop</a>
+ <a href="index.html" data-role="button">Next</a>
+ </div>
+ </div><!-- /content -->
+</div><!-- /page -->
</div>
<div data-role="footer">
- <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
- <div id="pop_js" data-role="popup" data-show-arrow="true">
+ <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
<ul data-role="listview">
<li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
<li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
<li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
<li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
<li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
+ <li><a href="naviframe.html" class="ui-btn-ctxpopup-close">Internal Link</a></li>
</ul>
</div>
<div data-role="controlgroup" data-type="horizontal">
- <a href="index.html" data-role="button">Yes</a>
- <a href="index.html" data-role="button">No</a>
- <a href="index.html" data-role="button">Maybe</a>
+ <a href="index.html" data-role="button">Back</a>
+ <a href="index.html" data-role="button">Next</a>
</div>
</div>
</div>
Name: web-ui-fw
-Version: 0.1.63
+Version: 0.1.64
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
###############################
%changelog
+* Fri Nov 30 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.64
+- FIX:
+ - fix unit tests
+ - remove unused theme files
+ - timepicker: text position fix
+ - scrollview: set dragstop when mouse is out of window
+ - listview: fix margin
+- Spec changes:
+ - support data-framework-viewport-width
+
* Fri Nov 23 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.63
- FIX:
- dayselector: fix size
/**
+ * @class core
* loader.js
*
* Youmin Ha <youmin.ha@samsung.com>
+ *
+ *
*/
+/*
+ Web UI scaling concept in Tizen Web UI
+
+Generally, web applications must be designed to be showed acceptable on various size and resolution of screens, and web winsets have to be scaled well. Tizen Web UI Framework supports various viewport settings, and Tizen Web UI widgets are designed to be scalable on various screen sizes. In order to make web applications scalable on many devices which have different screen size, it is necessary to understand how mobile web browsers deal with screen resolution, and how Tizen Web UI Framework supports scaling for web applications.
+
+
+* Viewport on mobile web browser
+
+Viewport is an area showing web content on the browser. Unlike desktop browsers, mobile browsers support logical viewport seting, which means that application can set viewport width/height and zoom level by itself.
+The very important thing that to be remembered is that the viewport resolution in pixel is 'Logical', not physical. For example, if the viewport width is set to 480 on a mobile device having 720px screen width, the viewport width is considered to 480px logically. All elements put on right side from 480px horizontal position will not be shown on the viewport.
+Most mobile browsers set viewport with given content attribute with <meta name="viewport" content="..."> tag in <head> section in the application source html, whereas desktop browsers ignore the tag.
+Detailed usage of viewport meta tag is found in here: http://www.w3.org/TR/mwabp/#bp-viewport
+
+
+* Viewport setting by application developers
+
+When developers write <meta name="viewport" content="..."> in the <head> section of the web application HTML file, Tizen Web UI Framework does not add another viewport meta tag, nor modify developer-defined viewport.
+
+
+* Automatic viewport setting by Tizen Web UI Framework
+
+If developers do not give a viewport meta tag, Tizen Web UI Framework automatically add a viewport meta tag with default viewport setting.
+
+
+* Portrait/landscape mode
+
+
+* Tizen Web UI widgets scaling
+
+ */
( function ($, Globalize, window, undefined) {
var tizen = {
rootDir: '/usr/lib/tizen-web-ui-fw',
version: '0.1',
theme: "tizen-white",
+ viewportWidth: "device-width",
viewportScale: false,
+
defaultFontSize: 22,
minified: false
},
this.frameworkData.theme = elem.getAttribute( 'data-framework-theme' )
|| getTizenTheme( )
|| this.frameworkData.theme;
- this.frameworkData.viewportScale = "true" === elem.getAttribute( 'data-framework-viewport-scale' ) ? true : this.frameworkData.viewportScale;
+ this.frameworkData.viewportWidth = elem.getAttribute( 'data-framework-viewport-width' )
+ || this.frameworkData.viewportWidth;
+ this.frameworkData.viewportScale =
+ "true" === elem.getAttribute( 'data-framework-viewport-scale' ) ? true
+ : this.frameworkData.viewportScale;
this.frameworkData.minified = src.search(/\.min\.js$/) > -1 ? true : false;
foundScriptTag = true;
break;
/** Set viewport meta tag for mobile devices.
*
- * @param[in] useAutoScale If true, cculate & use scale factor. otherwise, scale factor is 1.
+ * @param[in] viewportWidth viewport width. "device-width" is OK.
*/
- setViewport: function ( useAutoScale ) {
- var meta,
+ setViewport: function ( viewportWidth ) {
+ var meta = null,
head,
- content,
- screenWidth = window.outerWidth;
- // TODO : Above code will be replaced by below codes. But screen.availWidth has a webkit bug at this moment.
- // screenWidth = screen.availWidth;
+ content;
// Do nothing if viewport setting code is already in the code.
$( "meta[name=viewport]" ).each( function ( ) {
- console.log( "User set viewport... framework viewport will not be applied." );
meta = this;
return;
});
- if( meta ) {
+ if( meta ) { // Found custom viewport!
content = $( meta ).prop( "content" );
- return; // Ignore viewport setting, when viewport is already set.
- }
-
- // Set meta tag
- meta = document.createElement( "meta" );
- if ( meta ) {
- meta.name = "viewport";
- meta.content = useAutoScale ? "width=" + screenWidth + ", user-scalable=no" : "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no";
- console.log( meta.content );
- head = document.getElementsByTagName( 'head' ).item( 0 );
- head.insertBefore( meta, head.firstChild );
+ console.log( "Viewport is already set. Framework skips viewport setting." );
+ viewportWidth = content.replace( /.*width=(device-width|\d+)\s*,?.*$/gi, "$1" )
+ } else {
+ // Create a meta tag
+ meta = document.createElement( "meta" );
+ if ( meta ) {
+ meta.name = "viewport";
+ content = [ "width=", viewportWidth, ", user-scalable=no" ].join( "" );
+ if ( ! isNaN( viewportWidth ) ) {
+ // Fix scale to 1.0, if viewport width is set to fixed value.
+ // NOTE: Works wrong in Tizen browser!
+ //content = [ content, ", initial-scale=1.0, maximum-scale=1.0" ].join( "" );
+ }
+ meta.content = content;
+ console.log( content );
+ head = document.getElementsByTagName( 'head' ).item( 0 );
+ head.insertBefore( meta, head.firstChild );
+ }
}
+ return viewportWidth;
},
/** Read body's font-size, scale it, and reset it.
},
setScaling: function ( ) {
- var baseWidth = 360,
- screenWidth = window.outerWidth,
- // TODO : Above code will be replaced by below codes. But screen.availWidth has a webkit bug at this moment.
- // screenWidth = screen.availWidth,
- themeDefaultFontSize;
+ var viewportWidth = this.frameworkData.viewportWidth,
+ themeDefaultFontSize = this.frameworkData.defaultFontSize, // comes from theme.js
+ ratio = 1;
- // this.frameworkData.defaultFontSize is from theme.js
- themeDefaultFontSize = this.frameworkData.defaultFontSize;
- console.log( "setScaling themeDefaultFontSize: " + themeDefaultFontSize );
+ // Keep original font size
$( 'body' ).attr( 'data-tizen-theme-default-font-size', themeDefaultFontSize );
- if ( this.frameworkData.viewportScale ) {
- // Fixed viewport scale(=1.0) with scaled font size
- this.setViewport( true );
- this.scaleBaseFontSize( themeDefaultFontSize, parseFloat( screenWidth / baseWidth ) );
- } else {
- // Use base font-size (18px)
- // NOTE: No font-size setting is needed.
- this.setViewport( false );
+ // Legacy support: tizen.frameworkData.viewportScale
+ if ( this.frameworkData.viewportScale == true ) {
+ viewportWidth = "screen-width";
+ }
+
+ if ( "screen-width" == viewportWidth ) {
+ viewportWidth = window.outerWidth;
+ // TODO : Above code will be replaced by below codes. But screen.availWidth has a webkit bug at this moment.
+ // viewportWidth = screen.availWidth,
+ }
+
+ viewportWidth = this.setViewport( viewportWidth ); // If custom viewport setting exists, get viewport width
+ if ( ! isNaN( viewportWidth ) ) { // fixed width!
+ ratio = parseFloat( viewportWidth / this.frameworkData.defaultViewportWidth );
}
+ this.scaleBaseFontSize( themeDefaultFontSize, ratio );
}
};
{
padding-bottom: 52 * @unit_base;
}
-/* white theme, delete button padding */
-.ui-li .ui-btn.ui-btn-edit .ui-btn-inner.ui-btn-hastxt
-{
- .LESSbutton_edit_padding;
-}
-
+
/* wongi_1017 : Icons */
/* icons sizing */
.ui-btn .ui-icon { width: 32 * @unit_base ; height: 32 * @unit_base; }
display: none;
}
-.ui-btn-edit .ui-btn-inner.ui-btn-icon-only
-{
- padding: @width_buttonEdit/2 @height_buttonEdit/2;
-}
-
.ui-btn.ui-btn-corner-all
{
.LESSborder-radius-all(0.3em);
}
/* No BG button : data-iconbg = "nobg" */
-
+.ui-btn.ui-btn-corner-all.ui-btn-icon-nobg
+{
+ box-shadow: none;
+}
.ui-btn.ui-btn-corner-all.ui-btn-icon_only
{
.LESSborder-radius-all(1em);
{
color: @color_button_EditText;
}
-
-.ui-btn.ui-btn-edit.ui-btn-hover-s, .ui-btn.ui-btn-edit.ui-btn-up-s, .ui-btn.ui-btn-edit.ui-btn-down-s
-{ font-size: 0.6em; }
-
-.ui-btn.ui-btn-edit.ui-btn-down-s .ui-btn-text
+.ui-btn.ui-btn-edit .ui-btn-inner
{
- color: @color_button_EditTextPress;
+ .LESSbutton_edit_style;
}
-
-.ui-btn.ui-btn-edit
+/*
+.ui-btn.ui-btn-edit.ui-btn-down-s .ui-btn-text
{
- .LESSbutton_edit_style;
- position: absolute;
- top: 0 * @unit_base;
- margin-top: 0 * @unit_base;
+ color: @color_button_EditTextPress;
}
.ui-btn.ui-btn-edit.ui-btn-down-s
{
.LESSbutton_editpress_style;
}
-
+*/
.ui-btn-box-s
{
.LESSbutton_box_style;
.ui-controlgroup-last {\r
border-bottom-width: 1px;\r
}\r
- \r
+\r
.ui-radio {\r
width : 100%;\r
}\r
- \r
+\r
.ui-radio label {\r
text-align :left;\r
.ui-btn-inner {\r
.ui-controlgroup-last {\r
margin-right: 0;\r
}\r
+\r
+ [data-role="button"] {\r
+ border-top : 0px;\r
+ border-bottom : 0px;\r
+ border-radius : 0px;\r
+ box-shadow : none;\r
+ background : none;\r
+ margin-left : -10 * @unit_base;\r
+ &.ui-btn-down-s, .ui-btn-active-s {\r
+ .ui-btn-inner {\r
+ background : @color_bg;\r
+ .ui-btn-text {\r
+ color : @color_bar_title_text;\r
+ }\r
+ }\r
+ }\r
+\r
+ >.ui-btn-inner {\r
+ border : 0px solid;\r
+ box-shadow : none;\r
+ padding-top : 5 * @unit_base;\r
+ padding-bottom : 5 * @unit_base;\r
+ }\r
+ }\r
}\r
.ui-content {
.ui-listview {
- margin-left: -16 * @unit_base;
- margin-right: -16 * @unit_base;
+ margin-left: -8 * @unit_base;
+ margin-right: -8 * @unit_base;
padding-bottom: 1px;
.ui-listview {
}
.ui-btn {
top: 50%;
- margin-top: -0.8em;
+ margin-top: -0.9em;
}
.ui-btn-text {
position: relative;
box-shadow: none;
}
}
+ >[data-role="button"] {
+ font-size : 15 * @unit_base;
+ font-weight : bold;
+ color : @color_controlbar_btn_normal;
+ }
[data-role="controlgroup"] {
width : 245 * @unit_base; /* temp value */
width : 77 * @unit_base;
border-style : solid;
- border-color : black;
+ border-color : @color_bar_divider_line;
border-top-width : 0px;
border-bottom-width : 0px;
border-left-width : 1px;
border-radius : 0px;
box-shadow : none;
+
+ padding : 0px;
+ margin-left : -10 * @unit_base;
+ margin-right : 1px;
+
+ &.ui-btn-down-s, .ui-btn-active-s {
+ .ui-btn-inner {
+ background : @color_bg;
+ .ui-btn-text {
+ color : @color_bar_title_text;
+ }
+ }
+ }
+
+ >.ui-btn-inner {
+ border : 0px solid;
+ box-shadow : none;
+ }
.ui-btn-text {
font-size : 17 * @unit_base;
color : rgba(58, 58, 58, 1);
.ui-datefield-tab {
min-width: 60 * @unit_base;
}
+ .ui-btn-box-s .ui-btn-inner.ui-btn-hastxt {
+ padding: 0.1em 0.5em;
+ }
}
.ui-datetime {
***************************************************************************/
@color_bar_title_text : rgba(59, 115, 182, 1); /* #3b73b6 */ /* title text */
@color_bar_btn_press : rgba(0, 0, 0, 0.1);
+@color_bar_divider_line : rgba(192, 192, 192, 1); /* 00_divider_line.9.png */
/***************************************************************************
/***************************************************************************
Button(connected with other winset)
***************************************************************************/
-@color_button_EditText: rgb(61, 61, 61);
+@color_button_EditText: rgb(249, 249, 249);
@color_button_EditTextPress: rgb(61, 61, 61);
@color_button_text_normal: rgb(54, 49, 51);
@color_button_text_press: rgb(248, 246, 239);
+@color_button_text_white: rgb(249, 249, 249);
@color_button_normal: rgb(235, 232, 227);
@color_button_normal_webkit: -webkit-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
@button_shadow_outer: 0 0 1px 1px rgba(255, 255, 255, 1);
@button_shadow_inner: none;
+@color_button_edit: rgb(201, 88, 88);
+@color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
+@color_button_edit_moz: -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
+
.LESSbutton_box_style{
color: @color_button_text_normal;
}
}
.LESSbutton_box_style{
- background: @color_button_normal;
- background: @color_button_normal_webkit;
- background: @color_button_normal_moz;
- background: @color_button_normal_o;
- background: @color_button_normal_ms;
+ background: @color_button_normal;
+ background: @color_button_normal_webkit;
+ background: @color_button_normal_moz;
+ background: @color_button_normal_o;
+ background: @color_button_normal_ms;
border: 1px solid;
border-color: rgba(220, 218, 211, 1);
.LESSbox-shadow-line( @button_shadow_outer );
color: @color_button_text_press;
}
+.LESSbutton_edit_style{
+ background: @color_button_edit;
+ background: @color_button_edit_webkit;
+ background: @color_button_edit_moz;
+}
/***************************************************************************
contextual popup
***************************************************************************/
@color_button_text_black: rgb(0, 0, 0);
-@color_button_text_white: rgb(249, 249, 249);
-@color_button_text_press: rgb(249, 249, 249);
@color_circlebutton_hover: rgb(239, 119, 126);
@color_circlebutton_hover_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(198, 78, 85)), to(rgb(166, 43, 45)));
@radius_button_switch: 4px;
@radius_button_switch_reed: 2px;
-@color_button_edit: rgb(201, 88, 88);
-@color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
-@color_button_edit_moz: -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
-
@color_button_edit_press: rgb(147, 24, 24);
@color_button_edit_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23)));
@color_button_edit_press_moz: -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
-moz-border-radius: @radius_button_switch_reed;
}
-.LESSbutton_edit_style{
- background: @color_button_edit;
- background: @color_button_edit_webkit;
- background: @color_button_edit_moz;
- color: rgb(249, 249, 249);
-}
-
.LESSbutton_editpress_style{
background: @color_button_edit_press;
background: @color_button_edit_press_webkit;
// Default theme swatch
$.mobile.page.prototype.options.theme = "s";
-// Default font size for this theme
+// Original scale of the theme
+$.tizen.frameworkData.defaultViewportWidth = 360; // Fit to device-width
$.tizen.frameworkData.defaultFontSize = 22;
+
})(jQuery);
},
_setBouncing: function ( $ele, dir ) {
+ var scroll_height = this._getViewHeight() - this._$clip.height();
+
+ if ( this._softkeyboard ) {
+ if ( this._bouncing_dir ) {
+ this._outerScroll( -scroll_height - this._softkeyboardHeight,
+ scroll_height );
+ } else {
+ this._outerScroll( this._softkeyboardHeight, scroll_height );
+ }
+ return;
+ }
+
if ( dir === "in" ) {
if ( this._bouncing ) {
return;
},
_resetOverflowIndicator: function () {
- if ( !this.options.overflowEnable || !this._overflowAvail ) {
+ if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) {
return;
}
},
_showOverflowIndicator: function () {
- if ( !this.options.overflowEnable || !this._overflowAvail ) {
+ if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) {
return;
}
var opacity_top,
opacity_bottom;
- if ( !this.options.overflowEnable || !this._overflowAvail ) {
+ if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) {
return;
}
self._view_height = view_h;
});
+ $( window ).bind( "vmouseout", function ( e ) {
+ var drag_stop = false;
+
+ if ( $(".ui-page-active").get(0) !== $c.closest(".ui-page").get(0) ) {
+ return;
+ }
+
+ if ( !self._dragging ) {
+ return;
+ }
+
+ if ( e.pageX < 0 || e.pageX > $( window ).width() ) {
+ drag_stop = true;
+ }
+
+ if ( e.pageY < 0 || e.pageY > $( window ).height() ) {
+ drag_stop = true;
+ }
+
+ if ( drag_stop ) {
+ self._hideScrollBars();
+ self._hideOverflowIndicator();
+ self._disableTracking();
+ }
+ });
+
+ this._softkeyboard = false;
+ this._softkeyboardHeight = 0;
+
+ window.addEventListener( "softkeyboardchange", function ( e ) {
+ if ( $(".ui-page-active").get(0) !== $c.closest(".ui-page").get(0) ) {
+ return;
+ }
+
+ self._softkeyboard = ( e.state === "on" ? true : false );
+ self._softkeyboardHeight = e.height;
+ });
+
$c.closest(".ui-page")
.one( "pageshow", function ( e ) {
self._view_offset = self._$view.offset().top - self._$clip.offset().top;
$("#imageslider").imageslider('add', [image_file]);
*/
/**
- @method del
- The del method is used to delete an image from the image slider. The image_index attribute defines the index of the image to be deleted.
+ @method remove
+ The remove method is used to delete an image from the image slider. The image_index attribute defines the index of the image to be deleted.
<div id="imageslider" data-role="imageslider" data-vertical-align="middle"></div>
- $("#imageslider").imageslider('del', [image_index]);
+ $("#imageslider").imageslider('remove', [image_index]);
*/
/**
@method refresh
To add a notification widget to the application, use the following code:
<div data-role="page">
- <div data-role="notification" data-type="tickernoti">
+ <div data-role="notification" data-type="smallpopup">
<p>text1</p>
- <p>text2</p>
</div>
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
- <script type="text/javascript">
- $('#notification-demo').bind('tapped', function (e, m)
- {
- // Notification is tapped with parameter m
- });
*/
/**
@property {String} data-type
*/
/**
- @method show
- The show method is used to show the notification widget:
+ @property {Integer} data-interval
+ Defines the time to showing a notification widget. <br/>The default is infinitely.
- <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
- $('#notification').notification('show');
*/
/**
- @method hide
- The hide method is used to hide the notification widget:
+ @method open
+ The open method is used to open the notification widget:
- <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
- $('#notification').notification('hide');
+ <div data-role="notification" data-type="smallpopup" data-interval="3000"></div>
+ $('#notification').notification('open');
+*/
+/**
+ @method close
+ The close method is used to close the notification widget:
+
+ <div data-role="notification" data-type="smallpopup" data-interval="3000"></div>
+ $('#notification').notification('close');
*/
/**
@method text
The text method is used to set or get the notification text:
- <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
+ <div data-role="notification" data-type="smallpopup" data-interval="3000"></div>
// Set notification text
$('#notification').notification('text', 'setThisText');
// Get notification text
@since Tizen2.0
*/
/**
- @method setIcon
+ @method icon
The setIcon method is used to set the ticker notification icon. The icon can be set only if the notification type is set to tickernoti.
- <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
- $('#notification').notification('setIcon', './test.png');
+ <div data-role="notification" data-type="ticker" data-interval="3000"></div>
+ $('#notification').notification('icon', './test.png');
*/
(function ( $, window ) {
$.widget( "tizen.notification", $.mobile.widget, {
The progress widget shows that an operation is in progress. <br/>To add a progress widget to the application, use the following code:
<div data-role="progress" data-style="circle"></div>
-
- The progress widget can define a callback for the change event, which is fired when the progress value is changed:
-
- <div id="foo" data-role="progress"></div>
- $("#foo").bind("change", function(ev, val)
- {
- Console.log("Value is changed to " + val);
- });
*/
/**
@property {String} data-style
Sets the style of the progress widget. The style options are pending (pending progress style) and circle (circular progress status style).
*/
/**
- @method value
- The value method is used to set or get the current default progress widget value:
+ @method running
+ The running method is used to set the current running state of the pending or circular progress widget:
- <div id="foo" data-role="progress"></div>
- var oldVal = $("#foo").progress("option", "value");
- $("#foo").progress("option", "value", 50);
+ <div id="foo" data-role="progress" data-style="pending"></div>
+ $("#foo").progress("running", true);
*/
/**
- @method running
- The running method is used to set or get the current running state of the pending or circular progress widget:
+ @method show
+ The show method is used to show the pending or circular progress widget:
+
+ <div id="foo" data-role="progress" data-style="pending"></div>
+ $("#foo").progress("show");
+*/
+/**
+ @method hide
+ The show method is used to hide the pending or circular progress widget:
<div id="foo" data-role="progress" data-style="pending"></div>
- var currentRunning = $("#foo").progress("option", "running");
- $("#foo").progress("option", "running", true);
+ $("#foo").progress("hide");
*/
(function ( $, window, undefined ) {
@event change
The progress bar can define a callback for the change event, which is fired when the progress value is changed:
<div id="foo" data-role="progressbar"></div>
- $("#foo").bind("change", function (ev, val)
- {
+ $("#foo").bind("change", function (ev, val) {
Console.log("Value is changed to " + val);
});
*/
You can use the value method with the pickers to set or get the current default progress bar value:
<div id="foo" data-role="progressbar"></div>
- var oldVal = $("#foo").progress("option", "value");
- $("#foo").progress("option", "value", 50);
+ var oldVal = $("#foo").progressbar("value");
+ $("#foo").progressbar("value", 50);
*/
(function ( $, window, undefined ) {
module( "Controlbar" );
- var unit_controlbar = function ( widget, type, drayStyle ) {
+ var unit_controlbar = function ( widget, drayStyle ) {
var controlbar,
controlbar_style,
item_count,
/* Create */
ok( created_controlbar, "Create" );
- /* Check Parameters */
- equal( type, created_controlbar.jqmData("style"), "Parameter: data-style" );
-
if ( drayStyle ) {
if ( drayStyle == "icon" ) {
equal( created_controlbar.find( "a" ).is(".ui-btn-icon_only" ), true, "Icon only style test");
} else if ( drayStyle == "text" ) {
- equal( created_controlbar.is(".ui-navbar-noicons" ), true, "Text only style test");
+ equal( created_controlbar.is(".ui-controlbar-noicons" ), true, "Text only style test");
}
}
equal( activeReturn, false, "List Active test" );
};
- test( "controlbar normal style test -> tabbar", function () {
- unit_controlbar( $("#controlbar-tabbar-test"), "tabbar" );
- });
-
- test( "controlbar icon style test -> tabbar", function () {
- unit_controlbar( $("#controlbar-tabbar-test-icon-only"), "tabbar", "icon" );
- });
-
- test( "controlbar text style test -> tabbar", function () {
- unit_controlbar( $("#controlbar-tabbar-test-text-only"), "tabbar", "text" );
- });
-
- test( "controlbar normal style test -> toolbar", function () {
- unit_controlbar( $("#controlbar-toolbar-test"), "toolbar" );
+ test( "controlbar normal style test", function () {
+ unit_controlbar( $("#controlbar-test") );
});
- test( "controlbar icon style test -> toolbar", function () {
- unit_controlbar( $("#controlbar-toolbar-test-icon-only"), "toolbar", "icon" );
+ test( "controlbar icon style test", function () {
+ unit_controlbar( $("#controlbar-test-icon-only"), "icon" );
});
- test( "controlbar text style test -> tabbar", function () {
- unit_controlbar( $("#controlbar-toolbar-test-text-only"), "toolbar", "text" );
+ test( "controlbar text style test", function () {
+ unit_controlbar( $("#controlbar-test-text-only"), "text" );
});
})(jQuery);
<div data-nstest-role="content">
</div>
<div data-nstest-role="footer">
- <div id="controlbar-tabbar-test" data-role="controlbar" data-style="tabbar" >
+ <div id="controlbar-test" data-role="controlbar">
<ul>
<li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
<li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
<div data-nstest-role="content">
</div>
<div data-nstest-role="footer">
- <div id="controlbar-tabbar-test-icon-only" data-role="controlbar" data-style="tabbar" >
+ <div id="controlbar-test-icon-only" data-role="controlbar">
<ul>
<li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
<li><a href="#" data-icon="ctrlbar-save" ></a></li>
<div data-nstest-role="content">
</div>
<div data-nstest-role="footer">
- <div id="controlbar-tabbar-test-text-only" data-role="controlbar" data-style="tabbar" >
- <ul>
- <li><a href="#" >Menu</a></li>
- <li><a href="#" class="ui-btn-active">Save</a></li>
- <li><a href="#" >Share</a></li>
- <li><a href="#" >Timeline</a></li>
- <li><a href="#" >WorldClock</a></li>
- </ul>
- </div>
- </div>
-</div>
-
-<div data-nstest-role="page">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Controlbar Test - markup</h1>
- </div>
- <div data-nstest-role="content">
- </div>
- <div data-nstest-role="footer">
- <div id="controlbar-toolbar-test" data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" >Menu</a></li>
- <li><a href="#" data-icon="ctrlbar-save" class="ui-btn-active">Save</a></li>
- <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
- </ul>
- </div>
- </div>
-</div>
-
-<div data-nstest-role="page">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Controlbar Test - markup</h1>
- </div>
- <div data-nstest-role="content">
- </div>
- <div data-nstest-role="footer">
- <div id="controlbar-toolbar-test-icon-only" data-role="controlbar" data-style="toolbar" >
- <ul>
- <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="ctrlbar-save" ></a></li>
- <li><a href="#" data-icon="ctrlbar-share" ></a></li>
- <li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
- <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
- </ul>
- </div>
- </div>
-</div>
-
-<div data-nstest-role="page">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>Controlbar Test - markup</h1>
- </div>
- <div data-nstest-role="content">
- </div>
- <div data-nstest-role="footer">
- <div id="controlbar-toolbar-test-text-only" data-role="controlbar" data-style="toolbar" >
+ <div id="controlbar-test-text-only" data-role="controlbar">
<ul>
<li><a href="#" >Menu</a></li>
<li><a href="#" class="ui-btn-active">Save</a></li>
equal( imageslider.length, count + 2, "API: add" );
/* API: del */
- widget.imageslider("del");
+ widget.imageslider("remove");
imageslider = refresh( widget );
equal( imageslider.length, count + 1, "API: del" );
};
+++ /dev/null
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile listviewcontrols tests</title>
-
- <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
-
- <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
- <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
- <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
- <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-theme="tizen-white"></script>
- <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
- <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
-
- <script src="listviewcontrols-tests.js"></script>
-</head>
-<body>
-
-<h1 id="qunit-header">jQuery Mobile listviewcontrols tests</h1>
-<h2 id="qunit-banner"></h2>
-<h2 id="qunit-userAgent"></h2>
-<ol id="qunit-tests">
-</ol>
-
-<div data-nstest-role="page" id="listviewcontrols-test-validates">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>listviewcontrols test - validates</h1>
- </div>
- <div data-nstest-role="content">
- <div id="listviewcontrols-test-validates-controls">
- <p>I am bogus</p>
- </div>
- <ul data-role="listview" id="listviewcontrols-test-validates-target">
- <li>Summat</li>
- <li>Summat else</li>
- </ul>
- </div>
-</div>
-
-<div data-nstest-role="page" id="listviewcontrols-test-defaults">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>listviewcontrols test - defaults</h1>
- </div>
- <div data-nstest-role="content">
- <div id="listviewcontrols-test-defaults-controls">
- <p>I am bogus</p>
- </div>
- <ul data-nstest-role="listview" id="listviewcontrols-test-defaults-target">
- <li>Summat</li>
- <li>Summat else</li>
- </ul>
- </div>
-</div>
-
-<div data-nstest-role="page" id="listviewcontrols-test-attrs">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>listviewcontrols test - attributes</h1>
- </div>
- <div data-nstest-role="content">
- <div id="listviewcontrols-test-attrs-controls-1">
- <p>I am bogus</p>
- </div>
- <ul data-nstest-role="listview"
- data-nstest-listviewcontrols="#listviewcontrols-test-attrs-controls-1"
- data-nstest-listviewcontrols-options='{"modesAvailable": ["foo", "bar"], "mode": "bar", "controlPanelShowIn": "foo"}'
- id="listviewcontrols-test-attrs-target-1">
- <li>Summat</li>
- <li>Summat else</li>
- </ul>
- </div>
-
- <div id="listviewcontrols-test-attrs-controls-2"
- data-nstest-listviewcontrols-show-in="bat">
- <p>I am bogus</p>
- </div>
- <ul data-nstest-role="listview"
- data-nstest-listviewcontrols="#listviewcontrols-test-attrs-controls-2"
- data-nstest-listviewcontrols-options='{"modesAvailable": ["fox", "bat"], "mode": "bat"}'
- id="listviewcontrols-test-attrs-target-2">
- <li>Summat</li>
- <li>Summat else</li>
- </ul>
-</div>
-
-<div data-nstest-role="page" id="listviewcontrols-test-show">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>listviewcontrols test - show</h1>
- </div>
- <div data-nstest-role="content">
- <div id="listviewcontrols-test-show-controls">
- <p>I am bogus</p>
- </div>
-
- <ul data-nstest-role="listview"
- data-nstest-listviewcontrols="#listviewcontrols-test-show-controls"
- id="listviewcontrols-test-show-target">
- <li>
- <span class="listviewcontrols-test-show-always-visible">A_a1</span>
- <span class="listviewcontrols-test-show-visible-in-edit"
- data-nstest-listviewcontrols-show-in="edit">A_e1</span>
- <span class="listviewcontrols-test-show-visible-in-view"
- data-nstest-listviewcontrols-show-in="view">A_v1</span>
- <span class="listviewcontrols-test-show-visible-in-edit"
- data-nstest-listviewcontrols-show-in="edit">A_e2</span>
- <span class="listviewcontrols-test-show-visible-in-view"
- data-nstest-listviewcontrols-show-in="view">A_v2</span>
- <span class="listviewcontrols-test-show-visible-in-edit"
- data-nstest-listviewcontrols-show-in="edit">A_e3</span>
- <span class="listviewcontrols-test-show-visible-in-view"
- data-nstest-listviewcontrols-show-in="view">A_v3</span>
- <span class="listviewcontrols-test-show-always-visible">A_a2</span>
- </li>
- <li>
- <span class="listviewcontrols-test-show-always-visible">B_a1</span>
- <span class="listviewcontrols-test-show-visible-in-edit"
- data-nstest-listviewcontrols-show-in="edit">B_e1</span>
- <span class="listviewcontrols-test-show-visible-in-edit"
- data-nstest-listviewcontrols-show-in="edit">B_e2</span>
- <span class="listviewcontrols-test-show-visible-in-view"
- data-nstest-listviewcontrols-show-in="view">B_v1</span>
- <span class="listviewcontrols-test-show-visible-in-view"
- data-nstest-listviewcontrols-show-in="view">B_v2</span>
- </li>
- </ul>
- </div>
-</div>
-
-<div data-nstest-role="page" id="listviewcontrols-test-methods">
- <div data-nstest-role="header" data-nstest-position="inline">
- <h1>listviewcontrols test - methods</h1>
- </div>
- <div data-nstest-role="content">
- <div id="listviewcontrols-test-methods-controls">
- <p>I am bogus</p>
- </div>
- <ul data-nstest-role="listview"
- data-nstest-filter="true"
- data-nstest-listviewcontrols="#listviewcontrols-test-methods-controls"
- id="listviewcontrols-test-methods-target">
- <li data-nstest-role="list-divider">A</li>
- <li>Abraham</li>
- <li>Andy</li>
- <li data-nstest-role="list-divider">B</li>
- <li>Barry</li>
- <li data-nstest-role="list-divider">C</li>
- <li>Carla</li>
- <li>Carrie</li>
- </ul>
- </div>
-</div>
-
-</body>
-</html>
+++ /dev/null
-/*
- * listviewcontrols unit tests
- */
-(function ($) {
- $.mobile.defaultTransition = "none";
-
- module("listviewcontrols");
-
- asyncTest("constructor validates options when applied programmatically", function () {
- $.testHelper.pageSequence([
- function () {
- var target = $('#listviewcontrols-test-validates-target');
- var controlsSelector = '#listviewcontrols-test-validates-controls';
- var controls = $(controlsSelector);
-
- var check = function (testNumber, options) {
- target.listviewcontrols(options);
- var hasClass = target.hasClass('ui-listviewcontrols-listview');
- target.listviewcontrols('destroy');
- equal(hasClass, false, 'test ' + testNumber);
- };
-
- // no options
- check(1);
-
- // controlPanelSelector is falsy
- check(2, {controlPanelSelector: null});
- check(3, {controlPanelSelector: undefined});
-
- // modesAvailable is bad
- check(4, {controlPanelSelector: controlsSelector, modesAvailable: null});
- check(5, {controlPanelSelector: controlsSelector, modesAvailable: false});
- check(6, {controlPanelSelector: controlsSelector, modesAvailable: 0});
- check(7, {controlPanelSelector: controlsSelector, modesAvailable: ''});
- check(8, {controlPanelSelector: controlsSelector, modesAvailable: {}});
- check(9, {controlPanelSelector: controlsSelector, modesAvailable: []});
- check(10, {controlPanelSelector: controlsSelector, modesAvailable: ['']});
- check(11, {controlPanelSelector: controlsSelector, modesAvailable: ['string']});
- check(12, {controlPanelSelector: controlsSelector, modesAvailable: [null, null]});
- check(13, {controlPanelSelector: controlsSelector, modesAvailable: [0, 0]});
- check(14, {controlPanelSelector: controlsSelector, modesAvailable: ['', '']});
- check(15, {controlPanelSelector: controlsSelector, modesAvailable: ['string', {}]});
- check(16, {controlPanelSelector: controlsSelector, modesAvailable: [{}, 'string']});
- check(17, {controlPanelSelector: controlsSelector, modesAvailable: [0, 'string']});
- check(18, {controlPanelSelector: controlsSelector, modesAvailable: ['string', 0]});
-
- // mode is bad
- check(19, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: null});
- check(20, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: false});
- check(21, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: ''});
- check(22, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'zoink'});
-
- // controlPanelSelector references invalid element
- check(23, {controlPanelSelector: '', modesAvailable: ['foo', 'bar'], mode: 'foo'});
- check(24, {controlPanelSelector: 'noelement', modesAvailable: ['foo', 'bar'], mode: 'foo'});
-
- // controlPanelShowIn is bad
- check(25, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'foo', controlPanelShowIn: true});
- check(26, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'foo', controlPanelShowIn: 'zoink'});
-
- // all options valid
- target.listviewcontrols({
- controlPanelSelector: controlsSelector,
- modesAvailable: ['foo', 'bar'],
- mode: 'foo',
- controlPanelShowIn: 'foo'
- });
- equal(target.hasClass('ui-listviewcontrols-listview'), true);
- equal(controls.hasClass('ui-listviewcontrols-panel'), true);
- target.listviewcontrols('destroy');
-
- start();
- }
- ]);
- });
-
- asyncTest("constructor supplies defaults correctly", function () {
- $.testHelper.pageSequence([
- function () {
- var target = $('#listviewcontrols-test-defaults-target');
- var controlsSelector = '#listviewcontrols-test-defaults-controls';
- var controls = $(controlsSelector);
-
- target.listviewcontrols({controlPanelSelector: controlsSelector});
-
- deepEqual(target.listviewcontrols('option', 'modesAvailable'),
- ['edit', 'view'],
- "Should default to 'edit' and 'view' as modesAvailable");
-
- equal(target.listviewcontrols('option', 'mode'),
- 'view',
- "Should default to 'view' as mode");
-
- equal(target.listviewcontrols('option', 'controlPanelShowIn'),
- 'edit',
- "Should default to showing control panel in 'edit' mode");
-
- equal(target.hasClass('ui-listviewcontrols-listview'), true);
- equal(controls.hasClass('ui-listviewcontrols-panel'), true);
-
- target.listviewcontrols('destroy');
-
- start();
- }
- ]);
- });
-
- asyncTest("constructor uses jqm attributes correctly", function () {
-
- $.testHelper.pageSequence([
- function () {
- $.testHelper.openPage('#listviewcontrols-test-attrs');
- },
-
- function () {
- var $new_page = $('#listviewcontrols-test-attrs');
- ok($new_page.hasClass('ui-page-active'));
-
- // everything set through data-listviewcontrols-options
- var target = $('#listviewcontrols-test-attrs-target-1');
- var controlsSelector = '#listviewcontrols-test-attrs-controls-1';
- var controls = $(controlsSelector);
-
- deepEqual(target.listviewcontrols('option', 'modesAvailable'),
- ['foo', 'bar'],
- "Should set modesAvailable from data-listviewcontrols-options");
-
- equal(target.listviewcontrols('option', 'mode'),
- 'bar',
- "Should set mode from data-listviewcontrols-options");
-
- equal(target.listviewcontrols('option', 'controlPanelShowIn'),
- 'foo',
- "Should set controlPanelShowIn from data-listviewcontrols-options");
-
- equal(target.hasClass('ui-listviewcontrols-listview'), true);
- equal(controls.hasClass('ui-listviewcontrols-panel'), true);
-
- // controlPanelShowIn set on the control panel
- target = $('#listviewcontrols-test-attrs-target-2');
- controlsSelector = '#listviewcontrols-test-attrs-controls-2';
- controls = $(controlsSelector);
-
- deepEqual(target.listviewcontrols('option', 'modesAvailable'),
- ['fox', 'bat'],
- "Should set modesAvailable from data-listviewcontrols-options");
-
- equal(target.listviewcontrols('option', 'mode'),
- 'bat',
- "Should set mode from data-listviewcontrols-options");
-
- equal(target.listviewcontrols('option', 'controlPanelShowIn'),
- 'bat',
- "Should set controlPanelShowIn from data-listviewcontrols-show-in on controls");
-
- equal(target.hasClass('ui-listviewcontrols-listview'), true);
- equal(controls.hasClass('ui-listviewcontrols-panel'), true);
-
- start();
- }
- ]);
- });
-
- asyncTest("control panel and list item elements are shown in appropriate mode", function () {
- $.testHelper.pageSequence([
- function () {
- $.testHelper.openPage('#listviewcontrols-test-show');
- },
-
- function () {
- var $new_page = $('#listviewcontrols-test-show');
- ok($new_page.hasClass('ui-page-active'));
-
- var target = $('#listviewcontrols-test-show-target');
- var controlsSelector = '#listviewcontrols-test-show-controls';
- var controls = $(controlsSelector);
-
- var alwaysVisibleA = 'li:first span.listviewcontrols-test-show-always-visible';
- var alwaysVisibleB = 'li:nth-child(2) span.listviewcontrols-test-show-always-visible';
- var shownInEditA = 'li:first span.listviewcontrols-test-show-visible-in-edit';
- var shownInEditB = 'li:nth-child(2) span.listviewcontrols-test-show-visible-in-edit';
- var shownInViewA = 'li:first span.listviewcontrols-test-show-visible-in-view';
- var shownInViewB = 'li:nth-child(2) span.listviewcontrols-test-show-visible-in-view';
-
- var allVisible = function (selector) {
- var all = target.find(selector);
- var visible = all.filter(':visible');
- equal(visible.length, all.length);
- ok(visible.length > 0);
- ok(all.length > 0);
- };
-
- var allHidden = function (selector) {
- var all = target.find(selector);
- var visible = target.find(selector).filter(':visible');
- equal(visible.length, 0);
- ok(all.length > 0);
- };
-
- // --- initial mode should be view
- equal(target.listviewcontrols('option', 'mode'),
- 'view',
- "Initial mode should be view");
-
- // controls should be hidden
- ok(!controls.is(':visible'));
-
- // target should be always visible
- ok(target.is(':visible'));
-
- // show-in="edit" elements should be hidden
- allHidden(shownInEditA);
- allHidden(shownInEditB);
-
- // show-in="view" elements should be visible
- allVisible(shownInViewA);
- allVisible(shownInViewB);
-
- // other elements should always be visible
- allVisible(alwaysVisibleA);
- allVisible(alwaysVisibleB);
-
- // --- switch mode to edit
- target.listviewcontrols('option', 'mode', 'edit');
-
- // controls should be visible
- ok(controls.is(':visible'));
-
- // target should be always visible
- ok(target.is(':visible'));
-
- // show-in="edit" elements should be visible
- allVisible(shownInEditA);
- allVisible(shownInEditB);
-
- // show-in="view" elements should be hidden
- allHidden(shownInViewA);
- allHidden(shownInViewB);
-
- // other elements should always be visible
- allVisible(alwaysVisibleA);
- allVisible(alwaysVisibleB);
-
- start();
- }
- ]);
- });
-
- asyncTest("visibleListItems() returns correct counts", function () {
- $.testHelper.pageSequence([
- function () {
- $.testHelper.openPage('#listviewcontrols-test-methods');
- },
-
- function () {
- var $new_page = $('#listviewcontrols-test-methods');
- ok($new_page.hasClass('ui-page-active'));
-
- var target = $('#listviewcontrols-test-methods-target');
-
- equal(target.listviewcontrols('visibleListItems').length,
- 5,
- "Should be 5 visible list items (excluding dividers)");
-
- // filter the list and count again
- $new_page.find('input').val('ca');
- $new_page.find('input').trigger('change');
-
- equal(target.listviewcontrols('visibleListItems').length,
- 2,
- "Should be 2 visible list items (excluding dividers) after filtering");
-
- start();
- }
- ]);
- });
-
-})(jQuery);
notification = widget.children( elem );
ok( notification, "Create" );
- /* Show */
- widget.notification("show");
+ /* Open */
+ widget.notification("open");
notification = widget.children( elem );
- ok( notification.hasClass("show"), "API: show" );
+ ok( notification.hasClass("show"), "API: open" );
- /* Hide */
- widget.notification("hide");
+ /* Close */
+ widget.notification("close");
notification = widget.children( elem );
- ok( notification.hasClass("hide"), "API: hide" );
+ ok( notification.hasClass("hide"), "API: close" );
/* hide when click */
- widget.notification("show");
+ widget.notification("open");
notification = widget.children( elem );
notification.trigger("vmouseup");
ok( pc, "pagecontrol object creation" );
nb = pc.children( 'div.page_n' )[1]; // 2nd button
console.dir( nb );
- ok( $(nb).hasClass( 'page_n_2' ), "first button should be activated" );
+ ok( $(nb).hasClass( 'page_n_selected' ), "first button should be activated" );
equal( $( pc ).pagecontrol( "value" ), 2, "value() method must return 2" );
nb = pc.children( 'div.page_n' )[9];
ok( nb, "last number button should exist" );
pc.one( "change", function( ev, val ) {
equal( val, 10, "pagecontrol element's value must be set when click event comes." );
- ok( $( nb ).hasClass( 'page_n_10' ), "after click, clicked button should be changed to number type" );
+ ok( $( nb ).hasClass( 'page_n_selected' ), "after click, clicked button should be changed to number type" );
equal( $( pc ).pagecontrol( "value" ), 10, "value() method must return 10" );
$( pc ).pagecontrol( "value", 5 );
"extendablelist",
"handler",
"imageslider",
- "listviewcontrols",
"multibuttonentry",
"multimediaview",
"navigationbar",
projects / framework / web / web-ui-fw.git / commitdiff