From: Minkyu Kang Date: Mon, 3 Dec 2012 08:17:22 +0000 (+0900) Subject: Export 0.1.64 X-Git-Tag: accepted/tizen_2.1/20130425.023924~7^2~346 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=f1114a78aeba1b01da51a022193f4eb7e1240175;p=platform%2Fframework%2Fweb%2Fweb-ui-fw.git Export 0.1.64 --- diff --git a/demos/scaling-sample/index.device_width.html b/demos/scaling-sample/index.device_width.html new file mode 100644 index 0000000..4cb5ee4 --- /dev/null +++ b/demos/scaling-sample/index.device_width.html @@ -0,0 +1,33 @@ + + + + + + + + + Tizen UI Scaling + + + + + + + +
+
+

Scaling:device-width

+
+
+
    +
+ +
+
+
+
+ + diff --git a/demos/scaling-sample/index.fixed_width.html b/demos/scaling-sample/index.fixed_width.html new file mode 100644 index 0000000..9339804 --- /dev/null +++ b/demos/scaling-sample/index.fixed_width.html @@ -0,0 +1,33 @@ + + + + + + + + + Tizen UI Scaling + + + + + + + +
+
+

Scaling:720

+
+
+
    +
+ +
+
+
+
+ + diff --git a/demos/scaling-sample/index.html b/demos/scaling-sample/index.html new file mode 120000 index 0000000..b39faba --- /dev/null +++ b/demos/scaling-sample/index.html @@ -0,0 +1 @@ +index.device_width.html \ No newline at end of file diff --git a/demos/scaling-sample/index.screen_width.html b/demos/scaling-sample/index.screen_width.html new file mode 100644 index 0000000..583c020 --- /dev/null +++ b/demos/scaling-sample/index.screen_width.html @@ -0,0 +1,33 @@ + + + + + + + + + Tizen UI Scaling + + + + + + + +
+
+

Scaling:screen-width

+
+
+
    +
+ +
+
+
+
+ + diff --git a/demos/scaling-sample/log.js b/demos/scaling-sample/log.js new file mode 100644 index 0000000..b477f92 --- /dev/null +++ b/demos/scaling-sample/log.js @@ -0,0 +1,27 @@ +$( window ).load( function () { + ( function writeLog() { + var log = $("#log"), + viewport = $('head').find('meta[name="viewport"]'), + htmlFontSize = $('html').css('font-size'); + + function item(text) { + return $("
  • ").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('
  • ' + idx + '' ); + } + link.listview('refresh'); + } () ); +} ); + diff --git a/demos/scaling-sample/tizen-web-ui-fw b/demos/scaling-sample/tizen-web-ui-fw new file mode 120000 index 0000000..c692543 --- /dev/null +++ b/demos/scaling-sample/tizen-web-ui-fw @@ -0,0 +1 @@ +../../build/tizen-web-ui-fw \ No newline at end of file diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html index 9c4c434..cb59e82 100755 --- a/demos/tizen-winsets/index.html +++ b/demos/tizen-winsets/index.html @@ -58,6 +58,7 @@
  • Slider
  • ImageSlider
  • Segment Control
    • +
  • Group Control(new segment)
  • Day Selector
  • SelectionInfo
  • PageControl
    • diff --git a/demos/tizen-winsets/widgets/button/button.html b/demos/tizen-winsets/widgets/button/button.html index b61a5ef..8dea721 100755 --- a/demos/tizen-winsets/widgets/button/button.html +++ b/demos/tizen-winsets/widgets/button/button.html @@ -28,10 +28,8 @@
  • List item 8
  • List item 9
  • List item 10
    • -
  • List item 11
    • -
  • List item 12
    Delete
    • +
  • List item 11
    • +
  • List item 12
    Delete
    • diff --git a/demos/tizen-winsets/widgets/buttonGrouping.html b/demos/tizen-winsets/widgets/buttonGrouping.html new file mode 100755 index 0000000..2c2147e --- /dev/null +++ b/demos/tizen-winsets/widgets/buttonGrouping.html @@ -0,0 +1,30 @@ +
    + +
    +

    Button grouping

    +
    + + +
    +

    1. Groupped 2 button

    +
    + Back Button + Next Button +
    +
    +

    2. Groupped 3 button

    +
    + Back Button + Save Button + Next Button +
    +
    +

    3. Groupped 4 button

    +
    + Back + Save + Stop + Next +
    +
    +
    diff --git a/demos/tizen-winsets/widgets/controlbar/controlbar_footer_segment_more.html b/demos/tizen-winsets/widgets/controlbar/controlbar_footer_segment_more.html index be8d3fc..3ef57ce 100755 --- a/demos/tizen-winsets/widgets/controlbar/controlbar_footer_segment_more.html +++ b/demos/tizen-winsets/widgets/controlbar/controlbar_footer_segment_more.html @@ -19,22 +19,22 @@
    - + -
    diff --git a/packaging/web-ui-fw.spec b/packaging/web-ui-fw.spec index f6b0779..bc13585 100644 --- a/packaging/web-ui-fw.spec +++ b/packaging/web-ui-fw.spec @@ -1,5 +1,5 @@ Name: web-ui-fw -Version: 0.1.63 +Version: 0.1.64 Release: 0 Summary: Tizen Web UI Framework Library Group: Development/Other @@ -82,6 +82,16 @@ Summary: Tizen Web UI Framework Demo Application: tizen winset demo ############################### %changelog +* Fri Nov 30 2012 Minkyu Kang 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 0.1.63 - FIX: - dayselector: fix size diff --git a/src/loader/loader.js b/src/loader/loader.js index 04e3fc4..11bfd80 100644 --- a/src/loader/loader.js +++ b/src/loader/loader.js @@ -1,9 +1,42 @@ /** + * @class core * loader.js * * Youmin Ha + * + * */ +/* + 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 tag in 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 in the 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 = { @@ -13,7 +46,9 @@ rootDir: '/usr/lib/tizen-web-ui-fw', version: '0.1', theme: "tizen-white", + viewportWidth: "device-width", viewportScale: false, + defaultFontSize: 22, minified: false }, @@ -125,7 +160,11 @@ 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; @@ -311,36 +350,40 @@ /** 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. @@ -358,26 +401,29 @@ }, 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 ); } }; diff --git a/src/themes/tizen/common/jquery.mobile.button.less b/src/themes/tizen/common/jquery.mobile.button.less index 09ec230..d481e02 100755 --- a/src/themes/tizen/common/jquery.mobile.button.less +++ b/src/themes/tizen/common/jquery.mobile.button.less @@ -122,12 +122,7 @@ { 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; } @@ -247,18 +242,16 @@ 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); @@ -276,28 +269,21 @@ { 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; diff --git a/src/themes/tizen/common/jquery.mobile.controlgroup.less b/src/themes/tizen/common/jquery.mobile.controlgroup.less index b1e7dd3..9fcd8c5 100755 --- a/src/themes/tizen/common/jquery.mobile.controlgroup.less +++ b/src/themes/tizen/common/jquery.mobile.controlgroup.less @@ -62,11 +62,11 @@ fieldset.ui-controlgroup { .ui-controlgroup-last { border-bottom-width: 1px; } - + .ui-radio { width : 100%; } - + .ui-radio label { text-align :left; .ui-btn-inner { @@ -88,4 +88,28 @@ fieldset.ui-controlgroup { .ui-controlgroup-last { margin-right: 0; } + + [data-role="button"] { + border-top : 0px; + border-bottom : 0px; + border-radius : 0px; + box-shadow : none; + background : none; + margin-left : -10 * @unit_base; + &.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; + padding-top : 5 * @unit_base; + padding-bottom : 5 * @unit_base; + } + } } diff --git a/src/themes/tizen/common/jquery.mobile.listview.less b/src/themes/tizen/common/jquery.mobile.listview.less index cd040ef..a033e28 100755 --- a/src/themes/tizen/common/jquery.mobile.listview.less +++ b/src/themes/tizen/common/jquery.mobile.listview.less @@ -116,8 +116,8 @@ .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 { @@ -157,7 +157,7 @@ } .ui-btn { top: 50%; - margin-top: -0.8em; + margin-top: -0.9em; } .ui-btn-text { position: relative; diff --git a/src/themes/tizen/common/jquery.mobile.theme.less b/src/themes/tizen/common/jquery.mobile.theme.less index 711c0ff..fa64a3d 100755 --- a/src/themes/tizen/common/jquery.mobile.theme.less +++ b/src/themes/tizen/common/jquery.mobile.theme.less @@ -185,6 +185,11 @@ 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 */ @@ -200,7 +205,7 @@ 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; @@ -208,6 +213,24 @@ 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); diff --git a/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less b/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less index df0e75c..c211694 100755 --- a/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less +++ b/src/themes/tizen/common/jquery.mobile.tizen.datetimepicker.less @@ -14,6 +14,9 @@ .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 { diff --git a/src/themes/tizen/tizen-white/style.less b/src/themes/tizen/tizen-white/style.less index d7d9213..159398a 100755 --- a/src/themes/tizen/tizen-white/style.less +++ b/src/themes/tizen/tizen-white/style.less @@ -12,6 +12,7 @@ ***************************************************************************/ @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 */ /*************************************************************************** @@ -83,11 +84,12 @@ /*************************************************************************** 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)); @@ -105,6 +107,10 @@ @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; } @@ -118,11 +124,11 @@ } .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 ); @@ -156,6 +162,11 @@ color: @color_button_text_press; } +.LESSbutton_edit_style{ + background: @color_button_edit; + background: @color_button_edit_webkit; + background: @color_button_edit_moz; +} /*************************************************************************** contextual popup @@ -306,8 +317,6 @@ ***************************************************************************/ @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))); @@ -331,10 +340,6 @@ @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)); @@ -368,13 +373,6 @@ -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; diff --git a/src/themes/tizen/tizen-white/theme.js b/src/themes/tizen/tizen-white/theme.js index 04a32ab..ec37569 100755 --- a/src/themes/tizen/tizen-white/theme.js +++ b/src/themes/tizen/tizen-white/theme.js @@ -20,7 +20,9 @@ $.fn.buttonMarkup.defaults.theme = "s"; // 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); diff --git a/src/widgets/common/js/jquery.mobile.tizen.scrollview.js b/src/widgets/common/js/jquery.mobile.tizen.scrollview.js index 6d94c9a..1ec7d70 100644 --- a/src/widgets/common/js/jquery.mobile.tizen.scrollview.js +++ b/src/widgets/common/js/jquery.mobile.tizen.scrollview.js @@ -296,6 +296,18 @@ }, _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; @@ -950,7 +962,7 @@ }, _resetOverflowIndicator: function () { - if ( !this.options.overflowEnable || !this._overflowAvail ) { + if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) { return; } @@ -981,7 +993,7 @@ }, _showOverflowIndicator: function () { - if ( !this.options.overflowEnable || !this._overflowAvail ) { + if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) { return; } @@ -1004,7 +1016,7 @@ var opacity_top, opacity_bottom; - if ( !this.options.overflowEnable || !this._overflowAvail ) { + if ( !this.options.overflowEnable || !this._overflowAvail || this._softkeyboard ) { return; } @@ -1143,6 +1155,44 @@ 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; diff --git a/src/widgets/imageslider/js/jquery.mobile.tizen.imageslider.js b/src/widgets/imageslider/js/jquery.mobile.tizen.imageslider.js index 961bf88..b161cf4 100755 --- a/src/widgets/imageslider/js/jquery.mobile.tizen.imageslider.js +++ b/src/widgets/imageslider/js/jquery.mobile.tizen.imageslider.js @@ -95,11 +95,11 @@ $("#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.
    - $("#imageslider").imageslider('del', [image_index]); + $("#imageslider").imageslider('remove', [image_index]); */ /** @method refresh diff --git a/src/widgets/notification/js/jquery.mobile.tizen.notification.js b/src/widgets/notification/js/jquery.mobile.tizen.notification.js index eb5003f..f446e21 100644 --- a/src/widgets/notification/js/jquery.mobile.tizen.notification.js +++ b/src/widgets/notification/js/jquery.mobile.tizen.notification.js @@ -65,19 +65,13 @@ To add a notification widget to the application, use the following code:
    -
    +

    text1

    -

    text2

    - - - - - - - - - - - -

    jQuery Mobile listviewcontrols tests

    -

    -

    -
      -
    - -
    -
    -

    listviewcontrols test - validates

    -
    -
    -
    -

    I am bogus

    -
    -
      -
    • Summat
      • -
    • Summat else
      • -
    -
    -
    - -
    -
    -

    listviewcontrols test - defaults

    -
    -
    -
    -

    I am bogus

    -
    -
      -
    • Summat
      • -
    • Summat else
      • -
    -
    -
    - -
    -
    -

    listviewcontrols test - attributes

    -
    -
    -
    -

    I am bogus

    -
    -
      -
    • Summat
      • -
    • Summat else
      • -
    -
    - -
    -

    I am bogus

    -
    -
      -
    • Summat
      • -
    • Summat else
      • -
    -
    - -
    -
    -

    listviewcontrols test - show

    -
    -
    -
    -

    I am bogus

    -
    - -
      -
    • - A_a1 - A_e1 - A_v1 - A_e2 - A_v2 - A_e3 - A_v3 - A_a2 -
      • -
    • - B_a1 - B_e1 - B_e2 - B_v1 - B_v2 -
      • -
    -
    -
    - -
    -
    -

    listviewcontrols test - methods

    -
    -
    -
    -

    I am bogus

    -
    -
      -
    • A
      • -
    • Abraham
      • -
    • Andy
      • -
    • B
      • -
    • Barry
      • -
    • C
      • -
    • Carla
      • -
    • Carrie
      • -
    -
    -
    - - - diff --git a/tests/unit-tests/listviewcontrols/listviewcontrols-tests.js b/tests/unit-tests/listviewcontrols/listviewcontrols-tests.js deleted file mode 100644 index 85a23d9..0000000 --- a/tests/unit-tests/listviewcontrols/listviewcontrols-tests.js +++ /dev/null @@ -1,278 +0,0 @@ -/* - * 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); diff --git a/tests/unit-tests/notification/notification-tests.js b/tests/unit-tests/notification/notification-tests.js index ae973b0..d96c1d3 100644 --- a/tests/unit-tests/notification/notification-tests.js +++ b/tests/unit-tests/notification/notification-tests.js @@ -18,20 +18,20 @@ 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"); diff --git a/tests/unit-tests/pagecontrol/pagecontrol-tests.js b/tests/unit-tests/pagecontrol/pagecontrol-tests.js index 6343a92..17c7b4e 100644 --- a/tests/unit-tests/pagecontrol/pagecontrol-tests.js +++ b/tests/unit-tests/pagecontrol/pagecontrol-tests.js @@ -19,14 +19,14 @@ 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 ); diff --git a/tests/unit-tests/tests.js b/tests/unit-tests/tests.js index c9a214f..1410822 100644 --- a/tests/unit-tests/tests.js +++ b/tests/unit-tests/tests.js @@ -11,7 +11,6 @@ var TESTS = { "extendablelist", "handler", "imageslider", - "listviewcontrols", "multibuttonentry", "multimediaview", "navigationbar",