});
/*Expandable list : Dummy DB load*/
- $("#genlist_extendable_page").live("pagecreate", function () {
+ $("#genlist_extendable_page").live("pagecreate", function ( el ) {
/*?_=ts code for no cache mechanism*/
$.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
$("ul").filter( function () {
$("#genlist-extendable-page").die();
$("ul.ui-extendable-list-container").extendablelist("create");
+ // TODO: 'create' is called twice!!
});
});
Name: web-ui-fw
-Version: 0.1.47
+Version: 0.1.48
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
###############################
%changelog
+* Thu Sep 13 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.48
+- FIX:
+ - Add missing icon: controlbar
+ - scrollview: tune scrolling animatio ninterval
+ - datetimepicker: digit/triangle position
+ - datetimepicker: fix day overflow issue
+- Spec changes:
+ - scrollview: show scrollbar when page is showed
+ - scrollview: disable outer scroll
+ - extendablelist: change api with legacy support
+ - add ui-text-ellipsis class
+
* Mon Sep 10 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.47
- FIX:
- scrollveiw: fix height of view
.ui-page.ui-mobile-touch-overflow,
.ui-page.ui-mobile-touch-overflow * {
/* some level of transform keeps elements from blinking out of visibility on iOS */
- -webkit-transform: rotateY(0);
+ .LESStransform(rotateY(0));
}
.ui-page.ui-mobile-pre-transition {
display: block;
/* non-js content hiding */
.ui-nojs { position: absolute; left: -9999px; }
-/* text-ellipsis: width must not be 'auto' */
-.ui-text-ellipsis {
- .LESStext-ellipsis();
-}
-
display: block;\r
width: 95%;\r
}\r
-input.ui-input-text { -webkit-appearance: none; }\r
+input.ui-input-text {\r
+ appearance: none;\r
+ -webkit-appearance: none; \r
+}\r
textarea.ui-input-text {\r
height: 50*@unit_base;\r
-webkit-transition: height 200ms linear;\r
-moz-transition: height 200ms linear;\r
-o-transition: height 200ms linear;\r
+ -ms-transition: height 200ms linear;\r
transition: height 200ms linear;\r
}\r
\r
-webkit-transition: width 400ms linear;\r
-moz-transition: width 400ms linear;\r
-o-transition: width 400ms linear;\r
+ -ms-transition: width 400ms linear;\r
transition: width 400ms linear;\r
}\r
.ui-input-search-wide {\r
-webkit-transition: width 400ms linear;\r
-moz-transition: width 400ms linear;\r
-o-transition: width 400ms linear;\r
+ -ms-transition: width 400ms linear;\r
transition: width 400ms linear;\r
}\r
.ui-btn-icon-cancel {\r
-webkit-transition: all 400ms linear;\r
-moz-transition: all 400ms linear;\r
-o-transition: all 400ms linear;\r
+ -ms-transition: all 400ms linear;\r
transition: all 400ms linear;\r
}\r
.ui-btn-cancel-hide {\r
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
+ -ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
}
.ui-controlgroup .ui-radio-on,
.ui-controlgroup .ui-radio-off.ui-btn-hover-s.ui-btn-down-s {
- background : @color_segmentcontrol_btn_normal;
+ .LESSSegmentControlBtnBackground;
}
.ui-controlgroup .ui-radio-off {
- background: @color_segmentcontrol_btn_press;
+ .LESSSegmentControlBtnPressBackground;
}
.ui-controlgroup .ui-btn-inner .ui-corner-left .ui-controlgroup-first {
+-o-border-radius: .3em;
+-ms-border-radius: .3em;
-moz-border-radius: .3em ;
-webkit-border-radius: .3em ;
border-radius: .3em ;
}
.ui-controlgroup .ui-btn-inner .ui-corner-right .ui-controlgroup-last {
+-o-border-radius: .3em;
+-ms-border-radius: .3em;
-moz-border-radius: .3em ;
-webkit-border-radius: .3em ;
border-radius: .3em ;
***************************************************************************/
.ui-bar-s {
border: none;
- background: @color_bar_bg;
+ .LESSHeaderFooterBackground;
color: @color_bar_title_text;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
.ui-header.ui-bar-s{
position : fixed;
top : 0px;
- background : @color_bar_title_bg;
+ .LESSColorBarTitleBackground;
min-height : 100 * @unit_base;
border-left-color : @color_bar_title_btn_border;
font-weight : bold;
- -webkit-border-radius : 0px;
-
+ .LESSborder-radius-all(0px);
span.ui-btn-inner {
padding-top : 13 * @unit_base;
padding-bottom : 13 * @unit_base;
/* listview divider */
/* NOTE: this divider has no swatch tag! */
li.ui-li-divider {
- background: @color_list_divider_bg;
+ .LESSlistDivider_Background;
color: @color_list_divider_text;
}
/* subitem */
}
.ui-btn-ani-endposition {
+ -ms-transition-property : left;
+ -o-transition-property : left;
+ -moz-transition-property : left;
-webkit-transition-property : left;
+
+ -ms-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
}
.ui-btn-ani-verticalendposition {
+ -ms-transition-property : top;
+ -o-transition-property : top;
+ -moz-transition-property : top;
-webkit-transition-property : top;
+
+ -ms-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
/***************************************************************************
/* checks,radios */
.ui-checkbox .ui-icon {
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
+ .LESSborder-radius-all(3px);
}
//.ui-icon-checkbox-off,
.ui-icon-radio-off {
.ui-icon-ctrlbar-add_tag, .ui-icon-ctrlbar-Chat, .ui-icon-ctrlbar-view_file_history
{
background-color : transparent;
-
- -moz-border-radius: 0px;
- -webkit-border-radius: 0px;
- border-radius: 0px;
+ .LESSborder-radius-all(0px);
background-size: 100% 100%;
-
- -moz-box-shadow: 0px 0px 0 rgba(255,255,255,.4);
- -webkit-box-shadow: 0px 0px 0 rgba(255,255,255,.4);
- box-shadow: 0px 0px 0 rgba(255,255,255,.4);
+
+ .LESSbox-shadow(0px,0px,0, rgba(255,255,255,.4));
}
.ui-icon-ctrlbar-account_sign-up {
-----------------------------------------------------------------------------------------------------------*/
.ui-mobile-nosupport-boxshadow * {
+ -ms-box-shadow: none !important;
+ -o-box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-width: @colorpalette-item-border-width;
border-style: solid;
border-color: @colorpalette-item-border-color;
- -moz-border-radius: 0.2em;
- -webkit-border-radius: 0.2em;
- bordert-radius: 0.2em;
+ .LESSborder-radius-all(0.2em);
}
.colorpalette-choice-active {
.ui-popupwindow-padding {
background: @color_ctxpopup_background;
border: none;
+ -ms-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
+ -o-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
+ -moz-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
-webkit-box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
box-shadow: 0 * @unit_base 0 * @unit_base 12 * @unit_base rgba( 0, 0, 0, .6 );
- -webkit-border-radius: @border_radius;
- border-radius: @border_radius;
+ .LESSborder-radius-all(@border_radius);
}
}
.ui-popupwindow-padding {
background: @color_timepicker_selector_color !important;
border-radius: 0 !important;
+ -ms-border-radius: 0 !important;
+ -o-border-radius: 0 !important;
+ -moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.6) !important;
border-width: 0 !important;
}
}
.ui-checkbox-off {
- background : @color_dayselector_Btn_normal;
+ .LESSDayselectorButtonNormal;
.ui-btn-text {
color : @color_dayselector_Btn_Mon_to_Fri;
}
}
.ui-checkbox-off.ui-btn-down-s.ui-btn-hover-s {
- background : @color_dayselector_Btn_press;
+ .LESSDayaselectorButtonPress;
}
.ui-checkbox-on {
- background : @color_dayselector_Btn_press;
+ .LESSDayaselectorButtonPress;
.ui-btn-text {
color : @color_dayselector_Btn_Mon_to_Fri;
}
}
.ui-checkbox-on.ui-btn-down-s.ui-btn-hover-s {
- background : @color_dayselector_Btn_normal;
+ .LESSDayselectorButtonNormal;
}
.ui-dayselector-label-6 {
.ui-btn-text {
background-image: -o-linear-gradient(@from, @startcolor, @endcolor);
background-image: linear-gradient(@from, @startcolor, @endcolor);
}
+
+.LESSbackground-with-gradient(@from: top, @startcolor: #3c3c3c, @endcolor: #5c5c5c) {
+ background: @startcolor;
+ background: -webkit-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+ background: -moz-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+ background: -ms-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+ background: -o-linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+ background: linear-gradient(@from, @startcolor 0%, @endcolor 100%);
+}
+
.LESSbackground-size(@width, @height) {
+ -ms-background-size: @width @height;
-moz-background-size: @width @height;
-o-background-size: @width @height;
-webkit-background-size: @width @height;
// Mixin : border ***************************
.LESSborder-image(@url:url, @width:width, @height:height, @repeat:repeat) {
- -moz-border-image: url(@url) @width @height @repeat;
- -webkit-border-image: url(@url) @width @height @repeat;
- -o-border-image: url(@url) @width @height @repeat;
- border-image: url(@url) @width @height @repeat;
+ -moz-border-image: url(@url) @width @height @repeat;
+ -webkit-border-image: url(@url) @width @height @repeat;
+ -o-border-image: url(@url) @width @height @repeat;
+ -ms-border-image: url(@url) @width @height @repeat;
+ border-image: url(@url) @width @height @repeat;
}
.LESSborder-radius-topleft(@radius) {
-moz-border-radius-topleft: @radius;
border-bottom-right-radius: @radius;
}
.LESSborder-radius-all(@radius) {
- -moz-border-radius: @radius;
+ -o-border-radius: @radius;
+ -ms-border-radius: @radius;
+ -moz-border-radius: @radius;
-webkit-border-radius: @radius;
- bordert-radius: @radius;
+ border-radius: @radius;
}
// Mixin : box ***************************
.LESSbox-shadow(@hshadow, @vshadow, @blur, @color) {
+ -o-box-shadow: @hshadow @vshadow @blur @color;
+ -ms-box-shadow: @hshadow @vshadow @blur @color;
-moz-box-shadow: @hshadow @vshadow @blur @color;
-webkit-box-shadow: @hshadow @vshadow @blur @color;
box-shadow: @hshadow @vshadow @blur @color;
}
//position: vertical, horizental
.LESSbox-orient(@position) {
+ -ms-box-orient: @position;
-moz-box-orient: @position;
+ -o-box-orient: @position;
-webkit-box-orient: @position;
box-orient: @position;
}
//position: start, center, end
.LESSbox-pack(@position) {
+ -ms-box-pack: @position;
-moz-box-pack: @position;
+ -o-box-pack: @position;
-webkit-box-pack: @position;
box-pack: @position;
}
//position: start, center, end
.LESSbox-align(@position) {
+ -ms-box-align: @position;
-moz-box-align: @position;
+ -o-box-align: @position;
-webkit-box-align: @position;
box-align: @position;
}
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
- overflow-x: hidden;
+ overflow-x: hidden !important;
}
-
--- /dev/null
+/*
+ * Misc. classes for Tizen web ui framework
+ *
+ * All classes in this file has highest priority.
+ */
+
+@import "config.less";
+
+/* text-ellipsis
+ * elements using this class needs following constraints;
+ * - width must not be 'auto'
+ * - display must be 'block' or 'inline-block'
+ */
+.ui-text-ellipsis {
+ .LESStext-ellipsis();
+}
+
padding : .2em .5em;\r
font-size : 1em;\r
text-shadow : 0 .1em .1em rgba(0,0,0,.3);\r
+ -ms-border-radius : .5em;\r
+ -o-border-radius : .5em;\r
-webkit-border-radius : .5em;\r
-moz-border-radius : .5em;\r
border-radius : 1.5em;\r
- -webkit-box-shadow : 0 .1em .1em rgba(0,0,0,.2);\r
- -moz-box-shadow : 0 .1em .1em rgba(0,0,0,.2);\r
- box-shadow : 0 .1em .1em rgba(0,0,0,.2);\r
+ .LESSbox-shadow(0, .1em, .1em, rgba(0,0,0,.2));\r
color : @color_multibuttonentry_block_text;\r
}\r
\r
background-repeat : no-repeat;\r
width : 74 * @unit_base;\r
height : 74 * @unit_base;\r
- -webkit-border-radius : 6 * @unit_base;\r
- -moz-border-radius : 6 * @unit_base;\r
- border-radius : 6 * @unit_base;\r
+ .LESSborder-radius-all( 6 * @unit_base );\r
background-color : @color_multimediaview_button_bg;\r
margin : 4 * @unit_base;\r
}\r
width : 100%;\r
height : 16 * @unit_base;\r
background-color : @color_multimediaview_bar_gray;\r
- -webkit-border-radius : 3 * @unit_base;\r
- -moz-border-radius : 3 * @unit_base;\r
- border-radius : 3 * @unit_base;\r
+ .LESSborder-radius-all(3 * @unit_base);\r
}\r
\r
.ui-multimediaview-control .ui-seekbar .ui-currenttime {\r
height : 16 * @unit_base;\r
position : absolute;\r
background-color : @color_multimediaview_bar_active;\r
- -webkit-border-radius : 3 * @unit_base;\r
- -moz-border-radius : 3 * @unit_base;\r
- border-radius : 3 * @unit_base;\r
+ .LESSborder-radius-all(3 * @unit_base);\r
}\r
\r
.ui-multimediaview-control .ui-volumecontrol {\r
height : 16 * @unit_base;\r
position : absolute;\r
background-color : white;\r
- -webkit-border-radius : 3 * @unit_base;\r
- -moz-border-radius : 3 * @unit_base;\r
- border-radius : 3 * @unit_base;\r
+ .LESSborder-radius-all(3 * @unit_base);\r
background-color : @color_multimediaview_bar_gray;\r
}\r
\r
padding : 0;\r
height : 16 * @unit_base;\r
position : absolute;\r
- -webkit-border-radius : 3 * @unit_base;\r
- -moz-border-radius : 3 * @unit_base;\r
- border-radius : 3 * @unit_base;\r
+ .LESSborder-radius-all(3 * @unit_base);\r
background-color : @color_multimediaview_bar_active;\r
}\r
\r
width : 30 * @unit_base;\r
height : 30 * @unit_base;\r
position : absolute;\r
- -webkit-border-radius : 5 * @unit_base;\r
- -moz-border-radius : 5 * @unit_base;\r
- border-radius : 5 * @unit_base;\r
+ .LESSborder-radius-all(5 * @unit_base);\r
background-color : @color_multimediaview_bar_handle;\r
background : -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));\r
background : -moz-linear-gradient(top, #FFFFFF, #E6E6E6);\r
+ background : -o-linear-gradient(top, #FFFFFF, #E6E6E6);\r
+ background : -ms-linear-gradient(top, #FFFFFF, #E6E6E6);\r
border : solid 1px rgb(213, 213, 213);\r
-}
\ No newline at end of file
+}\r
.ui-ticker.show {
display: block;
+ -ms-animation: ui-ticker-show 0.8s 1 ease;
+ -o-animation: ui-ticker-show 0.8s 1 ease;
+ -moz-animation: ui-ticker-show 0.8s 1 ease;
-webkit-animation: ui-ticker-show 0.8s 1 ease;
top: 0;
}
.ui-ticker.hide {
display: block;
+ -ms-animation: ui-ticker-hide 0.8s 1 ease;
+ -o-animation: ui-ticker-hide 0.8s 1 ease;
+ -ms-animation: ui-ticker-hide 0.8s 1 ease;
-webkit-animation: ui-ticker-hide 0.8s 1 ease;
top: -@ticker-height;
}
.ui-smallpopup.show {
display: block;
-
+ -moz-animation: ui-smallpopup-show 0.5s 1 ease;
+ -ms-animation: ui-smallpopup-show 0.5s 1 ease;
+ -o-animation: ui-smallpopup-show 0.5s 1 ease;
-webkit-animation: ui-smallpopup-show 0.5s 1 ease;
}
.ui-smallpopup.hide {
display: block;
left: -100%;
-
+ -moz-animation: ui-smallpopup-hide 0.5s 1 ease;
+ -ms-animation: ui-smallpopup-hide 0.5s 1 ease;
+ -o-animation: ui-smallpopup-hide 0.5s 1 ease;
-webkit-animation: ui-smallpopup-hide 0.5s 1 ease;
}
background-size: 52 * @unit_base;
// Transition
+ -ms-transition: background 0.5s ease;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
text-align: center;
}
+ .ui-li .ui-radio, .ui-li .ui-checkbox {
+ label {
+ background : transparent;
+ }
+ }
+
// ----------------------------------------------------- //
.center_info {
}
.ui-corner-all {
- -moz-border-radius: 0.3em !important;
- -webkit-border-radius: 0.3em !important;
- border-radius: 0.3em !important;
+ -o-border-radius: 0.3em !important;
+ -ms-border-radius: 0.3em !important;
+ -moz-border-radius: 0.3em !important;
+ -webkit-border-radius: 0.3em !important;
+ border-radius: 0.3em !important;
}
}
.ui-popupwindow-corner-all {
- -moz-border-radius: 0em !important;
- -webkit-border-radius: 0em !important;
- border-radius: 0em !important;
+ -o-border-radius: 0em !important;
+ -ms-border-radius: 0em !important;
+ -moz-border-radius: 0em !important;
+ -webkit-border-radius: 0em !important;
+ border-radius: 0em !important;
}
background-color : @color_scrollview_handler_bg;
background-position : center;
background-repeat : no-repeat;
- -moz-border-radius : 5 * @unit_base;
- -webkit-border-radius : 5 * @unit_base;
- border-radius : 5 * @unit_base;
+ .LESSborder-radius-all(5 * @unit_base);
}
.ui-handler-y .ui-handler-thumb {
right: 0*@unit_base;
background-color: @color_shortcutscroll_rollover_bg;
width: 30*@unit_base;
+ -ms-user-select: none;
+ -o-user-select: none;
+ -moz-user-select: none;
-webkit-user-select: none;
+ user-select:none;
margin:0;
padding-right: 0.08em;
opacity: 1;
.ui-shortcutscroll2 {
position: absolute;
right: 0*@unit_base;
+ -ms-user-select: none;
+ -o-user-select: none;
+ -moz-user-select: none;
-webkit-user-select: none;
+ user-select: none;
margin:0;
padding-right: 0.08em;
opacity: 1;
background: @color_shortcutscroll_popup_bg;
color: @color_shortcutscroll_popup_text;
padding:10*@unit_base 30*@unit_base;
+ -ms-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
+ -o-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
-moz-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
-webkit-box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
box-shadow: 8*@unit_base 10*@unit_base 0*@unit_base @color_shortcutscroll_popup_shadow;
.ui-swipelist-item {
height: 52 * @unit_base;
+ -ms-user-select: none;
+ -o-user-select: none;
+ -moz-user-select: none;
-webkit-user-select: none;
-user-select: none;
margin-left:-2px;
background: url(images/00_switch_button_off.png) no-repeat;
background-size: cover;
+ -ms-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
margin-left:-7px;
background: url(images/00_switch_button_on.png) no-repeat;
background-size: cover;
+ -ms-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
}
.in {
+ -ms-animation-timing-function: ease-out;
+ -ms-animation-duration: 350ms;
+ -o-animation-timing-function: ease-out;
+ -o-animation-duration: 350ms;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
}
.out {
+ -ms-animation-timing-function: ease-in;
+ -ms-animation-duration: 225ms;
+ -o-animation-timing-function: ease-in;
+ -o-animation-duration: 225;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
.fade.out {
opacity: 0;
+ -ms-animation-duration: 125ms;
+ -ms-animation-name: fadeout;
+ -o-animation-duration: 125ms;
+ -o-animation-name: fadeout;
-webkit-animation-duration: 125ms;
-webkit-animation-name: fadeout;
-moz-animation-duration: 125ms;
.fade.in {
opacity: 1;
+ -ms-animation-duration: 225ms;
+ -ms-animation-name: fadein;
+ -o-animation-duration: 225ms;
+ -o-animation-name: fadein;
-webkit-animation-duration: 225ms;
-webkit-animation-name: fadein;
-moz-animation-duration: 225ms;
*/
.viewport-flip {
+ -ms-perspective: 1000;
+ -o-perspective: 1000;
-webkit-perspective: 1000;
-moz-perspective: 1000;
position: absolute;
../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
+ ../common/jquery.mobile.tizen.popup.less.css \
+ ../common/jquery.mobile.tizen.misc.less.css
all: prepare css images js
@color_list_bubble_failed_text: rgb(211, 0, 0);
@color_list_bubble_name_text: rgb(57, 166, 215);
@color_list_bubble_help_text: rgb(146, 146, 146);
-@color_list_divider_bg : -webkit-linear-gradient(top, rgb(73,73,73) 0%,rgb(22,22,22) 100%);
+
+@color_list_divider_bg : rgb(73,73,73);
+@color_list_divider_bg_start : rgb(73,73,73);
+@color_list_divider_bg_end : rgb(22,22,22);
+
@color_list_divider_text : rgb(142, 174, 193); /* #005ea0 */
@color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
@color_list_expandable_expanded_bg: rgb(26, 26, 26);
@style_list_li_dialogue_border_left_width: 10 * @unit_base;
@style_list_bubble_date_height: 40 * @unit_base;
@style_list_bubble_date_text_align: center;
+
+.LESSlistDivider_Background{
+ .LESSbackground-with-gradient(top, @color_list_divider_bg_start, @color_list_divider_bg_end);
+}
+
/***************************************************************************
Shortcut Scroll
***************************************************************************/
.LESSpopup_button_style{
background: @color_popup_buttonbg;
- background: @color_popup_buttonbg_webkit;
- background: @color_popup_buttonbg_moz;
color: @color_popup_buttontext;
}
.LESSpopup_button_press_style{
background: @color_popup_buttonbg_press;
- background: @color_popup_buttonbg_press_webkit;
- background: @color_popup_buttonbg_press_moz;
}
.LESSpopup_padding_style{
@color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */
@color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */
@color_dayselector_Btn_border: rgba(0, 0, 0, 0.1); /* #000000 */
-@color_dayselector_Btn_normal: -webkit-linear-gradient(top, rgb(48,65,95) 0%,rgb(30,43,62) 100%);
-@color_dayselector_Btn_press: -webkit-linear-gradient(top, rgb(71,98,141) 0%,rgb(52,75,112) 100%);
+@color_dayselector_Btn_normal_start: rgb(48,65,95) 0%;
+@color_dayselector_Btn_normal_end: rgb(30,43,62) 100%;
+
+@color_dayselector_Btn_press_start: rgb(71,98,141) 0%;
+@color_dayselector_Btn_press_end: rgb(52,75,112) 100%;
+
+.LESSDayselectorButtonNormal{
+ .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
+}
+
+.LESSDayaselectorButtonPress{
+ .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
+}
/***************************************************************************
OptionHeader
/***************************************************************************
SegmentControl
***************************************************************************/
-@color_segmentcontrol_btn_normal : -webkit-linear-gradient(top, rgb(48,65,95) 0%,rgb(30,43,62) 100%);
-@color_segmentcontrol_btn_press : -webkit-linear-gradient(top, rgb(71,98,141) 0%,rgb(52,75,112) 100%);
+@color_segmentcontrol_btn_normal_start : rgb(48,65,95);
+@color_segmentcontrol_btn_normal_end : rgb(30,43,62);
+
+@color_segmentcontrol_btn_press_start : rgb(71,98,141);
+@color_segmentcontrol_btn_press_end : rgb(52,75,112);
+
@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
+.LESSSegmentControlBtnBackground
+{
+ .LESSbackground-with-gradient(top,@color_segmentcontrol_btn_normal_start,@color_segmentcontrol_btn_normal_end);
+}
+.LESSSegmentControlBtnPressBackground
+{
+ .LESSbackground-with-gradient(top,@color_segmentcontrol_btn_normal_start,@color_segmentcontrol_btn_normal_end);
+}
/***************************************************************************
ControlGroup
***************************************************************************/
Header / Footer
NavigationBar / ControlBar
***************************************************************************/
-@color_bar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_bar_bg : rgb(156,181,179);
+@color_bar_bg_start : rgb(156, 181, 179);
+@color_bar_bg_end : rgb(79, 116, 141);
+
@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
@color_bar_btn_press : rgba(0, 0, 0, 0.1);
@color_bar_btn_bg : transparent;
@color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(56,80,120) 0%,rgb(39,58,88) 100%);
@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_bar_title_bg : -webkit-linear-gradient(top, rgb(68,88,120) 0%,rgb(24,37,56) 100%);
+@color_bar_title_bg : rgb(68,88,120);
+@color_bar_title_bg_start : rgb(68,88,120);
+@color_bar_title_bg_end : rgb(24,37,56);
+
@color_bar_title_btn_border : rgba(0, 0, 0, 0.2);
-@color_bar_footer_bg : -webkit-linear-gradient(top, rgb(43,54,71) 0%,rgb(17,24,35) 100%);
+@color_bar_footer_bg : rgb(43,54,71);
+@color_bar_footer_bg_start : rgb(43,54,71);
+@color_bar_footer_bg_end : rgb(17,24,35);
@color_bar_footer_btn_bg : transparent;
@color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
@color_border_top : rgba(255, 255, 255, 0.5);
@color_border_bottom : rgba(0, 0, 0, 0.5);
+.LESSHeaderFooterBackground
+{
+ .LESSbackground-with-gradient(top, @color_bar_bg_start, @color_bar_bg_end);
+}
+
+.LESSColorBarTitleBackground
+{
+ .LESSbackground-with-gradient(top, @color_bar_title_bg_start, @color_bar_title_bg_end);
+}
+
/***************************************************************************
Tickernoti
***************************************************************************/
../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
+ ../common/jquery.mobile.tizen.popup.less.css \
+ ../common/jquery.mobile.tizen.misc.less.css
all: prepare css images js
@style_list_bubble_date_height: 40 * @unit_base;
@style_list_bubble_date_text_align: center;
+.LESSlistDivider_Background{
+ background: @color_list_divider_bg;
+}
+
/***************************************************************************
Shortcut Scroll
***************************************************************************/
@color_popup_buttonbg: rgb(84, 126, 153);
@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
+@color_popup_buttonbg_ms: -ms-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
+@color_popup_buttonbg_o: -o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
@color_popup_buttontext: rgb(249, 249, 249);
@color_popup_buttonbg_over: rgb(94, 136, 163);
@color_popup_buttonbg_press: rgb(67, 160, 217);
@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
@color_popup_scroller_bg: rgb(249, 249, 249);
background: @color_popup_buttonbg;
background: @color_popup_buttonbg_webkit;
background: @color_popup_buttonbg_moz;
+ background: @color_popup_buttonbg_ms;
+ background: @color_popup_buttonbg_o;
color: @color_popup_buttontext;
}
background: @color_popup_buttonbg_press;
background: @color_popup_buttonbg_press_webkit;
background: @color_popup_buttonbg_press_moz;
+ background: @color_popup_buttonbg_press_ms;
+ background: @color_popup_buttonbg_press_o;
}
.LESSpopup_padding_style{
@color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */
@color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */
@color_dayselector_Btn_border: rgba(26, 82, 116, 1); /* #f9f9f9 */
-@color_dayselector_Btn_normal: -webkit-linear-gradient(top, rgb(125,157,178) 0%,rgb(84,121,144) 100%);
-@color_dayselector_Btn_press: -webkit-linear-gradient(top, rgb(59,119,150) 0%,rgb(47,91,117) 100%);
+
+@color_dayselector_Btn_normal_start: rgb(126, 157, 178);
+@color_dayselector_Btn_normal_end: rgb(84,121,144);
+
+@color_dayselector_Btn_press_start: rgb(59,119,150);
+@color_dayselector_Btn_press_end: rgb(47,91,117);
+
+
+.LESSDayselectorButtonNormal{
+ .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
+}
+
+.LESSDayaselectorButtonPress{
+ .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
+}
/***************************************************************************
/***************************************************************************
SegmentControl
***************************************************************************/
-@color_segmentcontrol_btn_normal : -webkit-linear-gradient(top, rgb(125,157,178) 0%,rgb(84,121,144) 100%);
-@color_segmentcontrol_btn_press : -webkit-linear-gradient(top, rgb(59,119,150) 0%,rgb(47,91,117) 100%);
+@color_segmentcontrol_btn_normal : rgb(125,157,178);
+@color_segmentcontrol_btn_normal_start : rgb(125,157,178);
+@color_segmentcontrol_btn_normal_end : rgb(84,121,144);
+
+@color_segmentcontrol_btn_press : rgb(59,119,150);
+@color_segmentcontrol_btn_press_start : rgb(59,119,150);
+@color_segmentcontrol_btn_press_end : rgb(47,91,117);
+
@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
+.LESSSegmentControlBtnBackground
+{
+ .LESSbackground-with-gradient(top, @color_segmentcontrol_btn_normal_start, @color_segmentcontrol_btn_normal_end);
+}
+
+.LESSSegmentControlBtnPressBackground
+{
+ .LESSbackground-with-gradient(top, @color_segmentcontrol_btn_press_start, @color_segmentcontrol_btn_press_end);
+}
/***************************************************************************
ControlGroup
Header / Footer
NavigationBar / ControlBar
***************************************************************************/
-@color_bar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_bar_bg : rgb(156, 181, 179);
+@color_bar_bg_start : rgb(156, 181, 179);
+@color_bar_bg_end : rgb(79,116,141);
+
@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
@color_bar_btn_press : rgba(0, 0, 0, 0.1);
@color_bar_btn_bg : transparent;
@color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(127,159,181) 0%,rgb(70,108,133) 100%);
@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-@color_bar_title_bg : -webkit-linear-gradient(top, rgb(90,153,186) 0%,rgb(32,84,115) 100%);
+
+@color_bar_title_bg : rgb(90, 153, 186);
+@color_bar_title_bg_start : rgb(90, 153, 186);
+@color_bar_title_bg_end : rgb(32, 84, 115);
+
@color_bar_title_btn_border : rgba(36, 93, 128, 0.4); /* 00_winset_divider_line.png temp value */
@color_bar_footer_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
@color_border_top : rgba(255, 255, 255, 0.5);
@color_border_bottom : rgba(0, 0, 0, 0.5);
+.LESSHeaderFooterBackground
+{
+ .LESSbackground-with-gradient(top, @color_bar_bg_start, @color_bar_bg_end);
+}
+
+.LESSColorBarTitleBackground
+{
+ .LESSbackground-with-gradient(top, @color_bar_title_bg_start, @color_bar_title_bg_end);
+}
+
/***************************************************************************
Tickernoti
***************************************************************************/
el.css( el.jqmData( "cssProp" ), el.jqmData( self.options.disabled ? "dclr" : "clr" ) );
} );
},
-
+ _isValidColorCode: function( value ) {
+ return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test( value );
+ },
_setColor: function ( value ) {
- var currentValue = ( this.options.color );
+ var currentValue = ( this.options.color ),
+ self = this;
+
+ if( !self._isValidColorCode( value ) )
+ {
+ console.log( " Color code is invalid " );
+ value = "#000000";
+ }
value = value.match(/#[0-9A-Fa-f]{6}/)
? value
+++ /dev/null
-OUTPUT = ../../compiled
-
-JS = jquery.mobile.toolkit.js
-JS_THEME = theme.js
-CSS_THEME = theme.css
-
-JSFILES = \
- js/jquery.easing.1.3.js \
- js/jquery.mobile.scrollview.js \
- js/tizen.core.js \
- js/jquery.tmpl.js \
- $(NULL)
-
-JS_THEME_FILES = \
- $(NULL)
-
-CSSFILES = \
- $(NULL)
-
-CSS_THEME_FILES = \
- css/jquery.mobile.scrollview.css \
- $(NULL)
-
-all: init js js_theme css css_theme
- # Done.
-
-js: init
- # Building the Javascript file...
-# @@if test "x${JSFILES}x" != "xx"; then
- cat ${JSFILES} >> ${OUTPUT}/${JS};
-# fi
-
-js_theme: init
- # Building the Javascript theme file...
- @@if test "x${JS_THEME_FILES}x" != "xx"; then \
- cat ${JS_THEME_FILES} >> ${OUTPUT}/${JS_THEME}; \
- fi
-
-css: init
- # Building the CSS file...
- @@if test "x${CSSFILES}x" != "xx"; then \
- cat ${CSSFILES} >> ${OUTPUT}/${CSS}; \
- fi
-
-css_theme: init
- # Building the CSS theme file...
- @@if test "x${CSS_THEME_FILES}x" != "xx"; then \
- cat ${CSS_THEME_FILES} >> ${OUTPUT}/${CSS_THEME}; \
- fi
-
-init:
- # Initializing...
- @@if ! test -d ${OUTPUT}; then \
- mkdir ${OUTPUT}; \
- fi
-
-clean:
- @@true
+++ /dev/null
-.jquery-mobile-clrlib-hue-gradient {
- background: rgb(255,0,0); /* Old browsers */
- background: -webkit-gradient(linear, left top, right top,
- color-stop( 0% ,rgba(255, 0, 0,1)),
- color-stop( 16.666666667%,rgba(255,255, 0,1)),
- color-stop( 33.333333333%,rgba(0 ,255, 0,1)),
- color-stop( 50% ,rgba(0 ,255,255,1)),
- color-stop( 66.666666667%,rgba(0 , 0,255,1)),
- color-stop( 83.333333333%,rgba(255, 0,255,1)),
- color-stop(100% ,rgba(255, 0, 0,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -webkit-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -o-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -ms-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
-}
+++ /dev/null
-@charset "utf-8";
-
-.ui-scrollview-clip {
- position: relative;
-}
-
-.ui-scrollview-view {
-}
-
-.ui-scrolllistview .ui-li-divider {
- z-index: 10;
-}
-
-.ui-scrollbar {
- position: absolute;
- overflow: hidden;
-
- opacity: 0;
- -webkit-transition: opacity 500ms;
- -moz-transition: opacity 500ms;
- transition: opacity 500ms;
-}
-
-.ui-scrollbar-visible {
- opacity: 1;
-}
-
-.ui-scrollbar-y {
- top: 2px;
- right: 2px;
- bottom: 8px;
- width: 5px;
-}
-
-.ui-scrollbar-x {
- right: 8px;
- bottom: 2px;
- left: 2px;
- height: 5px;
-}
-
-.ui-scrollbar-track {
- position: relative;
- width: 100%;
- height: 100%;
-}
-
-.ui-scrollbar-thumb {
- position: absolute;
- top: 0;
- left: 0;
- background-color: rgba(0, 0, 0, 0.3);
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
-}
-
-.ui-scrollbar-y .ui-scrollbar-thumb {
- width: 5px;
- height: 100%;
-}
-
-.ui-scrollbar-x .ui-scrollbar-thumb {
- width: 100%;
- height: 5px;
-}
-
-/*
- * the values below are for the group index
- */
-
-/*
- * padding here set to zero - otherwise the list scrolls underneith the top heading and can be seen above it
- */
-.ui-content.ui-scrollview-clip {
- padding: 0;
-}
-
-/*
- * this seems to effect how far the top divider is place wrt to the scrollview
- * without this, it is placed too high, so it is clipped in half
- */
-.ui-content.ui-scrollview-clip > .ui-listview.ui-scrollview-view {
- margin: 0;
-}
jQuery.widget( "tizen.scrollview", jQuery.mobile.widget, {
options: {
- fps: 60, // Frames per second in msecs.
direction: null, // "x", "y", or null for both.
- scrollDuration: 2000, // Duration of the scrolling animation in msecs.
+ timerInterval: 10,
+ scrollDuration: 1000, // Duration of the scrolling animation in msecs.
overshootDuration: 250, // Duration of the overshoot animation in msecs.
snapbackDuration: 500, // Duration of the snapback animation in msecs.
showScrollBars: true,
overshootEnable: false,
+ outerScrollEnable: false,
scrollJump: false,
},
this._vTracker = ( direction !== "x" ) ?
new MomentumTracker( this.options ) : null;
- this._timerInterval = 1000 / this.options.fps;
+ this._timerInterval = this.options.timerInterval;
this._timerID = 0;
this._timerCB = function () {
if ( !duration || duration === undefined ) {
transition = "none";
} else {
- transition = "-webkit-transform " + duration / 1000 + "s";
+ transition = "-webkit-transform " + duration / 1000 + "s ease-out";
}
if ( $.support.cssTransform3d ) {
start = getCurrentTime(),
tfunc;
+ if ( !this.options.outerScrollEnable ) {
+ return;
+ }
+
if ( this._$clip.jqmData("scroll") !== "y" ) {
return;
}
this._dragging = false;
},
- _showScrollBars: function () {
- var vclass = "ui-scrollbar-visible";
+ _showScrollBars: function ( interval ) {
+ var vclass = "ui-scrollbar-visible",
+ self = this;
if ( !this.options.showScrollBars ) {
return;
}
this._scrollbar_showed = true;
+
+ if ( interval ) {
+ setTimeout( function () {
+ self._hideScrollBars();
+ }, interval );
+ }
},
_hideScrollBars: function () {
var focused,
view_h = self._getViewHeight();
- if ( $(".ui-page-active").get(0) !== self._page.get(0) ) {
+ if ( $(".ui-page-active").get(0) !== $c.closest(".ui-page").get(0) ) {
return;
}
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();
- });
+ $c.closest(".ui-page")
+ .one( "pageshow", function ( e ) {
+ self._view_offset = self._$view.offset().top - self._$clip.offset().top;
+ self._view_height = self._getViewHeight();
+ })
+ .bind( "pageshow", function ( e ) {
+ /* should be called after pagelayout */
+ setTimeout( function () {
+ self._set_scrollbar_size();
+ self._setScrollPosition( self._sx, self._sy );
+ self._showScrollBars( 2000 );
+ }, 0 );
+ });
},
_add_scrollbar: function () {
}
if ( this._$hScrollBar && vw ) {
thumb = this._$hScrollBar.find(".ui-scrollbar-thumb");
- thumb.css( "width", (cw >= vw ? "100%" :
+ thumb.css( "width", (cw >= vw ? "0" :
(Math.floor(cw / vw * 100) || 1) + "%") );
}
}
}
if ( this._$vScrollBar && vh ) {
thumb = this._$vScrollBar.find(".ui-scrollbar-thumb");
- thumb.css( "height", (ch >= vh ? "100%" :
+ thumb.css( "height", (ch >= vh ? "0" :
(Math.floor(ch / vh * 100) || 1) + "%") );
}
}
+++ /dev/null
-/*
- * Defines one can include in one's own .less file for a common look-and-feel
- */
-
-/* From page 60 */
-@tizen-selected-color: #d9931a;
-@tizen-selected-color-disabled: #999999;
+++ /dev/null
-@jquery-mobile-ui-widget-border-color: #c7c7c7;
-@jquery-mobile-ui-widget-text-color: #9d9d9d;
-@jquery-mobile-ui-widget-body: #fafafa;
-@jquery-mobile-ui-widget-left-border-width: 10px;
-@jquery-mobile-ui-widget-left-border-style: solid;
-@jquery-mobile-ui-widget-border-style: 1px solid;
-@jquery-mobile-ui-widget-left-border: @jquery-mobile-ui-widget-left-border-width @jquery-mobile-ui-widget-left-border-style @jquery-mobile-ui-widget-border-color;
-
-.jquery-mobile-ui-widget {
- border-left: @jquery-mobile-ui-widget-left-border;
- border-bottom: @jquery-mobile-ui-widget-border-style @jquery-mobile-ui-widget-border-color;
- background: @jquery-mobile-ui-widget-body;
-}
-
-.jquery-mobile-ui-widget-top {
- border-top: @jquery-mobile-ui-widget-border-style @jquery-mobile-ui-widget-border-color;
-}
-
-.jquery-mobile-ui-label {
- position: relative;
- border-bottom: @jquery-mobile-ui-widget-border-style @jquery-mobile-ui-widget-border-color;
- height: 40px;
- .jquery-mobile-ui-label-text {
- font-family: sans-serif;
- font-size: 120%;
- position: absolute;
- text-align: left;
- vertical-align: bottom;
- color: @jquery-mobile-ui-widget-text-color;
- bottom: 0px;
- left: @jquery-mobile-ui-widget-left-border-width;
- }
-}
-
-.rounded-corners (@radius: 5px) {
- border-radius: @radius;
- -webkit-border-radius: @radius;
- -moz-border-radius: @radius;
-}
-
-.reset-rounded-corners {
- .rounded-corners (0px);
-}
-
-.reset-border {
- border: 0;
-}
-
_makeTwoDigits: function ( val ) {
var ret = val.toString(10);
-
if ( val < 10 ) {
ret = "0" + ret;
}
hour = 12;
}
}
- if ( pat.length == 2 ) {
- hour = this._makeTwoDigits( hour );
- }
+ hour = this._makeTwoDigits( hour );
text = hour;
break;
case 'm':
date.setMonth( val - 1 );
if ( date.getMonth() == val ) {
+ date.setDate( 1 );
date.setDate( date.getDate() - 1 );
}
break;
}
});
- $div.circularview( 'centerTo', '.current', 500 );
+ $div.circularview( 'centerTo', '.current', 200 );
$div.bind( 'scrollend' , function ( e ) {
if ( !obj._reflow ) {
obj._reflow = function () {
-/* ***************************************************************************
+/****************************************************************************
* Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a
*
*
*APIs:
- *
- * create ( void )
- * : API to call _create method. API for AJAX or DB loading callback.
- *
- * recreate ( Array )
- * : Update extendable list with new data array. For example, update with search result.
+ * create ( {
+ * itemData: function ( idx ) { return json_obj; },
+ * numItemData: number or function () { return number; },
+ * cacheItemData: function ( minIdx, maxIdx ) {}
+ * } )
+ * : Create a extendable list widget. At this moment, _create method is called.
+ * args : A collection of options
+ * itemData: A function that returns JSON object for given index. Mandatory.
+ * numItemData: Total number of itemData. Mandatory.
+ * cacheItemData: Extendable list will ask itemData between minIdx and maxIdx.
+ * Developers can implement this function for preparing data.
+ * Optional.
*
*Examples:
*
* </li>
* </script>
*
- * <ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1" data-dbtable="JSON_DATA">
+ * <ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1">
* </ul>
*
*/
//Keeps track of the number of lists per page UID
//This allows support for multiple nested list in the same page
//https://github.com/jquery/jquery-mobile/issues/1617
- var listCountPerPage = {},
- TOTAL_ITEMS = 0,
- last_index = 0;
+ var listCountPerPage = {};
$.widget( "tizen.extendablelist", $.mobile.widget, {
options: {
$( this ).removeClass( "ui-btn-down-s" );
},
- _pushData: function ( template, data ) {
+ _pushData: function ( template ) {
var o = this.options,
t = this,
i = 0,
- dataTable = data,
myTemplate = $( "#" + template ),
- loadMoreItems = ( o.extenditems > data.length - last_index ? data.length - last_index : o.extenditems ),
+ loadMoreItems = ( o.extenditems > t._numItemData - t._lastIndex ? t._numItemData - t.lastIndex : o.extenditems ),
htmlData;
for (i = 0; i < loadMoreItems; i++ ) {
- htmlData = myTemplate.tmpl( dataTable[ i ] );
+ htmlData = myTemplate.tmpl( t._itemData( i ) );
$( o.id ).append( $( htmlData ).attr( 'id', 'li_' + i ) );
/* Add style */
.bind( "mouseover", t._stylerMouseOver )
.bind( "mouseout", t._stylerMouseOut );
- last_index++;
+ t._lastIndex += 1;
}
/* After push data, re-style extendable list widget */
},
_loadmore: function ( event ) {
- var t = this,
- o = event.data,
+ var t = event.data, // <li> element
+ o = t.options,
i = 0,
- dataTable = window[ o.dbtable ],
myTemplate = $( "#" + o.template ),
- loadMoreItems = ( o.extenditems > dataTable.length - last_index ? dataTable.length - last_index : o.extenditems ),
+ loadMoreItems = ( o.extenditems > t._numItemData - t._lastIndex ? t._numItemData - t._lastIndex : o.extenditems ),
htmlData,
more_items_to_load,
num_next_load_items;
/* Append More Items */
for ( i = 0; i < loadMoreItems; i++ ) {
- htmlData = myTemplate.tmpl( dataTable[ last_index ] );
- $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + last_index ) );
- last_index++;
+ htmlData = myTemplate.tmpl( t._itemData( t._lastIndex ) );
+ $( o.id ).append( $( htmlData ).attr( 'id', 'li_' + t._lastIndex ) );
+ t._lastIndex += 1;
}
/* Append "Load more" message on the last of list */
- if ( TOTAL_ITEMS > last_index ) {
+ if ( t._numItemData > t._lastIndex ) {
myTemplate = $( "#" + o.loadmore );
- more_items_to_load = TOTAL_ITEMS - last_index;
+ more_items_to_load = t._numItemData - t._lastIndex;
num_next_load_items = ( o.extenditems <= more_items_to_load ) ? o.extenditems : more_items_to_load;
htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
},
recreate: function ( newArray ) {
- var t = this,
- o = this.options,
- myTemplate,
- more_items_to_load,
- num_next_load_items,
- htmlData;
-
- $( o.id ).empty();
-
- last_index = 0;
- TOTAL_ITEMS = newArray.length;
-
- t._pushData( ( o.template), newArray );
-
- /* Append "Load more" message on the last of list */
- if ( TOTAL_ITEMS > last_index ) {
- myTemplate = $( "#" + o.loadmore );
- more_items_to_load = TOTAL_ITEMS - last_index;
- num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;
- htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
-
- $( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );
-
- $( "#load_more_message" ).live( "click", t.options, t._loadmore );
- } else {
- /* No more items to load */
- $( "#load_more_message" ).die();
- $( "#load_more_message" ).remove();
- }
-
- if ( o.childSelector == " ul" ) {
- $( o.id + " ul" ).swipelist();
- }
-
- $( o.id ).extendablelist();
-
- t.refresh( true );
+ this._create( {
+ itemData: function ( idx ) { return newArray[ idx ] },
+ numItemData: newArray.length
+ } );
},
- _initList: function () {
+ _initList: function (args ) {
var t = this,
o = this.options,
myTemplate,
num_next_load_items,
htmlData;
- /* After AJAX loading success */
- o.dbtable = t.element.data( "dbtable" );
-
- TOTAL_ITEMS = $( window[ o.dbtable ] ).size();
-
/* Make Gen list by template */
- if ( last_index <= 0 ) {
- t._pushData( ( o.template ), window[ o.dbtable ] );
+ if ( t._lastIndex <= 0 ) {
+ t._pushData( o.template );
/* Append "Load more" message on the last of list */
- if ( TOTAL_ITEMS > last_index ) {
+ if ( t._numItemData > t._lastIndex ) {
myTemplate = $( "#" + o.loadmore );
- more_items_to_load = TOTAL_ITEMS - last_index;
+ more_items_to_load = t._numItemData - t._lastIndex;
num_next_load_items = ( o.extenditems <= more_items_to_load) ? o.extenditems : more_items_to_load;
htmlData = myTemplate.tmpl( { NUM_MORE_ITEMS : num_next_load_items } );
$( o.id ).append( $( htmlData ).attr( 'id', "load_more_message" ) );
- $( "#load_more_message" ).live( "click", t.options, t._loadmore );
+ $( "#load_more_message" ).live( "click", t, t._loadmore );
} else {
/* No more items to load */
$( "#load_more_message" ).die();
var o = this.options;
/* external API for AJAX callback */
- this._create( "create" );
+ this._create.apply( this, arguments );
},
- _create: function ( event ) {
+ _create: function ( args ) {
var t = this,
o = this.options,
$el = this.element;
+
+ t.destroy();
+
+ $.extend(this, {
+ _itemData: function ( idx ) { return null; },
+ _numItemData: 0,
+ _cacheItemData: function ( minIdx, maxIdx ) { },
+ _lastIndex: 0
+ });
+
+
// create listview markup
t.element.addClass( function ( i, orig ) {
return orig + " ui-listview ui-extendable-list-container" + ( t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "" );
o.scrollview = false;
}
- /* After DB Load complete, Init Extendable list */
- if ( $( o.id ).hasClass( "elLoadSuccess" ) ) {
- if ( !$( o.id ).hasClass( "elInitComplete" ) ) {
- if ( $el.data( "template" ) ) {
- o.template = $el.data( "template" );
-
- /* to support swipe list, <li> or <ul> can be main node of extendable list. */
- if ( $el.data( "swipelist" ) == true ) {
- o.childSelector = " ul";
- } else {
- o.shildSelector = " li";
- }
+ if ( args ) {
+ if ( !t._loadData( args ) ) {
+ return;
+ }
+ } else {
+ // Legacy support: dbtable
+ console.warn("WARNING: The data interface of extendable list is changed. \nOld data interface(data-dbtable) is still supported, but will be removed in next version. \nPlease fix your code soon!");
+
+ if ( $( o.id ).hasClass( "elLoadSuccess" ) ) {
+ var dbtable_name = $el.jqmData('dbtable');
+ o.dbtable = window[ dbtable_name ];
+ if( !(o.dbtable) ) {
+ o.dbtable = { };
}
+ t._itemData = function ( idx ) {
+ return o.dbtable[ idx ];
+ };
+ t._numItemData = o.dbtable.length;
- $( o.id ).addClass( "elInitComplete" );
+ } else {
+ console.warn("No elLoadSuccess class");
+ return;
}
+ }
- t._initList();
+ if ( $el.data( "template" ) ) {
+ o.template = $el.data( "template" );
+
+ /* to support swipe list, <li> or <ul> can be main node of extendable list. */
+ if ( $el.data( "swipelist" ) == true ) {
+ o.childSelector = " ul";
+ } else {
+ o.shildSelector = " li";
+ }
}
+ t._initList( args );
},
+ _loadData : function ( args ) {
+ var self = this;
+
+ if ( args.itemData && typeof args.itemData == 'function' ) {
+ self._itemData = args.itemData;
+ } else {
+ return false;
+ }
+ if ( args.numItemData ) {
+ if ( typeof args.numItemData == 'function' ) {
+ self._numItemData = args.numItemData( );
+ } else if ( typeof args.numItemData == 'number' ) {
+ self._numItemData = args.numItemData;
+ } else {
+ return false;
+ }
+ } else {
+ return false;
+ }
+ return true;
+ },
+
+
destroy : function () {
var o = this.options;
$( o.id ).empty();
- TOTAL_ITEMS = 0;
+ eOTAL_ITEMS = 0;
last_index = 0;
$( "#load_more_message" ).die();
projects / platform / framework / web / web-ui-fw.git / commitdiff
