diff options
Diffstat (limited to 'tau/src')
1098 files changed, 17911 insertions, 38559 deletions
diff --git a/tau/src/css/profile/helpers.less b/tau/src/css/profile/helpers.less deleted file mode 100644 index 24efe5c8..00000000 --- a/tau/src/css/profile/helpers.less +++ /dev/null @@ -1,34 +0,0 @@ -/** Helpers enables animation(transition) on properties which are changed - after focus / blur - Use these helpers on elements and properties which have changed properties on focus - */ - -.focus-animation(@property1) { - .transition-property(@property1); - .transition-duration(@focus_transition_duration); -} - -.focus-animation(@property1, @property2) { - .transition-property(@property1, @property2); - .transition-duration(@focus_transition_duration); -} - -.focus-animation(@property1, @property2, @property3) { - .transition-property(@property1, @property2, @property3); - .transition-duration(@focus_transition_duration); -} - -.focus-animation(@property1, @property2, @property3, @property4) { - .transition-property(@property1, @property2, @property3, @property4); - .transition-duration(@focus_transition_duration); -} - -.focus-animation(@property1, @property2, @property3, @property4, @property5) { - .transition-property(@property1, @property2, @property3, @property4, @property5); - .transition-duration(@focus_transition_duration); -} - -.focus-animation(@property1, @property2, @property3, @property4, @property5, @property6) { - .transition-property(@property1, @property2, @property3, @property4, @property5, @property6); - .transition-duration(@focus_transition_duration); -}
\ No newline at end of file diff --git a/tau/src/css/profile/mobile/changeable/common/indexscrollbar.less b/tau/src/css/profile/mobile/changeable/common/indexscrollbar.less deleted file mode 100644 index f03132f5..00000000 --- a/tau/src/css/profile/mobile/changeable/common/indexscrollbar.less +++ /dev/null @@ -1,96 +0,0 @@ -.ui-indexscrollbar { - display: block; - position: absolute; - right: 0; //TODO:bidi - top: 0; - width: 33 * @unit_base; - height: 100%; - padding-left: 2 * @unit_base; - //background-color: @color_indexscrollbar_bg; - background-color: @color_fastscroll_rollover_bg; - z-index: 1000; - overflow: visible; // To show 2nd indexbar - .user-select(none); - cursor: pointer; - .border-box(); - - ul { - list-style-type: none; - margin: 0; - padding: 0; - position:absolute; - width: 100%; - top:0; - li { - cursor: pointer; - //color: @color_indexscrollbar_text; - color: @color_fastscroll_rollover_text; - display: block; - width: 100%; - text-align: center; - vertical-align: middle; - font-size: @font_size_fastscroll_rollover_text; - height: 28 * @unit_base; - line-height: 28 * @unit_base; - font-weight: bold; - } - li.ui-state-selected { - //background-color: @color_indexscrollbar_selected_bg; - //color: @color_indexscrollbar_selected_text; - } - } - ul.ui-indexscrollbar-supplementary { - position: relative; - height: auto; - top: 0; - right: -40 * @unit_base; - width: 100%; - li { - //background-color: @color_indexscrollbar_bg_supplementary; - //color: @color_indexscrollbar_text; - } - li.ui-state-selected { - //background-color: @color_indexscrollbar_bg_supplementary; - //color: @color_indexscrollbar_selected_text_supplementary; - } - - } - - & + .ui-listview li { - padding-right: 40*@unit_base; - } -} - -.ui-indexscrollbar-indicator { - position: fixed; - top: 0; - left: 0; - z-index: 999; - display: none; - - >span { - width: 92 * @unit_base; - line-height: 100 * @unit_base; - box-shadow: 0 2px 1px @color_fastscroll_popup_border; - position: absolute; - display: block; - top: 50%; - left: 50%; - margin-left: -90 * @unit_base; - margin-top: -43 * @unit_base; - line-height: 87 * @unit_base; - font-size: 70 * @unit_base; - padding: 0; - border: 2px solid @color_fastscroll_popup_border; - border-radius: 7px; - text-align: center; - .border-box(); - background-color: @color_fastscroll_popup_bg; - color: @color_fastscroll_popup_text; - - >span.ui-selected { - //color: @color_indexscrollbar_indicator_text_selected; - } - - } -} diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.box.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.box.less deleted file mode 100644 index d5004d51..00000000 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.box.less +++ /dev/null @@ -1,92 +0,0 @@ -.ui-box { - &-float { - .align-content(flex-start); - display: flex; - .flex-wrap(wrap); - &-left { - .justify-content(flex-start); - } - &-right { - .justify-content(flex-end); - } - &-center { - .justify-content(center); - } - &-top { - .align-items(flex-start); - } - &-middle { - .align-items(center); - } - &-bottom { - .align-items(flex-end); - } - } - - &-relative { - position: relative; - height: 100%; - - > *:not(script) { - position: absolute; - } - - > .position { - &-top { - top: 0; - } - - &-left { - left: 0; - } - - &-right { - right: 0; - } - - &-bottom { - bottom: 0; - } - - &-center { - &.position-bottom, - &.position-top { - left: 50%; - .transform(translate(-50%, 0)); - } - - &.position-left, - &.position-right { - top: 50%; - .transform(translate(0, -50%)); - } - - // Instead of redefining every property for -center class - // :not if none other position class is defined - &:not(.position-top):not(.position-right):not(.position-bottom):not(.position-left) { - top: 50%; - left: 50%; - .transform(translate(-50%, -50%)); - } - } - } - } - &-float-middle { - .align-items(center); - } - &-float-bottom { - .align-items(flex-end); - } - &-linear-horizont { - display: flex; - flex-direction: row; - } - &-linear-vertical { - display: flex; - flex-direction: column; - } -} -&.ui-box-linear-wrap { - flex-wrap: wrap; -} - diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.button.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.button.less index 3eaafe5d..82d8fcbc 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.button.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.button.less @@ -1,218 +1,443 @@ -button.ui-btn, -input[type="button"].ui-btn { - -webkit-appearance: none; - box-sizing: border-box; - width: auto; - border: none; - outline: none; -} +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ -a.ui-btn { - text-decoration: none; -} + +/* Edit button size */ +@height_buttonEdit: 74 * @unit_base; +@width_buttonEdit: @height_buttonEdit; .ui-btn { + display: block; + text-align: center; + cursor:pointer; position: relative; - display: inline-block; - box-sizing: border-box; - padding: 10 * @unit_base 22 * @unit_base; vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - text-align: center; + text-decoration: none; +} /* wongi_1018 : For button align. */ + +.ui-footer, .ui-ticker-btn { + .ui-btn.ui-btn-box-s { + margin-top: 0; + margin-bottom: 0; + } +} +.ui-btn.ui-btn-box-s { + margin-top: 6 * @unit_base; + margin-bottom: 6 * @unit_base; color: @color_button_text_normal; font-size: @font_size_button_text; - white-space: nowrap; - cursor: pointer; - background-color: @color_button_bg; - .core_button_bg(); +} - &.ui-inline { - display: inline-block; - width: auto; - } +.ui-btn:focus, .ui-btn:active { outline: none; } +.ui-header > .ui-btn, .ui-bar > .ui-btn { display: inline-block; margin: 0; } +.ui-btn-inline { display: inline-block; } +.ui-btn-inner { + display: block; + position: relative; + zoom: 1; + line-height: 38 * @unit_base; + padding-top: 3.5 * @unit_base; + padding-bottom: 3.5 * @unit_base; - &:active { - .core_button_bg_pressed(); - background-color: @color_button_bg_press; - } + .LESStext-ellipsis(); } -.ui-btn.ui-btn-icon-only { - height: 56 * @unit_base; - width: 56 * @unit_base; - padding: 0; - background-color: transparent; - text-indent: 100%; - &:not(.ui-btn-circle)::after { - top: 5 * @unit_base; - left: 5 * @unit_base; - width: 46 * @unit_base; - height: 46 * @unit_base; - background-color: @color_button_icon_only; - } +/*btn icon positioning*/ +.ui-btn-icon-notext .ui-icon { display: block; } +.ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon, .ui-btn-icon-circle .ui-icon { position: absolute; /*top: 50%; margin-top: -9px;*/ } /* wongi_1018 : do not use. No more use 18px default icons. */ - &:active:not(.ui-icon-minus):not(.ui-icon-plus):not(.naviframe-button):not(.ui-drawer-button):not(.ui-btn-circle)::after { - background-color: @color_button_icon_only_press; - } - - &.ui-btn-circle { - background-color: @color_button_bg; - &::after { - top: 10 * @unit_base; - left: 10 * @unit_base; - background-color: @color_button_icon; - } +.ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + -webkit-transform: translate(-50%, 0); +} +.ui-btn-icon-left .ui-icon { left: 7 * @unit_base; } +.ui-btn-icon-circle .ui-icon {left: 0 * @unit_base; } /* wongi_1018 : for circle icon center positioning. */ +.ui-btn-icon-right .ui-icon { right: 4 * @unit_base; } +.ui-btn-icon-top .ui-icon { top: 0 * @unit_base; margin-top: 0; } +.ui-btn-icon-bottom .ui-icon { bottom: 0 * @unit_base; } - &:active { - .core_button_bg_pressed(); - background-color: @color_button_bg_press; +.iconposition { + &.ui-btn-icon-right { + .ui-icon { + right: 4 * @unit_base; } } - &.ui-icon-plus:not(.ui-btn-circle) { - background-color: transparent; - &::after { - background-color: @color_button_add; + &.ui-btn-icon-top { + .ui-icon { + top: 4 * @unit_base; } - &:active::after { - background-color: @color_button_add_press; + + &.ui-btn-icon_only { + .ui-icon { + top: 10 * @unit_base; + } } } - &.ui-icon-minus:not(.ui-btn-circle) { - background-color: transparent; - &::after { - background-color: @color_button_delete; - } - &:active::after { - background-color: @color_button_delete_press; + &.ui-btn-icon-bottom { + .ui-icon { + bottom: 4 * @unit_base; } } } +.ui-header { + > * { + .iconposition(); + } +} -.ui-btn-icon { - &::after { - position: absolute; - width: 36 * @unit_base; - height: 36 * @unit_base; - background-color: @color_button_icon; - -webkit-mask-size: 100%; - content: ""; +.ui-footer, .ui-bar { + * { + .iconposition(); } +} + + +/*hiding native button,inputs */ +.ui-btn-hidden { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: button; opacity: .1; cursor: pointer; background: transparent; font-size: 1 * @unit_base; border: none; line-height: 999 * @unit_base; } + +.ui-btn-text { + /*padding-left : 80px;*/ //wongi_1017 + margin-left: auto; + margin-right: auto; + padding:0 8px; /* Webkit width(ellipsis) problem workaround */ +} + +.ui-btn .ui-btn-inner.ui-btn-hastxt span.ui-btn-text { + line-height: 38 * @unit_base; +} - &.ui-btn-icon-left { - padding-left: 56 * @unit_base; - &::after { - top: 9 * @unit_base; - left: 12 * @unit_base; +.ui-li .ui-btn.ui-btn-icon_only { + top: 50%; + margin-top: -18.5 * @unit_base; +} + +.ui-li .ui-btn .ui-btn-inner.ui-btn-hastxt { + padding: 6 * @unit_base 21 * @unit_base; +} +.ui-btn-icon-nobg.ui-btn-down-s .ui-btn-inner { + background: transparent ! important; +} +.ui-btn-box-s.ui-btn-up-s, +.ui-btn-box-s.ui-focus, +.ui-btn-box-s.ui-btn-hover-s { + &:not(.ui-btn-icon_only):not(.ui-drawer-button) { + .core_button_bg(); + padding: 4.5 * @unit_base; + background-color: @color_button_bg; + } + &:not([data-style="nobg"]) .ui-icon { + background-color: @color_button_icon; + } + &:not([data-style="nobg"]):not([data-style="circle"]).ui-btn-icon_only:not(.ui-btn-icon-naviframe-cancel):not(.ui-btn-icon-naviframe-done) { + .ui-icon { + background-color: @color_button_icon_nobg; } } + &[data-style="nobg"] .ui-icon { + background-color: @color_button_icon_nobg; + } + &[data-icon="plus"] .ui-icon { + background-color: @color_button_add; + } + &[data-icon="alert"] .ui-icon, + &[data-icon="minus"] .ui-icon { + background-color: @color_button_warning; + } +} +.ui-btn-box-s.ui-btn-down-s { - &.ui-btn-icon-right { - padding-right: 56 * @unit_base; - &::after { - top: 9 * @unit_base; - right: 12 * @unit_base; - } + text-shadow: none; + + &:not(.ui-btn-icon_only):not(.ui-drawer-button) { + .core_button_bg_pressed(); + padding: 4.5 * @unit_base; + background-color: @color_button_bg_press; } - &.ui-btn-icon-top { - padding-top: 56 * @unit_base; - &::after { - top: 0 * @unit_base; - left: 50%; - margin-left: -24 * @unit_base; + &:not([data-style="nobg"]) .ui-icon { + background-color: @color_button_icon; + } + &:not([data-style="nobg"]):not([data-style="circle"]).ui-btn-icon_only { + .ui-icon { + background-color: @color_button_icon_nobg_press; } } + &[data-style="nobg"] .ui-icon { + background-color: @color_button_icon_nobg_press; + } + &[data-icon="plus"] .ui-icon { + background-color: @color_button_add_press; + } + &[data-icon="alert"] .ui-icon, + &[data-icon="minus"] .ui-icon { + background-color: @color_button_warning_press; + } +} - &.ui-btn-icon-bottom { - padding-bottom: 56 * @unit_base; - &::after { - bottom: 0 * @unit_base; - left: 50%; - margin-left: -24 * @unit_base; - } +.ui-header > .naviframe-button.ui-btn.ui-btn-box-s.ui-btn-down-s { + background : @color_bar_naviframe_press; +} + +.ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt { + padding-top: 52 * @unit_base; +} +.ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt, .ui-li .ui-btn-icon-bottom .ui-btn-inner.ui-btn-hastxt { + padding-bottom: 52 * @unit_base; +} + +/* wongi_1017 : Icons */ +/* icons sizing */ +.ui-btn .ui-icon { width: 22 * @unit_base ; height: 22 * @unit_base; } +.ui-btn.ui-btn-edit .ui-icon { width: @width_buttonEdit; height: @height_buttonEdit; } + +/* Padding for Icon with text */ +.ui-btn .ui-btn-text.ui-btn-text-padding-left { + padding-left: 56 * @unit_base; + padding-right: 30 * @unit_base +} +.ui-btn .ui-btn-text.ui-btn-text-padding-right { + padding-right: 56 * @unit_base; + padding-left: 30 * @unit_base +} +.ui-btn .ui-btn-text.ui-btn-text-padding-top {padding-top: 32 * @unit_base;} +.ui-icon { + background-repeat: no-repeat; + vertical-align: middle; + background-position: 0% 0%; + background-size: 100%; +} +.ui-btn-box.s .ui-icon { + position: absolute; +} +.ui-btn-box-s.ui-btn-icon-left .ui-icon { + margin-top: -15 * @unit_base ; + top: 50%; + left: 18 * @unit_base; +} +.ui-btn-box-s.ui-btn-icon-right .ui-icon { + margin-top: -15 * @unit_base ; + top: 50%; + right: 18 * @unit_base; +} +.ui-btn-box-s.ui-btn-icon-top .ui-icon, .ui-btn-box-s.ui-btn-icon-bottom .ui-icon { + margin-left: -10 * @unit_base ; + left: 50%; +} +.tizen-icon-common { + /* Overlap original property */ + width: 30 * @unit_base; + height: 30 * @unit_base; +} + +.tizen-smallicon-common { + width: 20 * @unit_base ! important; + height: 20 * @unit_base ! important; + top: 50% ! important; + left: 50% ! important; + margin-top: -20 * @unit_base / 2 ! important; + margin-left: -20 * @unit_base / 2 ! important; +} +.ui-btn { + .ui-icon-bg, .ui-icon-arrow-l, .ui-icon-arrow-r, .ui-icon-arrow-u, .ui-icon-arrow-d, + .ui-icon-delete, .ui-icon-plus, .ui-icon-minus, .ui-icon-forward, .ui-icon-alert, .ui-icon-info, + .ui-icon-call, .ui-icon-rename, .ui-icon-star, .ui-icon-search, .ui-icon-scrolltop, .ui-icon-scrollleft, + .ui-icon-check, .ui-icon-gear, .ui-icon-refresh, .ui-icon-back, .ui-icon-grid, .ui-icon-home, + { + -webkit-mask-size: 100%; } - &.ui-icon-call::after { - -webkit-mask-image: url(images/controls/button/00_button_call.png); + .ui-icon-bg, .ui-icon-arrow-l, .ui-icon-arrow-r, .ui-icon-arrow-u, .ui-icon-arrow-d, + .ui-icon-delete, .ui-icon-plus, .ui-icon-minus, .ui-icon-forward, .ui-icon-alert, .ui-icon-info, + .ui-icon-call, .ui-icon-rename, .ui-icon-star, .ui-icon-favorite, .ui-icon-search, .ui-icon-scrolltop, .ui-icon-scrollleft, + .ui-icon-check, .ui-icon-gear, .ui-icon-refresh, .ui-icon-back, .ui-icon-grid, .ui-icon-home, + { + -webkit-mask-size: 100%; } - &.ui-icon-arrow-r::after { - -webkit-mask-image: url(images/controls/button/00_button_right.png); + + .ui-icon-bg { + .tizen-icon-common; + -webkit-mask-image: url(images/00_circle_button_bg.png); + z-index:0; } - &.ui-icon-arrow-l::after { + .ui-icon-arrow-l { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_left.png); } - &.ui-icon-arrow-u::after { + .ui-icon-arrow-r { + .tizen-icon-common; + -webkit-mask-image: url(images/controls/button/00_button_right.png); + } + .ui-icon-arrow-u { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_expand_opened.png); } - &.ui-icon-arrow-d::after { + .ui-icon-arrow-d { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_expand_closed.png); } - &.ui-icon-delete::after { + .ui-icon-delete { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_expand_cancel.png); } - &.ui-icon-plus::after { + .ui-icon-plus { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_add.png); } - &.ui-icon-minus::after { + .ui-icon-minus { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_delete.png); } - &.ui-icon-forward::after { + .ui-icon-forward { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_expand_send.png); } - &.ui-icon-alert::after { + .ui-icon-alert { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_warning.png); } - &.ui-icon-info::after { + .ui-icon-info { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_info.png); } - &.ui-icon-rename::after { + .ui-icon-call { + .tizen-icon-common; + -webkit-mask-image: url(images/controls/button/00_button_call.png); + } + .ui-icon-rename { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_rename.png); } - &.ui-icon-star::after { + .ui-icon-star, .ui-icon-favorite { + .tizen-icon-common; -webkit-mask-image: url(images/controls/00_icon_favorite_bg_72x72.png); } - &.ui-icon-search::after { - -webkit-mask-image: url(images/controls/00_icon_search.png); + .ui-icon-search { + .tizen-icon-common; + -webkit-mask-image: url(images/page/00_icon_search.png); } - &.ui-icon-scrolltop::after { + .ui-icon-scrolltop { + .tizen-smallicon-common; -webkit-mask-image: url(images/controls/00_icon_jump.png); } - &.ui-icon-scrollleft::after { + .ui-icon-scrollleft { + .tizen-smallicon-common; -webkit-mask-image: url(images/controls/00_icon_jump_left.png); } - &.ui-icon-check::after { + .ui-icon-check { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_check.png); } - &.ui-icon-gear::after { + + .ui-icon-gear { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_gear.png); } - &.ui-icon-refresh::after { + .ui-icon-refresh { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_refresh.png); } - &.ui-icon-back::after { + .ui-icon-back { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_back.png); } - &.ui-icon-grid::after { + .ui-icon-grid { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_grid.png); } - &.ui-icon-home::after { + .ui-icon-home { + .tizen-icon-common; -webkit-mask-image: url(images/controls/button/00_button_home.png); } - &.ui-icon-naviframe-drawer::after { - -webkit-mask-image: url(images/page/core_icon_drawer.png); - } - &.ui-icon-naviframe-selectall::after { - -webkit-mask-image: url(images/page/00_icon_select_all.png); +} +.ui-btn-down-s .ui-icon-scrolltop {.tizen-icon-common; } +.ui-btn-down-s .ui-icon-scrollleft {.tizen-icon-common; } + +.ui-icon-expandable-divider-opened { + width: 42 * @unit_base; + height: 42 * @unit_base; + + position : absolute; + right : 28 * @unit_base; + top : 0 * @unit_base; + + background-repeat: no-repeat; + background-size: 100% 100%; + + background-image: url(images/00_indexlist_icon_opened.png); + +} + +.ui-icon-expandable-divider-closed { + width: 42 * @unit_base; + height: 42 * @unit_base; + + position : absolute; + right : 28 * @unit_base; + top : 0 * @unit_base; + + background-repeat: no-repeat; + background-size: 100% 100%; + + background-image: url(images/00_indexlist_icon_closed.png); + +} + +.ui-btn-inner.ui-btn-icon-only { + padding: 24 * @unit_base 24 * @unit_base; +} + +.ui-btn-icon-only .ui-btn-text { + display: none; + width: 0; + height: 0; + overflow: hidden; +} + +/* No BG button : data-iconbg = "nobg" */ +.ui-btn.ui-btn-icon-nobg { + box-shadow: none; +} + +.ui-btn.ui-btn-corner-circle { + .core_button_bg(); + padding: 4.5 * @unit_base; + background-color: @color_button_bg; + &.ui-btn-down-s { + .core_button_bg_pressed(); + padding: 4.5 * @unit_base; + background-color: @color_button_bg_press; } - &.ui-icon-naviframe-delete::after { - -webkit-mask-image: url(images/page/00_icon_delete.png); + .ui-icon, .ui-icon.ui-icon-plus { + background-color: @color_button_icon; } - &.ui-icon-naviframe-edit::after { - -webkit-mask-image: url(images/page/00_icon_edit.png); +} +.ui-btn.ui-btn-round { + .core_button_bg(); + padding: 4.5 * @unit_base; + background-color: @color_button_bg; + .ui-icon, .ui-icon.ui-icon-plus { + background-color: @color_button_icon; } } +.ui-btn.ui-btn-icon-nobg, .ui-btn .ui-btn-icon-nobg { + background-color: transparent; + border: none; +} + +/* Contact Edit Style */ +.ui-btn.ui-btn-edit .ui-btn-text { + color: @color_button_EditText; + font-size: @font_size_button_EditText; +} +.ui-btn.ui-btn-edit .ui-btn-inner { + .LESSbutton_edit_style; +} diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.collapsible.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.collapsible.less index 2e891cba..37693eaa 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.collapsible.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.collapsible.less @@ -1,19 +1,21 @@ +/* + * jQuery Mobile Collapsible CSS + * for Tizen Web UI + */ .ui-listview .ui-li.ui-collapsible, .ui-listview .ui-collapsible { padding: 0; border-bottom: 0; } -.ui-listview .ui-listview { - margin: 0; -} - .ui-collapsible-inset { margin: .5em 0; .ui-collapsible-heading { margin: 0; - border-right-width: 1px; - border-left-width: 1px; + .ui-btn { + border-right-width: 1px; + border-left-width: 1px; + } } } .ui-collapsible-collapsed + .ui-collapsible:not(.ui-collapsible-inset) .ui-collapsible-heading .ui-btn { @@ -26,63 +28,95 @@ position: relative; } -.ui-listview .ui-collapsible.ui-li-static { - padding: 0; +.ui-li.ui-li-dialogue .ui-collapsible-heading { + margin: 0; } - +.ui-li .ui-collapsible-heading, .ui-collapsible-heading, .ui-collapsible-content .ui-li-dialogue.ui-collapsible-heading { font-size: @font_size_list_main_text; display: block; - margin: 0; + margin: 0 -15px; padding: 0; position: relative; - background-color: @color_list_divider_bg; + .ui-btn { + text-align: left; + margin: 0; + border-left-width: 0; + border-right-width: 0; + } - .ui-collapsible-heading-toggle { - position: relative; - display: block; + .ui-btn-inner, + .ui-btn-icon-left .ui-btn-inner { + padding-left: 40px; + } + .ui-btn-icon-right .ui-btn-inner.ui-btn-hastxt { + padding-left: 8 * @unit_base; + padding-right: 40px; padding-top: 10 * @unit_base; padding-bottom: 10 * @unit_base; - padding-right: 56 * @unit_base; color: @color_list_divider_text; - text-decoration: none; - - &::after { - position: absolute; - top: 10 * @unit_base; - .mask-image('images/core_icon_expand_open.png'); - .mask-repeat(no-repeat); - .mask-position(center); - .mask-size(100%); - background-color: @color_list_collapsible_arrow; - width: 36 * @unit_base; - height: 36 * @unit_base; - content: ""; - } - - &.ui-icon-right { - padding-left: 20 * @unit_base; - &::after { - right: 12 * @unit_base; - } - } - - &.ui-icon-left { - padding-left: 56 * @unit_base; - &::after { - left: 12 * @unit_base; - } - } + background-color: @color_list_divider_bg; + } + .ui-btn-icon-top .ui-btn-inner, + .ui-btn-icon-bottom .ui-btn-inner { padding-right: 40px; text-align: center; } // Icons' animation - &.ui-icon-arrow-d::after { - .transition(all 330ms ease); - .rotate(0); + .ui-btn-inner > .ui-icon { + position: absolute; + right: 30 * @unit_base; + } + .ui-btn-inner > .ui-icon-arrow-d { + -webkit-mask-image: url(images/core_icon_expand_open.png); + -webkit-mask-repeat: no-repeat; + background-color: @color_list_collapsible_arrow; + width: 30px; height: 30px; + + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); + + -webkit-transition: all 0.33s ease; + -moz-transition: all 0.33s ease; + -ms-transition: all 0.33s ease; + -o-transition: all 0.33s ease; + transition: all 0.33s ease; + } + .ui-btn-inner > .ui-icon-arrow-u { + -webkit-mask-image: url(images/core_icon_expand_open.png); + -webkit-mask-repeat: no-repeat; + background-color: @color_list_collapsible_arrow; + width: 30px; height: 30px; + + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); + + -webkit-transition: all 0.33s ease; + -moz-transition: all 0.33s ease; + -ms-transition: all 0.33s ease; + -o-transition: all 0.33s ease; + transition: all 0.33s ease; + } + + .ui-btn span.ui-btn { + position: absolute; + left: 6px; top: 50%; + margin: -12px 0 0 0; + width: 20px; + height: 20px; + padding: 1px 0px 1px 2px; + text-indent: -9999px; + + .ui-btn-inner { + padding: 10px 0; } - &.ui-icon-arrow-u::after { - .transition(all 330ms ease); - .rotate(180deg); + .ui-icon { + left: 0; margin-top: -10px; } } } @@ -90,17 +124,12 @@ position: absolute; top: -9999px; left:0px; -} - -.ui-li-dialogue .ui-collapsible-content .ui-li.ui-li-dialogue { - margin: 0; -} + } .ui-collapsible-content li { padding: 30 * @unit_base 15 * @unit_base; border-bottom: 1px solid @color_list_border_bottom; } - .ui-collapsible-content { display: block; margin: 0 -15px; @@ -113,7 +142,16 @@ max-height: 9999px; visibility: visible; overflow: auto; - .transition(all 300ms ease); + -webkit-transition: all 0.3s ease; + -moz-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; + + .ui-listview .ui-li-static { + padding-left: 20 * @unit_base; + padding-right: 20 * @unit_base; + } .ui-li-dialogue { padding-left : 15 * @unit_base; @@ -126,7 +164,7 @@ } } } -.ui-collapsible-inset>.ui-collapsible-content { +.ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.controlgroup.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.controlgroup.less index d1706dbc..79cf4357 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.controlgroup.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.controlgroup.less @@ -108,7 +108,8 @@ fieldset.ui-controlgroup { .ui-btn { border-radius : 0; display: inline-block; - box-sizing: border-box; + margin-left : -4 * @unit_base; + margin-right : -3 * @unit_base; } .ui-checkbox, .ui-radio { float: left; @@ -119,6 +120,8 @@ fieldset.ui-controlgroup { } [data-role="button"] { + box-shadow : none; + background : none; &.ui-btn-down-s, .ui-btn-active-s { .ui-btn-inner { .ui-btn-text { diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.core.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.core.less index b1960062..dfc5e44b 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.core.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.core.less @@ -1,3 +1,9 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. +*/ + /* some unsets - more probably needed */ .ui-mobile, .ui-mobile body { height: 100%; font-size: @font_size_default; } @media all and (max-width:359px) { @@ -11,36 +17,8 @@ .ui-mobile-viewport { margin: 0; overflow-x: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* "page" containers - full-screen views, one should always be in view post-pageload */ -.ui-mobile { - [data-role=page], - [data-role=dialog], - .ui-page { - top: 0; - left: 0; - width: 100%; - position: absolute; - display: none; - border: 0; - - &.ui-page-build { - display: block; - visibility: hidden; - } - - &.ui-pre-in { - z-index: 100; - visibility: visible; - display: block; - top: 0; - left: 0; - } - - &.ui-page-active { - display: block; - overflow: hidden; - } - } -} +.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; position: absolute; display: none; border: 0; } +.ui-mobile .ui-page-active { display: block; overflow: visible; } /* on ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */ .ui-page { outline: none; } @@ -89,8 +67,8 @@ .ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; } .ui-header, .ui-footer { display: block; } -.ui-page .ui-header, .ui-page .ui-footer { - position : fixed; /*position: relative;*/ +.ui-page .ui-header, .ui-page .ui-footer { + position : fixed; /*position: relative;*/ z-index : @z_base_header_footer; } /* Title button packing order */ diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.checkboxradio.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.checkboxradio.less index 1ace0a27..0bf9ebce 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.checkboxradio.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.checkboxradio.less @@ -1,118 +1,262 @@ -input[type="checkbox"].ui-checkbox { - display: inline-block; +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ +.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; } +//.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 2.313em; } +//.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 2.313em; } +//.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; } +//.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; } + +//font size: 21.... +@checkbox_radio_all_height: (40*@unit_base); //the biggest height. +@checkbox_radio_all_width: (40*@unit_base); //the biggest height. +@checkbox_text_padding_left: (50*@unit_base); //text in label +@checkbox_icon_margins: (5*@unit_base); + +@checkbox_radio_size_width: @checkbox_radio_all_width - @checkbox_icon_margins * 2; +@checkbox_radio_size_height: @checkbox_radio_all_height - @checkbox_icon_margins * 2; + +@checkbox_radio_input_size: (28*@unit_base); + +@favorite_size_width: (40*@unit_base); +@favorite_size_height: (40*@unit_base); + +@checkbox_radio_icon_internal_bottom: (-@checkbox_radio_size_height/2); //-icon size/2 +@favorite_icon_internal_bottom: (-@favorite_size_height/2); //-icon size/2 + +@icon_left_margin: (24*@unit_base); +@checkbox_radio_label_left: (@checkbox_radio_size_width/2 + @icon_left_margin); +@favorite-label-left: (@favorite_size_width/2 + @icon_left_margin); + +.ui-checkbox, .ui-radio { position: relative; - top: 10 * @unit_base; - width: 40 * @unit_base; - height: 40 * @unit_base; margin: 0; - -webkit-mask-image: url(images/controls/core_check_bg.png); - -webkit-mask-size: 100%; - -webkit-appearance: none; - &:checked { - background-color: @color_checkboxradio_checkbox_bg_on; - &::before { - background-color: @color_checkboxradio_checkbox_bg_line_on; - } - &::after { - position: absolute; - width: 40 * @unit_base; - height: 40 * @unit_base; - left: 0 * @unit_base; - background-color: @color_checkboxradio_checkbox_bg_icon; - content: ""; - -webkit-mask-size: 100%; - -webkit-mask-image: url('images/controls/core_check_icon.png'); - } + //clear btn basic setting + .LESSclear-btn-basic-setting(); + input { + z-index: 1; + margin: 0; + position: absolute; + /* + checkbox can receive focus when tab or arrow key pressed. + so, set same size and position with fake checkbox for focus highlight. + */ + left: 2 * @unit_base; + top: 58%; + margin-top: @checkbox_radio_icon_internal_bottom; + width: @checkbox_radio_input_size; + height: @checkbox_radio_input_size; } - &:not(:checked) { - background-color: @color_checkboxradio_checkbox_bg_off; - &::before { - background-color: @color_checkboxradio_checkbox_bg_line_off; - } - &::after { - background-color: @color_checkboxradio_checkbox_bg_off; + > input { + opacity: 0; + } + .ui-btn { + z-index: 2; // checkbox,radio input z-index: 1 + height: 100%; + margin: 0; + margin-top: 10 * @unit_base; + text-align: left; + } + .ui-btn.ui-btn-icon-left { + .ui-btn-inner { + min-width: @checkbox_radio_all_height; // TODO: check this after layout done. + min-height: @checkbox_radio_all_height; + line-height: @checkbox_radio_input_size; + margin: 0 8*@unit_base 0 0; + padding : 0; + .ui-btn-text { + vertical-align: middle; + min-height: @checkbox_radio_size_height; + } + /* TODO : after button fixed, recheck! */ + .ui-btn-text.ui-btn-text-padding-left { + padding-left : 0; + margin-left: @checkbox_text_padding_left; + } } } +} - &::before { - width: 40 * @unit_base; - height: 40 * @unit_base; - position: absolute; - top: 0 * @unit_base; - left: 0 * @unit_base; - content: ""; - -webkit-mask-image: url(images/controls/core_check_bg_stroke.png); - -webkit-mask-size: 100%; +.ui-radio, .ui-checkbox:not(.favorite) { + .ui-btn { + .ui-icon-wrapper { + -webkit-mask-size: 100%; + width: @checkbox_radio_all_height; + height: @checkbox_radio_all_height; + display: block; + position: absolute; + left: 0; + top: 0; + .ui-icon { + display: block; + margin: @checkbox_icon_margins; + width: @checkbox_radio_size_width; + height: @checkbox_radio_size_height; + left: 0; + } + } } +} - &.favorite { - -webkit-mask-image: url(images/controls/core_icon_favorite.png); - &:checked { - background-color: @color_checkboxradio_favorite_on; +.ui-checkbox:not(.favorite) { + .ui-btn { + .ui-icon-wrapper { + -webkit-mask-box-image: url(images/controls/core_check_bg.png); + -webkit-mask-box-image-slice: 3 3 3 3 fill; } - &:not(:checked) { - background-color: @color_checkboxradio_favorite_off; + .ui-icon-checkbox-on { + display: block; + -webkit-mask-image: url('images/controls/core_check_icon.png'); + -webkit-mask-size: 100%; + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: @color_checkboxradio_checkbox_bg_icon; } - &::after, - &::before { - content: none; + } + .ui-checkbox-on{ + .ui-icon-wrapper { + background-color: @color_checkboxradio_bg_on; + } + } + .ui-checkbox-off{ + .ui-icon-wrapper { + background-color: @color_checkboxradio_bg_off; } } } -input[type="checkbox"].ui-checkbox.ui-state-disabled, -input[type="radio"].ui-radio.ui-state-disabled { - opacity: 0.3; -} - -input[type="radio"].ui-radio { - display: inline-block; - position: relative; - top: 10 * @unit_base; - width: 40 * @unit_base; - height: 40 * @unit_base; - margin: 0; - -webkit-mask-image: url(images/controls/core_radio_bg.png); - -webkit-mask-size: 100%; - -webkit-appearance: none; - - &:checked { - background-color: @color_checkboxradio_radio_bg_on; - &::before { - background-color: @color_checkboxradio_radio_bg_line_on; +.ui-radio { + .ui-btn { + .ui-icon-wrapper { + -webkit-mask-box-image: url(images/controls/core_radio_bg.png); } - &::after { - position: absolute; - left: 0 * @unit_base; - width: 40 * @unit_base; - height: 40 * @unit_base; - background-color: @color_checkboxradio_radio_bg_icon; - content: ""; - -webkit-mask-size: 100%; + .ui-icon-radio-on { + display: block; -webkit-mask-image: url('images/controls/core_radio_icon.png'); + -webkit-mask-size: 100%; + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; + background-color: @color_checkboxradio_radio_bg_icon; } } - - &:not(:checked) { - background-color: @color_checkboxradio_radio_bg_off; - &::before { - background-color: @color_checkboxradio_radio_bg_line_off; + .ui-radio-on{ + .ui-icon-wrapper { + background-color: @color_checkboxradio_radio_bg_on; } - &::after { + } + .ui-radio-off{ + .ui-icon-wrapper { background-color: @color_checkboxradio_radio_bg_off; } } +} - &::before { - width: 40 * @unit_base; - height: 40 * @unit_base; +.ui-checkbox.favorite { + input { position: absolute; - top: 0 * @unit_base; - left: 0 * @unit_base; - content: ""; - -webkit-mask-image: url(images/controls/core_radio_bg_stroke.png); - -webkit-mask-size: 100%; + left: 5*@unit_base; + top: 50%; + width: @favorite_size_width; + height: @favorite_size_height; + margin-top: @favorite_icon_internal_bottom; + visibility: hidden; } + + .ui-btn.ui-btn-icon-left { + .ui-btn-inner { + display: inline-block; + line-height: @checkbox_radio_all_height; + padding : 0; + .ui-btn-text { + display: inline-block; + vertical-align: middle; + line-height: 32 * @unit_base; + } + /* TODO : after button fixed, recheck! */ + .ui-icon { + position: absolute; + left: 0; + top: 50%; + width: @favorite_size_width; + height: @favorite_size_height; + margin-top: @favorite_icon_internal_bottom; + } + } + } +} +/* put img inside of checkbox(normal, favorite style) */ + +.ui-icon-checkbox-off, .ui-icon-checkbox-on, +.favorite .ui-icon-checkbox-off, .favorite .ui-icon-checkbox-on, +.ui-icon-checkbox-on-press, .ui-icon-checkbox-off-press, +.ui-icon-radio-off, .ui-icon-radio-on, +.ui-icon-radio-on-press, .ui-icon-radio-off-press { + box-sizing: border-box; + background-size: 100% 100%; + background-color: transparent; +} +.ui-icon-checkbox-off { + width: @checkbox_radio_size_width; + height: @checkbox_radio_size_height; +} +.ui-icon-checkbox-on { + -webkit-mask-image: url(images/00_check_activated.png); + -webkit-mask-size: 100%; + +} +.ui-btn-down-s > .ui-btn-inner > .ui-icon-checkbox-off { + -webkit-mask-image: url(images/00_check_activated.png); + -webkit-mask-size: 100%; +} +.ui-btn-down-s > .ui-btn-inner > .ui-icon-checkbox-on { + -webkit-mask-image: url(images/00_check_activated.png); + -webkit-mask-size: 100%; +} +.favorite { + .ui-btn { + .ui-icon-checkbox-off, + .ui-icon-checkbox-off-press { + -webkit-mask-image: url(images/00_icon_favorite_bg.png); + -webkit-mask-size: 100%; + background-color: @color_checkboxradio_favorite_off; + border: 0; + } + .ui-icon-checkbox-on, + .ui-icon-checkbox-on-press { + -webkit-mask-image: url(images/00_icon_favorite_bg.png); + -webkit-mask-size: 100%; + background-color: @color_checkboxradio_favorite_on; + border: 0; + } + } +} +.ui-icon-radio-off { + -webkit-mask-image: url(images/00_button_radio_activated.png); + -webkit-mask-size: 100%; + .LESSborder-radius-all(50%); +} +.ui-icon-radio-on { + -webkit-mask-image: url(images/00_button_radio_activated.png); + -webkit-mask-size: 100%; + .LESSborder-radius-all(50%); +} +.ui-btn-down-s .ui-btn-inner > .ui-icon-radio-on { + -webkit-mask-image: url(images/00_button_radio_activated.png); + -webkit-mask-size: 100%; + .LESSborder-radius-all(50%); +} +.ui-btn-down-s .ui-btn-inner > .ui-icon-radio-off { + -webkit-mask-image: url(images/00_button_radio_activated.png); + -webkit-mask-size: 100%; + .LESSborder-radius-all(50%); +} +.ui-li-divider .ui-btn-text a { + padding: 11 * @unit_base 55 * @unit_base; + display: block; + text-decoration: none; + color: @color_list_main_text_normal; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.fieldcontain.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.fieldcontain.less index 570fb684..3515afda 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.fieldcontain.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.fieldcontain.less @@ -1,3 +1,8 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ .ui-field-contain { padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; } .ui-field-contain:first-child { border-top-width: 0; } @media all { diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.select.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.select.less index 6f99469f..d49cfc7d 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.select.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.select.less @@ -1,3 +1,8 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ .ui-select { display: block; position: relative; } .ui-select select { position: absolute; left: -9999px; top: -9999px; } .ui-select .ui-btn { overflow: hidden; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.textinput.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.textinput.less index 62d61984..2aae87a8 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.textinput.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.forms.textinput.less @@ -19,7 +19,8 @@ textarea::-webkit-input-placeholder { input&, textarea& { - .appearance(none); + appearance: none; + -webkit-appearance: none; background-color: @color_editfield_bg; box-sizing: border-box; color: @color_editfield_text; @@ -51,7 +52,7 @@ textarea::-webkit-input-placeholder { box-sizing: border-box; height: 2px; position: relative; - top: -19 * @unit_base; + top: -10 * @unit_base; margin: 0 * @unit_base 15 * @unit_base -2 * @unit_base; } @@ -79,13 +80,13 @@ textarea::-webkit-input-placeholder { float: right; // Move to top by - input's padding-bottom + clear height margin-top: -(36 + 29) * @unit_base; - background-color: @color_searchbar_clear_icon; - .mask-size(contain); - .mask-image('images/controls/00_core_button_icon_clear.png'); + background: @color_editfield_clear_icon; + -webkit-mask-size: contain; + -webkit-mask-image: url(images/controls/00_core_button_icon_clear.png); - &:active::after, - &:hover::after { - background-color: @color_searchbar_clear_icon_press; + &:active, + &:hover { + background-color: @color_editfield_clear_icon_press; } } @@ -119,7 +120,9 @@ textarea::-webkit-input-placeholder { padding: 10 * @unit_base 15 * @unit_base 14 * @unit_base; resize: none; white-space: normal; - .transition(height 200ms linear); + + -webkit-transition: height 200ms linear; + transition: height 200ms linear; } } @@ -150,6 +153,32 @@ textarea.ui-input-text.ui-focus { .ui-input-clear.ui-input-clear-hidden.ui-btn-icon-notext { left: auto; } + .ui-btn { + + &.ui-btn-box-s.ui-btn-up-s, + &.ui-btn-box-s.ui-btn-hover-s { + .core_button_bg(); + background-color: @color_button_bg; + top : 15 * @unit_base; + .ui-btn-inner.ui-btn-icon-only .ui-icon { + width: 30 * @unit_base; + height: 30 * @unit_base; + margin-left: -13.5 * @unit_base; + margin-top: -12 * @unit_base; + background-color: @color_button_icon; + } + } + .ui-icon { + margin: 0; + } + } + .ui-btn.ui-btn-box-s.ui-btn-down-s { + .core_button_bg_pressed(); + background-color: @color_button_bg_press; + .ui-icon { + margin: 0; + } + } } .ui-input-search { @@ -160,23 +189,23 @@ textarea.ui-input-text.ui-focus { margin-right: (46 + 15) * @unit_base; } - .ui-btn.ui-input-clear.ui-icon-deleteSearch { + .ui-btn-icon-notext.ui-input-clear { display: inline-block; width: 36 * @unit_base; - height: 36 * @unit_base; - background-color: transparent; + height: 34 * @unit_base; - &::after { - top: 0; - left: 0; - width: 36 * @unit_base; - height: 36 * @unit_base; - background-color: @color_searchbar_clear_icon; + .ui-btn-inner { + padding: 14 * @unit_base + 16 * @unit_base + 9 * @unit_base + 16 * @unit_base; } - - &:active::after, - &:hover::after { - background-color: @color_searchbar_clear_icon_press; + } + .ui-btn-inner { + .ui-icon-deleteSearch { + margin: -2 * @unit_base; + width: 45 * @unit_base; + height: 45 * @unit_base; } } } @@ -199,10 +228,6 @@ textarea.ui-input-text.ui-focus { background-color: @color_searchbar_bg; } - .ui-input-text { - background-color: @color_searchbar_bg; - } - .ui-input-search-default { margin-right: 148 * @unit_base; } @@ -245,15 +270,25 @@ textarea.ui-input-text.ui-focus { visibility: visible; } } - .ui-btn.ui-btn-search-front-icon { + .ui-btn-search-front-icon { position: absolute; top: ((96 - 46) / 2) * @unit_base; right: 15 * @unit_base; + width: 46 * @unit_base; + height: 46 * @unit_base; } } -.ui-icon-deleteSearch::after { - .mask-image('images/controls/00_field_btn_clear.png'); +.ui-icon-deleteSearch { + background-repeat: no-repeat; + background-size: 45 * @unit_base 45 * @unit_base; + background-color: @color_searchbar_clear_icon; + -webkit-mask-image: url(images/controls/00_field_btn_clear.png); + -webkit-mask-size: 45 * @unit_base 45 * @unit_base; + + &:active { + background-color: @color_searchbar_clear_icon_press; + } } .ui-input-clear-hidden { diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.grids.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.grids.less index 39a3850a..162cb838 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.grids.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.grids.less @@ -1,3 +1,9 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ + /* content configurations. */ .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; } .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;} diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.headerfooter.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.headerfooter.less index 898c1254..2a8214d5 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.headerfooter.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.headerfooter.less @@ -1,9 +1,14 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ /* fixed page header & footer configuration */ .ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { position: absolute; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; } .ui-header-fixed, .ui-footer-fixed { z-index: @z_base_header_footer; - .transform(translateZ(0)); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */ + -webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */ } .ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline { display: none; } .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { opacity: .9; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.listview.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.listview.less index 67b69e41..193ac2c6 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.listview.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.listview.less @@ -1,12 +1,18 @@ /* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ +/* * Listview Style - divide single / multiline style for specific * If you want to see any style, search them using class name. */ /******************** listview common style *********************/ .ui-listview { - margin: 0 -8 * @unit_base; - padding: 0 0 1px 0; + margin: 0 -8*@unit_base 0 -8*@unit_base; + padding: 0; + padding-bottom: 1px; list-style: none; counter-reset: listnumbering; @@ -28,54 +34,60 @@ /***************** Anchor listview common style ****************/ .ui-listview { - &.ui-listview-colored { - .ui-li.ui-li-anchor, .ui-li.ui-btn, .ui-li-static { - border-bottom: 0; - } - } - .ui-li.ui-li-anchor { - padding: 0 0; - border-bottom: 1px solid @color_list_border_bottom; - background-color: transparent; + /* anchor listview background style */ + .ui-li.ui-btn-up-s, + .ui-li.ui-btn-hover-s { background-color: transparent; } + .ui-li.ui-btn-down-s { background-color: @color_list_press; } + + /* ui-btn-inner style for list with anchor - normal single */ + .ui-li.ui-btn { + >.ui-btn-inner { + padding: 0; - &.ui-li-active { - background-color: @color_list_press; + .ui-btn-text { + padding: 0; + >.ui-link-inherit { + display: block; + padding: 30 * @unit_base 15 * @unit_base; + line-height: 38 * @unit_base; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + } } + } +} - & > a { - display: block; - width: 100%; - height: 100%; - padding: 30 * @unit_base 15 * @unit_base; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - color: @color_list_main_text_normal; - text-decoration: none; +.ui-listview { + .ui-li.ui-btn { + >.ui-btn-inner { + border-bottom: 1px solid @color_list_border_bottom; } } + .ui-li-static { + border-bottom: 1px solid @color_list_border_bottom; + } } - /*************** No Anchor listview common style ****************/ .ui-listview .ui-li-static { padding: 30 * @unit_base 15 * @unit_base; - border-bottom: 1px solid @color_list_border_bottom; background-color: transparent; - min-height: 34.5 * @unit_base; + } /********************* list have right button **********************/ -.ui-listview .ui-li-has-right-btn > .ui-btn-inner > .ui-btn-text > .ui-link-inherit, -.ui-listview .ui-li-has-right-circle-btn > .ui-btn-inner > .ui-btn-text > .ui-link-inherit, +.ui-listview .ui-li-has-right-btn>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, +.ui-listview .ui-li-has-right-circle-btn>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, .ui-listview .ui-li-has-right-btn, .ui-listview .ui-li-has-right-circle-btn { - > .ui-btn { + .ui-btn { &:not(.ui-slider-handle) { position: absolute; top: 19.5 * @unit_base; right: 15 * @unit_base; margin: 0; - &.ui-btn-icon-only { + &.ui-btn-icon_only { top: 22 * @unit_base; } &.ui-btn-icon_only.ui-btn-icon-checkbox-off, &.ui-btn-icon_only.ui-btn-icon-radio-off { @@ -85,10 +97,8 @@ } } } - > .ui-btn-icon_only { - &.ui-btn-up-s, - &.ui-btn-hover-s, - &.ui-btn-down-s { + .ui-btn-icon_only { + &.ui-btn-up-s,&.ui-btn-hover-s,&.ui-btn-down-s { .ui-btn-inner.ui-btn-icon-only { padding: 0; width: 45 * @unit_base; @@ -114,10 +124,9 @@ } } } - /******************* list have left thumbnail image ********************/ -.ui-listview .ui-li.ui-li-anchor.ui-li-has-thumb > a, -.ui-listview .ui-li.ui-li-anchor.ui-li-dialogue.ui-li-has-thumb > a, +.ui-listview .ui-li.ui-li-has-thumb>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, +.ui-listview .ui-li.ui-li-dialogue.ui-li-has-thumb>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, .ui-listview .ui-li.ui-li-static.ui-li-has-thumb { padding-left: 61.5 * @unit_base; @@ -125,15 +134,15 @@ position: absolute; left: 13 * @unit_base; top: 50%; - margin-top: -20.25 * @unit_base; + margin-top : -20.25 * @unit_base; width: 40.5 * @unit_base; height: 40.5 * @unit_base; } } /***************** list has checkbox/radio ***********************/ -.ui-listview .ui-li.ui-li-anchor.ui-li-has-checkbox > a, -.ui-listview .ui-li.ui-li-anchor.ui-li-has-radio > a, +.ui-listview .ui-li.ui-btn.ui-li-has-checkbox>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, +.ui-listview .ui-li.ui-btn.ui-li-has-radio>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, .ui-listview .ui-li.ui-li-static.ui-li-has-checkbox, .ui-listview .ui-li.ui-li-static.ui-li-has-radio { padding-left: 61.5 * @unit_base; @@ -141,14 +150,37 @@ .ui-checkbox:first-child, .ui-radio:first-child { position: absolute; - top: 30 * @unit_base; + top: 33 * @unit_base; left: 15 * @unit_base; + width: 32 * @unit_base; + height: 32 * @unit_base; + + .ui-btn>.ui-btn-inner { + width: 40 * @unit_base; + height: 40 * @unit_base; + padding: 0; + + .ui-icon { + width: 30 * @unit_base; + height: 30 * @unit_base; + margin: 5 * @unit_base; + background-color: transparent; + + &.ui-icon-checkbox-on { + background-color: @color_checkboxradio_checkbox_bg_icon; + } + + &.ui-icon-radio-on { + background-color: @color_checkboxradio_radio_bg_icon; + } + } + } } } /**************** list has checkbox/radio and thumbnail ************/ -.ui-listview .ui-li.ui-li-anchor.ui-li-has-checkbox.ui-li-has-thumb > a, -.ui-listview .ui-li.ui-li-anchor.ui-li-has-radio.ui-li-has-thumb > a, +.ui-listview .ui-li.ui-btn.ui-li-has-checkbox.ui-li-has-thumb>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, +.ui-listview .ui-li.ui-btn.ui-li-has-radio.ui-li-has-thumb>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, .ui-listview .ui-li.ui-li-static.ui-li-has-checkbox.ui-li-has-thumb, .ui-listview .ui-li.ui-li-static.ui-li-has-radio.ui-li-has-thumb { padding-left: 110 * @unit_base; @@ -176,71 +208,52 @@ /****************************************************************/ /* Multiline List Style */ /****************************************************************/ -// @TODO multiline <li>s should expand by themselves not position absolute .ui-listview .ui-li.ui-li-has-multiline { - &.ui-li-anchor > a, + &.ui-btn>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, &.ui-li-static { padding-top: 13 * @unit_base; padding-bottom: 45 * @unit_base; } - .ui-li-text-sub { + .ui-li-text-sub, + .ui-li-text-sub:first-child { top: 51 * @unit_base; left: 15 * @unit_base; line-height: 32 * @unit_base; float: left; text-align: left; - } - - .ui-li-text-sub, - .ui-li-text-sub3 { - max-width: 100%; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - right: auto; .ui-li-icon-sub, img { position: relative; - width: round(22.5 * @unit_base); - height: round(22.5 * @unit_base); - margin-right: 1px; + width: 22.5 * @unit_base; + height: 22.5 * @unit_base; + margin-right: 1 * @unit_base; margin-bottom: 0; } } - - .ui-li-text-sub2, - .ui-li-text-sub3, - .ui-li-text-sub-right { - position: absolute; - font-size: @font_size_list_sub_text; - color: @color_list_sub_text_normal; - .LESStext-ellipsis(); - } - .ui-li-text-sub2 { + position: absolute; top: 13 * @unit_base; - right: 15 * @unit_base; + right : 15 * @unit_base; float: right; text-align: right; - line-height: round(38 * @unit_base); - } - - // Second line of left subtext - // @TODO this is a little counter intuitive to call this line sub3 - .ui-li-text-sub3 { - top: round((51 + 32) * @unit_base); - left: 15 * @unit_base; line-height: 38 * @unit_base; + font-size: @font_size_list_sub_text; + color: @color_list_sub_text_normal; + .LESStext-ellipsis(); } .ui-li-text-sub-right { + position: absolute; top: 51 * @unit_base; right: 15 * @unit_base; line-height: 32 * @unit_base; float: right; text-align: right; + font-size: @font_size_list_sub_text; + color: @color_list_sub_text_normal; + .LESStext-ellipsis(); } .ui-li-icon-sub-right { @@ -267,8 +280,8 @@ } /* multiline list has right button */ - &.ui-li-has-right-btn > .ui-btn-inner > .ui-btn-text > .ui-link-inherit, - &.ui-li-has-right-circle-btn > .ui-btn-inner > .ui-btn-text > .ui-link-inherit, + &.ui-li-has-right-btn>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, + &.ui-li-has-right-circle-btn>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, &.ui-li-static.ui-li-has-right-btn, &.ui-li-static.ui-li-has-right-circle-btn { [data-role="button"] { @@ -282,39 +295,31 @@ } /* multiline list has left thumbnail */ - &.ui-li-anchor.ui-li-has-thumb > a, + &.ui-li-has-thumb>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, &.ui-li-static.ui-li-has-thumb { - .ui-li-text-sub { - left: 61.5 * @unit_base; - } + .ui-li-text-sub { left: 61.5 * @unit_base; } - .ui-li-thumb { - top: 50% - } + .ui-li-thumb { top: 50%} } /* multiline list has checkbox/radio */ - &.ui-li-anchor.ui-li-has-checkbox > a, - &.ui-li-anchor.ui-li-has-radio > a, + &.ui-li-has-checkbox>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, + &.ui-li-has-radio>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, &.ui-li-static.ui-li-has-checkbox, &.ui-li-static.ui-li-has-radio { - .ui-li-text-sub { - left: 60 * @unit_base; - } + .ui-li-text-sub { left: 60 * @unit_base; } } /* multiline list has thumbnail and checkbox/radio */ - &.ui-li-anchor.ui-li-has-thumb.ui-li-has-checkbox > a, - &.ui-li-anchor.ui-li-has-thumb.ui-li-has-radio > a, + &.ui-li-has-thumb.ui-li-has-checkbox>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, + &.ui-li-has-thumb.ui-li-has-radio>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, &.ui-li-static.ui-li-has-thumb.ui-li-has-checkbox, &.ui-li-static.ui-li-has-thumb.ui-li-has-radio { - .ui-li-text-sub { - left: 108 * @unit_base; - } + .ui-li-text-sub { left: 108 * @unit_base; } } /* multiline list has thumbnail right */ - &.ui-li-anchor.ui-li-has-thumb.ui-li-thumbnail-right > a, + &.ui-li-has-thumb.ui-li-thumbnail-right>.ui-btn-inner>.ui-btn-text>.ui-link-inherit, &.ui-li-static.ui-li-has-thumb.ui-li-thumbnail-right { padding-left: 13 * @unit_base; @@ -324,37 +329,7 @@ right: 13 * @unit_base; } - .ui-li-text-sub { - left: 13 * @unit_base; - } - } - - &.ui-li-has-3-lines { - &.ui-li-anchor > a, - &.ui-li-static { - padding-bottom: round(82.5 * @unit_base); - } - - /* multiline list has right button */ - &.ui-li-static.ui-li-has-right-btn, - &.ui-li-static.ui-li-has-right-circle-btn { - [data-role="button"] { - &:not(.ui-slider-handle) { - top: round(39.5 * @unit_base); - } - } - } - - .ui-li-has-right-btn, - .ui-li-has-right-circle-btn { - > .ui-btn { - &:not(.ui-slider-handle) { - &.ui-btn-icon_only { - top: round(39.5 * @unit_base); - } - } - } - } + .ui-li-text-sub { left: 13 * @unit_base; } } } @@ -363,12 +338,18 @@ /****************************************************************/ .ui-listview { .ui-li-editfield { - padding: 5 * @unit_base; + padding-left: 5 * @unit_base; + padding-right: 5 * @unit_base; + padding-top: 5 * @unit_base; + padding-bottom: 5 * @unit_base; border-bottom: 0; input { box-sizing: border-box; - padding: 5 * @unit_base 15 * @unit_base; + padding-top: 5 * @unit_base; + padding-bottom: 5 * @unit_base; + padding-left: 15 * @unit_base; + padding-right: 15 * @unit_base; width: 100%; height: 96 * @unit_base; margin: auto; @@ -386,8 +367,9 @@ } .ui-li-delete { - background: url(images/controls/00_field_btn_clear.png) no-repeat; - background-size: 22.5 * @unit_base 22.5 * @unit_base; + background: url(images/controls/00_field_btn_clear.png); + background-repeat: no-repeat; + background-size: 22.5*@unit_base 22.5*@unit_base; position: absolute; top: 15 * @unit_base; right: 15 * @unit_base; @@ -406,45 +388,43 @@ .ui-collapsible .ui-li-dialogue { margin-left: 8 * @unit_base; margin-right: 8 * @unit_base; - border: 1px solid @color_list_dialog_border; + border: 1px solid @color_list_border_bottom; border-top-width: 0; - &.ui-li-has-multiline .ui-li-text-sub { - left: 10.5 * @unit_base; - } - + &.ui-li-has-multiline .ui-li-text-sub { left: 10.5 * @unit_base;} &.ui-li-has-multiline.ui-li-has-checkbox, &.ui-li-has-multiline.ui-li-has-radio { - > .ui-btn-inner > .ui-btn-text > .ui-link-inherit .ui-li-text-sub { + >.ui-btn-inner>.ui-btn-text>.ui-link-inherit .ui-li-text-sub { left: 69 * @unit_base; } } - > .ui-btn-inner { + >.ui-btn-inner { padding-left: 10 * @unit_base; padding-right: 10 * @unit_base; border-bottom: 0; - > .ui-btn-text > .ui-link-inherit { + >.ui-btn-text >.ui-link-inherit { padding-left: 0; padding-right: 0; } } - > .ui-edit-title { + >.ui-edit-title { padding-left: 5 * @unit_base; } /* dialogue list with thumb and checkbox/radio */ - &.ui-li-has-thumb > .ui-btn-inner > .ui-btn-text > .ui-link-inherit, - &.ui-li-has-checkbox > .ui-btn-inner > .ui-btn-text > .ui-link-inherit, - &.ui-li-has-radio > .ui-btn-inner > .ui-btn-text > .ui-link-inherit { - padding-left: 48.5 * @unit_base; - } + &.ui-li-has-thumb >.ui-btn-inner >.ui-btn-text >.ui-link-inherit, + &.ui-li-has-checkbox >.ui-btn-inner >.ui-btn-text >.ui-link-inherit, + &.ui-li-has-radio >.ui-btn-inner >.ui-btn-text >.ui-link-inherit { padding-left: 48.5 * @unit_base; } } .ui-li-divider + .ui-li-dialogue, .ui-li.ui-li-dialogue:first-child { border-top-width: 1px; } - .ui-li.ui-li-dialogue.ui-li-dialogue-edit { - padding: 3 * @unit_base 4 * @unit_base 5 * @unit_base 4 * @unit_base; + .ui-li.ui-li-dialogue.ui-li-dialogue-edit{ + padding-top: 3 * @unit_base; + padding-bottom: 5 * @unit_base; + padding-right: 4 * @unit_base; + padding-left: 4 * @unit_base; } } @@ -474,9 +454,7 @@ min-width: 160 * @unit_base; min-height: 160 * @unit_base; } - &:first-child { - margin-top: 15 * @unit_base; - } + &:first-child { margin-top: 15 * @unit_base; } } .ui-li-static.ui-li-bubble-receive, @@ -487,12 +465,12 @@ padding: 10 * @unit_base 20 * @unit_base 10 * @unit_base 46 * @unit_base; background-color: @color_list_bubble_receive_bg; - .mask-box-image-repeat(repeat); - .mask-box-image-width(auto); - .mask-box-image('images/nine-patch/00_messagebubble_bg_receive_bg.png'); - .mask-box-image-slice(55 24 15 55 fill); + -webkit-mask-box-image-repeat: repeat; + -webkit-mask-box-image-width: auto; + -webkit-mask-box-image: url(images/nine-patch/00_messagebubble_bg_receive_bg.png); + -webkit-mask-box-image-slice: 55 24 15 55 fill; - > .ui-li-bubble-time { + >.ui-li-bubble-time { position: absolute; left: 100%; bottom: 12 * @unit_base; @@ -514,12 +492,12 @@ background-color: @color_list_bubble_sent_bg; padding: 10 * @unit_base 46 * @unit_base 10 * @unit_base 20 * @unit_base; - .mask-box-image-repeat(repeat); - .mask-box-image-width(auto); - .mask-box-image('images/nine-patch/00_messagebubble_bg_sent_bg.png'); - .mask-box-image-slice(55 55 15 24 fill); + -webkit-mask-box-image-repeat: repeat; + -webkit-mask-box-image-width: auto; + -webkit-mask-box-image: url(images/nine-patch/00_messagebubble_bg_sent_bg.png); + -webkit-mask-box-image-slice: 55 55 15 24 fill; - > .ui-li-bubble-time { + >.ui-li-bubble-time { position: absolute; right: 100%; bottom: 12 * @unit_base; @@ -570,7 +548,6 @@ } } } - /****************************************************************/ /* Divider - TO BE FIXED */ /****************************************************************/ @@ -584,6 +561,9 @@ line-height: 52 * @unit_base; border: 0; + &.ui-li.ui-btn-up-s, &.ui-li.ui-btn-hover-s { + background-color: @color_list_divider_bg; + } .ui-divider-normal-line { position: absolute; bottom: 0; @@ -593,13 +573,35 @@ background-color: @color_list_divider_line; } - a { - display: block; - color: @color_list_divider_text; - text-decoration: none; + //for buttonMarkuped divider + &.ui-btn { + top: 0; + margin-top: 0; + border-radius: 0; + border-bottom: 0; + + .ui-btn-inner.ui-btn-hastxt { + height: 100%; + padding-left: 0; + border-bottom: 0; + .ui-btn-text { + position: absolute; + top: 7.5 * @unit_base; + left: 15 * @unit_base; + height: 36 * @unit_base; + font-size: @font_size_list_divider_text; + } + } + + .ui-link-inherit { + color: @color_list_divider_text; + font-weight: bold; + font-size: @font_size_list_divider_text; + line-height: 23 * unit_base; + } } - .ui-divider-text { + &>.ui-btn-text { box-sizing: border-box; padding-left: 13 * @unit_base; padding-right: 13 * @unit_base; @@ -616,27 +618,24 @@ &[data-style="check"] { padding-top: 0; - background-color: @color_list_divider_bg; - .ui-divider-normal-line { - display: none; - } + background-color: @color_searchbar_bg; + .ui-divider-normal-line { display: none; } - .ui-divider-text { + .ui-btn-text { padding: 0; height: 0; - - a, - label { + a { padding-top: 0; padding-bottom: 0; padding-left: 61.5 * @unit_base; } } - .ui-checkbox:first-child { position: absolute; - top: 8 * @unit_base; + top: 9 * @unit_base; left: 15 * @unit_base; + width: 31.5 * @unit_base; + height: 31.5 * @unit_base; } } } @@ -646,5 +645,4 @@ /****************************************************************/ .ui-listview-dummy { position: absolute; - left: 0; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.navbar.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.navbar.less index 6bb25527..94775650 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.navbar.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.navbar.less @@ -1,3 +1,8 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ .ui-navbar { overflow: hidden; } .ui-navbar ul, .ui-navbar-expanded ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;} .ui-navbar-collapsed ul { float: left; width: 75%; margin-right: -2px; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.popup.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.popup.less index 8d71165e..51bc2bf2 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.popup.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.popup.less @@ -1,3 +1,45 @@ +.ui-popup-screen-background-hack { + background-color: black; + filter: Alpha(Opacity=0); +} + +@-webkit-keyframes popup-fadein { + from { opacity: 0; } + to { opacity: 0.5; } +} + +@-moz-keyframes popup-fadein { + from { opacity: 0; } + to { opacity: 0.5; } +} + +@-webkit-keyframes popup-fadeout { + from { opacity: 0.5; } + to { opacity: 0; } +} + +@-moz-keyframes popup-fadeout { + from { opacity: 0.5; } + to { opacity: 0; } +} + +.ui-popup-screen.fade.in { + opacity: 0.5; + -webkit-animation-name: popup-fadein; + -moz-animation-name: popup-fadein; +} + +.ui-popup-screen.fade.out { + opacity: 0; + -webkit-animation-name: popup-fadeout; + -moz-animation-name: popup-fadeout; +} + +.ui-popup.ui-content, +.ui-popup .ui-content { + overflow: visible; +} + .ui-popup > img { width: auto; height: auto; @@ -5,6 +47,9 @@ max-height: 100%; vertical-align: middle; } +.ui-popup iframe { + vertical-align: middle; +} @media all and (min-width: 450px){ .ui-popup .ui-field-contain label.ui-submit, diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.segmentctrl.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.segmentctrl.less index e8494dc3..718a2d28 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.segmentctrl.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.segmentctrl.less @@ -7,11 +7,19 @@ } .ui-controlgroup .ui-btn-inner.ui-corner-left { - .border-radius(0); + -o-border-radius: 0; + -ms-border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; } .ui-controlgroup .ui-btn-inner.ui-corner-right.ui-controlgroup-last { - .border-radius(0); + -o-border-radius: 0; + -ms-border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; } .ui-controlgroup .ui-radio-off.ui-btn-hover-s.ui-btn-down-s .ui-btn-inner, diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.theme.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.theme.less index 4ae7b557..f756bd75 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.theme.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.theme.less @@ -62,7 +62,8 @@ >.ui-btn, >.naviframe-button.ui-btn { .ui-btn-inner.ui-btn-icon-only { - .border-box(); + .LESSbox-boxsizing( border-box ); + } } @@ -74,66 +75,101 @@ } > .ui-btn, - >.naviframe-button.ui-btn-icon.ui-btn-icon-only { + >.naviframe-button { + height : 46 * @unit_base; + padding : 0; position: absolute; + top: 13 * @unit_base; + margin : 0; color: @color_bar_title_button_text; font-size: @font_size_bar_title_button_text; .LESSborder-radius-all(0); - &.ui-icon-naviframe-selectall, - &.ui-icon-naviframe-delete, - &.ui-icon-naviframe-edit { - &::after { - top: 5 * @unit_base; - left: 5 * @unit_base; - width : 46 * @unit_base; - height : 46 * @unit_base; - -webkit-mask-size: 100%; - background-color: @color_button_icon; - margin-top: 0; - } - } - - &.ui-btn-left, - &.ui-btn-right { + &.ui-btn-left { + left: 15 * @unit_base; -webkit-mask-box-image: none; border-image: none; - &.ui-icon-naviframe-cancel, - &.ui-icon-naviframe-done { + &.ui-btn-icon-naviframe-cancel { + left: 0; + top: 0; width: 104 * @unit_base; height: 100%; - line-height: 72 * @unit_base; - text-indent: 0; - - &::after { + .ui-btn-inner { + width: 100%; + .ui-btn-text { + display: block; + width: 100%; + height: 46 * @unit_base; + box-sizing: border-box; + line-height: 72 * @unit_base; + } + } + .ui-icon { display: none; } } - - &.ui-btn-icon-left.ui-btn-icon-only .ui-btn-inner.ui-btn-icon-only .ui-icon { + &.ui-btn-icon-left.ui-btn-icon_only .ui-btn-inner.ui-btn-icon-only .ui-icon { left: 0; background-color: @color_bar_title_button_all; } } - &.ui-btn-left { - left: 15 * @unit_base; - &.ui-icon-naviframe-cancel { - left: 0; - top: 0; - } - } &.ui-btn-right { right: 15 * @unit_base; - &.ui-icon-naviframe-done { + -webkit-mask-box-image: none; + border-image: none; + &.ui-btn-icon-naviframe-done { right: 0; top: 0; + width: 104 * @unit_base; + height: 100%; + .ui-btn-inner { + width: 100%; + .ui-btn-text { + display: block; + width: 100%; + height: 46 * @unit_base; + box-sizing: border-box; + line-height: 72 * @unit_base; + } + } + .ui-icon { + display: none; + } + } + &.ui-btn-icon-left.ui-btn-icon_only .ui-btn-inner.ui-btn-icon-only .ui-icon { + left: 0; + background-color: @color_bar_title_button_all; } } + &:not(.ui-btn-icon_only) { + width: auto; + max-width: 70 * @unit_base; + } + + &.ui-btn-icon_only { + width: 46 * @unit_base; + } + + .ui-btn-inner { + padding : 0; + margin : 0; + width: auto; + height: 100%; + .ui-btn-text { + width: auto; + font-size : @font_size_bar_title_button_text; + line-height: 46 * @unit_base; + } - &:active { + &.ui-btn-icon-only { + margin: 0; + width: 46 * @unit_base; + } + } + &.ui-btn-down-s { background-color : @color_bar_naviframe_press; } } @@ -225,41 +261,38 @@ text-align : center; bottom : 0; background : @color_bar_toolbar_bg; - .ui-btn { - .border-box(); + .ui-btn.ui-btn-box-s { + box-sizing: border-box; height: 74 * @unit_base; margin-top: 17 * @unit_base; - line-height: 54 * @unit_base; - &:not(.ui-btn-inline) { - width: 100%; - } + width: 100%; .ui-btn-inner .ui-btn-text { - line-height: 54 * @unit_base; + line-height: 64.5 * @unit_base; } } &.ui-footer-btn-1 { - .display-flex(); - flex-direction: row; + display: -webkit-flex; + -webkit-flex-direction: row; .ui-btn.ui-btn-box-s { margin-left: @footer_btn_margin; margin-right: @footer_btn_margin; } } &.ui-footer-btn-2 { - .display-flex(); - flex-direction: row; - .ui-btn:nth-child(1) { + display: -webkit-flex; + -webkit-flex-direction: row; + .ui-btn.ui-btn-box-s:nth-child(1) { margin-left: @footer_btn_margin; margin-right: @footer_btn_middle_margin; } - .ui-btn:nth-child(2) { + .ui-btn.ui-btn-box-s:nth-child(2) { margin-left: @footer_btn_middle_margin; margin-right: @footer_btn_margin; } } &.ui-footer-btn-3 { - .display-flex(); - flex-direction: row; + display: -webkit-flex; + -webkit-flex-direction: row; .ui-btn.ui-btn-box-s:nth-child(1) { margin-left: @footer_btn_margin; margin-right: @footer_btn_middle_margin; @@ -277,14 +310,16 @@ margin: 0; .ui-controlgroup-controls { width: 100%; - .display-flex(); - flex-direction: row; - .ui-btn { + display: -webkit-flex; + -webkit-flex-direction: row; + .ui-btn.ui-btn-box-s { margin-left: @footer_btn_middle_margin; margin-right: @footer_btn_middle_margin; - font-size: @font_size_button_text; - line-height: 60 * @unit_base; - color: @color_button_text_normal; + .ui-btn-text { + font-size: @font_size_button_text; + line-height: 60 * @unit_base; + color: @color_button_text_normal; + } } } } @@ -335,38 +370,9 @@ padding: 1 * @unit_base; } -.ui-btn.ui-btn-corner-all.ui-btn-box-s { - .ui-btn-inner { - .LESSborder-radius-all( 1.2rem ); - } - &.ui-btn-block .ui-btn-inner{ - top: 6 * @unit_base; - } -} - -.ui-header .ui-btn-box-s, -.ui-footer .ui-btn-box-s, -.ui-btn-back.ui-btn-up-s, -.ui-btn-back.ui-btn-hover-s, -.ui-btn-back.ui-btn-down-s, -.ui-btn-footer-down.ui-btn-up-s, -.ui-btn-footer-down.ui-btn-hover-s, -.ui-btn-footer-down.ui-btn-down-s, -.ui-popup .ui-btn-box-s { - font-weight: normal; - .LESSborder-radius-all( 0.9 rem ); -} - -.ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle { - .LESSborder-radius-allimportant( 1em ); -} -.ui-btn-box-s.ui-btn-hover-s.ui-btn-round { - .LESSborder-radius-allimportant( 1.2em ); -} - .ui-btn-box-s.ui-btn-down-s { .ui-btn-inner { - color: @color_button_text_press; + .LESSbutton_down_style; } } @@ -461,6 +467,7 @@ a.ui-link-inherit { .ui-btn-box-s.ui-focus, .ui-btn-box-s.ui-btn-hover-s { .core_button_bg(); + background-color: @color_button_bg; &:not([data-style="nobg"]):not([data-style="circle"]).ui-btn-icon_only { .ui-icon { background-color: @color_button_icon; @@ -471,6 +478,7 @@ a.ui-link-inherit { .ui-btn-box-s.ui-btn-down-s { .core_button_bg_pressed(); + background-color: @color_button_bg_press; } .ui-btn-inner.ui-btn-icon-only { @@ -489,79 +497,79 @@ a.ui-link-inherit { .ui-btn.ui-btn-up-s { /* less parsing problem : divide css */ .ui-icon.ui-icon-naviframe-edit { - .mask-image('images/page/00_icon_edit.png'); + -webkit-mask-image: url(images/page/00_icon_edit.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-plus { - .mask-image('images/page/00_icon_plus.png'); + -webkit-mask-image: url(images/page/00_icon_plus.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-delete { - .mask-image('images/page/00_icon_delete.png'); + -webkit-mask-image: url(images/page/00_icon_delete.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-search { - .mask-image('images/page/00_icon_search.png'); + -webkit-mask-image: url(images/page/00_icon_search.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-selectall { - .mask-image('images/page/00_icon_select_all.png'); + -webkit-mask-image: url(images/page/00_icon_select_all.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-drawer { - .mask-image('images/page/core_icon_drawer.png'); + -webkit-mask-image: url(images/page/core_icon_drawer.png); } } .ui-btn.ui-btn-hover-s { .ui-icon.ui-icon-naviframe-edit { - .mask-image('images/page/00_icon_edit.png'); + -webkit-mask-image: url(images/page/00_icon_edit.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-plus { - .mask-image('images/page/00_icon_plus.png'); + -webkit-mask-image: url(images/page/00_icon_plus.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-delete { - .mask-image('images/page/00_icon_delete.png'); + -webkit-mask-image: url(images/page/00_icon_delete.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-search { - .mask-image('images/page/00_icon_search.png'); + -webkit-mask-image: url(images/page/00_icon_search.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-selectall { - .mask-image('images/page/00_icon_select_all.png'); + -webkit-mask-image: url(images/page/00_icon_select_all.png); background-color: @color_bar_title_button_all; } .ui-icon.ui-icon-naviframe-drawer { - .mask-image('images/page/core_icon_drawer.png'); + -webkit-mask-image: url(images/page/core_icon_drawer.png); } } .ui-btn-box-s.ui-btn.ui-btn-down-s { .ui-icon.ui-icon-naviframe-edit { - .mask-image('images/page/00_icon_edit.png'); + -webkit-mask-image: url(images/page/00_icon_edit.png); background-color: @color_bar_title_button_all_press; } .ui-icon.ui-icon-naviframe-plus { - .mask-image('images/page/00_icon_plus.png'); + -webkit-mask-image: url(images/page/00_icon_plus.png); background-color: @color_bar_title_button_all_press; } .ui-icon.ui-icon-naviframe-delete { - .mask-image('images/page/00_icon_delete.png'); + -webkit-mask-image: url(images/page/00_icon_delete.png); background-color: @color_bar_title_button_all_press; } .ui-icon.ui-icon-naviframe-search { - .mask-image('images/page/00_icon_search.png'); + -webkit-mask-image: url(images/page/00_icon_search.png); background-color: @color_bar_title_button_all_press; } .ui-icon.ui-icon-naviframe-selectall { - .mask-image('images/page/00_icon_select_all.png'); + -webkit-mask-image: url(images/page/00_icon_select_all.png); background-color: @color_bar_title_button_all_press; } .ui-icon.ui-icon-naviframe-drawer { - .mask-image('images/page/core_icon_drawer.png'); + -webkit-mask-image: url(images/page/core_icon_drawer.png); } } @@ -590,13 +598,14 @@ a.ui-link-inherit { &.ui-icon-naviframe-search, &.ui-icon-naviframe-selectall, &.ui-icon-naviframe-drawer { - .mask-size(100%); + -webkit-mask-size: 100%; } } /* Interaction cues -----------------------------------------------------------------------------------------------------------*/ .ui-disabled { - .opacity(0.3); + filter: Alpha(Opacity=30); + opacity: .3; zoom: 1; } .ui-disabled, diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.ctxpopup.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.ctxpopup.less index 68ca3eb2..074f6053 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.ctxpopup.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.ctxpopup.less @@ -1,87 +1,46 @@ -.ui-popup.ui-ctxpopup { - width: auto; - padding:0 0 0 0; - background-color: transparent; - .ui-popup-content { - width: auto; - } - .ui-popup-wrapper { - background-color: @color_ctxpopup_background; - border: 4 * @unit_base solid @color_ctxpopup_background_border; - border-radius: 10 * @unit_base; - box-shadow: none; - } +.ui-popup-screen.ui-ctxpopup-screen { + opacity: 0; +} +.ui-ctxpopup { + display: table; + :focus { outline:none; } - &.slideup.in { - .slideupfade.in; - } - &.slideup.out { - .slideupfade.out.reverse; - } - .ui-arrow { - width: 46*@unit_base; - height: 12*@unit_base; - overflow: hidden; - position: absolute; - display: none; - animation-duration: 0; - -webkit-animation-duration: 0; - span { - width: 14 * @unit_base; - height: 14 * @unit_base; - border: 4 * @unit_base solid @color_ctxpopup_background_border; - box-shadow: none; - background-color: @color_ctxpopup_background; - position:absolute; - top:6*@unit_base; - left:16*@unit_base; - -webkit-transform: rotate(55deg) skew(24deg); - transform: rotate(55deg) skew(24deg); - animation-duration: 0; - -webkit-animation-duration: 0; - } + .ui-ctxpopup-row .ui-triangle-top { + top: 2 * @unit_base; } - &.ui-popup-arrow-b { - padding:5*@unit_base 5*@unit_base 0 5*@unit_base; + .ui-ctxpopup-row .ui-triangle-left { + left: 2 * @unit_base; } - &.ui-popup-arrow-t { - padding:0 5*@unit_base 5*@unit_base 5*@unit_base; + .ui-ctxpopup-row .ui-triangle-right { + right: 2 * @unit_base; } - &.ui-popup-arrow-r { - padding:5*@unit_base 0 5*@unit_base 5*@unit_base; + .ui-ctxpopup-row .ui-triangle-bottom { + bottom: 2 * @unit_base; } - &.ui-popup-arrow-l { - padding:5*@unit_base 5*@unit_base 5 0*@unit_base; - } + .ui-ctxpopup-row { + display: table-row; + + .ui-ctxpopup-cell { + display: table-cell; + } + + .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 ); + } - &.ui-popup-arrow-b .ui-arrow { - display: block; - bottom: -11 * @unit_base; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } - &.ui-popup-arrow-t .ui-arrow { - display: block; - top: -8 * @unit_base; - } - &.ui-popup-arrow-r .ui-arrow { - display: block; - left : -8 * @unit_base; - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - } - &.ui-popup-arrow-l .ui-arrow { - display: block; - right:- 8 * @unit_base; - -webkit-transform: rotate(90deg); - transform: rotate(90deg); } .ui-listview li.ui-btn-up-s, .ui-listview li.ui-btn-hover-s { @@ -91,15 +50,17 @@ .ui-listview { max-width: 620 * @unit_base; border: none; - margin: 0; - padding: 0; } .ui-listview .ui-li { color: @color_ctxpopup_text; font-size: @font_size_ctxpopup_text; - border-top: 1 * @unit_base solid @color_ctxpopup_list_item_border_top; - border-bottom: 1 * @unit_base solid @color_ctxpopup_list_item_border_bottom; + border-bottom-color: @color_ctxpopup_border_bottom; + border-bottom-width: 1 * @unit_base; + border-bottom-style: solid; + border-top-color: @color_ctxpopup_border_top; + border-top-width: 1 * @unit_base; + border-top-style: solid; margin-left: 0; margin-right: 0; &:first-child { @@ -108,17 +69,19 @@ &:last-child { border-bottom-width: 0; } - &.ui-li-anchor { - &>a { - box-sizing: border-box; - } + .ui-btn-inner { + margin: 0; + padding-left: 10 * @unit_base; + padding-right: 10 * @unit_base; + } + &.ui-btn { &:not(:last-child){ - border-bottom: 1px solid @color_ctxpopup_divider; - } - &.ui-li-active { - background-color: @color_ctxpopup_btn_press; + border-bottom: 1px solid @color_ctxpopup_divider; } } + &.ui-btn-down-s { + background-color: @color_ctxpopup_btn_press; + } } .ui-listview li.ui-btn-up-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-hover-s > .ui-li > .ui-btn-text > a.ui-link-inherit, .ui-listview li.ui-btn-down-s > .ui-li > .ui-btn-text > a.ui-link-inherit { @@ -216,3 +179,172 @@ } } + +:not(.ui-slider-popup-container) { + .ui-arrow { + border: 4 * @unit_base solid @color_ctxpopup_background_border; + width: 14.14 * @unit_base; + height: 14.14 * @unit_base; + background: inherit !important; + position: absolute; + -webkit-transform: rotate(45deg); + z-index: -1; + &.top { + //border-color: transparent transparent @color_ctxpopup_background transparent; + margin: -8 * @unit_base; + } + &.left { + //border-color: transparent transparent transparent @color_ctxpopup_background; + margin: -6 * @unit_base; + } + &.right { + //border-color: transparent @color_ctxpopup_background transparent transparent; + margin: -6 * @unit_base; + } + &.bottom { + //border-color: @color_ctxpopup_background transparent transparent transparent; + margin: -6 * @unit_base; + } + } +} + +.ui-ctxpopup-container { + z-index: 1200; + display: inline-block; + position: absolute; + padding: 0; + outline: 0; + border: 1 * @unit_base solid @color_ctxpopup_background_border; + background: @color_ctxpopup_background; + box-shadow: 1 * @unit_base 2 * @unit_base 1 * @unit_base #333333; + max-width: 100%; + box-sizing: border-box; + .ui-popup { + border: none; + border-color: inherit; + border-radius: 10 * @unit_base; + background: @color_ctxpopup_background; + padding : 0 8 * @unit_base 0; + position: relative; + &.ui-selectmenu { + padding: 0; + } + } + .ui-listview .ui-li .ui-btn-inner { + border-width: 0; + } +} + +.poptop { + -webkit-transform-origin: 0% 0%; + -moz-transform-origin: 0% 0%; +} + +.poptop.in { + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity: 1; + -webkit-animation-name: scalepopin; + -moz-animation-name: scalepopin; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; +} + +.poptop.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + opacity: 0; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; +} + +.poptop.in.reverse { + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.poptop.out.reverse { + -webkit-transform: scale(.8); + -moz-transform: scale(.8); + -webkit-animation-name: scalepopout; + -moz-animation-name: scalepopout; +} + +@-webkit-keyframes scalepopin { + from { + -webkit-transform: scale(.8); + opacity: 0; + } + to { + -webkit-transform: scale(1); + opacity: 1; + } +} + +.popbottom { + -webkit-transform-origin: 0% 100%; + -moz-transform-origin: 0% 100%; +} + +.popbottom.in { + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity: 1; + -webkit-animation-name: scalepopin; + -moz-animation-name: scalepopin; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; +} + +.popbottom.out { + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + opacity: 0; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; +} + +.popbottom.in.reverse { + -webkit-animation-name: fadein; + -moz-animation-name: fadein; +} + +.popbottom.out.reverse { + -webkit-transform: scale(.8); + -moz-transform: scale(.8); + -webkit-animation-name: scalepopout; + -moz-animation-name: scalepopout; +} + +@-moz-keyframes scalepopin { + from { + -moz-transform: scale(.8); + opacity: 0; + } + to { + -moz-transform: scale(1); + opacity: 1; + } +} + +@-webkit-keyframes scalepopout { + from { + -webkit-transform: scale(1); + opacity: 1; + } + to { + -webkit-transform: scale(.8); + opacity: 0; + } +} + +@-moz-keyframes scalepopout { + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(.8); + opacity: 0; + } +} diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.datetimepicker.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.datetimepicker.less index cbdac046..e5673e0d 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.datetimepicker.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.datetimepicker.less @@ -1,63 +1,23 @@ @unit_base_datetimepicker : @unit_base * 0.5; -.m-datetime-in() { +@-webkit-keyframes ui-datetime-in { from { - .transform(translateY(14 * @unit_base) scale(0.9)); + -webkit-transform: translateY(14 * @unit_base) scale(.9); } to { - .transform(translateY(0) scale(1)); + -webkit-transform: translateY(0) scale(1); } } -.m-datetime-out() { +@-webkit-keyframes ui-datetime-out { from { opacity: 0.8; - .transform(translateY(0) scale(0.6)); + -webkit-transform: translateY(0) scale(.6); } to { opacity: 0; - .transform(translateY(-14 * @unit_base) scale(0.6)); + -webkit-transform: translateY(-14 * @unit_base) scale(.6); } } -@-webkit-keyframes ui-datetime-in { - .m-datetime-in(); -} - -@-moz-keyframes ui-datetime-in { - .m-datetime-in(); -} - -@-ms-keyframes ui-datetime-in { - .m-datetime-in(); -} - -@-o-keyframes ui-datetime-in { - .m-datetime-in(); -} - -@keyframes ui-datetime-in { - .m-datetime-in(); -} - -@-webkit-keyframes ui-datetime-out { - .m-datetime-out(); -} - -@-moz-keyframes ui-datetime-out { - .m-datetime-out(); -} - -@-ms-keyframes ui-datetime-out { - .m-datetime-out(); -} - -@-o-keyframes ui-datetime-out { - .m-datetime-out(); -} - -@keyframes ui-datetime-out { - .m-datetime-out(); -} - .ui-datefield { font-size: @font_size_datetime_main_text; display : inline-block; @@ -106,10 +66,16 @@ display: inline-block; } .ui-datefield-selected.in { - .animation(ui-datetime-in 300ms 1 ease); + -ms-animation: ui-datetime-in 0.3s 1 ease; + -o-animation: ui-datetime-in 0.3s 1 ease; + -moz-animation: ui-datetime-in 0.3s 1 ease; + -webkit-animation: ui-datetime-in 0.3s 1 ease; } .ui-datefield-selected.out { - .animation(ui-datetime-out 300ms 1 ease); + -ms-animation: ui-datetime-out 0.3s 1 ease; + -o-animation: ui-datetime-out 0.3s 1 ease; + -moz-animation: ui-datetime-out 0.3s 1 ease; + -webkit-animation: ui-datetime-out 0.3s 1 ease; } } @@ -204,8 +170,12 @@ .ui-popupwindow-padding { background: inherit !important; - .border-radius(0) !important; - .box-shadow(0px 0px 12px rgba(0, 0, 0, 0.6)) !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; text-align: center !important; diff --git a/tau/src/css/profile/mobile/changeable/common/drawer.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.drawer.less index 36504d0e..df838e34 100644 --- a/tau/src/css/profile/mobile/changeable/common/drawer.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.drawer.less @@ -3,23 +3,23 @@ background-color : @color_drawer_bg; z-index : 1201; box-sizing : border-box; - overflow-x : hidden; overflow-y : scroll; &.ui-drawer-left { - border-right : 1px solid @color_drawer_border_right; - /* drawer left border color same to list border bottom color */ + border-right : 1px solid @color_list_border_bottom; + /* drawer right border color same to list border bottom color */ } &.ui-drawer-right { - border-left : 1px solid @color_drawer_border_left; - /* drawer right border color same to list border bottom color */ + border-left : 1px solid @color_list_border_bottom; } .ui-listview { margin : 0; position: absolute; z-index: 2000; width: 100%; - .ui-li.ui-btn-up-s, - .ui-li.ui-btn-hover-s{ + .ui-li.ui-btn-up-s { + background-color : @color_drawer_bg; + } + .ui-li.ui-btn-hover-s { background-color : @color_drawer_bg; } .ui-li.ui-btn-down-s { @@ -52,25 +52,25 @@ } .ui-header { - .ui-btn.ui-drawer-button.ui-btn-icon-only { - position: absolute; - top: 0; - left: 0; - width : 55 * @unit_base; - height : 72 * @unit_base; - - &:active { - background-color : @color_drawer_icon_press; - } - - &::after { - width : 55 * @unit_base; - height : 72 * @unit_base; - -webkit-mask-size: 100%; - background-color: @color_drawer_icon; - margin-top: 0; + &.ui-drawer-header { + .ui-btn.ui-drawer-button.ui-btn-icon_only { + position: absolute; top: 0; left: 0; + width : 55 * @unit_base; + height : 72 * @unit_base; + + &.ui-btn-down-s { + background-color : @color_drawer_icon_press; + } + + .ui-btn-inner.ui-btn-icon-only .ui-icon { + width : 55 * @unit_base; + height : 72 * @unit_base; + background-color: @color_drawer_icon; + margin-top: 0; + top: 0; + } } } } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.emptystate.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.emptystate.less index bbfc11c9..1666688b 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.emptystate.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.emptystate.less @@ -5,10 +5,13 @@ } .ui-content { + display: flex; + display: -webkit-flex; position: relative; - .display-flex(); - .align-items(center); - .justify-content(center); + align-items: center; + -webkit-align-items: center; + justify-content: center; + -webkit-justify-content: center; height: 100%; background-color: @color_emptystate_content_bg; @@ -20,9 +23,9 @@ left: 0; width: 100%; height: 100%; - .mask-image('images/00_page_empty_bg.png'); - .mask-size(100% auto); - .mask-repeat(no-repeat); + -webkit-mask-image: url(images/00_page_empty_bg.png); + -webkit-mask-size: 100% auto; + -webkit-mask-repeat: no-repeat; background-color: @color_emptystate_content_pattern_bg; } @@ -42,9 +45,9 @@ @media only screen and (orientation : landscape) { &:before { - .mask-image('images/00_page_empty_bg_h.png'); - .mask-size(100% 200 * @unit_base); + -webkit-mask-image: url(images/00_page_empty_bg_h.png); + -webkit-mask-size: 100% 200 * @unit_base; } } } -} +}
\ No newline at end of file diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.fastscroll.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.fastscroll.less index d0bfb306..63a7bddc 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.fastscroll.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.fastscroll.less @@ -1,13 +1,9 @@ -/** - * All disabled; - */ -/* .ui-fastscroll { position: absolute; right: 0; width: 33 * @unit_base; height: 100%; - .user-select(none); + -webkit-user-select: none; user-select:none; margin:0; padding-top: 3 * @unit_base; @@ -16,7 +12,9 @@ background: @color_fastscroll_rollover_bg; z-index: 1000; - .border-box(); + -webkit-box-sizing: border-box; + box-sizing: border-box; + ul { list-style-type: none; margin: 0; @@ -52,7 +50,8 @@ li.ui-fastscroll-hover-first-item { font-size: @font_size_fastscroll_popup_text; font-weight: bold; display:none; - .border-box(); + -webkit-box-sizing: border-box; + box-sizing:border-box; left: 50%; top: 50%; width: 92 * @unit_base; @@ -60,4 +59,3 @@ li.ui-fastscroll-hover-first-item { box-shadow: 0 2px 1px @color_fastscroll_popup_border; z-index: 1000; } -*/
\ No newline at end of file diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.gallery.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.gallery.less index 03d9410a..f6cc32f4 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.gallery.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.gallery.less @@ -3,11 +3,6 @@ width: 100%; } -.ui-gallery-container { - position: relative; - width: 100%; -} - .ui-gallery-bg { display: none; position: absolute; diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.less index bb79afcb..fba68109 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.less @@ -23,12 +23,6 @@ So, for fitting with viewport=320, we multiply px_base by (320/480).*/ @z_base_tickernoti: @z_base_maximum - 100; @z_base_slider_popup: @z_base_popup + 10; //DCM-1735 issue fix -.tau-info-theme { - position: absolute; - top: -999px; - left: -999px; -} - /****************************** Global LESS mixin collection diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.notification.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.notification.less index 65cc1fe1..655b1a0f 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.notification.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.notification.less @@ -2,70 +2,30 @@ @ticker_height: 72 * @unit_base; -.m-notification-ui-ticker-show() { +@-webkit-keyframes ui-ticker-show { from { opacity: 0; - .transform(translateY(-@ticker_height)); + -webkit-transform: translateY(-@ticker_height); top: -@ticker_height; } to { opacity: 1; - .transform(translateY(0)); + -webkit-transform: translateY(0); top: 0; } } -.m-notification-ui-ticker-hide() { +@-webkit-keyframes ui-ticker-hide { from { opacity: 1; - .transform(translateY(0)); + -webkit-transform: translateY(0); top: 0; } to { opacity: 0; - .transform(translateY(-@ticker_height)); + -webkit-transform: translateY(-@ticker_height); top: -@ticker_height; } } -@-webkit-keyframes ui-ticker-show { - .m-notification-ui-ticker-show(); -} - -@-moz-keyframes ui-ticker-show { - .m-notification-ui-ticker-show(); -} - -@-ms-keyframes ui-ticker-show { - .m-notification-ui-ticker-show(); -} - -@-o-keyframes ui-ticker-show { - .m-notification-ui-ticker-show(); -} - -@keyframes ui-ticker-show { - .m-notification-ui-ticker-show(); -} - -@-webkit-keyframes ui-ticker-hide { - .m-notification-ui-ticker-hide(); -} - -@-moz-keyframes ui-ticker-hide { - .m-notification-ui-ticker-hide(); -} - -@-ms-keyframes ui-ticker-hide { - .m-notification-ui-ticker-hide(); -} - -@-o-keyframes ui-ticker-hide { - .m-notification-ui-ticker-hide(); -} - -@keyframes ui-ticker-hide { - .m-notification-ui-ticker-hide(); -} - .ui-ticker { position: fixed; display: none; @@ -83,18 +43,25 @@ .ui-ticker.show { display: block; - .animation(ui-ticker-show 800ms 1 ease); + -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; - .animation(ui-ticker-hide 800ms 1 ease); + -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-ticker-btn { .core_button_bg(); + background-color: @color_button_bg; color: @color_button_text_normal; position: relative; margin-top: 10 * @unit_base; @@ -114,6 +81,7 @@ } .ui-ticker-btn:active { .core_button_bg_pressed(); + background-color: @color_button_bg_press; } .ui-ticker-icon { @@ -146,38 +114,19 @@ } /* smallpopup */ -.m-notification-ui-smallpopup-show() { + +@-webkit-keyframes ui-smallpopup-show { from { display: none; opacity: 0; - .transform(scaleY(0)); + -webkit-transform: scaleY(0); } to { display: block; opacity: 1; - .transform(scaleY(1)); + -webkit-transform: scaleY(1); } } -@-webkit-keyframes ui-smallpopup-show { - .m-notification-ui-smallpopup-show(); -} - -@-moz-keyframes ui-smallpopup-show { - .m-notification-ui-smallpopup-show(); -} - -@-ms-keyframes ui-smallpopup-show { - .m-notification-ui-smallpopup-show(); -} - -@-o-keyframes ui-smallpopup-show { - .m-notification-ui-smallpopup-show(); -} - -@keyframes ui-smallpopup-show { - .m-notification-ui-smallpopup-show(); -} - .ui-smallpopup { position: fixed; display: none; @@ -187,10 +136,10 @@ z-index: @z_base_smallpopup; background-color: @color_smallpopup_outline; padding: 1.3 * @unit_base; - .mask-box-image-repeat(repeat); - .mask-box-image-width(auto); - .mask-box-image('images/nine-patch/core_popup_noti_bg.png'); - .mask-box-image-slice(30 14 30 14 fill); + -webkit-mask-box-image-repeat: repeat; + -webkit-mask-box-image-width: auto; + -webkit-mask-box-image: url(images/nine-patch/core_popup_noti_bg.png); + -webkit-mask-box-image-slice: 30 14 30 14 fill; vertical-align: middle; font-size: @font_size_smallpopup_text; @@ -203,7 +152,10 @@ .ui-smallpopup.show { display: block; - .animation(ui-smallpopup-show 500ms 1 ease); + -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 { @@ -218,8 +170,8 @@ color: @color_smallpopup_text; background-color: @color_smallpopup_bg; - .mask-box-image-repeat(repeat); - .mask-box-image-width(auto); - .mask-box-image('images/nine-patch/core_popup_noti_bg.png'); - .mask-box-image-slice(30 14 30 14 fill); + -webkit-mask-box-image-repeat: repeat; + -webkit-mask-box-image-width: auto; + -webkit-mask-box-image: url(images/nine-patch/core_popup_noti_bg.png); + -webkit-mask-box-image-slice: 30 14 30 14 fill; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.popup.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.popup.less index 9623b320..26f903e9 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.popup.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.popup.less @@ -3,8 +3,7 @@ @popup-btn-area-margin: 30 * @unit_base; @popup-btn-middle-margin: 12 * @unit_base; -.ui-popup-overlay { - display:none; +.ui-popup-screen { background-color: @color_popup_dim_screen_bg; position: absolute; top: 0; @@ -12,29 +11,6 @@ width: 100%; height: 100%; z-index: @z_base_popup; - - &.in { - display:block; - } - &.out { - display:block; - } - div&.in { - -webkit-animation-name: fadein; - -moz-animation-name: fadein; - -webkit-animation-duration: 100ms; - -moz-animation-duration: 100ms; - -webkit-animation-fill-mode: forwards; - -moz-animation-fill-mode: forwards; - } - div&.out { - -webkit-animation-name: fadeout; - -moz-animation-name: fadeout; - -webkit-animation-duration: 100ms; - -moz-animation-duration: 100ms; - -webkit-animation-fill-mode: forwards; - -moz-animation-fill-mode: forwards; - } } .ui-popup-scroller-bg { @@ -48,37 +24,26 @@ } } -.ui-popup { - display: none; +.ui-popup-container { position: absolute; width: 100%; z-index: (@z_base_popup + 1) !important; text-align: center; - outline-color: @color_popup_outline; + outline-color: @color_list_bg; + .LESSdisplaybox(); .LESSbox-orient(vertical); .LESSbox-align(center); .LESSbox-pack(center); outline : none; - background: @color_popup_bg; - width : 100%; - > .ui-popup-title, - > .ui-popup-button-bg { + .ui-popup { + background: @color_popup_bg; width : 100%; - } - word-wrap : break-word; - border: 0; - - &.ui-popup-active { - display:block; - } - - &.in { - display:block; - } - - &.ui-build { - display:block; - visibility: hidden; + > .ui-popup-title, + > .ui-popup-button-bg { + width : 100%; + } + word-wrap : break-word; + border: 0; } .ui-popup-title, @@ -163,56 +128,73 @@ margin: 0 auto; color: @color_popup_button_text; box-sizing : border-box; - line-height: 72 * @unit_base; + } + + .ui-btn-inner { + height: 100%; + vertical-align: middle; + padding: 0; + .ui-btn-text { + display: block; + line-height: 48 * @unit_base; + margin: 18 * @unit_base auto; + } } } /***** Normal Samples *****/ - &.center_info, - &.center_title {} + .center_info, + .center_title {} - &.center_basic_1btn, - &.center_title_1btn, - &.center_liststyle_1btn { + .center_basic_1btn, + .center_title_1btn, + .center_liststyle_1btn { .ui-popup-button-bg { .ui-btn { - .calc-width(~"100% - "@popup-btn-area-margin); + width: ~"-webkit-calc(100% - @{popup-btn-area-margin})"; padding: 0; margin: 17 * @unit_base auto; } } } - &.center_basic_2btn, - &.center_title_2btn, - &.center_liststyle_2btn { + .center_basic_2btn, + .center_title_2btn, + .center_liststyle_2btn { .ui-popup-button-bg { .ui-btn { - .calc-width(~"50% - "@popup-btn-area-margin - @popup-btn-middle-margin); + width: ~"-webkit-calc((100% - @{popup-btn-area-margin} - @{popup-btn-middle-margin}) / 2)"; padding: 0; margin: 17 * @unit_base auto; float: left; } .ui-btn:first-child { - .calc-margin-left(@popup-btn-area-margin / 2); + margin-left: ~"-webkit-calc(@{popup-btn-area-margin} / 2)"; margin-right: @popup-btn-middle-margin; } } } - &.center_basic_3btn, - &.center_title_3btn { + .center_basic_3btn, + .center_title_3btn { .ui-btn { width: 33.33%; padding: 0; margin: 0; float: left; + .ui-btn-inner { + padding: 0; + .ui-btn-text { + display: block; + line-height: 48 * @unit_base; + } + } } } - &.center_checkbox { + .center_checkbox { .ui-popup-check-bg { font-size: @font_size_popup_text; display: inline-block; @@ -224,12 +206,15 @@ .ui-btn { text-align: center; border: 0; + .ui-btn-inner { + border: 0; + } } } } } - &.center_progressbar { + .center_progressbar { text-align: center; .ui-popup-text { @@ -279,7 +264,7 @@ } } - &.centertext_progressbar { + .centertext_progressbar { text-align: center; .ui-popup-text { @@ -330,7 +315,7 @@ } @media all and (orientation:landscape) and (device-aspect-ratio : 16/9) { - .ui-popup.pop.in { + .ui-popup-container, .ui-popup-container.pop.in { width: 60%; max-height: 432 * @unit_base; left: 20%; diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.popupwindow.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.popupwindow.less index 1ac6e1fe..bfaf181a 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.popupwindow.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.popupwindow.less @@ -564,10 +564,18 @@ } .ui-corner-all { - .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 { - .border-radius(0) !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; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.progress.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.progress.less index 02748d77..267830f9 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.progress.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.progress.less @@ -3,34 +3,14 @@ @progress_circle_size_medium: 36 * @unit_base; @progress_circle_size_large: 66 * @unit_base; -.m-progress-ui-rotate-animation () { +@-webkit-keyframes ui-rotate-animation { from { - .rotate(0deg); + -webkit-transform: rotate(0deg); } to { - .rotate(360deg); + -webkit-transform: rotate(360deg); } } -@-webkit-keyframes ui-rotate-animation { - .m-progress-ui-rotate-animation(); -} - -@-moz-keyframes ui-rotate-animation { - .m-progress-ui-rotate-animation(); -} - -@-ms-keyframes ui-rotate-animation { - .m-progress-ui-rotate-animation(); -} - -@-o-keyframes ui-rotate-animation { - .m-progress-ui-rotate-animation(); -} - -@keyframes ui-rotate-animation { - .m-progress-ui-rotate-animation(); -} - .ui-progress-container-circle { position: absolute; } @@ -43,8 +23,8 @@ width: @progress_circle_size_medium; background-color: @color_progress_circle_bg; - .mask-image('./images/00_list_process_01.png'); - .mask-size(100% 100%); + -webkit-mask-image: url('./images/00_list_process_01.png'); + -webkit-mask-size: 100% 100%; } .ui-progress-circle-small { @@ -58,33 +38,13 @@ } .ui-progress-circle-running { - .animation(ui-rotate-animation 1s infinite linear); + -webkit-animation: ui-rotate-animation 1s infinite linear; } /* Progress - pending style */ -.m-progress-indeterminate() { - from { .mask-image('./images/00_progress_pending_bg_01.png');} - to { .mask-image('./images/00_progress_pending_bg_02.png');} -} - @-webkit-keyframes indeterminate { - .m-progress-indeterminate(); -} - -@-moz-keyframes indeterminate { - .m-progress-indeterminate(); -} - -@-ms-keyframes indeterminate { - .m-progress-indeterminate(); -} - -@-o-keyframes indeterminate { - .m-progress-indeterminate(); -} - -@keyframes indeterminate { - .m-progress-indeterminate(); + from {-webkit-mask-image: url('./images/00_progress_pending_bg_01.png');} + to {-webkit-mask-image: url('./images/00_progress_pending_bg_02.png');} } .ui-progress-pending { @@ -95,13 +55,13 @@ padding-top: 0; padding-bottom: 0; background-color: @color_progress_value; - .mask-image('./images/00_progress_pending_bg_01.png'); + -webkit-mask-image: url('./images/00_progress_pending_bg_01.png'); background-size: 100% 100%; background-repeat: no-repeat; .LESSborder-radius-all( 10 * @unit_base ); - .mask-size(100% 100%); + -webkit-mask-size: 100% 100%; } .ui-progress-pending-running { - .animation(indeterminate 300ms infinite); + -webkit-animation: indeterminate 300ms infinite; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.progressbar.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.progressbar.less index 3c530cad..56a77e1e 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.progressbar.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.progressbar.less @@ -1,33 +1,13 @@ @bar_margin: 36 * @unit_base; -.m-progressbar-ui-scale-animation() { +@-webkit-keyframes ui-scale-animation { from { - .transform(scaleX(0)); + -webkit-transform: scaleX(0); } to { - .transform(scaleX(1)); + -webkit-transform: scaleX(1); } } -@-webkit-keyframes ui-scale-animation { - .m-progressbar-ui-scale-animation(); -} - -@-moz-keyframes ui-scale-animation { - .m-progressbar-ui-scale-animation(); -} - -@-ms-keyframes ui-scale-animation { - .m-progressbar-ui-scale-animation(); -} - -@-o-keyframes ui-scale-animation { - .m-progressbar-ui-scale-animation(); -} - -@keyframes ui-scale-animation { - .m-progressbar-ui-scale-animation(); -} - .ui-progressbar-value { height: 100%; diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.scrollview.handler.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.scrollview.handler.less index 9cf543c2..a98f427a 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.scrollview.handler.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.scrollview.handler.less @@ -4,7 +4,9 @@ opacity: 0; height: 100%; width: 100%; - .transition(opacity 400ms ease-out); + -webkit-transition: opacity 400ms ease-out; + -moz-transition: opacity 400ms ease-out; + transition: opacity 400ms ease-out; &.disabled { display: none; @@ -37,7 +39,8 @@ position : absolute; top : 0; left : 0; - .border-box(); + -webkit-box-sizing: border-box; + box-sizing: border-box; } .ui-handler-direction-x .ui-handler-handle { @@ -67,9 +70,9 @@ left : 0; width : 100%; height : 100%; - .mask-position(50% 50%); - .mask-size(auto 21 * @unit_base); - .mask-repeat(no-repeat); + -webkit-mask-position : 50% 50%; + -webkit-mask-size : auto 21 * @unit_base; + -webkit-mask-repeat : no-repeat; } } @@ -79,12 +82,12 @@ min-height : 47 * @unit_base; &::before { - .mask-image("images/00_scroll_bar_handler_v_01.png"); + -webkit-mask-image : url("images/00_scroll_bar_handler_v_01.png"); background-color : @color_scrollview_handler_thumb_01; } &::after { - .mask-image("images/00_scroll_bar_handler_v_02.png"); + -webkit-mask-image : url("images/00_scroll_bar_handler_v_02.png"); background-color : @color_scrollview_handler_thumb_02; } } @@ -93,17 +96,16 @@ min-width : 47 * @unit_base; &::before { - .mask-image("images/00_scroll_bar_handler_h_01.png"); + -webkit-mask-image : url("images/00_scroll_bar_handler_h_01.png"); background-color : @color_scrollview_handler_thumb_01; } &::after { - .mask-image("images/00_scroll_bar_handler_h_02.png"); + -webkit-mask-image : url("images/00_scroll_bar_handler_h_02.png"); background-color : @color_scrollview_handler_thumb_02; } } - .scrollbar-disabled { overflow: hidden !important; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.selectmenu.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.selectmenu.less index 30e2f6ae..fea66f1c 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.selectmenu.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.selectmenu.less @@ -62,8 +62,8 @@ overflow: hidden; text-overflow: ellipsis; font-size: @font_size_selectmenu_list; - border: 1px solid @color_selectmenu_border_placeholder; - background-color: @color_selectmenu_placeholder_bg; + border: 1px solid @color_selectmenu_list_line; + background-color: @color_selectmenu_list_group_index_bg; } .ui-selectmenu-disabled { @@ -98,7 +98,7 @@ padding: 0; overflow: hidden; margin: 0 15 * @unit_base 0 15 * @unit_base; - border: 1px solid @color_selectmenu_list_group_stroke; + border: 1px solid @color_selectmenu_label_bg_stroke; background-color: @color_selectmenu_list_group_index_bg; &:focus { outline: none; @@ -124,7 +124,7 @@ border-top: 0; } &:not(.ui-selectmenu-optiongroup):not(.ui-selectmenu-disabled):active { - background-color: @color_selectmenu_list_item_bg_press; + background-color: @color_selectmenu_label_bg_press; } &:focus, &:active { diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.slider.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.slider.less index ba0410ab..8dd3307c 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.slider.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.slider.less @@ -24,35 +24,6 @@ select.ui-slider-switch { padding-bottom: 21 * @unit_base; margin-left: 36 * @unit_base; margin-right: 36 * @unit_base; - - &.ui-slider-text-1 { - margin-right: 1rem; - margin-left: 1rem; - } - - &.ui-slider-text-2 { - margin-right: 2rem; - margin-left: 2rem; - } - - &.ui-slider-text-3 { - margin-right: 3rem; - margin-left: 3rem; - } - - &.ui-slider-text-4 { - margin-right: 4rem; - margin-left: 4rem; - } -} -.ui-vertical-slider-container { - display: inline-block; - width: 21 * @unit_base; - - padding-top: 36 * @unit_base; - padding-bottom: 36 * @unit_base; - margin-left: 21 * @unit_base; - margin-right: 21 * @unit_base; } .ui-li > .ui-slider-container { @@ -61,9 +32,7 @@ select.ui-slider-switch { } .ui-slider-left-volume, -.ui-slider-left-bright, -.ui-slider-right-volume, -.ui-slider-right-bright{ + .ui-slider-left-bright { position: absolute; vertical-align: middle; @@ -74,27 +43,36 @@ select.ui-slider-switch { top: 0px; height: @img_height; width: @img_width; + background: @color_slider_icon; - .mask-image('images/controls/00_slider_button_brightness_01.png'); - .mask-size(100%); + -webkit-mask-image: url(images/controls/00_slider_button_brightness_01.png); + -webkit-mask-size: 100%; background-color: @color_slider_img_bg; .LESSbackground-size(@img_width, @img_height); } .ui-slider-left-volume { - .mask-image('images/controls/00_slider_button_volume_01.png'); + -webkit-mask-image: url(images/controls/00_slider_button_volume_01.png); } .ui-slider-right-volume, .ui-slider-right-bright { + position: absolute; + vertical-align: middle; margin-top: 2 * @unit_base; margin-bottom: 10 * @unit_base; + top: 0px; right: -44 * @unit_base; + height: @img_height; + width: @img_width; - .mask-image('images/controls/00_slider_button_brightness_02.png'); + -webkit-mask-image: url(images/controls/00_slider_button_brightness_02.png); + -webkit-mask-size: 100%; + background-color: @color_slider_img_bg; + .LESSbackground-size(@img_width, @img_height); } .ui-slider-right-volume { - .mask-image('images/controls/00_slider_button_volume_02.png'); + -webkit-mask-image: url(images/controls/00_slider_button_volume_02.png); } .ui-slider-left-text { @@ -104,12 +82,8 @@ select.ui-slider-switch { height: 37 * @unit_base; text-align: center; - color: @color_slider_left_text; + color: @color_slider_num_text; font-size: @font_size_slider_num_text; - span { - position: relative; - top: 0.4em; - } } .ui-slider-right-text { @@ -119,56 +93,8 @@ select.ui-slider-switch { height: 37 * @unit_base; text-align: center; - color: @color_slider_right_text; + color: @color_slider_num_text; font-size: @font_size_slider_num_text; - span { - position: relative; - top: 0.4em; - } -} - -.ui-slider-text-1 { - .ui-slider-left-text { - left: -1rem; - width: 1rem; - } - .ui-slider-right-text { - right: -1rem; - width: 1rem; - } -} - -.ui-slider-text-2 { - .ui-slider-left-text { - left: -2rem; - width: 2rem; - } - .ui-slider-right-text { - right: -2rem; - width: 2rem; - } -} - -.ui-slider-text-3 { - .ui-slider-left-text { - left: -3rem; - width: 3rem; - } - .ui-slider-right-text { - right: -3rem; - width: 3rem; - } -} - -.ui-slider-text-4 { - .ui-slider-left-text { - left: -4rem; - width: 4rem; - } - .ui-slider-right-text { - right: -4rem; - width: 4rem; - } } div.ui-slider:not(.ui-toggle-switch) { @@ -179,9 +105,10 @@ div.ui-slider:not(.ui-toggle-switch) { margin-right: 8 * @unit_base; .LESSborder-radius-all( 10 * @unit_base ); - background-color: @color_slider_bg; + background-color: @color_progress_bg; .ui-btn { + top: -18 * @unit_base; margin-top: 0; } .ui-btn-inner { @@ -199,57 +126,33 @@ div.ui-slider:not(.ui-toggle-switch) { } } } -div.ui-vertical-slider { - left: 7.5 * @unit_base; - position: relative; - width: 6 * @unit_base; - height: 100%; - .LESSborder-radius-all( 10 * @unit_base ); - background-color: @color_slider_bg; - - a.ui-slider-handle-press { - &:after { - display: block; +.ui-ctxpopup-container { + &.ui-slider-popup-container { + box-shadow: none; + background: transparent; + border: none; } - } -} - - -div.ui-popup.ui-ctxpopup.ui-slider-popup { - padding:0; - .ui-popup-wrapper { - display: block; - position:relative; - box-sizing: border-box; - margin-bottom: -8 * @unit_base; - padding-top: 15 * @unit_base; - border:none; - border-radius: 0; - - width: 80 * @unit_base; - height: 92 * @unit_base; - line-height: @popup_height; - - background-color: @color_slider_popup_bg; - color: @color_slider_popup_text; - text-align: center; - font-size: @font_size_slider_popup_text; - -webkit-mask-image: url(images/controls/core_slider_popup_bg.png); - -webkit-mask-size: 100%; - -webkit-mask-position: center center; - -webkit-mask-repeat: no-repeat; + .ui-popup.ui-slider-popup { + position: static !important; + z-index: @z_base_slider_popup; + display: block; + box-sizing: border-box; + margin-bottom: -8 * @unit_base; + padding-top: 15 * @unit_base; + width: 80 * @unit_base; + height: 92 * @unit_base; line-height: @popup_height; background-color: @color_slider_popup_bg; color: @color_slider_popup_text; text-align: center; font-size: @font_size_slider_popup_text; - .mask-image('images/controls/core_slider_popup_bg.png'); - .mask-size(100%); - .mask-position(center center); - .mask-repeat(no-repeat); + -webkit-mask-image: url(images/controls/core_slider_popup_bg.png); + -webkit-mask-size: 100%; + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; &:before { content: ""; @@ -259,34 +162,29 @@ div.ui-popup.ui-ctxpopup.ui-slider-popup { top: 3 * @unit_base; left: 1.5 * @unit_base; background-color: @color_slider_popup_stroke; - .mask-image('images/controls/core_slider_popup_bg_stroke.png'); - .mask-size(100%); + -webkit-mask-image: url(images/controls/core_slider_popup_bg_stroke.png); + -webkit-mask-size: 100%; } &+.ui-arrow { visibility: hidden; } } - .ui-vertical-slider-container & { - margin-top: -21 * @unit_base; - } - } a.ui-slider-handle { - display: block; position: relative; z-index: 10; - cursor: pointer; width: @slider_handle_width; height: @slider_handle_height; margin-left: (-1 * (@slider_handle_width / 2)) - 2 * @unit_base; - .ui-vertical-slider &{ - margin-left: -18 * @unit_base; - } - .box-shadow(none); + -o-box-shadow: none; + -ms-box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; &:before, &:after { @@ -298,25 +196,20 @@ a.ui-slider-handle { left: 0; display: block; z-index: 9; - background-color: @color_slider_handle_bg; - margin-top: -18 * @unit_base; + background-color: @color_slider_handle_press_bg; } &:before { - .mask-image('images/controls/00_slider_handle.png'); - .mask-size(100%); + -webkit-mask-image: url(images/controls/00_slider_handle.png); + -webkit-mask-size: 100%; } &:after { z-index: 7; display: none; opacity: 0.5; - .mask-image('images/controls/00_slider_handle_press.png'); - .mask-size(100%); - } - .ui-vertical-slider-container &:before, - .ui-vertical-slider-container &:after { - margin-top : -21 * @unit_base; + -webkit-mask-image: url(images/controls/00_slider_handle_press.png); + -webkit-mask-size: 100%; } } a.ui-flip-handle { @@ -327,53 +220,34 @@ a.ui-flip-handle { } .ui-slider-bg { - position: absolute; - - height: 6 * @unit_base; - width: 0; - - .LESSborder-radius-all( 10 * @unit_base ); - background-color: @color_slider_active_bg; - - &.ui-slider-bg-has-center { - .LESSborder-radius-all( 0 ); - } -} -.ui-vertical-slider-bg { - position: absolute; + position: absolute; - width: 6 * @unit_base; - height: 0; + height: 6 * @unit_base; + width: 0; - .LESSborder-radius-all( 10 * @unit_base ); - background-color: @color_progress_value; + .LESSborder-radius-all( 10 * @unit_base ); + background-color: @color_progress_value; - &.ui-slider-bg-has-center { - .LESSborder-radius-all( 0 ); - } + &.ui-slider-bg-has-center { + .LESSborder-radius-all( 0 ); + } } .ui-slider { - text-align: center; + text-align: center; } .ui-slider-center { - display: inline-block; - position: absolute; - top: -8 * @unit_base; - left: 50%; - margin-left: -14 * @unit_base / 2; - width: 10 * @unit_base; - height: 24 * @unit_base; - background-color: @color_slider_center; - z-index: 10; - .mask-image('images/controls/00_slider_center_point_bg.png'); - .mask-size(100%); - .ui-vertical-slider & { - .rotate(90deg); - top: 50%; - left: -1px; - margin-top: -12 * @unit_base; - margin-left: initial; - } + display: inline-block; + position: absolute; + top: -8 * @unit_base; + left: 50%; + margin-left: -14 * @unit_base / 2; + width: 10 * @unit_base; + height: 24 * @unit_base; + background-color: @color_slider_center; + z-index: 10; + -webkit-mask-image: url(images/controls/00_slider_center_point_bg.png); + -webkit-mask-size: 100%; } + diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.swipe.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.swipe.less index a0144cc0..66e02d27 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.swipe.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.swipe.less @@ -6,7 +6,11 @@ } .ui-swipe-item { - .user-select(none); + -ms-user-select: none; + -o-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -user-select: none; min-height: 38 * @unit_base; opacity: 0; diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.tabbar.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.tabbar.less index 42f89abb..ba80330c 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.tabbar.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.tabbar.less @@ -2,172 +2,192 @@ Tabbar ***************************************************************************/ -.ui-tabbar { - .ui-tabbar-link { - position: relative; - display: block; - height: 72 * @unit_base; - line-height: 72 * @unit_base; - max-width: none; - background: @color_tabbar_btn_bg_normal; - color: @color_tabbar_text_normal; - font-size: @font_size_tabbar_text_only; - text-align: center; - text-decoration: none; - - &.ui-tab-active { - color: @color_tabbar_text_selected; - .ui-tabbar-text { - border-bottom: 3 * @unit_base solid; - } - &.ui-tabbar-icon::after { - background-color: @color_tabbar_icon_bg_select; - } - } - - &:active { - background-color: @color_tabbar_btn_bg_press; - } - - &.ui-tabbar-icon { - .ui-tabbar-text { - font-size: @font_size_tabbar_text +.ui-header.ui-title-tabbar-multiline .ui-tabbar { + height : 104 * @unit_base; + a.ui-btn { + height: 104 * @unit_base; + .ui-btn-inner { + height: 104 * @unit_base; + .ui-icon { + height: 46 * @unit_base; + width: 46 * @unit_base; + top: 0; + margin-top: 14 * @unit_base; + margin-left: 0; } - - &.ui-tabbar-icon-top .ui-tabbar-text { + &:not(.ui-btn-icon-only) .ui-btn-text-padding-top.ui-btn-text { height: 28 * @unit_base; padding-top: 63 * @unit_base; padding-bottom: 0; line-height: 28 * @unit_base; } - - &::after { - position: absolute; - height: 46 * @unit_base; - width: 46 * @unit_base; - top: 14 * @unit_base; - left: 50%; - background-color: @color_tabbar_icon_bg_normal; - margin-left: -23 * @unit_base; - .mask-size(100%); - content: ""; - } - } - - .ui-tabbar-text { - position: absolute; - padding: 18 * @unit_base 8 * @unit_base 1 * @unit_base; - height: 36 * @unit_base; - display: block; - line-height: 36 * @unit_base; - left: 50%; - .transform(translate(-50%, 0)); } } } +.ui-tabbar-divider{ + background: @color_tabbar_divider; + height: 1px; +} +.ui-header .ui-tabbar { + z-index : 1000; + height : 72 * @unit_base; -.ui-header { - .ui-tabbar { - z-index: 1000; - height: 72 * @unit_base; - } - - &.ui-title-tabbar-multiline .ui-tabbar { - height: 104 * @unit_base; + background : @color_tabbar_bg; - .ui-tabbar-link { - height: 104 * @unit_base; - } + .ui-tabbar-li { + display: inline-block; + float: left; } - &.ui-title-tabbar { - height: 144 * @unit_base; - .ui-tabbar { - border-top: 1px solid @color_tabbar_divider; - .ui-tabbar-active { - .ui-tabbar-text { - color: @color_tabbar_text_selected; + a.ui-btn { + position: relative; + right: 0; + top: 0; + margin: 0; + height: 72 * @unit_base; + max-width : none; + background : @color_tabbar_btn_bg_normal; + color : @color_tabbar_text_normal; + + &.ui-btn-active { + color : @color_tabbar_text_selected; + .ui-btn-inner { + .ui-icon { + background : @color_tabbar_btn_selected; } - } - } - .ui-scrollview-clip::-webkit-scrollbar { - display: none; - } - .ui-scrollview-view { - .tabbar-scroll-ul { - margin: 0; - padding: 0; - - .tabbar-scroll-li { - display: inline-block; - .ui-tabbar-active { - .ui-tabbar-text { - border-bottom: 3 * @unit_base solid @color_tabbar_select_bar; - } - } - &:not(:first-child) { - /* - * (-7 * @unit_base) value has decimal point. - * That occured to element position incorrectly in various browser in which include tizen webkit browser. - * So, margin-left value should be fixed integer px unit. - */ - margin-left: -5 * @unit_base; - } + .ui-btn-text { + border-bottom: 3 * @unit_base solid; } } } - } -} -.ui-footer { - .ui-tabbar { - padding-top: 18 * @unit_base; - padding-bottom: 18 * @unit_base; - .ui-tabbar-link { - background-color: inherit; - color: @color_content_bg; - - &.ui-tab-active { - color: @color_tabbar_btn_bg_normal; - &.ui-tabbar-icon::after { - background-color: @color_tabbar_btn_bg_normal; - } + .ui-btn-inner { + padding-top : 0; + padding-bottom : 0; + height: 72 * @unit_base; + + &:not(.ui-btn-icon-only) .ui-btn-text-padding-top.ui-btn-text { + position:absolute; + padding-top: 37 * @unit_base; + padding-bottom: 6 * @unit_base; + font-size: @font_size_tabbar_text; + } + &:not(.ui-btn-icon-only) .ui-btn-text { + position:absolute; + padding-top: 18 * @unit_base; + padding-bottom: 1 * @unit_base; + height: 36 * @unit_base; + display: block; + line-height: 36 * @unit_base; + font-size: @font_size_tabbar_text_only; + /* Horizontal centering when positon is absolute */ + left: 50%; + transform: translate(-50%, 0); + -webkit-transform: translate(-50%, 0); } - } - .ui-navbar { - li { - padding-left: 6 * @unit_base; - padding-right: 6 * @unit_base; - box-sizing: border-box; + &.ui-btn-icon-only { + margin: auto; } } - .ui-tabbar-icon::after { - background-color: @color_content_bg + .ui-icon { + width: 46 * @unit_base; + height: 46 * @unit_base; + margin-left: 0; + + background-repeat: no-repeat; + background-size: 100% 100%; } } -} -.ui-icon-naviframe- { - &delete::after { - .mask-image("images/page/00_icon_delete.png"); + a.ui-btn.ui-btn-down-s { + background : @color_tabbar_btn_bg_press; + .ui-btn-text { + background : @color_tabbar_btn_bg_press; + } + .ui-icon { + background : @color_tabbar_btn_press; + } } - &edit::after { - .mask-image("images/page/00_icon_edit.png"); + a.ui-btn.ui-btn-up-s, a.ui-btn.ui-btn-hover-s { + .ui-icon { + background : @color_tabbar_btn_normal; + } } - &search::after { - .mask-image("images/page/00_icon_search.png"); + .ui-btn-inner { + font-size: @font_size_tabbar_text; + + .ui-icon { + top : 7 * @unit_base; + /* Horizontal centering when positon is absolute */ + left : 50%; + transform: translate(-50%, 0); + -webkit-transform: translate(-50%, 0); + } } - &plus::after { - .mask-image("images/page/00_icon_plus.png"); + &.ui-tabbar-notext { + a.ui-btn { + padding-top : 0; + padding-bottom : 0; + } + .ui-btn-inner { + height : 58 * @unit_base; + .ui-icon { + top : 13 * @unit_base;; + } + } + } +} +.ui-header.ui-title-tabbar { + height : 144 * @unit_base; + .ui-tabbar { + border-top: 1px solid B012L4; + .ui-tabbar-active { + .ui-btn-text { + color: @color_tabbar_text_selected; + } + } + } + .ui-scrollview-clip::-webkit-scrollbar { + display: none; } - &call::after { - .mask-image("images/controls/button/00_button_call.png"); + .ui-scrollview-view { + .tabbar-scroll-ul { + margin: 0; + padding: 0; + } + .tabbar-scroll-li { + display: inline-block; + .ui-tabbar-active { + .ui-btn-inner { + .ui-btn-text { + border-bottom: 3px solid @color_tabbar_select_bar; + } + } + } + } + .tabbar-scroll-li:not(:first-child) { + /* + * (-7 * @unit_base) value has decimal point. + * That occured to element position incorrectly in various browser in which include tizen webkit browser. + * So, margin-left value should be fixed integer px unit. + */ + margin-left: -5px; + } + } +} +.ui-footer { + .ui-navbar { + li { + padding-left: 6 * @unit_base; + padding-right: 6 * @unit_base; + box-sizing: border-box; + } } } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.toggleswitch.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.toggleswitch.less index 45004383..58487f23 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.toggleswitch.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.toggleswitch.less @@ -34,19 +34,19 @@ div.ui-slider.ui-toggle-switch { background-size: 100% 100%; background-image: url(images/controls/00_on_off_handler_bg_ef.png); - .mask-image('images/controls/00_on_off_handler_bg_ef.png', 'images/controls/00_on_off_handler_bg.png'); - .mask-size(100% 100%); + -webkit-mask-image: url(images/controls/00_on_off_handler_bg_ef.png), url(images/controls/00_on_off_handler_bg.png); + -webkit-mask-size: 100% 100%; .ui-btn-inner { height: 31 * @unit_base; - .mask-size(100% 100%); + -webkit-mask-size: 100% 100%; } &.ui-toggle-on { background-color: @color_toggle_handle_on_bg; .ui-btn-inner { background-color: @color_toggle_handle_on_icon; background-image: url(images/controls/00_on_off_handler_icon_on_ef.png); - .mask-image('images/controls/00_on_off_handler_icon_on_ef.png', 'images/controls/00_on_off_handler_icon_on.png'); + -webkit-mask-image: url(images/controls/00_on_off_handler_icon_on_ef.png), url(images/controls/00_on_off_handler_icon_on.png); } } &.ui-toggle-off { @@ -54,12 +54,12 @@ div.ui-slider.ui-toggle-switch { .ui-btn-inner { background-color: @color_toggle_handle_off_icon; background-image: url(images/controls/00_on_off_handler_icon_off_ef.png); - .mask-image('images/controls/00_on_off_handler_icon_off_ef.png', 'images/controls/00_on_off_handler_icon_off.png'); + -webkit-mask-image: url(images/controls/00_on_off_handler_icon_off_ef.png), url(images/controls/00_on_off_handler_icon_off.png); } } } a.ui-slider-handle-snapping { - .transition(left 70ms linear); + -webkit-transition: left 70ms linear; } } @@ -77,22 +77,22 @@ div.ui-slider.ui-toggle-switch { position: relative; width: 60 * @unit_base; height: 60 * @unit_base; - .mask-image('images/controls/core_toggle_bg.png'); - .mask-size(100%); - .mask-position(center center); - .mask-repeat(no-repeat); + -webkit-mask-image: url('images/controls/core_toggle_bg.png'); + -webkit-mask-size: 100%; + -webkit-mask-position: center center; + -webkit-mask-repeat: no-repeat; background-color: @color_toggle_handle_off_bg; /*@color_toggle_bg;*/ .ui-switch-handler { - .mask-size(100%); - .mask-image('images/controls/core_toggle_icon_off.png'); - .mask-position(center center); + -webkit-mask-size: 100%; + -webkit-mask-image: url('images/controls/core_toggle_icon_off.png'); + -webkit-mask-position: center center; position: relative; top: 16.5 * @unit_base; left: 16.5 * @unit_base; width: 27 * @unit_base; height: 27 * @unit_base; - background-color: @color_toggle_handle_icon; + background-color: @color_toggle_handle_off_icon; } } .ui-slider-inneroffset { @@ -114,7 +114,7 @@ div.ui-slider.ui-toggle-switch { background-color: @color_toggle_handle_on_bg; .ui-switch-handler { - .mask-image('images/controls/core_toggle_icon_on.png'); + -webkit-mask-image: url('images/controls/core_toggle_icon_on.png'); } } @@ -155,8 +155,8 @@ div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) { a.ui-slider-handle { position : absolute; - .gradient-circural-safe(#fff, 50% 50%, #f9f9f9, #323232, 50); - + background : rgba(255, 255, 255, 1); + background-image : -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(rgb(249, 249, 249)), to(rgb(50, 50, 50))); top : 50%; margin : 0 0 0 -15 * @px_base; border-radius : 15 * @px_base; @@ -167,7 +167,7 @@ div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) { } a.ui-slider-handle-snapping { - .transition(left 70ms linear); + -webkit-transition : left 70ms linear; } span { @@ -182,15 +182,13 @@ div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) { &.ui-slider-label-a { left : 0px; - color : @color_slider_switch_label_on_text; - background-color: @color_slider_switch_label_on_bg; + color : white; z-index : 1; text-indent : -1.5em; } &.ui-slider-label-b { right : 0px; - color : @color_slider_switch_label_off_text; - background-color: @color_slider_switch_label_off_bg; + color : @color_slider_num_text; z-index : 0; text-indent : 1.5em; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.tokentextarea.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.tokentextarea.less index 3a2f9acd..90116004 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.tokentextarea.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.tokentextarea.less @@ -42,6 +42,17 @@ font-size : @font_size_tokentextarea_input_text; } +.ui-tokentextarea .ui-tokentextarea-input-area .ui-btn-inline.ui-btn-icon_only { + margin-bottom: 3 * @unit_base; + .ui-btn-inner.ui-btn-icon-only .ui-icon.ui-icon-plus { + width : 45 * @unit_base; + height : 45 * @unit_base; + margin-left : -15.75 * @unit_base; + margin-top : -22.5 * @unit_base; + background-color : @color_button_icon; + } +} + .ui-tokentextarea-input-visible { display : inline-block !important; } @@ -73,7 +84,6 @@ div.ui-tokentextarea-block { div.ui-tokentextarea-sblock { .core_button_bg_pressed(); background-color : @color_tokentextarea_press_bg; - color: @color_tokentextarea_block_text_press; margin-left: 15 * @unit_base; margin-top: 12 * @unit_base; } diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.virtualgridview.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.virtualgridview.less index 6f3ec293..eb8d8b9a 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.virtualgridview.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.virtualgridview.less @@ -1,3 +1,10 @@ +/* + * jQuery Mobile Framework + * Copyright (c) jQuery Project + * Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) + * licenses. + */ + @unit_ux: @unit_base / 4; /*** less definitions ***/ @@ -39,7 +46,7 @@ height : 100%; opacity : 0; background-repeat : no-repeat; - .background-size(100% 100%); + -webkit-background-size: 100% 100%; background-image: url(./images/00_grid_overscrolling_left.png); pointer-events : none; } @@ -53,7 +60,7 @@ height : 100%; opacity : 0; background-repeat : no-repeat; - .background-size(100% 100%); + -webkit-background-size: 100% 100%; background-image: url(./images/00_grid_overscrolling_right.png); pointer-events : none; } @@ -66,7 +73,7 @@ height : 32%; opacity : 0; background-repeat : no-repeat; - .background-size(100% 100%); + -webkit-background-size: 100% 100%; background-image: url(./images/00_grid_overscrolling_top.png); pointer-events : none; } @@ -79,7 +86,7 @@ height : 32%; opacity : 0; background-repeat : no-repeat; - .background-size(100% 100%); + -webkit-background-size: 100% 100%; background-image: url(./images/00_grid_overscrolling_bottom.png); pointer-events : none; } @@ -115,7 +122,7 @@ &.ui-btn .ui-icon { width: 106px; height: 106px; - .mask-size(106px 106px); + -webkit-mask-size: 106px 106px; margin-left: -53px; background-size: 106px 106px; } @@ -251,4 +258,4 @@ } } } -} +}
\ No newline at end of file diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.virtuallistview.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.virtuallistview.less index 38369355..6d64d87c 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.virtuallistview.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.tizen.virtuallistview.less @@ -1,3 +1,9 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ + /*** less definitions ***/ ul.ui-virtual-list-container > ul.position_absolute { diff --git a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.transitions.less b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.transitions.less index d2517c49..3a146822 100644 --- a/tau/src/css/profile/mobile/changeable/common/jquery.mobile.transitions.less +++ b/tau/src/css/profile/mobile/changeable/common/jquery.mobile.transitions.less @@ -1,18 +1,3 @@ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ /* Transitions originally inspired by those from jQtouch, nice work, folks */ .ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page { @@ -22,78 +7,72 @@ } .in { - .animation-timing-function(ease-out); - .animation-duration(350ms); + -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; + -moz-animation-duration: 350ms; } .out { - .animation-timing-function(ease-in); - .animation-duration(225ms); + -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; + -moz-animation-duration: 225; } /* fade */ -.m-transitions-fadein() { - from { opacity: 0; } - to { opacity: 1; } -} - -.m-transitions-fadeout() { - from { opacity: 1; } - to { opacity: 0; } -} - @-webkit-keyframes fadein { - .m-transitions-fadein(); + from { opacity: 0; } + to { opacity: 1; } } @-moz-keyframes fadein { - .m-transitions-fadein(); -} - -@-ms-keyframes fadein { - .m-transitions-fadein(); -} - -@-o-keyframes fadein { - .m-transitions-fadein(); -} - -@keyframes fadein { - .m-transitions-fadein(); + from { opacity: 0; } + to { opacity: 1; } } @-webkit-keyframes fadeout { - .m-transitions-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } @-moz-keyframes fadeout { - .m-transitions-fadeout(); -} - -@-ms-keyframes fadeout { - .m-transitions-fadeout(); -} - -@-o-keyframes fadeout { - .m-transitions-fadeout(); -} - -@keyframes fadeout { - .m-transitions-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } .fade.out { opacity: 0; - .animation-duration(125ms); - .animation-name(fadeout); + -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; + -moz-animation-name: fadeout; } .fade.in { opacity: 1; - .animation-duration(225ms); - .animation-name(fadein); + -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; + -moz-animation-name: fadein; } @@ -107,18 +86,26 @@ */ .viewport-flip { + -ms-perspective: 1000; + -o-perspective: 1000; + -webkit-perspective: 1000; + -moz-perspective: 1000; position: absolute; - .perspective(1000); } .flip { - .backface-visiblity(hidden); - .translate3d(0, 0, 0); + -webkit-backface-visibility:hidden; + -webkit-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-backface-visibility:hidden; + -moz-transform:translate3d(0, 0, 0); } .flip.out { - .transform(rotateY(-90def) scale(0.9)); - .animation-name(flipouttoleft); - .animation-duration(175ms); + -webkit-transform: rotateY(-90deg) scale(.9); + -webkit-animation-name: flipouttoleft; + -webkit-animation-duration: 175ms; + -moz-transform: rotateY(-90deg) scale(.9); + -moz-animation-name: flipouttoleft; + -moz-animation-duration: 175ms; &.ui-ctxpopup-container{ border: 4 * @unit_base solid @color_ctxpopup_background_border; border-radius: 10 * @unit_base; @@ -127,8 +114,10 @@ } .flip.in { - .animation-name(flipintoright); - .animation-duration(225ms); + -webkit-animation-name: flipintoright; + -webkit-animation-duration: 225ms; + -moz-animation-name: flipintoright; + -moz-animation-duration: 225ms; &.ui-ctxpopup-container{ border: 4 * @unit_base solid @color_ctxpopup_background_border; border-radius: 10 * @unit_base; @@ -136,260 +125,159 @@ } } -.ui-popup.flip.out, .flip.out.reverse { - .transform(rotateY(90deg) scale(0.9)); - .animation-name(flipouttoright); + -webkit-transform: rotateY(90deg) scale(.9); + -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(90deg) scale(.9); + -moz-animation-name: flipouttoright; } .flip.in.reverse { - .animation-name(flipintoleft); -} - -.m-transitions-flipouttoleft() { - from { .transform(rotateY(0)); } - to { .transform(rotateY(-90deg) scale(0.9)); } -} - -.m-transitions-flipouttoright() { - from { .transform(rotateY(0)); } - to { .transform(rotateY(90deg) scale(0.9)); } -} - -.m-transitions-flipintoleft() { - from { .transform(rotateY(-90deg) scale(0.9)); } - to { .transform(rotateY(0)); } -} - -.m-transitions-flipintoright() { - from { .transform(rotateY(90deg) scale(0.9)); } - to { .transform(rotateY(0)); } + -webkit-animation-name: flipintoleft; + -moz-animation-name: flipintoleft; } @-webkit-keyframes flipouttoleft { - .m-transitions-flipintoleft(); + from { -webkit-transform: rotateY(0); } + to { -webkit-transform: rotateY(-90deg) scale(.9); } } - @-moz-keyframes flipouttoleft { - .m-transitions-flipintoleft(); -} - -@-ms-keyframes flipouttoleft { - .m-transitions-flipintoleft(); + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(-90deg) scale(.9); } } - -@-o-keyframes flipouttoleft { - .m-transitions-flipintoleft(); -} - -@keyframes flipouttoleft { - .m-transitions-flipintoleft(); -} - @-webkit-keyframes flipouttoright { - .m-transitions-flipouttoright(); + from { -webkit-transform: rotateY(0) ; } + to { -webkit-transform: rotateY(90deg) scale(.9); } } - @-moz-keyframes flipouttoright { - .m-transitions-flipouttoright(); -} - -@-ms-keyframes flipouttoright { - .m-transitions-flipouttoright(); + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(90deg) scale(.9); } } - -@-o-keyframes flipouttoright { - .m-transitions-flipouttoright(); -} - -@keyframes flipouttoright { - .m-transitions-flipouttoright(); -} - @-webkit-keyframes flipintoleft { - .m-transitions-flipintoleft(); + from { -webkit-transform: rotateY(-90deg) scale(.9); } + to { -webkit-transform: rotateY(0); } } - @-moz-keyframes flipintoleft { - .m-transitions-flipintoleft(); -} - -@-ms-keyframes flipintoleft { - .m-transitions-flipintoleft(); + from { -moz-transform: rotateY(-90deg) scale(.9); } + to { -moz-transform: rotateY(0); } } - -@-o-keyframes flipintoleft { - .m-transitions-flipintoleft(); -} - -@keyframes flipintoleft { - .m-transitions-flipintoleft(); -} - @-webkit-keyframes flipintoright { - .m-transitions-flipintoright(); + from { -webkit-transform: rotateY(90deg) scale(.9); } + to { -webkit-transform: rotateY(0); } } - @-moz-keyframes flipintoright { - .m-transitions-flipintoright(); + from { -moz-transform: rotateY(90deg) scale(.9); } + to { -moz-transform: rotateY(0); } } -@-ms-keyframes flipintoright { - .m-transitions-flipintoright(); -} - -@-o-keyframes flipintoright { - .m-transitions-flipintoright(); -} /* flow transition */ -@keyframes flipintoright { - .m-transitions-flipintoright(); -} - .flow { - .box-shadow(0 0 20px rgba(0,0,0,.4)); - .transform-origin(50% 50%); + -webkit-transform-origin: 50% 30%; + -moz-transform-origin: 50% 30%; + -webkit-box-shadow: 0 0 20px rgba(0,0,0,.4); + -moz-box-shadow: 0 0 20px rgba(0,0,0,.4); } .ui-dialog.flow { - .box-shadow(none); + -webkit-transform-origin: none; + -moz-transform-origin: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; } .flow.out { - .animation(flowouttoleft ease 350ms); - .transform(translate3d(-100%, 0, 0) scale(0.7)); + -webkit-transform: translate3d(-100%, 0, 0) scale(.7); + -webkit-animation-name: flowouttoleft; + -webkit-animation-timing-function: ease; + -webkit-animation-duration: 350ms; + -moz-transform: translate3d(-100%, 0, 0) scale(.7); + -moz-animation-name: flowouttoleft; + -moz-animation-timing-function: ease; + -moz-animation-duration: 350ms; } .flow.in { - .animation(flowinfromright ease 350ms); - .transform(translate3d(0, 0, 0) scale(1)); + -webkit-transform: translate3d(0, 0, 0) scale(1); + -webkit-animation-name: flowinfromright; + -webkit-animation-timing-function: ease; + -webkit-animation-duration: 350ms; + -moz-transform: translate3d(0, 0, 0) scale(1); + -moz-animation-name: flowinfromright; + -moz-animation-timing-function: ease; + -moz-animation-duration: 350ms; } -.ui-popup.flow.out, .flow.out.reverse { - .translate3d(100%, 0, 0); - .animation-name(flowouttoright); + -webkit-transform: translate3d(100%, 0, 0); + -webkit-animation-name: flowouttoright; + -moz-transform: translate3d(100%, 0, 0); + -moz-animation-name: flowouttoright; } .flow.in.reverse { - .animation-name(flowinfromleft); -} - -.m-transitions-flowouttoleft() { - 0% { .transform(translate3d(0, 0, 0) scale(1)) } - 60%, 70% { .transform(translate3d(0, 0, 0) scale(0.7)); } - 100% { .transform(translate3d(-100%, 0, 0) scale(0.7)); } -} - -.m-transitions-flowouttoright() { - 0% { .transform(translate3d(0, 0, 0) scale(1)); } - 60%, 70% { .transform(translate3d(0, 0, 0) scale(0.7)); } - 100% { .transform(translate3d(100%, 0, 0) scale(0.7)); } -} - -.m-transitions-flowinfromleft() { - 0% { .transform(translate3d(-100%, 0, 0) scale(0.7)); } - 30%, 40% { .transform(translate3d(0, 0, 0) scale(0.7)); } - 100% { .transform(translate3d(0, 0, 0) scale(1)); } -} - -.m-transitions-flowinfromright() { - 0% { .transform(translate3d(100%, 0, 0) scale(0.7)); } - 30%, 40% { .transform(translate3d(0, 0, 0) scale(0.7)); } - 100% { .transform(translate3d(0, 0, 0) scale(1)); } + -webkit-animation-name: flowinfromleft; + -moz-animation-name: flowinfromleft; } @-webkit-keyframes flowouttoleft { - .m-transitions-flowouttoleft(); + 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } + 60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); } + 100% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); } } - @-moz-keyframes flowouttoleft { - .m-transitions-flowouttoleft(); -} - -@-ms-keyframes flowouttoleft { - .m-transitions-flowouttoleft(); -} - -@-o-keyframes flowouttoleft { - .m-transitions-flowouttoleft(); -} - -@keyframes flowouttoleft { - .m-transitions-flowouttoleft(); + 0% { -moz-transform: translate3d(0, 0, 0) scale(1); } + 60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); } + 100% { -moz-transform: translateX(-100%) scale(.7); } } @-webkit-keyframes flowouttoright { - .m-transitions-flowouttoright(); + 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } + 60%, 70% { -webkit-transform: translate3d(0, 0, 0) scale(.7); } + 100% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); } } - @-moz-keyframes flowouttoright { - .m-transitions-flowouttoright(); -} - -@-ms-keyframes flowouttoright { - .m-transitions-flowouttoright(); -} - -@-o-keyframes flowouttoright { - .m-transitions-flowouttoright(); -} - -@keyframes flowouttoright { - .m-transitions-flowouttoright(); + 0% { -moz-transform: translate3d(0, 0, 0) scale(1); } + 60%, 70% { -moz-transform: translate3d(0, 0, 0) scale(.7); } + 100% { -moz-transform: translate3d(100%, 0, 0) scale(.7); } } @-webkit-keyframes flowinfromleft { - .m-transitions-flowinfromleft(); + 0% { -webkit-transform: translate3d(-100%, 0, 0) scale(.7); } + 30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); } + 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } - @-moz-keyframes flowinfromleft { - .m-transitions-flowinfromleft(); -} - -@-ms-keyframes flowinfromleft { - .m-transitions-flowinfromleft(); + 0% { -moz-transform: translate3d(-100%, 0, 0) scale(.7); } + 30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); } + 100% { -moz-transform: translate3d(0, 0, 0) scale(1); } } - -@-o-keyframes flowinfromleft { - .m-transitions-flowinfromleft(); -} - -@keyframes flowinfromleft { - .m-transitions-flowinfromleft(); -} - @-webkit-keyframes flowinfromright { - .m-transitions-flowinfromright(); + 0% { -webkit-transform: translate3d(100%, 0, 0) scale(.7); } + 30%, 40% { -webkit-transform: translate3d(0, 0, 0) scale(.7); } + 100% { -webkit-transform: translate3d(0, 0, 0) scale(1); } } - @-moz-keyframes flowinfromright { - .m-transitions-flowinfromright(); -} - -@-ms-keyframes flowinfromright { - .m-transitions-flowinfromright(); -} - -@-o-keyframes flowinfromright { - .m-transitions-flowinfromright(); -} - -@keyframes flowinfromright { - .m-transitions-flowinfromright(); + 0% { -moz-transform: translate3d(100%, 0, 0) scale(.7); } + 30%, 40% { -moz-transform: translate3d(0, 0, 0) scale(.7); } + 100% { -moz-transform: translate3d(0, 0, 0) scale(1); } } /* pop */ .pop { - .transform-origin(50% 50%); + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; } .pop.in { - .scale(1); - opacity: 1; - .animation(popin 350ms); + -webkit-transform: scale(1); + -moz-transform: scale(1); + opacity: 1; + -webkit-animation-name: popin; + -moz-animation-name: popin; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; &.ui-ctxpopup-container{ border: 4 * @unit_base solid @color_ctxpopup_background_border; border-radius: 10 * @unit_base; @@ -398,7 +286,11 @@ } .pop.out { - .animation(fadeout 100ms); + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + opacity: 0; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; &.ui-ctxpopup-container{ border: 4 * @unit_base solid @color_ctxpopup_background_border; border-radius: 10 * @unit_base; @@ -407,535 +299,428 @@ } .pop.in.reverse { - .animation-name(fadein); + -webkit-animation-name: fadein; + -moz-animation-name: fadein; } -.ui-popup.pop.out, .pop.out.reverse { - .scale(0.8); - .animation-name(popout); -} - -.m-transitions-popin() { - from { - .scale(0.8); - opacity: 0; - } - to { - .scale(1); - opacity: 1; - } -} - -.m-transitions-popout() { - from { - .scale(1); - opacity: 1; - } - to { - .scale(0.8); - opacity: 0; - } + -webkit-transform: scale(.8); + -moz-transform: scale(.8); + -webkit-animation-name: popout; + -moz-animation-name: popout; } @-webkit-keyframes popin { - .m-transitions-popin(); + from { + -webkit-transform: scale(.8); + opacity: 0; + } + to { + -webkit-transform: scale(1); + opacity: 1; + } } @-moz-keyframes popin { - .m-transitions-popin(); -} - -@-ms-keyframes popin { - .m-transitions-popin(); -} - -@-o-keyframes popin { - .m-transitions-popin(); -} - -@keyframes popin { - .m-transitions-popin(); + from { + -moz-transform: scale(.8); + opacity: 0; + } + to { + -moz-transform: scale(1); + opacity: 1; + } } @-webkit-keyframes popout { - .m-transitions-popout(); + from { + -webkit-transform: scale(1); + opacity: 1; + } + to { + -webkit-transform: scale(.8); + opacity: 0; + } } @-moz-keyframes popout { - .m-transitions-popout(); -} - -@-ms-keyframes popout { - .m-transitions-popout(); -} - -@-o-keyframes popout { - .m-transitions-popout(); -} - -@keyframes popout { - .m-transitions-popout(); + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(.8); + opacity: 0; + } } /* slide */ /* keyframes for slidein from sides */ -.m-transitions-slideinfromright() { - from { .translate3d(100%, 0, 0); } - to { .translate3d(0, 0, 0); } -} - -.m-transitions-slideinfromleft() { - from { .translate3d(-100%, 0, 0); } - to { .translate3d(0, 0, 0); } -} - -.m-transitions-slideouttoleft() { - from { .translate3d(0, 0, 0); } - to { .translate3d(-100%, 0, 0); } -} - -.m-transitions-slideouttoright() { - from { .translate3d(0, 0, 0); } - to { .translate3d(100%, 0, 0); } -} - @-webkit-keyframes slideinfromright { - .m-transitions-slideinfromright(); + from { -webkit-transform: translate3d(100%, 0, 0); } + to { -webkit-transform: translate3d(0, 0, 0); } } - @-moz-keyframes slideinfromright { - .m-transitions-slideinfromright(); -} - -@-ms-keyframes slideinfromright { - .m-transitions-slideinfromright(); -} - -@-o-keyframes slideinfromright { - .m-transitions-slideinfromright(); -} - -@keyframes slideinfromright { - .m-transitions-slideinfromright(); + from { -moz-transform: translate3d(100%, 0, 0); } + to { -moz-transform: translate3d(0, 0, 0); } } @-webkit-keyframes slideinfromleft { - .m-transitions-slideinfromleft(); + from { -webkit-transform: translate3d(-100%, 0, 0); } + to { -webkit-transform: translate3d(0, 0, 0); } } - @-moz-keyframes slideinfromleft { - .m-transitions-slideinfromleft(); -} - -@-ms-keyframes slideinfromleft { - .m-transitions-slideinfromleft(); -} - -@-o-keyframes slideinfromleft { - .m-transitions-slideinfromleft(); -} - -@keyframes slideinfromleft { - .m-transitions-slideinfromleft(); + from { -moz-transform: translate3d(-100%, 0, 0); } + to { -moz-transform: translate3d(0, 0, 0); } } +/* keyframes for slideout to sides */ @-webkit-keyframes slideouttoleft { - .m-transitions-slideouttoleft(); + from { -webkit-transform: translate3d(0, 0, 0); } + to { -webkit-transform: translate3d(-100%, 0, 0); } } - @-moz-keyframes slideouttoleft { - .m-transitions-slideouttoleft(); -} - -@-ms-keyframes slideouttoleft { - .m-transitions-slideouttoleft(); -} - -@-o-keyframes slideouttoleft { - .m-transitions-slideouttoleft(); -} - -@keyframes slideouttoleft { - .m-transitions-slideouttoleft(); + from { -moz-transform: translate3d(0, 0, 0); } + to { -moz-transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes slideouttoright { - .m-transitions-slideouttoright(); + from { -webkit-transform: translate3d(0, 0, 0); } + to { -webkit-transform: translate3d(100%, 0, 0); } } - @-moz-keyframes slideouttoright { - .m-transitions-slideouttoright(); -} - -@-ms-keyframes slideouttoright { - .m-transitions-slideouttoright(); -} - -@-o-keyframes slideouttoright { - .m-transitions-slideouttoright(); -} - -@keyframes slideouttoright { - .m-transitions-slideouttoright(); + from { -moz-transform: translate3d(0, 0, 0); } + to { -moz-transform: translate3d(100%, 0, 0); } } .slide.out, .slide.in { - .animation-timing-function(ease-out); - .animation-duration(350ms); + -webkit-animation-timing-function: ease-out; + -webkit-animation-duration: 350ms; + -moz-animation-timing-function: ease-out; + -moz-animation-duration: 350ms; } .slide.out { - .translate3d(-100%, 0, 0); - .animation-name(slideouttoleft); + -webkit-transform: translate3d(-100%, 0, 0); + -webkit-animation-name: slideouttoleft; + -moz-transform: translate3d(-100%, 0, 0); + -moz-animation-name: slideouttoleft; } .slide.in { - .translate3d(0, 0, 0); - .animation-name(slideinfromright); + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation-name: slideinfromright; + -moz-transform: translate3d(0, 0, 0); + -moz-animation-name: slideinfromright; } -.ui-popup.slide.out, .slide.out.reverse { - .translate3d(100%, 0, 0); - .animation-name(slideouttoright); + -webkit-transform: translate3d(100%, 0, 0); + -webkit-animation-name: slideouttoright; + -moz-transform: translate3d(100%, 0, 0); + -moz-animation-name: slideouttoright; } .slide.in.reverse { - .translate3d(0, 0, 0); - .animation-name(slideinfromleft); + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation-name: slideinfromleft; + -moz-transform: translate3d(0, 0, 0); + -moz-animation-name: slideinfromleft; } /* slide down */ .slidedown.out { - .animation(fadeout 100ms); + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; } .slidedown.in { - .translate3d(0, 0, 0); - .animation(slideinfromtop 250ms); + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation-name: slideinfromtop; + -moz-transform: translate3d(0, 0, 0); + -moz-animation-name: slideinfromtop; + -webkit-animation-duration: 250ms; + -moz-animation-duration: 250ms; } .slidedown.in.reverse { - .animation(fade 150ms); + -webkit-animation-name: fadein; + -moz-animation-name: fadein; + -webkit-animation-duration: 150ms; + -moz-animation-duration: 150ms; } -.ui-popup.slidedown.out, .slidedown.out.reverse { - .translate3d(0, -100%, 0); - .animation(slideouttotop 200ms); -} - -.m-transitions-slideinfromtop() { - from { .translate3d(0, -100%, 0); } - to { .translate3d(0, 0, 0); } -} - -.m-transitions-slideouttotop() { - from { .translate3d(0, 0, 0); } - to { .translate3d(0, -100%, 0); } + -webkit-transform: translate3d(0, -100%, 0); + -moz-transform: translate3d(0, -100%, 0); + -webkit-animation-name: slideouttotop; + -moz-animation-name: slideouttotop; + -webkit-animation-duration: 200ms; + -moz-animation-duration: 200ms; } @-webkit-keyframes slideinfromtop { - .m-transitions-slideinfromtop(); + from { -webkit-transform: translate3d(0, -100%, 0); } + to { -webkit-transform: translate3d(0, 0, 0); } } - @-moz-keyframes slideinfromtop { - .m-transitions-slideinfromtop(); -} - -@-ms-keyframes slideinfromtop { - .m-transitions-slideinfromtop(); -} - -@-o-keyframes slideinfromtop { - .m-transitions-slideinfromtop(); -} - -@keyframes slideinfromtop { - .m-transitions-slideinfromtop(); + from { -moz-transform: translate3d(0, -100%, 0); } + to { -moz-transform: translate3d(0, 0, 0); } } @-webkit-keyframes slideouttotop { - .m-transitions-slideouttotop(); + from { -webkit-transform: translate3d(0, 0, 0); } + to { -webkit-transform: translate3d(0, -100%, 0); } } - @-moz-keyframes slideouttotop { - .m-transitions-slideouttotop(); -} - -@-ms-keyframes slideouttotop { - .m-transitions-slideouttotop(); -} - -@-o-keyframes slideouttotop { - .m-transitions-slideouttotop(); -} - -@keyframes slideouttotop { - .m-transitions-slideouttotop(); + from { -moz-transform: translate3d(0, 0, 0); } + to { -moz-transform: translate3d(0, -100%, 0); } } /* slide up */ .slideup.out { - .animation(fadeout 100ms); + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; } .slideup.in { - .translate3d(0, 0, 0); - .animation(slideinfrombottom 250ms); + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation-name: slideinfrombottom; + -moz-transform: translate3d(0, 0, 0); + -moz-animation-name: slideinfrombottom; + -webkit-animation-duration: 250ms; + -moz-animation-duration: 250ms; } .slideup.in.reverse { - .animation(fadein 150ms); + -webkit-animation-name: fadein; + -moz-animation-name: fadein; + -webkit-animation-duration: 150ms; + -moz-animation-duration: 150ms; } -.ui-popup.slideup.out, .slideup.out.reverse { - .translate3d(0, 100%, 0); - .animation(slideouttobottom 200ms); -} - -.m-transitions-slideinfrombottom() { - from { .translate3d(0, 100%, 0); } - to { .translate3d(0, 0, 0); } -} - -.m-transitions-slideouttobottom() { - from { .translate3d(0, 0, 0); } - to { .translate3d(0, 100%, 0); } + -webkit-transform: translate3d(0, 100%, 0); + -moz-transform: translate3d(0, 100%, 0); + -webkit-animation-name: slideouttobottom; + -moz-animation-name: slideouttobottom; + -webkit-animation-duration: 200ms; + -moz-animation-duration: 200ms; } @-webkit-keyframes slideinfrombottom { - .m-transitions-slideinfrombottom(); + from { -webkit-transform: translate3d(0, 100%, 0); } + to { -webkit-transform: translate3d(0, 0, 0); } } - @-moz-keyframes slideinfrombottom { - .m-transitions-slideinfrombottom(); -} - -@-ms-keyframes slideinfrombottom { - .m-transitions-slideinfrombottom(); -} - -@-o-keyframes slideinfrombottom { - .m-transitions-slideinfrombottom(); -} - -@keyframes slideinfrombottom { - .m-transitions-slideinfrombottom(); + from { -moz-transform: translate3d(0, 100%, 0); } + to { -moz-transform: translate3d(0, 0, 0); } } @-webkit-keyframes slideouttobottom { - .m-transitions-slideouttobottom(); + from { -webkit-transform: translate3d(0, 0, 0); } + to { -webkit-transform: translate3d(0, 100%, 0); } } - @-moz-keyframes slideouttobottom { - .m-transitions-slideouttobottom(); -} - -@-ms-keyframes slideouttobottom { - .m-transitions-slideouttobottom(); -} - -@-o-keyframes slideouttobottom { - .m-transitions-slideouttobottom(); -} - -@keyframes slideouttobottom { - .m-transitions-slideouttobottom(); + from { -moz-transform: translate3d(0, 0, 0); } + to { -moz-transform: translate3d(0, 100%, 0); } } /* slide up + fade */ .slideupfade.out { - .animation(fadeout 100ms); + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; } .slideupfade.in { - .translate3d(0, 0, 0); - .animation(slideupfadeinfrombottom 250ms); + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation-name: slideupfadeinfrombottom; + -moz-transform: translate3d(0, 0, 0); + -moz-animation-name: slideupfadeinfrombottom; + -webkit-animation-duration: 250ms; + -moz-animation-duration: 250ms; } .slideupfade.in.reverse { - .animation(fadein 150ms); + -webkit-animation-name: fadein; + -moz-animation-name: fadein; + -webkit-animation-duration: 150ms; + -moz-animation-duration: 150ms; } -.ui-popup.slideupfade.out, .slideupfade.out.reverse { - .translate3d(0, 5%, 0); - .animation(slideupfadeouttobottom 200ms); + -webkit-transform: translate3d(0, 5%, 0); + -moz-transform: translate3d(0, 5%, 0); + -webkit-animation-name: slideupfadeouttobottom; + -moz-animation-name: slideupfadeouttobottom; + -webkit-animation-duration: 200ms; + -moz-animation-duration: 200ms; } -.m-transitions-slideupfadeinfrombottom() { - from { +@-webkit-keyframes slideupfadeinfrombottom { + from { opacity: 0; - .translate3d(0, 5%, 0); + -webkit-transform: translate3d(0, 5%, 0); } - to { + to { opacity: 1; - .translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); } } - -.m-transitions-slideupfadeouttobottom() { - from { - opacity: 1; - .translate3d(0, 0, 0); - } - to { +@-moz-keyframes slideupfadeinfrombottom { + from { opacity: 0; - .translate3d(0, 5%, 0); + -moz-transform: translate3d(0, 5%, 0); + } + to { + opacity: 1; + -moz-transform: translate3d(0, 0, 0); } -} - -@-webkit-keyframes slideupfadeinfrombottom { - .m-transitions-slideupfadeinfrombottom(); -} - -@-moz-keyframes slideupfadeinfrombottom { - .m-transitions-slideupfadeinfrombottom(); -} - -@-ms-keyframes slideupfadeinfrombottom { - .m-transitions-slideupfadeinfrombottom(); -} - -@-o-keyframes slideupfadeinfrombottom { - .m-transitions-slideupfadeinfrombottom(); -} - -@keyframes slideupfadeinfrombottom { - .m-transitions-slideupfadeinfrombottom(); } @-webkit-keyframes slideupfadeouttobottom { - .m-transitions-slideupfadeouttobottom(); + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 5%, 0); + } } - @-moz-keyframes slideupfadeouttobottom { - .m-transitions-slideupfadeouttobottom(); -} - -@-ms-keyframes slideupfadeouttobottom { - .m-transitions-slideupfadeouttobottom(); -} - -@-o-keyframes slideupfadeouttobottom { - .m-transitions-slideupfadeouttobottom(); -} - -@keyframes slideupfadeouttobottom { - .m-transitions-slideupfadeouttobottom(); + from { + opacity: 1; + -moz-transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -moz-transform: translate3d(0, 5%, 0); + } } /* slide down + fade */ .slidedownfade.out { - .animation(fadeout 100ms); + -webkit-animation-name: fadeout; + -moz-animation-name: fadeout; + -webkit-animation-duration: 100ms; + -moz-animation-duration: 100ms; } .slidedownfade.in { - .translate3d(0, 0, 0); - .animation(slidedownfadeinfromtop 250ms); + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation-name: slidedownfadeinfromtop; + -moz-transform: translate3d(0, 0, 0); + -moz-animation-name: slidedownfadeinfromtop; + -webkit-animation-duration: 250ms; + -moz-animation-duration: 250ms; } .slidedownfade.in.reverse { - .animation(fadein 150ms); + -webkit-animation-name: fadein; + -moz-animation-name: fadein; + -webkit-animation-duration: 150ms; + -moz-animation-duration: 150ms; } -.ui-popup.slidedownfade.out, .slidedownfade.out.reverse { - .translate3d(0, -5%, 0); - .animation(slidedownfadeouttotop 200ms); + -webkit-transform: translate3d(0, -5%, 0); + -moz-transform: translate3d(0, -5%, 0); + -webkit-animation-name: slidedownfadeouttotop; + -moz-animation-name: slidedownfadeouttotop; + -webkit-animation-duration: 200ms; + -moz-animation-duration: 200ms; } -.m-transitions-slidedownfadeinfromtop() { - from { +@-webkit-keyframes slidedownfadeinfromtop { + from { opacity: 0; - .translate3d(0, -5%, 0); + -webkit-transform: translate3d(0, -5%, 0); } - to { + to { opacity: 1; - .translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); } } - -.m-transitions-slidedownfadeouttotop() { - from { - opacity: 1; - .translate3d(0, 0, 0); - } - to { +@-moz-keyframes slidedownfadeinfromtop { + from { opacity: 0; - .translate3d(0, -5%, 0); + -moz-transform: translate3d(0, -5%, 0); + } + to { + opacity: 1; + -moz-transform: translate3d(0, 0, 0); } -} - -@-webkit-keyframes slidedownfadeinfromtop { - .m-transitions-slidedownfadeouttotop(); -} - -@-moz-keyframes slidedownfadeinfromtop { - .m-transitions-slidedownfadeouttotop(); -} - -@-ms-keyframes slidedownfadeinfromtop { - .m-transitions-slidedownfadeouttotop(); -} - -@-o-keyframes slidedownfadeinfromtop { - .m-transitions-slidedownfadeouttotop(); -} - -@keyframes slidedownfadeinfromtop { - .m-transitions-slidedownfadeouttotop(); } @-webkit-keyframes slidedownfadeouttotop { - .m-transitions-slidedownfadeouttotop(); + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -5%, 0); + } } - @-moz-keyframes slidedownfadeouttotop { - .m-transitions-slidedownfadeouttotop(); -} - -@-ms-keyframes slidedownfadeouttotop { - .m-transitions-slidedownfadeouttotop(); -} - -@-o-keyframes slidedownfadeouttotop { - .m-transitions-slidedownfadeouttotop(); -} - -@keyframes slidedownfadeouttotop { - .m-transitions-slidedownfadeouttotop(); + from { + opacity: 1; + -moz-transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -moz-transform: translate3d(0, -5%, 0); + } } /* slide fade */ .slidefade.out { - .translate3d(-100%, 0, 0); - .animation(slideouttoleft 225ms); + -webkit-transform: translate3d(-100%, 0, 0); + -webkit-animation-name: slideouttoleft; + -moz-transform: translate3d(-100%, 0, 0); + -moz-animation-name: slideouttoleft; + -webkit-animation-duration: 225ms; + -moz-animation-duration: 225ms; } .slidefade.in { - .translate3d(0, 0, 0); - .animation(fadein 200ms); + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation-name: fadein; + -moz-transform: translate3d(0, 0, 0); + -moz-animation-name: fadein; + -webkit-animation-duration: 200ms; + -moz-animation-duration: 200ms; } -.ui-popup.slidefade.out, .slidefade.out.reverse { - .translate3d(100%, 0, 0); - .animation(slideouttoright 200ms); + -webkit-transform: translate3d(100%, 0, 0); + -webkit-animation-name: slideouttoright; + -moz-transform: translate3d(100%, 0, 0); + -moz-animation-name: slideouttoright; + -webkit-animation-duration: 200ms; + -moz-animation-duration: 200ms; } .slidefade.in.reverse { - .translate3d(0, 0, 0); - .animation(fadein 200ms); + -webkit-transform: translate3d(0, 0, 0); + -webkit-animation-name: fadein; + -moz-transform: translate3d(0, 0, 0); + -moz-animation-name: fadein; + -webkit-animation-duration: 200ms; + -moz-animation-duration: 200ms; } /* The properties in this rule are only necessary for the 'flip' transition. @@ -946,290 +731,222 @@ */ .viewport-turn { - .perspective(1000); + -webkit-perspective: 1000; + -moz-perspective: 1000; position: absolute; } .turn { - .backface-visiblity(hidden); - .translate3d(0, 0, 0); + -webkit-backface-visibility:hidden; + -webkit-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -webkit-transform-origin: 0; + -moz-backface-visibility:hidden; + -moz-transform:translate3d(0, 0, 0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */ + -moz-transform-origin: 0; } .turn.out { - .transform(rotateY(-90deg) scale(0.9)); - .animation(flipouttoleft 125ms); + -webkit-transform: rotateY(-90deg) scale(.9); + -webkit-animation-name: flipouttoleft; + -moz-transform: rotateY(-90deg) scale(.9); + -moz-animation-name: flipouttoleft; + -webkit-animation-duration: 125ms; + -moz-animation-duration: 125ms; } .turn.in { - .animation(flipintoright 250ms); + -webkit-animation-name: flipintoright; + -moz-animation-name: flipintoright; + -webkit-animation-duration: 250ms; + -moz-animation-duration: 250ms; } -.ui-popup.turn.out, .turn.out.reverse { - .transform(rotateY(90deg) scale(0.9)); - .animation-name(flipouttoright); + -webkit-transform: rotateY(90deg) scale(.9); + -webkit-animation-name: flipouttoright; + -moz-transform: rotateY(90deg) scale(.9); + -moz-animation-name: flipouttoright; } .turn.in.reverse { - .animation-name(flipintoleft); -} - -.m-transitions-flipouttoleft() { - from { .transform(rotateY(0)); } - to { .transform(rotateY(-90deg) scale(0.9)); } -} - -.m-transitions-flipouttoright() { - from { .transform(rotateY(0)); } - to { .transform(rotateY(90deg) scale(0.9)); } -} - -.m-transitions-flipintoleft() { - from { .transform(rotateY(-90deg) scale(0.9)); } - to { .transform(rotateY(0)); } -} - -.m-transitions-flipintoright() { - from { .transform(rotateY(90deg) scale(0.9)); } - to { .transform(rotateY(0)); } + -webkit-animation-name: flipintoleft; + -moz-animation-name: flipintoleft; } @-webkit-keyframes flipouttoleft { - .m-transitions-flipouttoleft(); + from { -webkit-transform: rotateY(0); } + to { -webkit-transform: rotateY(-90deg) scale(.9); } } - @-moz-keyframes flipouttoleft { - .m-transitions-flipouttoleft(); -} - -@-ms-keyframes flipouttoleft { - .m-transitions-flipouttoleft(); + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(-90deg) scale(.9); } } - -@-o-keyframes flipouttoleft { - .m-transitions-flipouttoleft(); -} - -@keyframes flipouttoleft { - .m-transitions-flipouttoleft(); -} - @-webkit-keyframes flipouttoright { - .m-transitions-flipouttoright(); + from { -webkit-transform: rotateY(0) ; } + to { -webkit-transform: rotateY(90deg) scale(.9); } } - @-moz-keyframes flipouttoright { - .m-transitions-flipouttoright(); -} - -@-ms-keyframes flipouttoright { - .m-transitions-flipouttoright(); + from { -moz-transform: rotateY(0); } + to { -moz-transform: rotateY(90deg) scale(.9); } } - -@-o-keyframes flipouttoright { - .m-transitions-flipouttoright(); -} - -@keyframes flipouttoright { - .m-transitions-flipouttoright(); -} - @-webkit-keyframes flipintoleft { - .m-transitions-flipintoleft(); + from { -webkit-transform: rotateY(-90deg) scale(.9); } + to { -webkit-transform: rotateY(0); } } - @-moz-keyframes flipintoleft { - .m-transitions-flipintoleft(); -} - -@-ms-keyframes flipintoleft { - .m-transitions-flipintoleft(); + from { -moz-transform: rotateY(-90deg) scale(.9); } + to { -moz-transform: rotateY(0); } } - -@-o-keyframes flipintoleft { - .m-transitions-flipintoleft(); -} - -@keyframes flipintoleft { - .m-transitions-flipintoleft(); -} - @-webkit-keyframes flipintoright { - .m-transitions-flipintoright(); + from { -webkit-transform: rotateY(90deg) scale(.9); } + to { -webkit-transform: rotateY(0); } } - @-moz-keyframes flipintoright { - .m-transitions-flipintoright(); -} - -@-ms-keyframes flipintoright { - .m-transitions-flipintoright(); -} - -@-o-keyframes flipintoright { - .m-transitions-flipintoright(); -} - -@keyframes flipintoright { - .m-transitions-flipintoright(); + from { -moz-transform: rotateY(90deg) scale(.9); } + to { -moz-transform: rotateY(0); } } /* depth */ .depth { - .transform-origin(50% 50%); + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; } .depth.out { + -webkit-animation-name: depthout; + -moz-animation-name: depthout; opacity: 0; - .animation(depthout 250ms ease); + -webkit-animation-duration: 250ms; + -moz-animation-duration: 250ms; + -webkit-animation-timing-function: ease; + -moz-animation-timing-function: ease; } .depth.in { - .scale(1); + -webkit-transform: scale(1); + -moz-transform: scale(1); opacity: 1; - .animation(depthin 350ms ease); + -webkit-animation-name: depthin; + -moz-animation-name: depthin; + -webkit-animation-duration: 350ms; + -moz-animation-duration: 350ms; + -webkit-animation-timing-function: ease; + -moz-animation-timing-function: ease; } .depth.in.reverse { - .animation-name(depthinreverse); + -webkit-animation-name: depthinreverse; + -moz-animation-name: depthinreverse; } -.ui-popup.depth.out, .depth.out.reverse { - .scale(0.9); - .animation-name(depthoutreverse); -} - -.m-transitions-depthout() { - from { - .scale(1); - opacity: 1; - } - to { - .scale(1.1); - opacity: 0; - } -} - -.m-transitions-depthin() { - 0% { - .scale(.9); - opacity: 0; - } - 30% { - .scale(.9); - opacity: 0; - } - 100% { - .scale(1); - opacity: 1; - } -} - -.m-transitions-depthinreverse() { - 0% { - .scale(1.1); - opacity: 0; - } - 30% { - .scale(1.1); - opacity: 0; - } - 100% { - .scale(1); - opacity: 1; - } -} - -.m-transitions-depthoutreverse() { - from { - .scale(1); - opacity: 1; - } - to { - .scale(.9); - opacity: 0; - } + -webkit-transform: scale(.9); + -moz-transform: scale(.9); + -webkit-animation-name: depthoutreverse; + -moz-animation-name: depthoutreverse; } @-webkit-keyframes depthout { - .m-transitions-depthout(); + from { + -webkit-transform: scale(1); + opacity: 1; + } + to { + -webkit-transform: scale(1.1); + opacity: 0; + } } @-moz-keyframes depthout { - .m-transitions-depthout(); -} - -@-ms-keyframes depthout { - .m-transitions-depthout(); -} - -@-o-keyframes depthout { - .m-transitions-depthout(); -} - -@keyframes depthout { - .m-transitions-depthout(); + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(1.1); + opacity: 0; + } } @-webkit-keyframes depthin { - .m-transitions-depthin(); + 0% { + -webkit-transform: scale(.9); + opacity: 0; + } + 30% { + -webkit-transform: scale(.9); + opacity: 0; + } + 100% { + -webkit-transform: scale(1); + opacity: 1; + } } @-moz-keyframes depthin { - .m-transitions-depthin(); -} - -@-ms-keyframes depthin { - .m-transitions-depthin(); -} - -@-o-keyframes depthin { - .m-transitions-depthin(); -} - -@keyframes depthin { - .m-transitions-depthin(); + 0% { + -moz-transform: scale(.9); + opacity: 0; + } + 30% { + -moz-transform: scale(.9); + opacity: 0; + } + 100% { + -moz-transform: scale(1); + opacity: 1; + } } @-webkit-keyframes depthinreverse { - .m-transitions-depthinreverse(); + 0% { + -webkit-transform: scale(1.1); + opacity: 0; + } + 30% { + -webkit-transform: scale(1.1); + opacity: 0; + } + 100% { + -webkit-transform: scale(1); + opacity: 1; + } } @-moz-keyframes depthinreverse { - .m-transitions-depthinreverse(); -} - -@-ms-keyframes depthinreverse { - .m-transitions-depthinreverse(); -} - -@-o-keyframes depthinreverse { - .m-transitions-depthinreverse(); -} - -@keyframes depthinreverse { - .m-transitions-depthinreverse(); + 0% { + -moz-transform: scale(1.1); + opacity: 0; + } + 30% { + -moz-transform: scale(1.1); + opacity: 0; + } + 100% { + -moz-transform: scale(1); + opacity: 1; + } } @-webkit-keyframes depthoutreverse { - .m-transitions-depthoutreverse(); + from { + -webkit-transform: scale(1); + opacity: 1; + } + to { + -webkit-transform: scale(.9); + opacity: 0; + } } @-moz-keyframes depthoutreverse { - .m-transitions-depthoutreverse(); -} - -@-ms-keyframes depthoutreverse { - .m-transitions-depthoutreverse(); + from { + -moz-transform: scale(1); + opacity: 1; + } + to { + -moz-transform: scale(.9); + opacity: 0; + } } - -@-o-keyframes depthoutreverse { - .m-transitions-depthoutreverse(); -} - -@keyframes depthoutreverse { - .m-transitions-depthoutreverse(); -} - diff --git a/tau/src/css/profile/mobile/changeable/differences/global.less b/tau/src/css/profile/mobile/changeable/differences/global.less index 5fcb76ab..16c0dc38 100644 --- a/tau/src/css/profile/mobile/changeable/differences/global.less +++ b/tau/src/css/profile/mobile/changeable/differences/global.less @@ -45,9 +45,7 @@ fieldset.ui-controlgroup { /* 140520 Heeju Joo To improve performance of touch overflowscroll, we need to use this style for ui-page */ -.ui-page { - .touch-scrolling(); -} +.ui-page { -webkit-overflow-scrolling: touch; } /**************************** forms.select @@ -83,11 +81,19 @@ input::-webkit-input-placeholder { } .ui-controlgroup .ui-btn-inner.ui-corner-left { - .border-radius(0); + -o-border-radius: 0; + -ms-border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; } .ui-controlgroup .ui-btn-inner.ui-corner-right.ui-controlgroup-last { - .border-radius(0); + -o-border-radius: 0; + -ms-border-radius: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; } .ui-controlgroup.ui-controlgroup-horizontal { @@ -128,28 +134,38 @@ input::-webkit-input-placeholder { .ui-tokentextarea { margin-left : -15 * @unit_base; margin-right : -15 * @unit_base; - .display-flex(); - .flex-direction(row); - .flex-wrap(wrap); - .justify-content(flex-start); - .align-content(stretch); - .align-items(flex-start); + display : flex; + display : -webkit-flex; + flex-direction : row; + flex-wrap : wrap; + justify-content : flex-start; + align-content : stretch; + align-items : flex-start; + -webkit-flex-direction : row; + -webkit-flex-wrap : wrap; + -webkit-justify-content : flex-start; + -webkit-align-content : stretch; + -webkit-align-items : flex-start; } .ui-tokentextarea-input-area { order : 0; - .flex(1 1 auto); + flex : 1 1 auto; + -webkit-flex : 1 1 auto; width: 3rem; padding-right: 52px !important; } .ui-tokentextarea-input { order : 0; - .flex(1 1 auto); + flex : 1 1 auto; + -webkit-flex : 1 1 auto; width: 0px; margin-right: 35px; } .ui-tokentextarea-span-block { - .flex(0 1 auto); - .align-self(auto); + flex: 0 1 auto; + -webkit-flex: 0 1 auto; + align-self: auto; + -webkit-align-self: auto; display : inline; max-width: 50%; text-align : center; diff --git a/tau/src/css/profile/mobile/changeable/differences/jquery.mobile.theme.less b/tau/src/css/profile/mobile/changeable/differences/jquery.mobile.theme.less index 9941be4c..bf755138 100644 --- a/tau/src/css/profile/mobile/changeable/differences/jquery.mobile.theme.less +++ b/tau/src/css/profile/mobile/changeable/differences/jquery.mobile.theme.less @@ -6,8 +6,13 @@ [data-role="button"] { border-left-width : 0px; + &.ui-btn-up-s { +/* .LESSborder-radius-all(0);*/ + } &.ui-btn-down-s, .ui-btn-active-s { +/* .LESSborder-radius-all(0);*/ .ui-btn-inner { +/* background : @color_bar_toolbar_bg;*/ .ui-btn-text { color : @color_bar_title_text; } diff --git a/tau/src/css/profile/mobile/changeable/mobile.less b/tau/src/css/profile/mobile/changeable/mobile.less index e14b5164..f5454aa2 100644 --- a/tau/src/css/profile/mobile/changeable/mobile.less +++ b/tau/src/css/profile/mobile/changeable/mobile.less @@ -1,5 +1,3 @@ -@import "../../prefixer.less"; -@import "../../prefixer.ext.less"; @import "common/jquery.mobile.tizen.less"; @import "common/jquery.mobile.button.less"; @import "common/jquery.mobile.collapsible.less"; @@ -51,9 +49,7 @@ @import "differences/jquery.mobile.tizen.selectmenu.less"; @import "differences/jquery.mobile.tizen.virtualgrid.less"; @import "differences/jquery.mobile.listview.less"; -@import "common/drawer.less"; +@import "common/jquery.mobile.tizen.drawer.less"; @import "common/jquery.mobile.tizen.selectmenu.less"; @import "common/jquery.mobile.tizen.navigation.less"; -@import "common/jquery.mobile.box.less"; -@import "common/indexscrollbar.less"; diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/9-patch.less b/tau/src/css/profile/mobile/changeable/theme-changeable/9-patch.less index de8c6030..95b88f3d 100644 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/9-patch.less +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/9-patch.less @@ -1,16 +1,14 @@ .core_button_bg() { - .mask-box-image-repeat(repeat); - .mask-box-image-width(auto); - .mask-box-image-source('images/nine-patch/core_button_bg.png'); - .mask-box-image-slice(37 38 36 38 fill); - background-color: @color_button_bg; + -webkit-mask-box-image-repeat: repeat; + -webkit-mask-box-image-width: auto; + -webkit-mask-box-image-source: url(images/nine-patch/core_button_bg.png); + -webkit-mask-box-image-slice: 37 38 36 38 fill; } .core_button_bg_pressed() { - .mask-box-image-repeat(repeat); - .mask-box-image-width(auto); - .mask-box-image-source('images/nine-patch/core_button_bg.png'); - .mask-box-image-slice(37 38 36 38 fill); - background-color: @color_button_bg_press; + -webkit-mask-box-image-repeat: repeat; + -webkit-mask-box-image-width: auto; + -webkit-mask-box-image-source: url(images/nine-patch/core_button_bg.png); + -webkit-mask-box-image-slice: 37 38 36 38 fill; } diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_fullscreen_off.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_fullscreen_off.png Binary files differnew file mode 100644 index 00000000..0ae63605 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_fullscreen_off.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_fullscreen_on.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_fullscreen_on.png Binary files differnew file mode 100644 index 00000000..0390c0d2 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_fullscreen_on.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_pause.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_pause.png Binary files differnew file mode 100644 index 00000000..034e7007 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_pause.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_play.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_play.png Binary files differnew file mode 100644 index 00000000..812d5cca --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_button_play.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_circle_button_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_circle_button_ef.png Binary files differnew file mode 100755 index 00000000..caeb4be2 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_circle_button_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_effect_title_tab_bounce_left.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_effect_title_tab_bounce_left.png Binary files differnew file mode 100644 index 00000000..5109e64f --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_effect_title_tab_bounce_left.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_effect_title_tab_bounce_right.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_effect_title_tab_bounce_right.png Binary files differnew file mode 100644 index 00000000..973210d4 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_effect_title_tab_bounce_right.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_messagebubble_date_bg.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_messagebubble_date_bg.png Binary files differnew file mode 100644 index 00000000..b5e23815 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_messagebubble_date_bg.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_overscrolling_bottom.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_overscrolling_bottom.png Binary files differnew file mode 100644 index 00000000..2cee9762 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_overscrolling_bottom.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_overscrolling_top.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_overscrolling_top.png Binary files differnew file mode 100644 index 00000000..dd1b91c2 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/00_overscrolling_top.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_icon_favorite_bg_45x45.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_icon_favorite_bg_45x45.png Binary files differnew file mode 100755 index 00000000..1ae50fb1 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_icon_favorite_bg_45x45.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_on_off_bg.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_on_off_bg.png Binary files differnew file mode 100755 index 00000000..488b9a29 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_on_off_bg.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_on_off_bg_line.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_on_off_bg_line.png Binary files differnew file mode 100755 index 00000000..94370a55 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_on_off_bg_line.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_slider_center_point_bg_v.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_slider_center_point_bg_v.png Binary files differnew file mode 100644 index 00000000..fcfa8ddc --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_slider_center_point_bg_v.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_slider_popup_bg.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_slider_popup_bg.png Binary files differnew file mode 100644 index 00000000..ef0a56ec --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/00_slider_popup_bg.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_add_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_add_ef.png Binary files differnew file mode 100755 index 00000000..1af73828 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_add_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_back_press.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_back_press.png Binary files differnew file mode 100644 index 00000000..76183717 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_back_press.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_call_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_call_ef.png Binary files differnew file mode 100755 index 00000000..50a19f39 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_call_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_check_press.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_check_press.png Binary files differnew file mode 100644 index 00000000..8df9a9cf --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_check_press.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_contact.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_contact.png Binary files differnew file mode 100755 index 00000000..70db13b9 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_contact.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_contact_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_contact_ef.png Binary files differnew file mode 100755 index 00000000..1da5ebc3 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_contact_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_delete_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_delete_ef.png Binary files differnew file mode 100755 index 00000000..2907e611 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_delete_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_cancel_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_cancel_ef.png Binary files differnew file mode 100755 index 00000000..bd59ba4b --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_cancel_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_closed_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_closed_ef.png Binary files differnew file mode 100755 index 00000000..c5c9cb42 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_closed_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_opened_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_opened_ef.png Binary files differnew file mode 100755 index 00000000..af24a540 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_opened_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_send_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_send_ef.png Binary files differnew file mode 100755 index 00000000..882d28f9 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_expand_send_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_gear_press.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_gear_press.png Binary files differnew file mode 100644 index 00000000..8e4b359e --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_gear_press.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_grid_press.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_grid_press.png Binary files differnew file mode 100644 index 00000000..ca6b7690 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_grid_press.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_home_press.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_home_press.png Binary files differnew file mode 100644 index 00000000..1ba38209 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_home_press.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_info_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_info_ef.png Binary files differnew file mode 100755 index 00000000..58504fb5 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_info_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_left_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_left_ef.png Binary files differnew file mode 100755 index 00000000..25ac80ee --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_left_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_refresh_press.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_refresh_press.png Binary files differnew file mode 100644 index 00000000..33ff934d --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_refresh_press.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_rename_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_rename_ef.png Binary files differnew file mode 100755 index 00000000..94c5d4a7 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_rename_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_right_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_right_ef.png Binary files differnew file mode 100755 index 00000000..3f7b182c --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_right_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_warning_ef.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_warning_ef.png Binary files differnew file mode 100755 index 00000000..51cc938e --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/button/00_button_warning_ef.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_bg.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_bg.png Binary files differindex 8a295283..236180e1 100644 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_bg.png +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_bg.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_bg_stroke.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_bg_stroke.png Binary files differdeleted file mode 100644 index 54f7e134..00000000 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_bg_stroke.png +++ /dev/null diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_icon.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_icon.png Binary files differindex 4c54de56..1ad477a1 100644 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_icon.png +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_check_icon.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_icon_favorite.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_icon_favorite.png Binary files differdeleted file mode 100644 index 0381b490..00000000 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_icon_favorite.png +++ /dev/null diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_bg.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_bg.png Binary files differindex 98623eec..ff2408d4 100644 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_bg.png +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_bg.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_bg_stroke.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_bg_stroke.png Binary files differdeleted file mode 100644 index d6db6ae6..00000000 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_bg_stroke.png +++ /dev/null diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_icon.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_icon.png Binary files differindex 19d3a4c4..ee0f0d37 100644 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_icon.png +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_radio_icon.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_toggle_off.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_toggle_off.png Binary files differnew file mode 100755 index 00000000..4e426172 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_toggle_off.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_toggle_on.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_toggle_on.png Binary files differnew file mode 100755 index 00000000..1a2fbb72 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/controls/core_toggle_on.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_button_effect_normal.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_button_effect_normal.png Binary files differnew file mode 100644 index 00000000..2a0d9d73 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_button_effect_normal.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_button_effect_pressed.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_button_effect_pressed.png Binary files differnew file mode 100644 index 00000000..8168aa49 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_button_effect_pressed.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_popup_noti_bg_outer.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_popup_noti_bg_outer.png Binary files differnew file mode 100644 index 00000000..c42cd666 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/nine-patch/core_popup_noti_bg_outer.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/00_icon_drawers.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/00_icon_drawers.png Binary files differnew file mode 100755 index 00000000..389e31fc --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/00_icon_drawers.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_button_bg.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_button_bg.png Binary files differnew file mode 100755 index 00000000..6cfbcb83 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_button_bg.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_button_focus.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_button_focus.png Binary files differnew file mode 100755 index 00000000..f02c34c9 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_button_focus.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_icon_cancel.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_icon_cancel.png Binary files differnew file mode 100755 index 00000000..fe94c3ea --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_icon_cancel.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_icon_done.png b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_icon_done.png Binary files differnew file mode 100755 index 00000000..988dae84 --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/images/page/core_title_icon_done.png diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/theme.less b/tau/src/css/profile/mobile/changeable/theme-changeable/style.changeable.less index 18f16cf7..859f5b18 100644 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/theme.less +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/style.changeable.less @@ -1,7 +1,7 @@ /******************************** * Tizen Changeable Less Header * *******************************/ -@import "theme.color.less"; +@import "theme.color.changeable.less"; /**************************** * Tizen nine-patch images * @@ -13,7 +13,3 @@ ****************************/ @import "theme.font.less"; @import "../mobile.less"; - -.tau-info-theme:after { - content: "default"; -} diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/theme.color.changeable.less b/tau/src/css/profile/mobile/changeable/theme-changeable/theme.color.changeable.less new file mode 100644 index 00000000..d982a7ac --- /dev/null +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/theme.color.changeable.less @@ -0,0 +1,413 @@ +/*************************************************************************** + Body +***************************************************************************/ +@color_bg: C001; +@color_text: T023; +@color_content_bg: B0211P; + +/*************************************************************************** + Naviframe +***************************************************************************/ +@color_bar_naviframe_bg : B011; +@color_bar_naviframe_press : F043P; +@color_bar_naviframe_line : B0512; +@color_bar_title_button_bg : B0541; +@color_bar_title_button_bg_press : B0541P; +@color_bar_title_button_bg_dim : B0541D; +@color_bar_title_button_all : F043L1i; +@color_bar_title_button_all_press : F043L1i; +@color_bar_title_button_all_dim : F043L1iD; +@color_bar_title_text : T020; +@color_bar_title_multiline_text: T0203; +@color_bar_title_sub_text: T0204; +@color_bar_title_landscape_multiline_text: T0203; +@color_bar_title_landscape_sub_text: T0204; +@color_bar_title_button_text : T020; +@color_bar_title_button_text_press : T020; +@color_bar_title_button_text_select : T020; +@color_bar_divider_line : B0551; + +/*************************************************************************** + Toolbar +***************************************************************************/ +@color_bar_toolbar_bg : B062; +@color_bar_toolbar_press : B062; +@color_bar_toolbar_button : B052L6; +@color_bar_toolbar_button_press : B052L6P; +@color_bar_toolbar_button_text : T111; +@color_bar_toolbar_button_text_press : T111P; +@color_bar_toolbar_button_text_selected : T111S; +@color_bar_toolbar_divider : B0552; + +/*************************************************************************** + Tabbar +***************************************************************************/ +@color_tabbar_bg : B0514; +@color_tabbar_press : B0514P; +@color_tabbar_divider : B012L4; +@color_tabbar_bg_line : B0512; +@color_tabbar_select_bar : B0514S; +@color_tabbar_title_bg : B0514; +@color_tabbar_title_bg_press : B0514P; +@color_tabbar_btn_normal : B052L6; +@color_tabbar_btn_press : B052L6P2; +@color_tabbar_btn_dim : B052L6D; +@color_tabbar_btn_selected : B052L6P; +@color_tabbar_btn_bg_normal : B0514; +@color_tabbar_btn_bg_press : B0514P; +@color_tabbar_text_normal : T1117; +@color_tabbar_text_press : T1117P; +@color_tabbar_text_dim : T1117D; +@color_tabbar_text_selected : T1117S; + +/*************************************************************************** + Textinput Clear Button +***************************************************************************/ +@color_editfield_bg: B0215; + +@color_editfield_outline: F059; +@color_editfield_selected_bg: F056; +@color_editfield_selected_outline: F057; +@color_editfield_disabled_bg: F058; +@color_editfield_disabled_outline : F059; + +@color_editfield_text: T1013; +@color_editfield_selected_text: T1013; +@color_editfield_placeholder_text: T1012; +@color_editfield_placeholder_selected_text: T1012; +@color_editfield_disabled_text: T1011D; + +@color_editfield: F054; + +@color_editfield_clear_icon: F053; +@color_editfield_clear_icon_press: F053P; +@color_editfield_clear_icon_disabled: F053D; + +/*************************************************************************** + List +***************************************************************************/ +@color_list_bg: B0211; +@color_list_press : B0211P; +@color_list_focus : W161; +@color_list_border_bottom: C002; +@color_list_main_text_normal: T023; +@color_list_main_text_press : T023P; +@color_list_main_text_selected : T023S; +@color_list_main_text_dim : T023D; +@color_list_3line_main_text: T028; +@color_list_3line_main_text_read: T028R; +@color_list_3line_sub_text: T029; +@color_list_3line_sub3_text: T030; +@color_list_3line_read_bg: B0218; + +@color_list_sub_text_normal: T024; +@color_list_sub_text_press : T024P; +@color_list_sub_text_selected : T024S; +@color_list_sub_text_dim : T024D; +@color_list_divider : B0221L2; +@color_list_divider_text : T027L1; +@color_list_divider_line : W021L2; +@color_list_divider_bg : W021L1; +@color_list_divider_bg_press : W021L1; +@color_list_divider_text_press : T027L1; + +@color_list_swipe_text: T023; +@color_list_swipe_text_press: T023P; +@color_list_swipe_bg: B0211; +@color_list_swipe_left_bg: B011; +@color_list_swipe_right_bg: B0211; + +@color_list_editfield_bg: @color_editfield_bg; +@color_list_editfield_outline: @color_editfield_outline; +@color_list_editfield_selected_bg: @color_editfield_selected_bg; +@color_list_editfield_selected_outline: @color_editfield_selected_outline; +@color_list_editfield_disabled_bg: @color_editfield_disabled_bg; +@color_list_editfield_disabled_outline: @color_editfield_disabled_outline; +@color_list_editfield_text: @color_editfield_text; +@color_list_editfield_selected_text: @color_editfield_selected_text; +@color_list_editfield_placeholder_text: @color_editfield_placeholder_text; +@color_list_editfield_disabled_text: @color_editfield_disabled_text; +@color_list_editfield: @color_editfield; + +@color_list_dialogue_bg : B011; +@color_dialogue_border : B0223; +@color_dialogue_main_text_press: T023P; +@color_dialogue_main_text_selected: T023S; +@color_dialogue_divider_bg : B0221L2; +@color_list_expanded_bg : B011; +@color_checklist_btn_bg : B011; + +@color_list_bubble_receive_bg : C002; +@color_list_bubble_sent_bg : B0541P; +@color_list_bubble_sent_text: T023; +@color_list_bubble_receive_text: T023; +@color_list_bubble_sos_text: rgb(219, 0, 0); +@color_list_bubble_date_text: T023; + +@color_list_bubble_time_sent_text: T023; +@color_list_bubble_time_receive_text: T023; +@color_list_bubble_help_text: T023; + +@color_list_collapsible_arrow: W023; +@list-smallicon-size: 22 * @unit_base; +@list-li-padding-horizontal: 8 * @unit_base; + +@list-bigicon-size2: 72 * @unit_base; + + +/*************************************************************************** + Fast Scroll +***************************************************************************/ +@color_fastscroll_rollover_bg: B0722; +@color_fastscroll_rollover_down_border: B0725; +@color_fastscroll_rollover_text: T113; +@color_fastscroll_rollover_text_press: T113P; +@color_fastscroll_rollover_left_border: B0723; +@color_fastscroll_rollover_left_border_press : B0724; +@color_fastscroll_popup_bg: B0731L1; +@color_fastscroll_popup_text: T114; +@color_fastscroll_popup_border: B0731L2; + +/*************************************************************************** + SearchBar(forms.textinput) +***************************************************************************/ +@color_searchbar_bg : B0215; +@color_searchbar_bg_press : B0215; +@color_searchbar_text : T1061; +@color_searchbar_text_press : T106P; +@color_searchbar_typing_text : T1063; +@color_searchbar_search_icon : F041i; +@color_searchbar_clear_icon : F053; +@color_searchbar_clear_icon_press : F053P; +@color_searchbar_input_field_bg : B011; +@color_searchbar_border : F059; +@color_searchbar_border_focus : F057; +@color_searchbar_button_bg : B0215; +@color_searchbar_button_bg_press : B0215; + +/*************************************************************************** + Button(connected with other winset) +***************************************************************************/ +@color_button_EditText: T1069; +@color_button_EditTextPress: T1069; + +@color_button_text_normal: T051L2; +@color_button_text_press: T051L2P; +@color_button_text_select:T051S; + +@color_button_icon: F032L3; +@color_button_icon_press: F060L2P; +@color_button_icon_dim: F032L3D; +@color_button_icon_nobg: W012; +@color_button_icon_nobg_press: W012P; +@color_button_icon_nobg_dim: W012D; +@color_button_bg: W012; +@color_button_bg_press: W012P; + +@color_button_add: F060L2; +@color_button_add_press: F060L2P; +@color_button_add_dim: F060L2D; + +@color_button_warning: F060L3; +@color_button_warning_press: F060L3P; +@color_button_warning_dim : F060L3D; + +@color_button_edit: W011; +.LESSbutton_box_style{ + color: @color_button_text_normal; +} + +.LESSbutton_down_style{ + color: @color_button_text_press; +} + +.LESSbutton_edit_style{ + background: @color_button_edit; +} + +/*************************************************************************** + contextual popup +***************************************************************************/ +@color_ctxpopup_text: T1221; +@color_ctxpopup_background: B0211; //this is temporal +@color_ctxpopup_background_border: B011; //this is temporal +@color_ctxpopup_border_left: B0733L2; +@color_ctxpopup_border_right: B0733L2; +@color_ctxpopup_border_top: B0733L2; +@color_ctxpopup_border_bottom: B0733L2; +@color_ctxpopup_btn_press: B0211P; +@color_ctxpopup_focus: B0211; +@color_ctxpopup_icon: B068; +@color_ctxpopup_divider: B0733L2; +@color_ctxpopup_border: B067; + +/*************************************************************************** + Scrollview +***************************************************************************/ +@color_scrollbar: B071; + +/*************************************************************************** + Date Time picker +***************************************************************************/ +@color_timepicker_selector_color: rgb(37, 50, 150); +@color_timepicker_divider_color1: rgb(39, 40, 43); +@color_timepicker_divider_color2: rgb(64, 64, 64); +/*************************************************************************** + SegmentControl +***************************************************************************/ +@color_segmentcontrol_Seg_text : rgba(199, 199, 199, 1); +@color_segmentcontrol_Seg_text_pressed : rgb(59,119,150); +/*************************************************************************** + Popup +***************************************************************************/ +@color_popup_bg: B061L1; +@color_popup_title_bg: B061L3; +@color_popup_title_text: T121; +@color_popup_text: T123; +@color_popup_list_style_bg_press: B061L1P; +@color_popup_list_style_text: T125; +@color_popup_list_style_text_press: T125P; +@color_popup_button_bg: B062; +@color_popup_button_text: T051L2; +@color_popup_dim_screen_bg: B015; + +/*************************************************************************** + Tickernoti +***************************************************************************/ +@color_ticker_bg: B061L5; +@color_ticker_text1: T023; +@color_ticker_text2: T023; + +/*************************************************************************** + Smallpopup +***************************************************************************/ +@color_smallpopup_bg: B061L5; +@color_smallpopup_outline: B011; +@color_smallpopup_text: T1221; + +/*************************************************************************** + Slider +***************************************************************************/ +@color_slider_handle_text: T057L1; +@color_slider_handle_text_press: T057L1; +@color_slider_popup_text: T023; +@color_slider_popup_bg: W0631; +@color_slider_popup_stroke: W0632; +@color_slider_icon: W0661; +@color_slider_left_text: T023; +@color_slider_num_text: T023; +@color_slider_text: T023; +@color_slider_center: W062L1; +@color_slider_handle_bg: W062L2; +@color_slider_handle_press_bg: W062L2; +@color_slider_img_bg: W0661; + + +/*************************************************************************** + Toggle +***************************************************************************/ +@color_toggle_bg: W015L1; + +@color_toggle_outline: W015L1D; + +@color_toggle_handle_on_bg: W015L1; +@color_toggle_handle_off_bg: W015L1E1; + +@color_toggle_handle_on_icon: W015L1i; +@color_toggle_handle_off_icon: W015L1i; + + + + +/*************************************************************************** + Progress +***************************************************************************/ +@color_progress_bg: W062L1; +@color_progress_value: W062L2; +@color_progress_text1: T057L1; +@color_progress_text2: T058; +@color_progress_circle_bg: W157E1; + +/*************************************************************************** + tokentextarea +***************************************************************************/ +@color_tokentextarea_bg : W010; +@color_tokentextarea_block_text : T020; +@color_tokentextarea_block_text_press : T020; +@color_tokentextarea_block_bg : W012; +@color_tokentextarea_press_bg : W012P; +@color_tokentextarea_input_text : T059L1; +@color_tokentextarea_label_text : T059L2; + +/*************************************************************************** + Splitview +***************************************************************************/ +@color_splitview_spliter_bar : W062L1; +@color_splitview_spliter_bar_active : W062L2; + +/*************************************************************************** + Checkbox / Radio +****************************************************************************/ +@color_checkboxradio_bg_line: W013L2; +@color_checkboxradio_bg_press_line: W013L2P; +@color_checkboxradio_checkbox_bg_line: W013L2; + +@color_checkboxradio_checkbox_bg_icon: W013L1i; + +@color_checkboxradio_bg_on: W013L1; +@color_checkboxradio_bg_off: W013L1E1; +@color_checkboxradio_bg_on_icon: W013L1D; + +@color_checkboxradio_radio_bg_on: W014L1; +@color_checkboxradio_radio_bg_off: W014L1E1; +@color_checkboxradio_radio_btn_icon: W014L1D; + +@color_checkboxradio_radio_bg_icon: W014Li; + +@color_checkboxradio_favorite_off : W016L1iE1; +@color_checkboxradio_favorite_on : W016L1i; + +/*************************************************************************** + Scrollview +****************************************************************************/ +@color_scrollview_handler_bg: B0731L3; +@color_scrollview_handler_thumb_01: B0731L4; +@color_scrollview_handler_thumb_02: B0731L5; +/*************************************************************************** + Drawer +***************************************************************************/ +@color_drawer_bg : C001; +@color_drawer_list_press : B0211P; +@color_drawer_overlay_bg : B016; +@color_drawer_icon : F043L1i; +@color_drawer_icon_press : F043P; + +/*************************************************************************** + Empty State +***************************************************************************/ +@color_emptystate_header_bg : B011; +@color_emptystate_content_bg : B238L1; +@color_emptystate_content_pattern_bg : B238L2; + +/*************************************************************************** + SelectMenu +***************************************************************************/ +@color_selectmenu_list_group_index_bg : W021L1; +@color_selectmenu_list_line : W021L2; +@color_selectmenu_label_bg : B0733; +@color_selectmenu_label_bg_stroke : B0733L1; +@color_selectmenu_label_bg_press : B0733P; +@color_selectmenu_label_line : B0733L2; +@color_selectmenu_icon : B0734; +@color_selectmenu_font_dim : T12351D; + +/*************************************************************************** + Navigation +***************************************************************************/ +@color_navigation_text: T042; +@color_navigation_text_press: T042P; +@color_navigation_text_dim: T042D; +@color_navigation_bg : B011; +@color_navigation_bar_bg : B012L1; +@color_navigation_bar_icon: B012L3; +@color_navigation_tab_divider : B012L4; diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/theme.color.less b/tau/src/css/profile/mobile/changeable/theme-changeable/theme.color.less deleted file mode 100644 index 11925985..00000000 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/theme.color.less +++ /dev/null @@ -1,359 +0,0 @@ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*************************************************************************** - Body -***************************************************************************/ -@color_bg: C001; // #[color] Main background body color -@color_text: T023; // #[color] Main body text color -@color_content_bg: B0211P; // #[color] Context background color - -/*************************************************************************** - Naviframe -***************************************************************************/ -@color_bar_naviframe_bg : B011; // #[color] and header background color -@color_bar_naviframe_press : F043P; // #[color] button press color -@color_bar_naviframe_line : B0512; // #[color] -@color_bar_title_button_all : F043L1i; // #[color] button icon color -@color_bar_title_button_all_press : F043L1i; // #[color] button pressed icon color -@color_bar_title_text : T020; // #[color] text color -@color_bar_title_multiline_text: T0203; // #[color] text color -@color_bar_title_sub_text: T0204; // #[color] sub text color -@color_bar_title_button_text : T020; // #[color] button text color -@color_bar_title_button_text_press : T020; // #[color] button pressed text color -@color_bar_divider_line : B0551; - -/*************************************************************************** - Toolbar -***************************************************************************/ -@color_bar_toolbar_bg : B062; // #[color] Footer background color -@color_bar_toolbar_press : B062; // #[color] Footer button press color -@color_bar_toolbar_button_text : T111; // #[color] Footer button text color -@color_bar_toolbar_divider : B0552; // #[color] Toolbar divider color - -/*************************************************************************** - Tabbar -***************************************************************************/ -@color_tabbar_bg : B0514; // #[color] background color -@color_tabbar_divider : B012L4; // #[color] divider line color -@color_tabbar_select_bar : B0514S; // #[color] border bottom color -@color_tabbar_btn_normal : B052L6; // #[color] hover icon color -@color_tabbar_btn_press : B052L6P2; // #[color] press icon color -@color_tabbar_btn_selected : B052L6P; // #[color] active icon color -@color_tabbar_btn_bg_normal : B0514; // #[color] button normal color -@color_tabbar_btn_bg_press : B0514P; // #[color] button press color -@color_tabbar_text_normal : T1117; // #[color] text normal color -@color_tabbar_text_selected : T1117S; // #[color] text selected color -@color_tabbar_icon_bg_normal : B052L6; // #[color] icon normal background color -@color_tabbar_icon_bg_press : B052L6P; // #[color] icon press background color -@color_tabbar_icon_bg_dim : B052L6D; // #[color] icon dim background color -@color_tabbar_icon_bg_select : B052L6S; // #[color] icon select background color - -/*************************************************************************** - Textinput Clear Button -***************************************************************************/ -@color_editfield_bg: B0215; // #[color] background color - -@color_editfield_outline: F059; // #[color] decoration underline color -@color_editfield_selected_outline: F057; // #[color] selected underline color -@color_editfield_disabled_outline : F059; // #[color] disabled underline color - -@color_editfield_text: T1013; // #[color] text color -@color_editfield_selected_text: T1013; // #[color] selected text color -@color_editfield_placeholder_text: T1012; // #[color] placeholder text color -@color_editfield_placeholder_selected_text: T1012; // #[color] placeholder selected text color -@color_editfield_disabled_text: T1011D; // #[color] disabled text color - -@color_editfield: F054; // #[color] Background color - -@color_editfield_clear_icon: F053; // #[color] clear icon color -@color_editfield_clear_icon_press: F053P; // #[color] clear icon press color -@color_editfield_clear_icon_disabled: F053D; // #[color] clear icon disabled color - -/*************************************************************************** - List -***************************************************************************/ -@color_list_press : B0211P; // #[color] item pressed color -@color_list_border_bottom: C002; // #[color] border bottom color -@color_list_dialog_border: C002; // #[color] dialog border color -@color_list_main_text_normal: T023; // #[color] main text color - -@color_list_sub_text_normal: T024; // #[color] sub text color -@color_list_divider_text : T027L1; // #[color] divider text color -@color_list_divider_line : W021L2; // #[color] divider bottom line color -@color_list_divider_bg : W021L1; // #[color] divider background color -@color_list_divider_bg_press : W021L1; // #[color] divider background press color -@color_list_divider_text_press : T027L1; // #[color] divider text press color -@color_list_divider_select_all_text: T023; // #[color] divider select all text color - -@color_list_swipe_text: T023; // #[color] swipe item text color -@color_list_swipe_left_bg: B011; // #[color] swipe item background color - -@color_list_editfield_text: T1013; // #[color] edit field text color -@color_list_editfield_placeholder_text: T1012; // #[color] edit field placeholder text color -@color_list_editfield_disabled_text: T1011D; // #[color] edit field placeholder disabled text color - -@color_list_bubble_receive_bg : C002; -@color_list_bubble_sent_bg : B0541P; -@color_list_bubble_sent_text: T023; -@color_list_bubble_receive_text: T023; -@color_list_bubble_sos_text: rgb(219, 0, 0); -@color_list_bubble_date_text: T023; - -@color_list_bubble_time_sent_text: T023; -@color_list_bubble_time_receive_text: T023; -@color_list_bubble_help_text: T023; - -@color_list_collapsible_arrow: W023; // #[color] collapsible arrow color -@list-smallicon-size: 22 * @unit_base; -@list-li-padding-horizontal: 8 * @unit_base; - -@list-bigicon-size2: 72 * @unit_base; - -/*************************************************************************** - Fast Scroll -***************************************************************************/ -@color_fastscroll_rollover_bg: B0722; // #[color] background color -@color_fastscroll_rollover_text: T113; // #[color] text color -@color_fastscroll_popup_bg: B0731L1; // #[color] popup background color -@color_fastscroll_popup_text: T114; // #[color] popup text color -@color_fastscroll_popup_border: B0731L2; // #[color] popup border color - -/*************************************************************************** - SearchBar(forms.textinput) -***************************************************************************/ -@color_searchbar_bg : B0215; // #[color] Search bar background color -@color_searchbar_clear_icon : F053; // #[color] Search bar clear icon color -@color_searchbar_clear_icon_press : F053P; // #[color] Search bar clear icon press color -@color_searchbar_button_bg : B0215; -@color_searchbar_button_bg_press : B0215; - -/*************************************************************************** - Button(connected with other winset) -***************************************************************************/ -@color_button_EditText: T1069; -@color_button_EditTextPress: T1069; - -@color_button_text_normal: T051L2; // #[color] normal text color -@color_button_text_press: T051L2P; // #[color] press text color - -@color_button_icon: F032L3; // #[color] icon color -@color_button_icon_bg: W015L6; -@color_button_icon_bg_press: W015L6P; -@color_button_icon_bg_dim: W015L6D; -@color_button_icon_nobg: W012; // #[color] icon nobg color -@color_button_icon_nobg_press:W012P; // #[color] icon nobg press color -@color_button_bg: W012; // #[color] background color -@color_button_bg_press: W012P; // #[color] background press color - -@color_button_icon_only: W015L6; -@color_button_icon_only_press: W015L6P; - -@color_button_nobg: F060L1; -@color_button_nobg_press: F060L1P; -@color_button_nobg_dim: F060L1D; - -@color_button_add: F060L2; // Button plus icon color -@color_button_add_press: F060L2P; // Button plus press icon color - -@color_button_delete: F060L3; -@color_button_delete_press: F060L3P; -@color_button_delete_dim : F060L3D; - -@color_button_warning: F060L3; // #[color] warning|minus icon color -@color_button_warning_press: F060L3P; // #[color] warning|minus icon press color - -@color_button_edit: W011; - -/*************************************************************************** - Contextual popup -***************************************************************************/ -@color_ctxpopup_text: T1221 ; // #[color] text color -@color_ctxpopup_background: B0211; // #[color] background color -@color_ctxpopup_background_border: B011; // #[color] border color -@color_ctxpopup_border_left: B0733L2; // Context popup, list element left border color (horizontal position) -@color_ctxpopup_border_right: B0733L2; // Context popup, list element right border color (horizontal position) -@color_ctxpopup_list_item_border_top: B0733L2; // Context popup, list element top border color -@color_ctxpopup_list_item_border_bottom: B0733L2; // Context popup, list element bottom border color -@color_ctxpopup_btn_press: B0211P; // #[color], list item press color -@color_ctxpopup_divider: B0733L2; // #[color], list divider color - -/*************************************************************************** - Scrollview -***************************************************************************/ -@color_scrollbar: B071; - -/*************************************************************************** - Date Time picker -***************************************************************************/ -@color_timepicker_selector_color: rgb(37, 50, 150); -@color_timepicker_divider_color1: rgb(39, 40, 43); -@color_timepicker_divider_color2: rgb(64, 64, 64); -/*************************************************************************** - SegmentControl -***************************************************************************/ -@color_segmentcontrol_Seg_text : rgba(199, 199, 199, 1); -@color_segmentcontrol_Seg_text_pressed : rgb(59,119,150); - -/*************************************************************************** - Popup -***************************************************************************/ -@color_popup_bg: B061L1; // #[color] background color -@color_popup_title_bg: B061L3; // #[color] title background color -@color_popup_title_text: T121; // #[color] title text color -@color_popup_text: T123; // #[color] text color -@color_popup_list_style_text: T125; -@color_popup_button_bg: B062; // #[color] button background color -@color_popup_button_text: T051L2; // #[color] button text color -@color_popup_dim_screen_bg: B015; // #[color] overlay color -@color_popup_outline: B0211; // #[color] overlay color - -/*************************************************************************** - Tickernoti -***************************************************************************/ -@color_ticker_bg: B061L5; // #[color] background color -@color_ticker_text1: T023; // #[color] text1 color -@color_ticker_text2: T023; // #[color] text2 color - -/*************************************************************************** - Smallpopup -***************************************************************************/ -@color_smallpopup_bg: B061L5; // #[color] background color -@color_smallpopup_outline: B011; // #[color] outline color -@color_smallpopup_text: T1221; // #[color] text color - -/*************************************************************************** - Slider -***************************************************************************/ -@color_slider_handle_text: T057L1; // #[color] handle text color -@color_slider_popup_text: T023; // #[color] popup text color -@color_slider_popup_bg: W0631; // #[color] popup background color -@color_slider_popup_stroke: W0632; // #[color] popup border color -@color_slider_left_text: T023; // #[color] left text color -@color_slider_right_text: T023; // #[color] right text color -@color_slider_center: W062L1; // #[color] center marker background color -@color_slider_bg: W062L1; // #[color] background color -@color_slider_active_bg: W062L2; // #[color] active background color -@color_slider_handle_bg: W062L2; // #[color] handle background color -@color_slider_img_bg: W0661; // #[color] background image color -@color_slider_switch_label_on_bg: W012P; // #[color] switch on background color -@color_slider_switch_label_off_bg: W062L1; // #[color] switch off background color -@color_slider_switch_label_on_text: T051L2; // #[color] switch on text color -@color_slider_switch_label_off_text: T023; // #[color] switch off text color - -/*************************************************************************** - Toggle -***************************************************************************/ -@color_toggle_bg: W015L1; // for old toggle - -@color_toggle_outline: W015L1D; // for old toggle - -@color_toggle_handle_on_bg: W015L1; // #[color] on background color -@color_toggle_handle_off_bg: W015L1E1; // #[color] off background color - -@color_toggle_handle_on_icon: W015L1i; // for old toggle -@color_toggle_handle_off_icon: W015L1i; // for old toggle -@color_toggle_handle_icon: W015L1i; // #[color] on/off icon background color - -/*************************************************************************** - Progress -***************************************************************************/ -@color_progress_bg: W062L1; // #[color] background color -@color_progress_value: W062L2; // #[color] value color -@color_progress_circle_bg: W157E1; // #[color] circle progress color - -/*************************************************************************** - Tokentextarea -***************************************************************************/ -@color_tokentextarea_bg : W010; // #[color] background color -@color_tokentextarea_block_text : T020; // #[color] block token text color -@color_tokentextarea_block_text_press : T020; // #[color] block token text press color -@color_tokentextarea_block_bg : W012; // #[color] block token background color -@color_tokentextarea_press_bg : W012P; // #[color] block token press background color -@color_tokentextarea_input_text : T059L1; // #[color] input text color -@color_tokentextarea_label_text : T059L2; // #[color] label text color - -/*************************************************************************** - Splitview -***************************************************************************/ -@color_splitview_spliter_bar : W062L1; -@color_splitview_spliter_bar_active : W062L2; - -/*************************************************************************** - Checkbox / Radio -****************************************************************************/ - -@color_checkboxradio_checkbox_bg_icon: W013L1i; // #[color] checkbox icon background color -@color_checkboxradio_checkbox_bg_on: W013L1; // #[color] checkbox on background color -@color_checkboxradio_checkbox_bg_off: W013L1E1; // #[color] checkbox off background color -@color_checkboxradio_checkbox_bg_line_on: W013L2; // #[color] checkbox on background line color -@color_checkboxradio_checkbox_bg_line_off: W013L2E1; // #[color] checkbox off background line color - -@color_checkboxradio_radio_bg_icon: W014Li; // #[color] radio icon background color -@color_checkboxradio_radio_bg_on: W014L1; // #[color] radio on background color -@color_checkboxradio_radio_bg_off: W014L1E1; // #[color] radio off background color -@color_checkboxradio_radio_bg_line_on: W014L2; // #[color] radio on background line color -@color_checkboxradio_radio_bg_line_off: W014L2E1; // #[color] radio off background line color - -@color_checkboxradio_favorite_off : W016L1iE1; // #[color] favorite icon off color -@color_checkboxradio_favorite_on : W016L1i; // #[color] favorite icon on color - -/*************************************************************************** - Scrollview -****************************************************************************/ -@color_scrollview_handler_bg: B0731L3; // #[color] handler background color -@color_scrollview_handler_thumb_01: B0731L4; // #[color] handler upper thumb color -@color_scrollview_handler_thumb_02: B0731L5; // #[color] handler lower thumb color -/*************************************************************************** - Drawer -***************************************************************************/ -@color_drawer_bg : B011; // #[color] background color -@color_drawer_list_press : B0211P; // #[color] list item background color -@color_drawer_overlay_bg : B016; // #[color] overlay color -@color_drawer_icon : F043L1i; // #[color] icon color -@color_drawer_icon_press : F043P; // #[color] background icon press color - -@color_drawer_border_left : C002; // #[color] border left color -@color_drawer_border_right : C002; // #[color] border right color - -/*************************************************************************** - Empty State -***************************************************************************/ -@color_emptystate_header_bg : B011; // #[color] header background color -@color_emptystate_content_bg : B238L1; // #[color] content background color -@color_emptystate_content_pattern_bg : B238L2; // #[color] content pattern color - -/*************************************************************************** - SelectMenu -***************************************************************************/ -@color_selectmenu_list_group_index_bg : W021L1; // #[color] list group background color -@color_selectmenu_list_line : W021L2; // #[color] list group divider line color -@color_selectmenu_border_placeholder: W021L2; // #[color] placeholder border color -@color_selectmenu_label_bg : B0733; // #[color] label background color -@color_selectmenu_list_group_stroke: B0733L1; // #[color] list stroke line color -@color_selectmenu_list_item_bg_press : B0733P; // #[color] list item background press color -@color_selectmenu_icon : B0734; // #[color] icon color -@color_selectmenu_font_dim : T12351D; // #[color] list item disabled text color -@color_selectmenu_placeholder_bg : W021L1; // #[color] placeholder background color - -/*************************************************************************** - Navigation -***************************************************************************/ -@color_navigation_text: T042; // #[color] text color -@color_navigation_text_press: T042P; // #[color] text press color -@color_navigation_bg : B011; // #[color] background color -@color_navigation_bar_bg : B012L1; // #[color] list item background color -@color_navigation_bar_icon: B012L3; // #[color] icon color -@color_navigation_tab_divider : B012L4; // #[color] divider line color diff --git a/tau/src/css/profile/mobile/changeable/theme-changeable/theme.font.less b/tau/src/css/profile/mobile/changeable/theme-changeable/theme.font.less index 20ac3f6e..26aa65b5 100644 --- a/tau/src/css/profile/mobile/changeable/theme-changeable/theme.font.less +++ b/tau/src/css/profile/mobile/changeable/theme-changeable/theme.font.less @@ -1,18 +1,3 @@ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ /*************************************************************************** Navigation Bar ***************************************************************************/ diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.button.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.button.less index 065e92a5..329dbe37 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.button.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.button.less @@ -1,3 +1,9 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ + + /* Button colors are defined in config.less /* Edit button size */ diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.collapsible.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.collapsible.less index 15821f92..b87beaba 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.collapsible.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.collapsible.less @@ -1,3 +1,10 @@ +/* + * jQuery Mobile Collapsible CSS + * for Tizen Web UI + */ + + + .ui-collapsible-inset { margin: .5em 0; .ui-collapsible-heading { diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.core.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.core.less index 5fb3f8bb..b602d985 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.core.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.core.less @@ -1,3 +1,8 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ + /* some unsets - more probably needed */ .ui-mobile, .ui-mobile body { height: 100%; font-size: @font_size_default; } @media all and (max-width:359px) { diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.checkboxradio.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.checkboxradio.less index 4cf43d47..0f0b3eba 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.checkboxradio.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.checkboxradio.less @@ -1,3 +1,8 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ + .ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; } //.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 2.313em; } //.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 2.313em; } diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.fieldcontain.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.fieldcontain.less index aadd73a6..a0d7eacd 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.fieldcontain.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.fieldcontain.less @@ -1,18 +1,7 @@ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ .ui-field-contain { padding: 1.5em 0; margin: 0; border-bottom-width: 1px; overflow: visible; } .ui-field-contain:first-child { border-top-width: 0; } @media all { diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.select.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.select.less index 69d4b5e8..22d4876f 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.select.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.forms.select.less @@ -1,3 +1,7 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ .ui-select { display: block; position: relative; } .ui-select select { position: absolute; left: -9999px; top: -9999px; } .ui-select .ui-btn { overflow: hidden; } diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.grids.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.grids.less index 39a3850a..f5245ebe 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.grids.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.grids.less @@ -1,3 +1,8 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ + /* content configurations. */ .ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d { overflow: hidden; } .ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e { margin: 0; padding: 0; border: 0; float: left; min-height:1px;} diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.headerfooter.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.headerfooter.less index 0f823f1b..cb7b2edb 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.headerfooter.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.headerfooter.less @@ -1,3 +1,7 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /* fixed page header & footer configuration */ .ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer { position: absolute; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; } diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.listview.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.listview.less index 41bca7af..7f180f53 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.listview.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.listview.less @@ -1,3 +1,8 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ + /*** less definitions ***/ diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.navbar.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.navbar.less index b4403b2b..f21be367 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.navbar.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.navbar.less @@ -1,3 +1,7 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ .ui-navbar { overflow: hidden; } .ui-navbar ul, .ui-navbar-expanded ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;} .ui-navbar-collapsed ul { float: left; width: 75%; margin-right: -2px; } diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.gallery.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.gallery.less index c5d14c6f..de200814 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.gallery.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.gallery.less @@ -5,11 +5,6 @@ width: 100%; } -.ui-gallery-container { - position: relative; - width: 100%; -} - .ui-gallery-bg { display: none; position: absolute; diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.less index 1338b986..efc7a167 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.less @@ -24,13 +24,6 @@ @z_base_tickernoti: @z_base_maximum - 100; @z_base_slider_popup: @z_base_popup + 10; //DCM-1735 issue fix -.tau-info-theme { - position: absolute; - top: -999px; - left: -999px; -} - - /****************************** Global LESS mixin collection diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.toggleswitch.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.toggleswitch.less index cd623c0d..45580b93 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.toggleswitch.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.toggleswitch.less @@ -1,3 +1,6 @@ + + + div.ui-slider.ui-toggle-switch { position: relative; width: 68 * @unit_base; diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.tokentextarea.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.tokentextarea.less index 35c8569c..0386f033 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.tokentextarea.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.tokentextarea.less @@ -1,3 +1,5 @@ + + .ui-tokentextarea { display : table; outline : none; diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.virtualgridview.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.virtualgridview.less index e8d74398..1e31ca45 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.virtualgridview.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.virtualgridview.less @@ -1,3 +1,8 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ + /*** less definitions ***/ diff --git a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.virtuallistview.less b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.virtuallistview.less index 174a3c08..56d313e5 100644 --- a/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.virtuallistview.less +++ b/tau/src/css/profile/mobile/default/common/jquery.mobile.tizen.virtuallistview.less @@ -1,3 +1,8 @@ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ + /*** less definitions ***/ diff --git a/tau/src/css/profile/mobile/default/mobile.less b/tau/src/css/profile/mobile/default/mobile.less index 7868bb32..8ebcd3bc 100644 --- a/tau/src/css/profile/mobile/default/mobile.less +++ b/tau/src/css/profile/mobile/default/mobile.less @@ -1,5 +1,3 @@ -@import "../../prefixer.less"; -@import "../../prefixer.ext.less"; @import "common/jquery.mobile.tizen.less"; @import "common/jquery.mobile.button.less"; @import "common/jquery.mobile.collapsible.less"; diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_fullscreen_off.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_fullscreen_off.png Binary files differnew file mode 100644 index 00000000..0ae63605 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_fullscreen_off.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_fullscreen_on.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_fullscreen_on.png Binary files differnew file mode 100644 index 00000000..0390c0d2 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_fullscreen_on.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_off.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_off.png Binary files differnew file mode 100644 index 00000000..2cdbe980 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_off.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_off_handler.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_off_handler.png Binary files differnew file mode 100644 index 00000000..5a0fd800 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_off_handler.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_on.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_on.png Binary files differnew file mode 100644 index 00000000..ce76c314 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_on.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_on_handler.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_on_handler.png Binary files differnew file mode 100644 index 00000000..aeb582d4 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_on_handler.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_on_off_bg.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_on_off_bg.png Binary files differnew file mode 100644 index 00000000..8e522203 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_on_off_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_pause.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_pause.png Binary files differnew file mode 100644 index 00000000..034e7007 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_pause.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_play.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_play.png Binary files differnew file mode 100644 index 00000000..812d5cca --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_play.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_bg.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_bg.png Binary files differnew file mode 100644 index 00000000..fd590c7e --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_press.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_press.png Binary files differnew file mode 100644 index 00000000..11fa3b0a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_press_bg.png b/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_press_bg.png Binary files differnew file mode 100644 index 00000000..405592bc --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_button_radio_press_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_check_bg.png b/tau/src/css/profile/mobile/default/theme-black/images/00_check_bg.png Binary files differnew file mode 100644 index 00000000..80d1dc9c --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_check_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_check_press.png b/tau/src/css/profile/mobile/default/theme-black/images/00_check_press.png Binary files differnew file mode 100644 index 00000000..44b86f18 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_check_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_check_press_bg.png b/tau/src/css/profile/mobile/default/theme-black/images/00_check_press_bg.png Binary files differnew file mode 100644 index 00000000..b2688996 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_check_press_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_effect_title_tab_bounce_left.png b/tau/src/css/profile/mobile/default/theme-black/images/00_effect_title_tab_bounce_left.png Binary files differnew file mode 100644 index 00000000..5109e64f --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_effect_title_tab_bounce_left.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_effect_title_tab_bounce_right.png b/tau/src/css/profile/mobile/default/theme-black/images/00_effect_title_tab_bounce_right.png Binary files differnew file mode 100644 index 00000000..973210d4 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_effect_title_tab_bounce_right.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_icon_favorite_off.png b/tau/src/css/profile/mobile/default/theme-black/images/00_icon_favorite_off.png Binary files differnew file mode 100644 index 00000000..143d98ba --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_icon_favorite_off.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_icon_favorite_on.png b/tau/src/css/profile/mobile/default/theme-black/images/00_icon_favorite_on.png Binary files differnew file mode 100644 index 00000000..d96088f6 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_icon_favorite_on.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_bg_receive.9.png b/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_bg_receive.9.png Binary files differnew file mode 100644 index 00000000..d26b30cd --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_bg_receive.9.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_bg_sent.9.png b/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_bg_sent.9.png Binary files differnew file mode 100644 index 00000000..fce4a801 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_bg_sent.9.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_date_bg.png b/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_date_bg.png Binary files differnew file mode 100644 index 00000000..b5e23815 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_messagebubble_date_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_overscrolling_bottom.png b/tau/src/css/profile/mobile/default/theme-black/images/00_overscrolling_bottom.png Binary files differnew file mode 100644 index 00000000..2cee9762 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_overscrolling_bottom.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_overscrolling_top.png b/tau/src/css/profile/mobile/default/theme-black/images/00_overscrolling_top.png Binary files differnew file mode 100644 index 00000000..dd1b91c2 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_overscrolling_top.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_scroll_bar_handler.png b/tau/src/css/profile/mobile/default/theme-black/images/00_scroll_bar_handler.png Binary files differnew file mode 100644 index 00000000..8fd4d4e9 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_scroll_bar_handler.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/00_scroll_bar_handler_hor.png b/tau/src/css/profile/mobile/default/theme-black/images/00_scroll_bar_handler_hor.png Binary files differnew file mode 100644 index 00000000..71687700 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/00_scroll_bar_handler_hor.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/ajax-loader.png b/tau/src/css/profile/mobile/default/theme-black/images/ajax-loader.png Binary files differnew file mode 100644 index 00000000..811a2cdd --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/ajax-loader.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/00_field_btn_clear_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/00_field_btn_clear_press.png Binary files differnew file mode 100644 index 00000000..778108ea --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/00_field_btn_clear_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/00_search_icon.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/00_search_icon.png Binary files differnew file mode 100644 index 00000000..c634b56a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/00_search_icon.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/00_slider_popup_bg.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/00_slider_popup_bg.png Binary files differnew file mode 100644 index 00000000..ef0a56ec --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/00_slider_popup_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_back_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_back_press.png Binary files differnew file mode 100644 index 00000000..76183717 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_back_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_call_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_call_press.png Binary files differnew file mode 100644 index 00000000..5b837fd1 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_call_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_check_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_check_press.png Binary files differnew file mode 100644 index 00000000..8df9a9cf --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_check_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_cancel_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_cancel_press.png Binary files differnew file mode 100644 index 00000000..a5b56394 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_cancel_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_closed_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_closed_press.png Binary files differnew file mode 100644 index 00000000..452209df --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_closed_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_minus.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_minus.png Binary files differnew file mode 100644 index 00000000..0f0170f7 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_minus.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_minus_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_minus_press.png Binary files differnew file mode 100644 index 00000000..0f0170f7 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_minus_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_opened_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_opened_press.png Binary files differnew file mode 100644 index 00000000..5b5cbd04 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_opened_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_send_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_send_press.png Binary files differnew file mode 100644 index 00000000..521b4b22 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_expand_send_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_gear_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_gear_press.png Binary files differnew file mode 100644 index 00000000..8e4b359e --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_gear_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_grid_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_grid_press.png Binary files differnew file mode 100644 index 00000000..ca6b7690 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_grid_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_home_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_home_press.png Binary files differnew file mode 100644 index 00000000..1ba38209 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_home_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_info_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_info_press.png Binary files differnew file mode 100644 index 00000000..1e5d984f --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_info_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_left_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_left_press.png Binary files differnew file mode 100644 index 00000000..b4eca6db --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_left_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_plus.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_plus.png Binary files differnew file mode 100644 index 00000000..12cbe299 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_plus.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_plus_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_plus_press.png Binary files differnew file mode 100644 index 00000000..12cbe299 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_plus_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_refresh_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_refresh_press.png Binary files differnew file mode 100644 index 00000000..33ff934d --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_refresh_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_rename_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_rename_press.png Binary files differnew file mode 100644 index 00000000..e3603b86 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_rename_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_right_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_right_press.png Binary files differnew file mode 100644 index 00000000..659ea765 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_right_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_search.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_search.png Binary files differnew file mode 100644 index 00000000..12f47148 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_search.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_search_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_search_press.png Binary files differnew file mode 100644 index 00000000..12f47148 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_search_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_star.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_star.png Binary files differnew file mode 100644 index 00000000..f6083945 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_star.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_star_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_star_press.png Binary files differnew file mode 100644 index 00000000..f6083945 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_star_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_warning_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_warning_press.png Binary files differnew file mode 100644 index 00000000..4a39960a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_button_warning_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_icon_jump_left_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_icon_jump_left_press.png Binary files differnew file mode 100644 index 00000000..9c299acf --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_icon_jump_left_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_icon_jump_press.png b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_icon_jump_press.png Binary files differnew file mode 100644 index 00000000..3692cbdb --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/controls/button/00_icon_jump_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_Back.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_Back.png Binary files differnew file mode 100644 index 00000000..815a3438 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_Back.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_Back_press.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_Back_press.png Binary files differnew file mode 100644 index 00000000..fcbc3466 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_Back_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_SIP_close_press_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_SIP_close_press_web.png Binary files differnew file mode 100644 index 00000000..5d036a34 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_SIP_close_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_SIP_close_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_SIP_close_web.png Binary files differnew file mode 100644 index 00000000..76f10ec9 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_SIP_close_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_cancel_press_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_cancel_press_web.png Binary files differnew file mode 100644 index 00000000..872ad335 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_cancel_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_cancel_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_cancel_web.png Binary files differnew file mode 100644 index 00000000..3c37e96a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_cancel_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_delete_press_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_delete_press_web.png Binary files differnew file mode 100644 index 00000000..829c8b05 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_delete_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_delete_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_delete_web.png Binary files differnew file mode 100644 index 00000000..d105c7b1 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_delete_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_done_press_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_done_press_web.png Binary files differnew file mode 100644 index 00000000..b56c0f19 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_done_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_done_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_done_web.png Binary files differnew file mode 100644 index 00000000..7b58fc45 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_done_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_edit_press_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_edit_press_web.png Binary files differnew file mode 100644 index 00000000..b52b2b6a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_edit_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_edit_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_edit_web.png Binary files differnew file mode 100644 index 00000000..a56d1f69 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_edit_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_more.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_more.png Binary files differnew file mode 100644 index 00000000..95f17c75 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_more.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_more_press.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_more_press.png Binary files differnew file mode 100644 index 00000000..d4d6951e --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_more_press.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_plus_press_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_plus_press_web.png Binary files differnew file mode 100644 index 00000000..f15fb719 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_plus_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_plus_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_plus_web.png Binary files differnew file mode 100644 index 00000000..d49406f6 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_plus_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_search_press_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_search_press_web.png Binary files differnew file mode 100644 index 00000000..464c5c77 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_search_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_search_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_search_web.png Binary files differnew file mode 100644 index 00000000..7788bece --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_search_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_select_all_press_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_select_all_press_web.png Binary files differnew file mode 100644 index 00000000..32ae22e4 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_select_all_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_select_all_web.png b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_select_all_web.png Binary files differnew file mode 100644 index 00000000..ce4af60f --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/images/page/00_icon_select_all_web.png diff --git a/tau/src/css/profile/mobile/default/theme-black/style.less b/tau/src/css/profile/mobile/default/theme-black/style.less new file mode 100644 index 00000000..90136a0f --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-black/style.less @@ -0,0 +1,3 @@ +@import "./theme.less"; +@import "../mobile.less"; + diff --git a/tau/src/css/profile/mobile/default/theme-black/theme.color.less b/tau/src/css/profile/mobile/default/theme-black/theme.color.less deleted file mode 100644 index bb82622a..00000000 --- a/tau/src/css/profile/mobile/default/theme-black/theme.color.less +++ /dev/null @@ -1,412 +0,0 @@ -/*************************************************************************** - Body -***************************************************************************/ -@color_bg: rgb(8, 8, 8); /* B011 : Main Background color */ -@color_text: rgb(250, 250, 250); /* B012 : Main font color */ - -/*************************************************************************** - Naviframe -***************************************************************************/ -@color_bar_title_text : rgba(250, 250, 250, 1); /* B042 : title text */ -@color_bar_title_button_text : rgba(250, 250, 250, 1); /* B052L4 : Title text button */ -@color_bar_title_button_text_press : rgba(59, 115, 182, 1); /* B052L5 : Title text button press */ -@color_bar_title_shadow : rgba(8, 8, 8, 0.75); -@color_bar_btn_press : rgba(49, 63, 102, 1); /* B052L1P : Title text button press bg */ -@color_bar_divider_line : rgba(131, 140, 163, 1); /* 00_divider_line.9.png */ -@color_bar_naviframe_bg : rgba(49, 63, 102, 1); -@color_bar_tabbar_bg : rgba(49, 63, 102, 1); -@color_bar_toolbar_bg : rgba(70, 76, 94, 1); /* B0515L1: Toolbar bg */ -@color_bar_toolbar_button_text : rgba(250, 250, 250, 1); /* B052L4 : Toolbar button normal */ -@color_bar_toolbar_button_text_press : rgba(250, 250, 250, 1); /* B052L4P : Toolbar button pressed */ -@color_bar_toolbar_divider : rgba(107, 112, 126, 1); /* B0221L3: footer divider */ -@color_bar_navbar_press : rgba(42, 57, 172, 1); /* B0511P : Navigation bar bg press */ -@color_bar_body_border : rgba(42, 42, 42, 1); - -/*************************************************************************** - Tabbar -***************************************************************************/ -@color_tabbar_btn_tab_press : -webkit-linear-gradient(top, rgba(8, 8, 8, 1) 0%, rgba(32, 35, 39,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */ -@color_tabbar_btn_pressed : rgba(51, 67, 178, 1); /* B052L6P */ -@color_tabbar_border_active : rgba(93, 131, 255, 1); -@color_tabbar_btn_normal : rgba(240, 240, 240, 1); /* B052L6 */ -@color_tabbar_footer_btn_press : rgba(42, 57, 172, 1); - -/*************************************************************************** - List -***************************************************************************/ -@color_list_bg: rgba(8, 8, 8, 1); /* B0211 */ -@color_list_press : rgba(33, 49, 99, 1); /* B041 */ -@color_list_border_bottom: rgba(64, 64, 64, 1); /* B0223 */ -@color_list_main_text_focus: rgba(250, 250, 250, 1); -@color_list_main_text_unfocus: rgba(250, 250, 250, 1); -@color_list_sub_text_default: rgba(110, 111, 118, 1); - -@color_list_divider_expand_div : rgba(8, 8, 8, 0.5); -@color_list_divider_bg : rgba(8, 8, 8, 1); /* W021L1 */ -@color_list_divider_line : rgba(66, 87, 144, 1); /* W021L2 */ -@color_list_divider_text : rgba(66, 87, 144, 1); -@color_list_divider_bg_press : rgba(43, 58, 175, 1); -@color_list_divider_text_press : rgba(250, 250, 250, 1); - -@color_list_swipe_bg : rgba(23, 25, 28, 1); /* B0212 */ - -@color_list_dialogue_bg : rgba(17, 19, 27, 1); -@color_dialogue_main_text: rgba(93, 131, 255, 1); /* F011L5 */ -@color_dialogue_border_right: rgba(98, 105, 127, 0.3); -@color_dialogue_divider_bg : rgba(8, 8, 8, 1); - -@color_list_expanded_bg : rgba(220, 218, 211, 1); - -@color_list_editfield : rgba(32, 36, 50, 1); /* F011L1 */ -@color_editfield_focus_border : rgba(58, 114, 255, 1); - -@color_checklist_btn_bg : rgba(8, 8, 8, 1); - -@color_list_bubble_sent_text: rgb(8, 8, 8); /* W051 */ -@color_list_bubble_receive_text: rgb(8, 8, 8); /* W051 */ -@color_list_bubble_sos_text: rgb(209, 0, 0); /* F011L15 */ -@color_list_bubble_date_text: rgb(104, 104, 104); /* F011L18 */ -@color_list_bubble_date_bg: rgba(225, 225, 225, 0); -@color_list_bubble_time_sent_text: rgb(110, 111, 118); /* F011L16 */ -@color_list_bubble_time_receive_text: rgb(110, 111, 118); /* F011L17 */ -@color_list_bubble_time_sos_text: rgb(209, 0, 0); /* F011L15 */ -@color_list_bubble_name_text: rgb(110, 111, 118); -@color_list_bubble_help_text: rgb(110, 111, 118); -@color_list_bubble_link_text: rgb(34, 129, 157); - -@list-font-size-main: 22 * @unit_base; -@list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group - -@list-smallicon-size: 22 * @unit_base; -@list-li-padding-horizontal: 8 * @unit_base; - -@list-bigicon-size2: 72 * @unit_base; - -/*************************************************************************** - Fast Scroll -***************************************************************************/ -@color_fastscroll_rollover_bg: rgba(33, 36, 40, 1); /* B0723 : 00_fast_scroll_rollover_bg.9.png */ -@color_fastscroll_rollover_down_border: rgba(79, 102, 167, 1); -@color_fastscroll_rollover_text: rgba(160, 159, 154, 1); /* B0721 : Rollover text */ -@color_fastscroll_rollover_text_press: rgba(93, 131, 255, 1); -@color_fastscroll_rollover_left_border: rgba(64, 64, 64, 1); -@color_fastscroll_rollover_left_border_press : rgba(93, 131, 255, 1); -@color_fastscroll_popup_bg: rgba(43, 58, 175, 1); /* B0731 : 00_fast_scroll_popup_bg.png */ -@color_fastscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */ -@color_fastscroll_popup_border: rgba(19, 26, 79, 1); -@color_fastscroll_default_border: rgba(64, 64, 64, 1); - - -/*************************************************************************** - SearchBar(forms.textinput) -***************************************************************************/ -@color_searchbar_bg : rgba(29, 38, 60, 1); -@color_searchbar_default_text : rgba(93, 97, 118, 1); /* Search default text */ -@color_searchbar_input_field_bg : rgba(8, 8, 8, 1); -@color_searchbar_border : rgba(63, 70, 88, 1); -@color_searchbar_border_focus : rgba(58, 114, 255, 1); -@color_searchbar_divider : rgba(59, 69, 98, 1); -@color_searchbar_button_shadow0 : rgba(122, 125, 134, 1); -@color_searchbar_button_shadow1 : rgba(34, 34, 34, 1); - - -/*************************************************************************** - Popup -***************************************************************************/ -@font_size_popup_info_style: 24 * @unit_base; -@color_popup_text_bg: rgba(42, 45, 48, 1); /* B061L1 : Popop info */ -@color_border_popup: rgba(98, 105, 127, 1); - - -/*************************************************************************** - Button(connected with other winset) -***************************************************************************/ - -@color_button_text_black: rgb(186, 186, 186); -@color_button_text_shadow: 0px 1px rgb(17, 18, 20); - -@color_button_EditText: rgb(249, 249, 249); -@color_button_EditTextPress: rgb(61, 61, 61); - -@color_button_text_normal: rgb(250, 250, 250); -@color_button_text_press: rgb(255, 255, 255); -@color_button_text_white: rgb(249, 249, 249); - -@color_button_normal: rgb(68, 70, 78); -@color_button_normal_webkit: -webkit-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51)); -@color_button_normal_moz: -moz-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51)); -@color_button_normal_o: -o-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51)); -@color_button_normal_ms: -ms-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51)); -@color_button_press: rgb(39, 54, 164); - -@color_button_warning: rgb(219, 0, 0); -@color_button_warning_press: rgb(161, 8, 8); - -@color_button_inner: rgb(60, 64, 68); -@color_button_inner_webkit: -webkit-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72)); -@color_button_inner_moz: -moz-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72)); -@color_button_inner_o: -o-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72)); -@color_button_inner_ms: -ms-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72)); - -@button_border_color: rgba( 133, 131, 126, 1); -@button_shadow_outer: 1px 1px 2px rgba(19, 20, 23, 1); -@button_shadow_inner: inset 0px 1px 1px rgba(122, 125, 134, 1); -@button_shadow_warning_inner: inset 0px 1px 1px rgba(255, 255, 255, 1); - -@button_press_shadow_inner: inset 0px 1px 1px rgba(22, 29, 95, 1); - -@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_inner_border: rgba(8, 8, 8, 1); - -.LESSbutton_box_style{ - color: @color_button_text_normal; -} - -.LESSbutton_up_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; -} - -.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; - border: 1px solid; - border-color: rgba(42, 44, 47, 1); - .LESSbox-shadow-line( @button_shadow_outer ); -} -.LESSbutton_inner_box_style{ - background: @color_button_inner; - background: @color_button_inner_webkit; - background: @color_button_inner_ms; - background: @color_button_inner_o; - background: @color_button_inner_moz; - .LESSbox-shadow-line( @button_shadow_inner ); -} -.LESSbutton_inner_pressstyle{ - color: @color_button_text_press; -} - -.LESSbutton_text1_style{ - font-family: @font_family; - font-weight: normal; - font-size: 1.0rem; - font-style:normal; - color: @color_button_text_black; -} - -.LESSbutton_hover_style{ - color: @color_button_text_normal; -} - -.LESSbutton_down_style{ - /* background: @color_button_press;*/ - 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_ctxpopup_text: rgb(255, 255, 255); -@color_ctxpopup_background: rgb(29, 38, 60); -@color_ctxpopup_border_left: rgb(98, 102, 117); -@color_ctxpopup_border_right: rgb(98, 102, 117); -@color_ctxpopup_border_top: rgb(98, 102, 117); -@color_ctxpopup_border_bottom: rgb(29, 38, 60); - -@color_ctxbutton_press: rgb(43, 58, 175); /* B044 */ - -@color_ctxpopup_timepicker_text: rgba( 255, 255, 255, 0.7 ); -@color_ctxpopup_timepicker_text_focus: rgba( 255, 255, 255, 1 ); - -@color_ctxpopup_scrollbar_bg : rgba(71, 72, 74, 1); -@color_ctxpopup_scrollbar_border : rgba(8, 8, 8, 1); - -/*************************************************************************** - Scrollview -***************************************************************************/ -@color_scrollbar: rgb(57, 59, 65); -@color_scrollview_indicator_start: rgb(186,186,186); -@color_scrollview_indicator_end: rgb(32,35,39); -@color_scrollbar_thumb_shadow: rgba(8, 8, 8, 50); - -/*************************************************************************** - Date Time picker -***************************************************************************/ -@color_timepicker_selector_color: rgb(37, 50, 150); -@color_timepicker_divider_color1: rgb(39, 40, 43); /* B0224 : Dialogue group List Line */ -@color_timepicker_divider_color2: rgb(64, 64, 64); /* B0222 : Line divider */ -@font_size_datetime_main_text: 17 * @unit_base; -@font_size_datetime_sub_text: 16 * @unit_base; - -/*************************************************************************** - SegmentControl -***************************************************************************/ -@color_segmentcontrol_Seg_text : rgba(199, 199, 199, 1); /* B052L4 : Title text button */ -@color_segmentcontrol_Seg_text_pressed : rgb(59,119,150); - -/*************************************************************************** - Popup -***************************************************************************/ -@color_popup_bg: rgba(29, 38, 60, 1); -@color_popup_dim: rgb(8, 8, 8); -@color_popup_center_progressbar_title: rgba(153, 153, 153, 1); -@color_popup_title_bg: rgba(73, 87, 123, 1); /* popup_title_bg.png */ -@color_popup_title_text: rgba(250, 250, 250, 1); /* B063L9 : Basic Style_title */ - -@color_popup_button_bg: rgba(150, 154, 156, 1); -@color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/ -@color_popup_text_font: rgba(249, 249, 249, 1); - -@color_popup_buttonbg: rgb(238, 238, 238); -@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(238, 238, 238)), to(rgb(225, 225, 225))); -@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(238, 238, 238), rgb(225, 225, 225)); -@color_popup_buttonbg_ms: -ms-linear-gradient(top, rgb(238, 238, 238), rgb(225, 225, 225)); -@color_popup_buttonbg_o: -o-linear-gradient(top, rgb(238, 238, 238), rgb(225, 225, 225)); -@color_popup_buttontext: rgb(8, 8, 8); -@color_popup_buttonbg_over: rgb(94, 136, 163); -@color_popup_button_border: rgb(125, 126, 130); - -@color_popup_buttonbg_press: rgb(39, 51, 159); -@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(39, 51, 159)), to(rgb(42, 57, 172))); -@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(39, 51, 159), rgb(42, 57, 172)); -@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(39, 51, 159), rgb(42, 57, 172)); -@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(39, 151, 159), rgb(42, 57, 172)); - -@color_popup_scroller_bg: rgba(8, 8, 8, 1); - - -@font_size_popup_basic_style_title: 24 * @unit_base; //1.1875rem; /* 38px */ -@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */ -@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */ -@font_size_popup_button_text: 18 * @unit_base; //1.0rem; /* 18px */ - -.LESSpopup_button_style{ - 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; -} - -.LESSpopup_button_hover_style{ - background: @color_popup_buttonbg_over; -} - -.LESSpopup_button_press_style{ - 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; - color: rgb(250, 250, 250); -} - -.LESSpopup_padding_style{ -} - -/*************************************************************************** - Tickernoti -***************************************************************************/ -@color_ticker_bg: rgb(34, 34, 34); /* B061L5 */ -@color_ticker_text1: rgb(250, 250, 250); -@color_ticker_text2: rgb(255, 255, 255); - -/*************************************************************************** - Smallpopup -***************************************************************************/ -@color_smallpopup_bg: rgba(43, 58, 175, 1); -@color_smallpopup_text: rgb(250, 250, 250); - -/*************************************************************************** - Slider -***************************************************************************/ -@color_slider_handle_text: rgb(250, 250, 250); -@color_slider_handle_text_press: rgb(250, 250, 250); -@color_slider_popup_text: rgb(76, 81, 88); -@color_slider_popup_bg: rgb(238, 238, 238); -@color_slider_left_text: rgb(186, 186, 186); -@color_slider_right_text: rgb(186, 186, 186); -@color_slider_label_text: rgb(255, 255, 255); - - -/*************************************************************************** - Progress -***************************************************************************/ -@color_progress_bar: rgb(51, 67, 83); -@color_progress_value: rgb(65, 91, 254); -@color_progress_shadow: rgb(116, 113, 127); -@color_progress_value_shadow0: rgb(38, 53, 146); -@color_progress_value_shadow1: rgb(98, 127, 203); -@color_progress_shadow0: rgb(49, 49, 56); -@color_progress_shadow1: rgb(116, 113, 127); - - -/*************************************************************************** - Handler -***************************************************************************/ -@color_scrollview_handler_bg : rgb(57, 59, 65); -@color_scrollview_handler_shadow : rgba(8, 8, 8, 0.4); - - -/*************************************************************************** - multimediaview -***************************************************************************/ -@color_multimediaview_bg : rgb(8, 8, 8); -@color_multimediaview_control_bg : rgba(8, 8, 8, 0.8); -@color_multimediaview_timestamp_text : rgb(104, 144, 255); -@color_multimediaview_duration_text : rgb(110, 111, 118); -@color_multimediaview_bar_gray : rgb(85, 88, 97); -@color_multimediaview_bar_active : rgb(65, 91, 254); -@color_multimediaview_bar_handle : rgb(60, 64, 68); -@color_multimediaview_bar_handle_shadow : inset 0px 1px 1px rgba(122, 125, 134, 1); -@color_multimediaview_bar_handle_shadow_press : inset 0px -1px 1px rgba(122, 125, 134, 1); - -.LESSmultimediaview_bar_active_style{ - background-color : @color_multimediaview_bar_active; - box-shadow: 0px -1px 1px @color_progress_shadow inset; -} - -.LESSmultimediaview_bar_handle_style{ - background-color : @color_multimediaview_bar_handle; - .LESSbox-shadow-line( @color_multimediaview_bar_handle_shadow ); -} - -.LESSmultimediaview_bar_handle_press_style{ - background-color : @color_button_press; - .LESSbox-shadow-line( @color_multimediaview_bar_handle_shadow_press ); -} - - -/*************************************************************************** - tokentextarea -***************************************************************************/ -@color_tokentextarea_bg : rgb(29, 38, 60); -@color_tokentextarea_block_text : rgb(250, 250, 250); /* Contact button text */ -@color_tokentextarea_block_bg : rgb(82, 87, 103); /* W0711 : Contact button bg normal */ -@color_tokentextarea_press_bg : rgb(43, 58, 175); /* W0713 : Contact button bg press */ -@color_tokentextarea_block_border : rgb(108, 116, 131); -@color_tokentextarea_press_border : rgb(89, 94, 106); -@color_tokentextarea_input_text : rgb(250, 250, 250); -@color_tokentextarea_label_text : rgb(250, 250, 250); /* Text Contact style */ - -/*************************************************************************** - Splitview -***************************************************************************/ -@color_splitview_spliter_bar : rgb(52, 55, 57); /* W131 */ -@color_splitview_spliter_bar_active : rgb(43, 58, 175); /* W132 */ -@color_splitview_spliter_border : rgb(70, 73, 78); diff --git a/tau/src/css/profile/mobile/default/theme-black/theme.less b/tau/src/css/profile/mobile/default/theme-black/theme.less index 9879d546..bb82622a 100644 --- a/tau/src/css/profile/mobile/default/theme-black/theme.less +++ b/tau/src/css/profile/mobile/default/theme-black/theme.less @@ -1,6 +1,412 @@ -@import "./theme.color.less"; -@import "../mobile.less"; +/*************************************************************************** + Body +***************************************************************************/ +@color_bg: rgb(8, 8, 8); /* B011 : Main Background color */ +@color_text: rgb(250, 250, 250); /* B012 : Main font color */ -.tau-info-theme:after { - content: "black"; +/*************************************************************************** + Naviframe +***************************************************************************/ +@color_bar_title_text : rgba(250, 250, 250, 1); /* B042 : title text */ +@color_bar_title_button_text : rgba(250, 250, 250, 1); /* B052L4 : Title text button */ +@color_bar_title_button_text_press : rgba(59, 115, 182, 1); /* B052L5 : Title text button press */ +@color_bar_title_shadow : rgba(8, 8, 8, 0.75); +@color_bar_btn_press : rgba(49, 63, 102, 1); /* B052L1P : Title text button press bg */ +@color_bar_divider_line : rgba(131, 140, 163, 1); /* 00_divider_line.9.png */ +@color_bar_naviframe_bg : rgba(49, 63, 102, 1); +@color_bar_tabbar_bg : rgba(49, 63, 102, 1); +@color_bar_toolbar_bg : rgba(70, 76, 94, 1); /* B0515L1: Toolbar bg */ +@color_bar_toolbar_button_text : rgba(250, 250, 250, 1); /* B052L4 : Toolbar button normal */ +@color_bar_toolbar_button_text_press : rgba(250, 250, 250, 1); /* B052L4P : Toolbar button pressed */ +@color_bar_toolbar_divider : rgba(107, 112, 126, 1); /* B0221L3: footer divider */ +@color_bar_navbar_press : rgba(42, 57, 172, 1); /* B0511P : Navigation bar bg press */ +@color_bar_body_border : rgba(42, 42, 42, 1); + +/*************************************************************************** + Tabbar +***************************************************************************/ +@color_tabbar_btn_tab_press : -webkit-linear-gradient(top, rgba(8, 8, 8, 1) 0%, rgba(32, 35, 39,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */ +@color_tabbar_btn_pressed : rgba(51, 67, 178, 1); /* B052L6P */ +@color_tabbar_border_active : rgba(93, 131, 255, 1); +@color_tabbar_btn_normal : rgba(240, 240, 240, 1); /* B052L6 */ +@color_tabbar_footer_btn_press : rgba(42, 57, 172, 1); + +/*************************************************************************** + List +***************************************************************************/ +@color_list_bg: rgba(8, 8, 8, 1); /* B0211 */ +@color_list_press : rgba(33, 49, 99, 1); /* B041 */ +@color_list_border_bottom: rgba(64, 64, 64, 1); /* B0223 */ +@color_list_main_text_focus: rgba(250, 250, 250, 1); +@color_list_main_text_unfocus: rgba(250, 250, 250, 1); +@color_list_sub_text_default: rgba(110, 111, 118, 1); + +@color_list_divider_expand_div : rgba(8, 8, 8, 0.5); +@color_list_divider_bg : rgba(8, 8, 8, 1); /* W021L1 */ +@color_list_divider_line : rgba(66, 87, 144, 1); /* W021L2 */ +@color_list_divider_text : rgba(66, 87, 144, 1); +@color_list_divider_bg_press : rgba(43, 58, 175, 1); +@color_list_divider_text_press : rgba(250, 250, 250, 1); + +@color_list_swipe_bg : rgba(23, 25, 28, 1); /* B0212 */ + +@color_list_dialogue_bg : rgba(17, 19, 27, 1); +@color_dialogue_main_text: rgba(93, 131, 255, 1); /* F011L5 */ +@color_dialogue_border_right: rgba(98, 105, 127, 0.3); +@color_dialogue_divider_bg : rgba(8, 8, 8, 1); + +@color_list_expanded_bg : rgba(220, 218, 211, 1); + +@color_list_editfield : rgba(32, 36, 50, 1); /* F011L1 */ +@color_editfield_focus_border : rgba(58, 114, 255, 1); + +@color_checklist_btn_bg : rgba(8, 8, 8, 1); + +@color_list_bubble_sent_text: rgb(8, 8, 8); /* W051 */ +@color_list_bubble_receive_text: rgb(8, 8, 8); /* W051 */ +@color_list_bubble_sos_text: rgb(209, 0, 0); /* F011L15 */ +@color_list_bubble_date_text: rgb(104, 104, 104); /* F011L18 */ +@color_list_bubble_date_bg: rgba(225, 225, 225, 0); +@color_list_bubble_time_sent_text: rgb(110, 111, 118); /* F011L16 */ +@color_list_bubble_time_receive_text: rgb(110, 111, 118); /* F011L17 */ +@color_list_bubble_time_sos_text: rgb(209, 0, 0); /* F011L15 */ +@color_list_bubble_name_text: rgb(110, 111, 118); +@color_list_bubble_help_text: rgb(110, 111, 118); +@color_list_bubble_link_text: rgb(34, 129, 157); + +@list-font-size-main: 22 * @unit_base; +@list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group + +@list-smallicon-size: 22 * @unit_base; +@list-li-padding-horizontal: 8 * @unit_base; + +@list-bigicon-size2: 72 * @unit_base; + +/*************************************************************************** + Fast Scroll +***************************************************************************/ +@color_fastscroll_rollover_bg: rgba(33, 36, 40, 1); /* B0723 : 00_fast_scroll_rollover_bg.9.png */ +@color_fastscroll_rollover_down_border: rgba(79, 102, 167, 1); +@color_fastscroll_rollover_text: rgba(160, 159, 154, 1); /* B0721 : Rollover text */ +@color_fastscroll_rollover_text_press: rgba(93, 131, 255, 1); +@color_fastscroll_rollover_left_border: rgba(64, 64, 64, 1); +@color_fastscroll_rollover_left_border_press : rgba(93, 131, 255, 1); +@color_fastscroll_popup_bg: rgba(43, 58, 175, 1); /* B0731 : 00_fast_scroll_popup_bg.png */ +@color_fastscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */ +@color_fastscroll_popup_border: rgba(19, 26, 79, 1); +@color_fastscroll_default_border: rgba(64, 64, 64, 1); + + +/*************************************************************************** + SearchBar(forms.textinput) +***************************************************************************/ +@color_searchbar_bg : rgba(29, 38, 60, 1); +@color_searchbar_default_text : rgba(93, 97, 118, 1); /* Search default text */ +@color_searchbar_input_field_bg : rgba(8, 8, 8, 1); +@color_searchbar_border : rgba(63, 70, 88, 1); +@color_searchbar_border_focus : rgba(58, 114, 255, 1); +@color_searchbar_divider : rgba(59, 69, 98, 1); +@color_searchbar_button_shadow0 : rgba(122, 125, 134, 1); +@color_searchbar_button_shadow1 : rgba(34, 34, 34, 1); + + +/*************************************************************************** + Popup +***************************************************************************/ +@font_size_popup_info_style: 24 * @unit_base; +@color_popup_text_bg: rgba(42, 45, 48, 1); /* B061L1 : Popop info */ +@color_border_popup: rgba(98, 105, 127, 1); + + +/*************************************************************************** + Button(connected with other winset) +***************************************************************************/ + +@color_button_text_black: rgb(186, 186, 186); +@color_button_text_shadow: 0px 1px rgb(17, 18, 20); + +@color_button_EditText: rgb(249, 249, 249); +@color_button_EditTextPress: rgb(61, 61, 61); + +@color_button_text_normal: rgb(250, 250, 250); +@color_button_text_press: rgb(255, 255, 255); +@color_button_text_white: rgb(249, 249, 249); + +@color_button_normal: rgb(68, 70, 78); +@color_button_normal_webkit: -webkit-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51)); +@color_button_normal_moz: -moz-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51)); +@color_button_normal_o: -o-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51)); +@color_button_normal_ms: -ms-linear-gradient(top, rgb(53, 57, 61), rgb(45, 48, 51)); +@color_button_press: rgb(39, 54, 164); + +@color_button_warning: rgb(219, 0, 0); +@color_button_warning_press: rgb(161, 8, 8); + +@color_button_inner: rgb(60, 64, 68); +@color_button_inner_webkit: -webkit-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72)); +@color_button_inner_moz: -moz-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72)); +@color_button_inner_o: -o-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72)); +@color_button_inner_ms: -ms-linear-gradient(top, rgb(75, 77, 86), rgb(63, 65, 72)); + +@button_border_color: rgba( 133, 131, 126, 1); +@button_shadow_outer: 1px 1px 2px rgba(19, 20, 23, 1); +@button_shadow_inner: inset 0px 1px 1px rgba(122, 125, 134, 1); +@button_shadow_warning_inner: inset 0px 1px 1px rgba(255, 255, 255, 1); + +@button_press_shadow_inner: inset 0px 1px 1px rgba(22, 29, 95, 1); + +@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_inner_border: rgba(8, 8, 8, 1); + +.LESSbutton_box_style{ + color: @color_button_text_normal; } + +.LESSbutton_up_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; +} + +.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; + border: 1px solid; + border-color: rgba(42, 44, 47, 1); + .LESSbox-shadow-line( @button_shadow_outer ); +} +.LESSbutton_inner_box_style{ + background: @color_button_inner; + background: @color_button_inner_webkit; + background: @color_button_inner_ms; + background: @color_button_inner_o; + background: @color_button_inner_moz; + .LESSbox-shadow-line( @button_shadow_inner ); +} +.LESSbutton_inner_pressstyle{ + color: @color_button_text_press; +} + +.LESSbutton_text1_style{ + font-family: @font_family; + font-weight: normal; + font-size: 1.0rem; + font-style:normal; + color: @color_button_text_black; +} + +.LESSbutton_hover_style{ + color: @color_button_text_normal; +} + +.LESSbutton_down_style{ + /* background: @color_button_press;*/ + 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_ctxpopup_text: rgb(255, 255, 255); +@color_ctxpopup_background: rgb(29, 38, 60); +@color_ctxpopup_border_left: rgb(98, 102, 117); +@color_ctxpopup_border_right: rgb(98, 102, 117); +@color_ctxpopup_border_top: rgb(98, 102, 117); +@color_ctxpopup_border_bottom: rgb(29, 38, 60); + +@color_ctxbutton_press: rgb(43, 58, 175); /* B044 */ + +@color_ctxpopup_timepicker_text: rgba( 255, 255, 255, 0.7 ); +@color_ctxpopup_timepicker_text_focus: rgba( 255, 255, 255, 1 ); + +@color_ctxpopup_scrollbar_bg : rgba(71, 72, 74, 1); +@color_ctxpopup_scrollbar_border : rgba(8, 8, 8, 1); + +/*************************************************************************** + Scrollview +***************************************************************************/ +@color_scrollbar: rgb(57, 59, 65); +@color_scrollview_indicator_start: rgb(186,186,186); +@color_scrollview_indicator_end: rgb(32,35,39); +@color_scrollbar_thumb_shadow: rgba(8, 8, 8, 50); + +/*************************************************************************** + Date Time picker +***************************************************************************/ +@color_timepicker_selector_color: rgb(37, 50, 150); +@color_timepicker_divider_color1: rgb(39, 40, 43); /* B0224 : Dialogue group List Line */ +@color_timepicker_divider_color2: rgb(64, 64, 64); /* B0222 : Line divider */ +@font_size_datetime_main_text: 17 * @unit_base; +@font_size_datetime_sub_text: 16 * @unit_base; + +/*************************************************************************** + SegmentControl +***************************************************************************/ +@color_segmentcontrol_Seg_text : rgba(199, 199, 199, 1); /* B052L4 : Title text button */ +@color_segmentcontrol_Seg_text_pressed : rgb(59,119,150); + +/*************************************************************************** + Popup +***************************************************************************/ +@color_popup_bg: rgba(29, 38, 60, 1); +@color_popup_dim: rgb(8, 8, 8); +@color_popup_center_progressbar_title: rgba(153, 153, 153, 1); +@color_popup_title_bg: rgba(73, 87, 123, 1); /* popup_title_bg.png */ +@color_popup_title_text: rgba(250, 250, 250, 1); /* B063L9 : Basic Style_title */ + +@color_popup_button_bg: rgba(150, 154, 156, 1); +@color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/ +@color_popup_text_font: rgba(249, 249, 249, 1); + +@color_popup_buttonbg: rgb(238, 238, 238); +@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(238, 238, 238)), to(rgb(225, 225, 225))); +@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(238, 238, 238), rgb(225, 225, 225)); +@color_popup_buttonbg_ms: -ms-linear-gradient(top, rgb(238, 238, 238), rgb(225, 225, 225)); +@color_popup_buttonbg_o: -o-linear-gradient(top, rgb(238, 238, 238), rgb(225, 225, 225)); +@color_popup_buttontext: rgb(8, 8, 8); +@color_popup_buttonbg_over: rgb(94, 136, 163); +@color_popup_button_border: rgb(125, 126, 130); + +@color_popup_buttonbg_press: rgb(39, 51, 159); +@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(39, 51, 159)), to(rgb(42, 57, 172))); +@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(39, 51, 159), rgb(42, 57, 172)); +@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(39, 51, 159), rgb(42, 57, 172)); +@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(39, 151, 159), rgb(42, 57, 172)); + +@color_popup_scroller_bg: rgba(8, 8, 8, 1); + + +@font_size_popup_basic_style_title: 24 * @unit_base; //1.1875rem; /* 38px */ +@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */ +@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */ +@font_size_popup_button_text: 18 * @unit_base; //1.0rem; /* 18px */ + +.LESSpopup_button_style{ + 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; +} + +.LESSpopup_button_hover_style{ + background: @color_popup_buttonbg_over; +} + +.LESSpopup_button_press_style{ + 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; + color: rgb(250, 250, 250); +} + +.LESSpopup_padding_style{ +} + +/*************************************************************************** + Tickernoti +***************************************************************************/ +@color_ticker_bg: rgb(34, 34, 34); /* B061L5 */ +@color_ticker_text1: rgb(250, 250, 250); +@color_ticker_text2: rgb(255, 255, 255); + +/*************************************************************************** + Smallpopup +***************************************************************************/ +@color_smallpopup_bg: rgba(43, 58, 175, 1); +@color_smallpopup_text: rgb(250, 250, 250); + +/*************************************************************************** + Slider +***************************************************************************/ +@color_slider_handle_text: rgb(250, 250, 250); +@color_slider_handle_text_press: rgb(250, 250, 250); +@color_slider_popup_text: rgb(76, 81, 88); +@color_slider_popup_bg: rgb(238, 238, 238); +@color_slider_left_text: rgb(186, 186, 186); +@color_slider_right_text: rgb(186, 186, 186); +@color_slider_label_text: rgb(255, 255, 255); + + +/*************************************************************************** + Progress +***************************************************************************/ +@color_progress_bar: rgb(51, 67, 83); +@color_progress_value: rgb(65, 91, 254); +@color_progress_shadow: rgb(116, 113, 127); +@color_progress_value_shadow0: rgb(38, 53, 146); +@color_progress_value_shadow1: rgb(98, 127, 203); +@color_progress_shadow0: rgb(49, 49, 56); +@color_progress_shadow1: rgb(116, 113, 127); + + +/*************************************************************************** + Handler +***************************************************************************/ +@color_scrollview_handler_bg : rgb(57, 59, 65); +@color_scrollview_handler_shadow : rgba(8, 8, 8, 0.4); + + +/*************************************************************************** + multimediaview +***************************************************************************/ +@color_multimediaview_bg : rgb(8, 8, 8); +@color_multimediaview_control_bg : rgba(8, 8, 8, 0.8); +@color_multimediaview_timestamp_text : rgb(104, 144, 255); +@color_multimediaview_duration_text : rgb(110, 111, 118); +@color_multimediaview_bar_gray : rgb(85, 88, 97); +@color_multimediaview_bar_active : rgb(65, 91, 254); +@color_multimediaview_bar_handle : rgb(60, 64, 68); +@color_multimediaview_bar_handle_shadow : inset 0px 1px 1px rgba(122, 125, 134, 1); +@color_multimediaview_bar_handle_shadow_press : inset 0px -1px 1px rgba(122, 125, 134, 1); + +.LESSmultimediaview_bar_active_style{ + background-color : @color_multimediaview_bar_active; + box-shadow: 0px -1px 1px @color_progress_shadow inset; +} + +.LESSmultimediaview_bar_handle_style{ + background-color : @color_multimediaview_bar_handle; + .LESSbox-shadow-line( @color_multimediaview_bar_handle_shadow ); +} + +.LESSmultimediaview_bar_handle_press_style{ + background-color : @color_button_press; + .LESSbox-shadow-line( @color_multimediaview_bar_handle_shadow_press ); +} + + +/*************************************************************************** + tokentextarea +***************************************************************************/ +@color_tokentextarea_bg : rgb(29, 38, 60); +@color_tokentextarea_block_text : rgb(250, 250, 250); /* Contact button text */ +@color_tokentextarea_block_bg : rgb(82, 87, 103); /* W0711 : Contact button bg normal */ +@color_tokentextarea_press_bg : rgb(43, 58, 175); /* W0713 : Contact button bg press */ +@color_tokentextarea_block_border : rgb(108, 116, 131); +@color_tokentextarea_press_border : rgb(89, 94, 106); +@color_tokentextarea_input_text : rgb(250, 250, 250); +@color_tokentextarea_label_text : rgb(250, 250, 250); /* Text Contact style */ + +/*************************************************************************** + Splitview +***************************************************************************/ +@color_splitview_spliter_bar : rgb(52, 55, 57); /* W131 */ +@color_splitview_spliter_bar_active : rgb(43, 58, 175); /* W132 */ +@color_splitview_spliter_border : rgb(70, 73, 78); diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_fullscreen_off.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_fullscreen_off.png Binary files differnew file mode 100644 index 00000000..1afb045d --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_fullscreen_off.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_fullscreen_on.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_fullscreen_on.png Binary files differnew file mode 100644 index 00000000..fc1d5167 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_fullscreen_on.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_off.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_off.png Binary files differnew file mode 100644 index 00000000..df99cc7b --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_off.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_off_handler.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_off_handler.png Binary files differnew file mode 100644 index 00000000..5a0fd800 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_off_handler.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_on.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_on.png Binary files differnew file mode 100644 index 00000000..f3f9387b --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_on.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_on_handler.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_on_handler.png Binary files differnew file mode 100644 index 00000000..e6356e6b --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_on_handler.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_on_off_bg.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_on_off_bg.png Binary files differnew file mode 100644 index 00000000..3b8b0415 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_on_off_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_pause.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_pause.png Binary files differnew file mode 100644 index 00000000..e32a1fba --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_pause.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_play.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_play.png Binary files differnew file mode 100644 index 00000000..be365113 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_play.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_bg.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_bg.png Binary files differnew file mode 100644 index 00000000..5ce6a7ab --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_press.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_press.png Binary files differnew file mode 100644 index 00000000..47a5f307 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_press_bg.png b/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_press_bg.png Binary files differnew file mode 100644 index 00000000..6be258aa --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_button_radio_press_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_check_bg.png b/tau/src/css/profile/mobile/default/theme-white/images/00_check_bg.png Binary files differnew file mode 100644 index 00000000..6f439703 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_check_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_check_press.png b/tau/src/css/profile/mobile/default/theme-white/images/00_check_press.png Binary files differnew file mode 100644 index 00000000..166ab4a9 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_check_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_check_press_bg.png b/tau/src/css/profile/mobile/default/theme-white/images/00_check_press_bg.png Binary files differnew file mode 100644 index 00000000..cda624f6 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_check_press_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_effect_title_tab_bounce_left.png b/tau/src/css/profile/mobile/default/theme-white/images/00_effect_title_tab_bounce_left.png Binary files differnew file mode 100644 index 00000000..7b4f1f0e --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_effect_title_tab_bounce_left.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_effect_title_tab_bounce_right.png b/tau/src/css/profile/mobile/default/theme-white/images/00_effect_title_tab_bounce_right.png Binary files differnew file mode 100644 index 00000000..ee63b70e --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_effect_title_tab_bounce_right.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_icon_favorite_off.png b/tau/src/css/profile/mobile/default/theme-white/images/00_icon_favorite_off.png Binary files differnew file mode 100644 index 00000000..13054499 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_icon_favorite_off.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_icon_favorite_on.png b/tau/src/css/profile/mobile/default/theme-white/images/00_icon_favorite_on.png Binary files differnew file mode 100644 index 00000000..94b2a7ec --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_icon_favorite_on.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_bg_receive.9.png b/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_bg_receive.9.png Binary files differnew file mode 100644 index 00000000..d26b30cd --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_bg_receive.9.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_bg_sent.9.png b/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_bg_sent.9.png Binary files differnew file mode 100644 index 00000000..fce4a801 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_bg_sent.9.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_date_bg.png b/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_date_bg.png Binary files differnew file mode 100644 index 00000000..b5e23815 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_messagebubble_date_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_overscrolling_bottom.png b/tau/src/css/profile/mobile/default/theme-white/images/00_overscrolling_bottom.png Binary files differnew file mode 100644 index 00000000..665b62a3 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_overscrolling_bottom.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_overscrolling_top.png b/tau/src/css/profile/mobile/default/theme-white/images/00_overscrolling_top.png Binary files differnew file mode 100644 index 00000000..940f5597 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_overscrolling_top.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_scroll_bar_handler.png b/tau/src/css/profile/mobile/default/theme-white/images/00_scroll_bar_handler.png Binary files differnew file mode 100644 index 00000000..399413eb --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_scroll_bar_handler.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/00_scroll_bar_handler_hor.png b/tau/src/css/profile/mobile/default/theme-white/images/00_scroll_bar_handler_hor.png Binary files differnew file mode 100644 index 00000000..dad9669d --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/00_scroll_bar_handler_hor.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/ajax-loader.png b/tau/src/css/profile/mobile/default/theme-white/images/ajax-loader.png Binary files differnew file mode 100644 index 00000000..811a2cdd --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/ajax-loader.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/00_field_btn_clear_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/00_field_btn_clear_press.png Binary files differnew file mode 100644 index 00000000..5e62b895 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/00_field_btn_clear_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/00_search_icon.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/00_search_icon.png Binary files differnew file mode 100644 index 00000000..c634b56a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/00_search_icon.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/00_slider_popup_bg.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/00_slider_popup_bg.png Binary files differnew file mode 100644 index 00000000..a965fe02 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/00_slider_popup_bg.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_back_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_back_press.png Binary files differnew file mode 100644 index 00000000..d8ea50ca --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_back_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_call_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_call_press.png Binary files differnew file mode 100644 index 00000000..68213a2e --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_call_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_check_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_check_press.png Binary files differnew file mode 100644 index 00000000..7aef39d0 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_check_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_cancel_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_cancel_press.png Binary files differnew file mode 100644 index 00000000..e2cd2f09 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_cancel_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_closed_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_closed_press.png Binary files differnew file mode 100644 index 00000000..2098db27 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_closed_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_minus.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_minus.png Binary files differnew file mode 100644 index 00000000..100be870 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_minus.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_minus_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_minus_press.png Binary files differnew file mode 100644 index 00000000..7b11da24 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_minus_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_opened_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_opened_press.png Binary files differnew file mode 100644 index 00000000..d539fd07 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_opened_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_send_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_send_press.png Binary files differnew file mode 100644 index 00000000..fada314a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_expand_send_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_gear_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_gear_press.png Binary files differnew file mode 100644 index 00000000..ac976eaf --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_gear_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_grid_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_grid_press.png Binary files differnew file mode 100644 index 00000000..b2eb343a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_grid_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_home_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_home_press.png Binary files differnew file mode 100644 index 00000000..ba430f1d --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_home_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_info_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_info_press.png Binary files differnew file mode 100644 index 00000000..bba88503 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_info_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_left_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_left_press.png Binary files differnew file mode 100644 index 00000000..67c04fcb --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_left_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_plus.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_plus.png Binary files differnew file mode 100644 index 00000000..4d7aaba6 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_plus.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_plus_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_plus_press.png Binary files differnew file mode 100644 index 00000000..016022de --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_plus_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_refresh_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_refresh_press.png Binary files differnew file mode 100644 index 00000000..f83a165e --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_refresh_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_rename_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_rename_press.png Binary files differnew file mode 100644 index 00000000..c9c514e1 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_rename_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_right_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_right_press.png Binary files differnew file mode 100644 index 00000000..c3613ec2 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_right_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_search.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_search.png Binary files differnew file mode 100644 index 00000000..41aee22a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_search.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_search_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_search_press.png Binary files differnew file mode 100644 index 00000000..e9e3ceea --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_search_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_star.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_star.png Binary files differnew file mode 100644 index 00000000..cc64af9c --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_star.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_star_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_star_press.png Binary files differnew file mode 100644 index 00000000..6d18261a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_star_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_warning_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_warning_press.png Binary files differnew file mode 100644 index 00000000..16051f34 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_button_warning_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_icon_jump_left_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_icon_jump_left_press.png Binary files differnew file mode 100644 index 00000000..031353c7 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_icon_jump_left_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_icon_jump_press.png b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_icon_jump_press.png Binary files differnew file mode 100644 index 00000000..9f69cbad --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/controls/button/00_icon_jump_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_Back.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_Back.png Binary files differnew file mode 100644 index 00000000..97f79559 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_Back.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_Back_press.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_Back_press.png Binary files differnew file mode 100644 index 00000000..4499d20d --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_Back_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_SIP_close_press_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_SIP_close_press_web.png Binary files differnew file mode 100644 index 00000000..323211cf --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_SIP_close_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_SIP_close_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_SIP_close_web.png Binary files differnew file mode 100644 index 00000000..edd82a7c --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_SIP_close_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_cancel_press_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_cancel_press_web.png Binary files differnew file mode 100644 index 00000000..e1506c8b --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_cancel_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_cancel_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_cancel_web.png Binary files differnew file mode 100644 index 00000000..78b70c87 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_cancel_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_delete_press_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_delete_press_web.png Binary files differnew file mode 100644 index 00000000..29080a97 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_delete_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_delete_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_delete_web.png Binary files differnew file mode 100644 index 00000000..a53b4557 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_delete_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_done_press_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_done_press_web.png Binary files differnew file mode 100644 index 00000000..036b1c12 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_done_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_done_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_done_web.png Binary files differnew file mode 100644 index 00000000..afc44b4f --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_done_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_edit_press_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_edit_press_web.png Binary files differnew file mode 100644 index 00000000..a0e11995 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_edit_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_edit_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_edit_web.png Binary files differnew file mode 100644 index 00000000..8298cbe4 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_edit_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_more.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_more.png Binary files differnew file mode 100644 index 00000000..d1487714 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_more.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_more_press.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_more_press.png Binary files differnew file mode 100644 index 00000000..5bddca99 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_more_press.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_plus_press_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_plus_press_web.png Binary files differnew file mode 100644 index 00000000..0a9eb511 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_plus_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_plus_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_plus_web.png Binary files differnew file mode 100644 index 00000000..adc1a73a --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_plus_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_search_press_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_search_press_web.png Binary files differnew file mode 100644 index 00000000..7de4062c --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_search_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_search_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_search_web.png Binary files differnew file mode 100644 index 00000000..12c96898 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_search_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_select_all_press_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_select_all_press_web.png Binary files differnew file mode 100644 index 00000000..ecc5e956 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_select_all_press_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_select_all_web.png b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_select_all_web.png Binary files differnew file mode 100644 index 00000000..555bc59b --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/images/page/00_icon_select_all_web.png diff --git a/tau/src/css/profile/mobile/default/theme-white/style.less b/tau/src/css/profile/mobile/default/theme-white/style.less new file mode 100644 index 00000000..61e7ec28 --- /dev/null +++ b/tau/src/css/profile/mobile/default/theme-white/style.less @@ -0,0 +1,2 @@ +@import "./theme.less"; +@import "../mobile.less";
\ No newline at end of file diff --git a/tau/src/css/profile/mobile/default/theme-white/theme.color.less b/tau/src/css/profile/mobile/default/theme-white/theme.color.less deleted file mode 100644 index 1d5c78c0..00000000 --- a/tau/src/css/profile/mobile/default/theme-white/theme.color.less +++ /dev/null @@ -1,412 +0,0 @@ -/*************************************************************************** - Body -***************************************************************************/ -@color_bg: rgb(248, 246, 239); /* B011 : Main Background color */ -@color_text: rgb(0, 0, 0); /* B012 : Main font color */ - -/*************************************************************************** - Naviframe -***************************************************************************/ -@color_bar_title_text : rgba(37, 37, 37, 1); /* B042 : title text */ -@color_bar_title_button_text : rgba(37, 37, 37, 1); /* B052L4 : Title text button */ -@color_bar_title_button_text_press : rgba(37, 37, 37, 1); /* B052L5 : Title text button press */ -@color_bar_title_shadow : rgba(250, 250, 250, 0.75); - -@color_bar_btn_press : rgba(14, 102, 170, 0.1); /* B052L1P : Title text button press bg */ -@color_bar_divider_line : rgba(138, 138, 138, 1); /* 00_divider_line.9.png */ -@color_bar_naviframe_bg : rgba(237, 235, 228, 1); -@color_bar_tabbar_bg : rgba(237, 235, 228, 1); -@color_bar_toolbar_bg : rgba(222, 220, 213, 1); /* B0515L1: Toolbar bg */ -@color_bar_toolbar_button_text : rgba(58, 58, 58, 1); /* B052L4 : Toolbar button normal */ -@color_bar_toolbar_button_text_press : rgba(250, 250, 250, 1); /* B052L4P : Toolbar button pressed */ -@color_bar_toolbar_divider : rgba(138, 138, 138, 0.2); -@color_bar_navbar_press : rgba(14, 102, 170, 1); /* B0511P : Navigation bar bg press */ -@color_bar_body_border : rgba(42, 42, 42, 1); - -/*************************************************************************** - Tabbar -***************************************************************************/ -@color_tabbar_btn_tab_press : rgba(14, 102, 170, 1); /* B0514P1 : 00_tab_press_ef.9.png */ -@color_tabbar_btn_pressed : rgba(59, 115, 182, 1); /* B052L6P */ -@color_tabbar_border_active : rgba(14, 102, 173, 1); -@color_tabbar_btn_normal : rgba(85, 85, 85, 1); /* B052L6 */ -@color_tabbar_footer_btn_press : rgba(14, 102, 170, 1); - -/*************************************************************************** - List -***************************************************************************/ -@color_list_bg: rgba(248, 246, 239, 1); /* B0211 */ -@color_list_press : rgba(87, 135, 194, 1); /* B041 */ -@color_list_border_bottom: rgba(211, 209, 203, 1); /* B0221 */ -@color_list_main_text_focus: rgba(250, 250, 250, 1); -@color_list_main_text_unfocus: rgba(0, 0, 0, 1); -@color_list_sub_text_default: rgba(79, 79, 79, 1); - -@color_list_divider_expand_div : rgba(0, 0, 0, 0.5); -@color_list_divider_bg : rgba(248, 246, 239, 1); /* W021L1 */ -@color_list_divider_line : rgba(14, 104, 173, 1); /* W021L2 */ -@color_list_divider_text : rgba(59, 115, 182, 1); /* W021L3 */ -@color_list_divider_bg_press : rgba(87, 135, 194, 1); -@color_list_divider_text_press : rgba(250, 250, 250, 1); - -@color_list_swipe_bg : rgba(237, 235, 228, 1); /* B0212 */ - -@color_list_dialogue_bg : rgba(239, 237, 229, 1); -@color_dialogue_main_text: rgba(59, 115, 182, 1); -@color_dialogue_border_right: rgba(142, 154, 163, 1); -@color_dialogue_divider_bg : rgba(248, 246, 239, 1); - -@color_list_expanded_bg : rgba(220, 218, 211, 1); - -@color_list_editfield : rgba(227, 225, 217, 1); /* F011L1 */ -@color_editfield_focus_border : rgba(0, 123, 218, 1); - -@color_checklist_btn_bg : rgba(248, 246, 239, 1); - -@color_list_bubble_sent_text: rgb(0, 0, 0); /* W051 */ -@color_list_bubble_receive_text: rgb(0, 0, 0); /* W051 */ -@color_list_bubble_sos_text: rgb(233, 73, 73); -@color_list_bubble_date_text: rgb(104, 104, 104); -@color_list_bubble_date_bg: rgba(225, 225, 225, 0); -@color_list_bubble_time_sent_text: rgb(139, 139, 139); /* F011L16 */ -@color_list_bubble_time_receive_text: rgb(139, 139, 139); /* F011L17 */ -@color_list_bubble_time_sos_text: rgb(233, 73, 73); /* F011L15 */ -@color_list_bubble_name_text: rgb(139, 139, 139); -@color_list_bubble_help_text: rgb(154, 154, 154); -@color_list_bubble_link_text: rgb(34, 129, 157); - -@list-font-size-main: 22 * @unit_base; -@list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group - -@list-smallicon-size: 22 * @unit_base; -@list-li-padding-horizontal: 8 * @unit_base; - -@list-bigicon-size2: 72 * @unit_base; - -/*************************************************************************** - Fast Scroll -***************************************************************************/ -@color_fastscroll_rollover_bg: rgba(248, 246, 239, 1); /* B0724 : 00_fast_scroll_rollover_bg.9.png */ -@color_fastscroll_rollover_down_border: rgba(59, 115, 182, 1); -@color_fastscroll_rollover_text: rgba(160, 159, 154, 1); /* B0721 : Rollover text */ -@color_fastscroll_rollover_text_press: rgba(59, 115, 182, 1); -@color_fastscroll_rollover_left_border: rgba(209, 207, 201, 1); -@color_fastscroll_rollover_left_border_press: rgba(59, 115, 182, 1); -@color_fastscroll_popup_bg: rgba(59, 115, 182, 1); /* B0731 : 00_fast_scroll_popup_bg.png */ -@color_fastscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */ -@color_fastscroll_popup_border: rgba(17, 46, 81, 1); -@color_fastscroll_default_border: rgba(226, 223, 213, 1); - -/*************************************************************************** - SearchBar(forms.textinput) -***************************************************************************/ -@color_searchbar_bg : rgba(222, 220, 213, 1); -@color_searchbar_default_text : rgba(135, 133, 128, 1); /* Search default text */ -@color_searchbar_input_field_bg : rgba(250, 250, 250, 1); /* W301 : 00_search_edit_field_bg.png */ -@color_searchbar_border : rgba(98, 102, 117, 1); -@color_searchbar_border_focus : rgba(0, 123, 218, 1); -@color_searchbar_divider : rgba(172, 170, 163, 1); -@color_searchbar_button_shadow0 : rgba(250, 250, 250, 1); -@color_searchbar_button_shadow1 : rgba(152, 148, 142, 1); - - -/*************************************************************************** - Popup -***************************************************************************/ -@font_size_popup_info_style: 24 * @unit_base; -@color_popup_text_bg: rgba(248, 246, 239, 1); /* B061L1 : Popop info */ -@color_border_popup: rgba(98, 105, 127, 1); - - -/*************************************************************************** - Button(connected with other winset) -***************************************************************************/ - -@color_button_text_shadow: 0px 1px rgb(255, 255, 255); - -@color_button_EditText: rgb(249, 249, 249); -@color_button_EditTextPress: rgb(61, 61, 61); - -@color_button_text_normal: rgb(58, 58, 58); /* F031L1 */ -@color_button_text_press: rgb(255, 255, 255); /* F031L1P */ -@color_button_text_black: rgb(0, 0, 0); -@color_button_text_white: rgb(249, 249, 249); - -@color_button_normal: rgb(247, 245, 237); -@color_button_normal_webkit: -webkit-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); -@color_button_normal_moz: -moz-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); -@color_button_normal_o: -o-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); -@color_button_normal_ms: -ms-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); -@color_button_press: rgb(0, 122, 216); - -@color_button_warning: rgb(193, 44, 33); -@color_button_warning_press: rgb(193, 44, 33); - -@color_button_inner: 0 0 1px 1px rgba(133, 131, 126, 1); -@color_button_inner_webkit: -webkit-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240)); -@color_button_inner_moz: -moz-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240)); -@color_button_inner_o: -o-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240)); -@color_button_inner_ms: -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240)); - -@button_border_color: rgba( 133, 131, 126, 1); -@button_shadow_outer: 0 0 1px 1px rgba(133, 131, 126, 1); -@button_shadow_inner: 0.5px 1px 1px rgba(133, 131, 126, 1); -@button_shadow_warning_inner: inset 0px 1px 1px rgba(255, 255, 255, 1); - -@button_press_shadow_inner: inset 0px 1px 1px rgba(22, 29, 95, 1); - -@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_inner_border: rgba(199, 197, 190, 1); - -.LESSbutton_box_style{ - color: @color_button_text_normal; -} - -.LESSbutton_up_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; - border: 1px @button_border_color solid; -} - -.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; - border: 1px solid; - border-color: @button_border_color; - .LESSbox-shadow-line( @button_shadow_outer ); -} -.LESSbutton_inner_box_style{ - background: @color_button_inner; - background: @color_button_inner_webkit; - background: @color_button_inner_ms; - background: @color_button_inner_o; - background: @color_button_inner_moz; - .LESSbox-shadow-line( @button_shadow_inner ); -} -.LESSbutton_inner_pressstyle{ - color: @color_button_text_press; -} - -.LESSbutton_text1_style{ - font-family: @font_family; - font-weight: normal; - font-size: 1.0rem; - font-style:normal; - color: @color_button_text_normal; -} - -.LESSbutton_hover_style{ - color: @color_button_text_normal; -} - -.LESSbutton_down_style{ - /* background: @color_button_press;*/ - 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_ctxpopup_text: rgb(255, 255, 255); -@color_ctxpopup_background: rgb(68, 68, 68); /* B061L4 : Contextual bg */ -@color_ctxpopup_border_left: rgb(45, 45, 45); -@color_ctxpopup_border_right: rgb(91, 91, 91); -@color_ctxpopup_border_top: rgb(91, 91, 91); -@color_ctxpopup_border_bottom: rgb(45, 45, 45); - -@color_ctxbutton_press: rgb(42, 137, 194); /* B044 : Contextual effect */ - -@color_ctxpopup_timepicker_text: rgba( 255, 255, 255, 0.7 ); -@color_ctxpopup_timepicker_text_focus: rgba( 255, 255, 255, 1 ); - -@color_ctxpopup_scrollbar_bg : rgba(172, 175, 180, 1); -@color_ctxpopup_scrollbar_border : rgba(52, 52, 52, 1); -/*************************************************************************** - Scrollview -***************************************************************************/ -@color_scrollbar: rgb(198, 196, 190); -@color_scrollview_indicator_start: rgb(255,255,255); -@color_scrollview_indicator_end: rgb(128,128,128); -@color_scrollbar_thumb_shadow: rgba(0, 0, 0, 50); - -/*************************************************************************** - Date Time picker -***************************************************************************/ -@color_timepicker_selector_color: rgb(87, 135, 194); /* W0811 : Picker bg */ -@color_timepicker_divider_color1: rgb(185, 184, 178); /* B0224 : Dialogue group List Line */ -@color_timepicker_divider_color2: rgb(255, 255, 255); /* B0222 : Line divider */ -@font_size_datetime_main_text: 17 * @unit_base; -@font_size_datetime_sub_text: 16 * @unit_base; - -/*************************************************************************** - SegmentControl -***************************************************************************/ -@color_segmentcontrol_Seg_text : rgba(58, 58, 58, 1); /* B052L4 : Title text button */ -@color_segmentcontrol_Seg_text_pressed : rgb(59,119,150); - -/*************************************************************************** - Popup -***************************************************************************/ -@color_popup_bg: rgba(248, 246, 239, 1); -@color_popup_dim: rgb(0, 0, 0); -@color_popup_center_progressbar_title: rgba(153, 153, 153, 1); -@color_popup_title_bg: rgba(219, 217, 206, 255); /* popup_title_bg.png */ -@color_popup_title_text: rgba(37, 37, 37, 1); /* B063L9 : Basic Style_title */ - -@color_popup_button_bg: rgba(214, 211, 201, 1); -@color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/ -@color_popup_text_font: black; - -@color_popup_buttonbg: rgb(247, 245, 237); -@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(247, 245, 237)), to(rgb(236, 234, 226))); -@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); -@color_popup_buttonbg_ms: -ms-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); -@color_popup_buttonbg_o: -o-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); -@color_popup_buttontext: rgb(58, 58, 58); -@color_popup_buttonbg_over: rgb(247, 245, 237); -@color_popup_button_border: rgb(133, 131, 126); - -@color_popup_buttonbg_press: rgb(0, 122, 216); -@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 102, 196)), to(rgb(0, 122, 216))); -@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(0, 102, 196), rgb(0, 122, 216)); -@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(0, 102, 196), rgb(0, 122, 216)); -@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(0, 102, 196), rgb(0, 122, 216)); - -@color_popup_scroller_bg: rgba(248, 246, 239, 1); - - -@font_size_popup_basic_style_title: 24 * @unit_base; //1.1875rem; /* 38px */ -@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */ -@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */ -@font_size_popup_button_text: 18 * @unit_base; //1.0rem; /* 18px */ - -.LESSpopup_button_style{ - 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; -} - -.LESSpopup_button_hover_style{ - background: @color_popup_buttonbg_over; -} - -.LESSpopup_button_press_style{ - 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; - color: rgb(250, 250, 250); -} - -.LESSpopup_padding_style{ -} - -/*************************************************************************** - Tickernoti -***************************************************************************/ -@color_ticker_bg: rgb(34, 34, 34); -@color_ticker_text1: rgb(250, 250, 250); -@color_ticker_text2: rgb(250, 250, 250); - -/*************************************************************************** - Smallpopup -***************************************************************************/ -@color_smallpopup_bg: -webkit-linear-gradient(top, @color_bg 0%, rgb(153, 153, 153) 18%, rgb(68, 68, 68) 20%, rgb(68, 68, 68) 100%); -@color_smallpopup_text: rgb(255, 255, 255); - -/*************************************************************************** - Slider -***************************************************************************/ -@color_slider_handle_text: rgb(59, 115, 182); -@color_slider_handle_text_press: rgb(250, 250, 250); -@color_slider_popup_bg: rgb(101, 101, 101); -@color_slider_popup_text: rgb(250, 250, 250); -@color_slider_left_text: rgb(128, 128, 128); -@color_slider_right_text: rgb(128, 128, 128); -@color_slider_label_text: rgb(0, 0, 0); - - -/*************************************************************************** - Progress -***************************************************************************/ -@color_progress_bar: rgb(197, 197, 197); -@color_progress_value: rgb(0, 125, 222); -@color_progress_shadow: rgb(104, 102, 101); -@color_progress_value_shadow0: rgb(235, 235, 235); -@color_progress_value_shadow1: rgb(102, 102, 102); -@color_progress_shadow0: rgb(164, 164, 164); -@color_progress_shadow1: rgb(16, 16, 16); - - -/*************************************************************************** - Handler -***************************************************************************/ -@color_scrollview_handler_bg : rgba(198, 196, 190, 1); -@color_scrollview_handler_shadow : rgba(0, 0, 0, 0.4); - - -/*************************************************************************** - multimediaview -***************************************************************************/ -@color_multimediaview_bg : rgb(249, 249, 249); -@color_multimediaview_control_bg : rgba(248, 246, 239, 0.5); -@color_multimediaview_timestamp_text : rgb(74, 132, 201); -@color_multimediaview_duration_text : rgb(128, 128, 128); -@color_multimediaview_bar_gray : rgb(203, 200, 197); -@color_multimediaview_bar_active : rgb(74, 132, 201); -@color_multimediaview_bar_handle : rgb(250, 250, 250); -@color_multimediaview_bar_handle_shadow : inset 0px -1px 1px rgba(0, 0, 0, 1); -@color_multimediaview_bar_handle_shadow_press : inset 0px 1px 1px rgba(0, 0, 0, 1); - -.LESSmultimediaview_bar_active_style{ - background-color : @color_multimediaview_bar_active; - box-shadow: 0px -1px 1px @color_progress_shadow inset; -} - -.LESSmultimediaview_bar_handle_style{ - background-color : @color_multimediaview_bar_handle; - .LESSbox-shadow-line( @color_multimediaview_bar_handle_shadow ); -} - -.LESSmultimediaview_bar_handle_press_style{ - background-color : @color_button_press; - .LESSbox-shadow-line( @color_multimediaview_bar_handle_shadow_press ); -} - - -/*************************************************************************** - tokentextarea -***************************************************************************/ -@color_tokentextarea_bg : @color_bg; -@color_tokentextarea_block_text : rgb(255, 255, 255); -@color_tokentextarea_block_bg : rgb(118, 157, 204); /* W0711 : Contact button bg normal */ -@color_tokentextarea_press_bg : rgb(64, 147, 247); /* W0713 : Contact button bg press */ -@color_tokentextarea_block_border : rgb(108, 116, 131); -@color_tokentextarea_press_border : rgb(89, 94, 106); -@color_tokentextarea_input_text : #222222; -@color_tokentextarea_label_text : rgb(102, 102, 102); - -/*************************************************************************** - Splitview -***************************************************************************/ -@color_splitview_spliter_bar : rgb(149, 149, 149); /* W131 */ -@color_splitview_spliter_bar_active : rgb(87, 135, 194); /* W132 */ -@color_splitview_spliter_border : rgb(128, 128, 128); diff --git a/tau/src/css/profile/mobile/default/theme-white/theme.less b/tau/src/css/profile/mobile/default/theme-white/theme.less index 741b89f2..1d5c78c0 100644 --- a/tau/src/css/profile/mobile/default/theme-white/theme.less +++ b/tau/src/css/profile/mobile/default/theme-white/theme.less @@ -1,6 +1,412 @@ -@import "./theme.color.less"; -@import "../mobile.less"; +/*************************************************************************** + Body +***************************************************************************/ +@color_bg: rgb(248, 246, 239); /* B011 : Main Background color */ +@color_text: rgb(0, 0, 0); /* B012 : Main font color */ -.tau-info-theme:after { - content: "white"; +/*************************************************************************** + Naviframe +***************************************************************************/ +@color_bar_title_text : rgba(37, 37, 37, 1); /* B042 : title text */ +@color_bar_title_button_text : rgba(37, 37, 37, 1); /* B052L4 : Title text button */ +@color_bar_title_button_text_press : rgba(37, 37, 37, 1); /* B052L5 : Title text button press */ +@color_bar_title_shadow : rgba(250, 250, 250, 0.75); + +@color_bar_btn_press : rgba(14, 102, 170, 0.1); /* B052L1P : Title text button press bg */ +@color_bar_divider_line : rgba(138, 138, 138, 1); /* 00_divider_line.9.png */ +@color_bar_naviframe_bg : rgba(237, 235, 228, 1); +@color_bar_tabbar_bg : rgba(237, 235, 228, 1); +@color_bar_toolbar_bg : rgba(222, 220, 213, 1); /* B0515L1: Toolbar bg */ +@color_bar_toolbar_button_text : rgba(58, 58, 58, 1); /* B052L4 : Toolbar button normal */ +@color_bar_toolbar_button_text_press : rgba(250, 250, 250, 1); /* B052L4P : Toolbar button pressed */ +@color_bar_toolbar_divider : rgba(138, 138, 138, 0.2); +@color_bar_navbar_press : rgba(14, 102, 170, 1); /* B0511P : Navigation bar bg press */ +@color_bar_body_border : rgba(42, 42, 42, 1); + +/*************************************************************************** + Tabbar +***************************************************************************/ +@color_tabbar_btn_tab_press : rgba(14, 102, 170, 1); /* B0514P1 : 00_tab_press_ef.9.png */ +@color_tabbar_btn_pressed : rgba(59, 115, 182, 1); /* B052L6P */ +@color_tabbar_border_active : rgba(14, 102, 173, 1); +@color_tabbar_btn_normal : rgba(85, 85, 85, 1); /* B052L6 */ +@color_tabbar_footer_btn_press : rgba(14, 102, 170, 1); + +/*************************************************************************** + List +***************************************************************************/ +@color_list_bg: rgba(248, 246, 239, 1); /* B0211 */ +@color_list_press : rgba(87, 135, 194, 1); /* B041 */ +@color_list_border_bottom: rgba(211, 209, 203, 1); /* B0221 */ +@color_list_main_text_focus: rgba(250, 250, 250, 1); +@color_list_main_text_unfocus: rgba(0, 0, 0, 1); +@color_list_sub_text_default: rgba(79, 79, 79, 1); + +@color_list_divider_expand_div : rgba(0, 0, 0, 0.5); +@color_list_divider_bg : rgba(248, 246, 239, 1); /* W021L1 */ +@color_list_divider_line : rgba(14, 104, 173, 1); /* W021L2 */ +@color_list_divider_text : rgba(59, 115, 182, 1); /* W021L3 */ +@color_list_divider_bg_press : rgba(87, 135, 194, 1); +@color_list_divider_text_press : rgba(250, 250, 250, 1); + +@color_list_swipe_bg : rgba(237, 235, 228, 1); /* B0212 */ + +@color_list_dialogue_bg : rgba(239, 237, 229, 1); +@color_dialogue_main_text: rgba(59, 115, 182, 1); +@color_dialogue_border_right: rgba(142, 154, 163, 1); +@color_dialogue_divider_bg : rgba(248, 246, 239, 1); + +@color_list_expanded_bg : rgba(220, 218, 211, 1); + +@color_list_editfield : rgba(227, 225, 217, 1); /* F011L1 */ +@color_editfield_focus_border : rgba(0, 123, 218, 1); + +@color_checklist_btn_bg : rgba(248, 246, 239, 1); + +@color_list_bubble_sent_text: rgb(0, 0, 0); /* W051 */ +@color_list_bubble_receive_text: rgb(0, 0, 0); /* W051 */ +@color_list_bubble_sos_text: rgb(233, 73, 73); +@color_list_bubble_date_text: rgb(104, 104, 104); +@color_list_bubble_date_bg: rgba(225, 225, 225, 0); +@color_list_bubble_time_sent_text: rgb(139, 139, 139); /* F011L16 */ +@color_list_bubble_time_receive_text: rgb(139, 139, 139); /* F011L17 */ +@color_list_bubble_time_sos_text: rgb(233, 73, 73); /* F011L15 */ +@color_list_bubble_name_text: rgb(139, 139, 139); +@color_list_bubble_help_text: rgb(154, 154, 154); +@color_list_bubble_link_text: rgb(34, 129, 157); + +@list-font-size-main: 22 * @unit_base; +@list-font-size-divider: 16 * @unit_base; // NOTE: defined in dialogue group + +@list-smallicon-size: 22 * @unit_base; +@list-li-padding-horizontal: 8 * @unit_base; + +@list-bigicon-size2: 72 * @unit_base; + +/*************************************************************************** + Fast Scroll +***************************************************************************/ +@color_fastscroll_rollover_bg: rgba(248, 246, 239, 1); /* B0724 : 00_fast_scroll_rollover_bg.9.png */ +@color_fastscroll_rollover_down_border: rgba(59, 115, 182, 1); +@color_fastscroll_rollover_text: rgba(160, 159, 154, 1); /* B0721 : Rollover text */ +@color_fastscroll_rollover_text_press: rgba(59, 115, 182, 1); +@color_fastscroll_rollover_left_border: rgba(209, 207, 201, 1); +@color_fastscroll_rollover_left_border_press: rgba(59, 115, 182, 1); +@color_fastscroll_popup_bg: rgba(59, 115, 182, 1); /* B0731 : 00_fast_scroll_popup_bg.png */ +@color_fastscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */ +@color_fastscroll_popup_border: rgba(17, 46, 81, 1); +@color_fastscroll_default_border: rgba(226, 223, 213, 1); + +/*************************************************************************** + SearchBar(forms.textinput) +***************************************************************************/ +@color_searchbar_bg : rgba(222, 220, 213, 1); +@color_searchbar_default_text : rgba(135, 133, 128, 1); /* Search default text */ +@color_searchbar_input_field_bg : rgba(250, 250, 250, 1); /* W301 : 00_search_edit_field_bg.png */ +@color_searchbar_border : rgba(98, 102, 117, 1); +@color_searchbar_border_focus : rgba(0, 123, 218, 1); +@color_searchbar_divider : rgba(172, 170, 163, 1); +@color_searchbar_button_shadow0 : rgba(250, 250, 250, 1); +@color_searchbar_button_shadow1 : rgba(152, 148, 142, 1); + + +/*************************************************************************** + Popup +***************************************************************************/ +@font_size_popup_info_style: 24 * @unit_base; +@color_popup_text_bg: rgba(248, 246, 239, 1); /* B061L1 : Popop info */ +@color_border_popup: rgba(98, 105, 127, 1); + + +/*************************************************************************** + Button(connected with other winset) +***************************************************************************/ + +@color_button_text_shadow: 0px 1px rgb(255, 255, 255); + +@color_button_EditText: rgb(249, 249, 249); +@color_button_EditTextPress: rgb(61, 61, 61); + +@color_button_text_normal: rgb(58, 58, 58); /* F031L1 */ +@color_button_text_press: rgb(255, 255, 255); /* F031L1P */ +@color_button_text_black: rgb(0, 0, 0); +@color_button_text_white: rgb(249, 249, 249); + +@color_button_normal: rgb(247, 245, 237); +@color_button_normal_webkit: -webkit-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); +@color_button_normal_moz: -moz-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); +@color_button_normal_o: -o-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); +@color_button_normal_ms: -ms-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); +@color_button_press: rgb(0, 122, 216); + +@color_button_warning: rgb(193, 44, 33); +@color_button_warning_press: rgb(193, 44, 33); + +@color_button_inner: 0 0 1px 1px rgba(133, 131, 126, 1); +@color_button_inner_webkit: -webkit-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240)); +@color_button_inner_moz: -moz-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240)); +@color_button_inner_o: -o-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240)); +@color_button_inner_ms: -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240)); + +@button_border_color: rgba( 133, 131, 126, 1); +@button_shadow_outer: 0 0 1px 1px rgba(133, 131, 126, 1); +@button_shadow_inner: 0.5px 1px 1px rgba(133, 131, 126, 1); +@button_shadow_warning_inner: inset 0px 1px 1px rgba(255, 255, 255, 1); + +@button_press_shadow_inner: inset 0px 1px 1px rgba(22, 29, 95, 1); + +@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_inner_border: rgba(199, 197, 190, 1); + +.LESSbutton_box_style{ + color: @color_button_text_normal; +} + +.LESSbutton_up_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; + border: 1px @button_border_color solid; +} + +.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; + border: 1px solid; + border-color: @button_border_color; + .LESSbox-shadow-line( @button_shadow_outer ); +} +.LESSbutton_inner_box_style{ + background: @color_button_inner; + background: @color_button_inner_webkit; + background: @color_button_inner_ms; + background: @color_button_inner_o; + background: @color_button_inner_moz; + .LESSbox-shadow-line( @button_shadow_inner ); +} +.LESSbutton_inner_pressstyle{ + color: @color_button_text_press; +} + +.LESSbutton_text1_style{ + font-family: @font_family; + font-weight: normal; + font-size: 1.0rem; + font-style:normal; + color: @color_button_text_normal; +} + +.LESSbutton_hover_style{ + color: @color_button_text_normal; +} + +.LESSbutton_down_style{ + /* background: @color_button_press;*/ + 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_ctxpopup_text: rgb(255, 255, 255); +@color_ctxpopup_background: rgb(68, 68, 68); /* B061L4 : Contextual bg */ +@color_ctxpopup_border_left: rgb(45, 45, 45); +@color_ctxpopup_border_right: rgb(91, 91, 91); +@color_ctxpopup_border_top: rgb(91, 91, 91); +@color_ctxpopup_border_bottom: rgb(45, 45, 45); + +@color_ctxbutton_press: rgb(42, 137, 194); /* B044 : Contextual effect */ + +@color_ctxpopup_timepicker_text: rgba( 255, 255, 255, 0.7 ); +@color_ctxpopup_timepicker_text_focus: rgba( 255, 255, 255, 1 ); + +@color_ctxpopup_scrollbar_bg : rgba(172, 175, 180, 1); +@color_ctxpopup_scrollbar_border : rgba(52, 52, 52, 1); +/*************************************************************************** + Scrollview +***************************************************************************/ +@color_scrollbar: rgb(198, 196, 190); +@color_scrollview_indicator_start: rgb(255,255,255); +@color_scrollview_indicator_end: rgb(128,128,128); +@color_scrollbar_thumb_shadow: rgba(0, 0, 0, 50); + +/*************************************************************************** + Date Time picker +***************************************************************************/ +@color_timepicker_selector_color: rgb(87, 135, 194); /* W0811 : Picker bg */ +@color_timepicker_divider_color1: rgb(185, 184, 178); /* B0224 : Dialogue group List Line */ +@color_timepicker_divider_color2: rgb(255, 255, 255); /* B0222 : Line divider */ +@font_size_datetime_main_text: 17 * @unit_base; +@font_size_datetime_sub_text: 16 * @unit_base; + +/*************************************************************************** + SegmentControl +***************************************************************************/ +@color_segmentcontrol_Seg_text : rgba(58, 58, 58, 1); /* B052L4 : Title text button */ +@color_segmentcontrol_Seg_text_pressed : rgb(59,119,150); + +/*************************************************************************** + Popup +***************************************************************************/ +@color_popup_bg: rgba(248, 246, 239, 1); +@color_popup_dim: rgb(0, 0, 0); +@color_popup_center_progressbar_title: rgba(153, 153, 153, 1); +@color_popup_title_bg: rgba(219, 217, 206, 255); /* popup_title_bg.png */ +@color_popup_title_text: rgba(37, 37, 37, 1); /* B063L9 : Basic Style_title */ + +@color_popup_button_bg: rgba(214, 211, 201, 1); +@color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/ +@color_popup_text_font: black; + +@color_popup_buttonbg: rgb(247, 245, 237); +@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(247, 245, 237)), to(rgb(236, 234, 226))); +@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); +@color_popup_buttonbg_ms: -ms-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); +@color_popup_buttonbg_o: -o-linear-gradient(top, rgb(247, 245, 237), rgb(236, 234, 226)); +@color_popup_buttontext: rgb(58, 58, 58); +@color_popup_buttonbg_over: rgb(247, 245, 237); +@color_popup_button_border: rgb(133, 131, 126); + +@color_popup_buttonbg_press: rgb(0, 122, 216); +@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 102, 196)), to(rgb(0, 122, 216))); +@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(0, 102, 196), rgb(0, 122, 216)); +@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(0, 102, 196), rgb(0, 122, 216)); +@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(0, 102, 196), rgb(0, 122, 216)); + +@color_popup_scroller_bg: rgba(248, 246, 239, 1); + + +@font_size_popup_basic_style_title: 24 * @unit_base; //1.1875rem; /* 38px */ +@font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */ +@font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */ +@font_size_popup_button_text: 18 * @unit_base; //1.0rem; /* 18px */ + +.LESSpopup_button_style{ + 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; +} + +.LESSpopup_button_hover_style{ + background: @color_popup_buttonbg_over; +} + +.LESSpopup_button_press_style{ + 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; + color: rgb(250, 250, 250); +} + +.LESSpopup_padding_style{ +} + +/*************************************************************************** + Tickernoti +***************************************************************************/ +@color_ticker_bg: rgb(34, 34, 34); +@color_ticker_text1: rgb(250, 250, 250); +@color_ticker_text2: rgb(250, 250, 250); + +/*************************************************************************** + Smallpopup +***************************************************************************/ +@color_smallpopup_bg: -webkit-linear-gradient(top, @color_bg 0%, rgb(153, 153, 153) 18%, rgb(68, 68, 68) 20%, rgb(68, 68, 68) 100%); +@color_smallpopup_text: rgb(255, 255, 255); + +/*************************************************************************** + Slider +***************************************************************************/ +@color_slider_handle_text: rgb(59, 115, 182); +@color_slider_handle_text_press: rgb(250, 250, 250); +@color_slider_popup_bg: rgb(101, 101, 101); +@color_slider_popup_text: rgb(250, 250, 250); +@color_slider_left_text: rgb(128, 128, 128); +@color_slider_right_text: rgb(128, 128, 128); +@color_slider_label_text: rgb(0, 0, 0); + + +/*************************************************************************** + Progress +***************************************************************************/ +@color_progress_bar: rgb(197, 197, 197); +@color_progress_value: rgb(0, 125, 222); +@color_progress_shadow: rgb(104, 102, 101); +@color_progress_value_shadow0: rgb(235, 235, 235); +@color_progress_value_shadow1: rgb(102, 102, 102); +@color_progress_shadow0: rgb(164, 164, 164); +@color_progress_shadow1: rgb(16, 16, 16); + + +/*************************************************************************** + Handler +***************************************************************************/ +@color_scrollview_handler_bg : rgba(198, 196, 190, 1); +@color_scrollview_handler_shadow : rgba(0, 0, 0, 0.4); + + +/*************************************************************************** + multimediaview +***************************************************************************/ +@color_multimediaview_bg : rgb(249, 249, 249); +@color_multimediaview_control_bg : rgba(248, 246, 239, 0.5); +@color_multimediaview_timestamp_text : rgb(74, 132, 201); +@color_multimediaview_duration_text : rgb(128, 128, 128); +@color_multimediaview_bar_gray : rgb(203, 200, 197); +@color_multimediaview_bar_active : rgb(74, 132, 201); +@color_multimediaview_bar_handle : rgb(250, 250, 250); +@color_multimediaview_bar_handle_shadow : inset 0px -1px 1px rgba(0, 0, 0, 1); +@color_multimediaview_bar_handle_shadow_press : inset 0px 1px 1px rgba(0, 0, 0, 1); + +.LESSmultimediaview_bar_active_style{ + background-color : @color_multimediaview_bar_active; + box-shadow: 0px -1px 1px @color_progress_shadow inset; +} + +.LESSmultimediaview_bar_handle_style{ + background-color : @color_multimediaview_bar_handle; + .LESSbox-shadow-line( @color_multimediaview_bar_handle_shadow ); +} + +.LESSmultimediaview_bar_handle_press_style{ + background-color : @color_button_press; + .LESSbox-shadow-line( @color_multimediaview_bar_handle_shadow_press ); +} + + +/*************************************************************************** + tokentextarea +***************************************************************************/ +@color_tokentextarea_bg : @color_bg; +@color_tokentextarea_block_text : rgb(255, 255, 255); +@color_tokentextarea_block_bg : rgb(118, 157, 204); /* W0711 : Contact button bg normal */ +@color_tokentextarea_press_bg : rgb(64, 147, 247); /* W0713 : Contact button bg press */ +@color_tokentextarea_block_border : rgb(108, 116, 131); +@color_tokentextarea_press_border : rgb(89, 94, 106); +@color_tokentextarea_input_text : #222222; +@color_tokentextarea_label_text : rgb(102, 102, 102); + +/*************************************************************************** + Splitview +***************************************************************************/ +@color_splitview_spliter_bar : rgb(149, 149, 149); /* W131 */ +@color_splitview_spliter_bar_active : rgb(87, 135, 194); /* W132 */ +@color_splitview_spliter_border : rgb(128, 128, 128); diff --git a/tau/src/css/profile/prefixer.ext.less b/tau/src/css/profile/prefixer.ext.less deleted file mode 100644 index ebf32bfd..00000000 --- a/tau/src/css/profile/prefixer.ext.less +++ /dev/null @@ -1,378 +0,0 @@ -// TAU extensions for prefixer -.mask-image(@url1, @url2) { - -webkit-mask-image: url(@url1), url(@url2); - -moz-mask-image: url(@url1), url(@url2); - -ms-mask-image: url(@url1), url(@url2); - -o-mask-image: url(@url1), url(@url2); - mask-image: url(@url1), url(@url2); -} - -.mask-image(@url) { - -webkit-mask-image: url(@url); - -moz-mask-image: url(@url); - -ms-mask-image: url(@url); - -o-mask-image: url(@url); - mask-image: url(@url); -} - -.mask-image() { - -webkit-mask-image: none; - -moz-mask-image: none; - -ms-mask-image: none; - -o-mask-image: none; - mask-image: none; -} - -.mask-box-image(@value) { - -webkit-mask-box-image: url(@value); - -moz-mask-box-image: url(@value); - -ms-mask-box-image: url(@value); - -o-mask-box-image: url(@value); - mask-box-image: url(@value); -} - -.mask-box-image-source(@value) { - -webkit-mask-box-image-source: url(@value); - -moz-mask-box-image-source: url(@value); - -ms-mask-box-image-source: url(@value); - -o-mask-box-image-source: url(@value); - mask-box-image-source: url(@value); -} - -.mask-box-image-repeat(@repeat) { - -webkit-mask-box-image-repeat: @repeat; - -moz-mask-box-image-repeat: @repeat; - -ms-mask-box-image-repeat: @repeat; - -o-mask-box-image-repeat: @repeat; - mask-box-image-repeat: @repeat; -} - -.mask-box-image-width(@width) { - -webkit-mask-box-image-width: @width; - -moz-mask-box-image-width: @width; - -ms-mask-box-image-width: @width; - -o-mask-box-image-width: @width; - mask-box-image-width: @width; -} - -.mask-box-image-slice(@rect) { - -webkit-mask-box-image-slice: @rect; - -moz-mask-box-image-slice: @rect; - -ms-mask-box-image-slice: @rect; - -o-mask-box-image-slice: @rect; - mask-box-image-slice: @rect; -} - -.mask-size(@size1, @size2) { - -webkit-mask-size: @size1, @size2; - -moz-mask-size: @size1, @size2; - -ms-mask-size: @size1, @size2; - -o-mask-size: @size1, @size2; - mask-size: @size1, @size2; -} - -.mask-size(@size) { - -webkit-mask-size: @size; - -moz-mask-size: @size; - -ms-mask-size: @size; - -o-mask-size: @size; - mask-size: @size; -} - -.mask-position(@position1, @position2) { - -webkit-mask-position: @position1, @position2; - -moz-mask-position: @position1, @position2; - -ms-mask-position: @position1, @position2; - -o-mask-position: @position1, @position2; - mask-position: @position1, @position2; -} - -.mask-position(@position) { - -webkit-mask-position: @position; - -moz-mask-position: @position; - -ms-mask-position: @position; - -o-mask-position: @position; - mask-position: @position; -} - -.mask-repeat(@repeat) { - -webkit-mask-repeat: @repeat; - -moz-mask-repeat: @repeat; - -ms-mask-repeat: @repeat; - -o-mask-repeat: @repeat; - mask-repeat: @repeat; -} - -.mask-repeat(@repeat1, @repeat2) { - -webkit-mask-repeat: @repeat1, @repeat2; - -moz-mask-repeat: @repeat1, @repeat2; - -ms-mask-repeat: @repeat1, @repeat2; - -o-mask-repeat: @repeat1, @repeat2; - mask-repeat: @repeat1, @repeat2; -} - -.mask-composite(@param1, @param2) { - -webkit-mask-composite: @param1, @param2; - -moz-mask-composite: @param1, @param2; - -ms-mask-composite: @param1, @param2; - -o-mask-composite: @param1, @param2; - mask-composite: @param1, @param2; -} - -.mask-composite(@param) { - -webkit-mask-composite: @param; - -moz-mask-composite: @param; - -ms-mask-composite: @param; - -o-mask-composite: @param; - mask-composite: @param; -} - -.linear-gradient-right(@default,@color1,@stop1,@color2,@stop2) { - background-color: @default; - background-image: -webkit-gradient(linear, right top, right top, color-stop(@stop1, @color1), color-stop(@stop2 @color2)); - background-image: -webkit-linear-gradient(right, @color1 @stop1, @color2 @stop2); - background-image: -moz-linear-gradient(right, @color1 @stop1, @color2 @stop2); - background-image: -ms-linear-gradient(right, @color1 @stop1, @color2 @stop2); - background-image: -o-linear-gradient(right, @color1 @stop1, @color2 @stop2); - background-image: linear-gradient(right, @color1 @stop1, @color2 @stop2); -} - -.gradient-circural(@position, @startColor, @endColor, @radius) { - background-image: -webkit-gradient(radial, @position, 0, 50% 50%, @radius, from(@startColor), to(@endColor)); - background-image: -moz-radial-gradient(@position, circle, @startColor 0, @endColor ~"@{radius}px"); - background-image: -ms-radial-gradient(@position, circle cover, @startColor, @endColor ~"@{radius}%"); - background-image: -o-radial-gradient(@position, circle cover, @startColor, @endColor ~"@{radius}%"); - background-image: radial-gradient(~"circle at @{position}", @startColor, @endColor ~"@{radius}%"); -} - -.gradient-circural-safe(@safeColor, @position, @startColor, @endColor, @radius) { - background-color: @safeColor; - .gradient-circural(@position, @startColor, @endColor, @radius); -} - -.appearance(@value) { - -webkit-appearance: @value; - -moz-appearance: @value; - -ms-appearance: @value; - -o-appearance: @value; - appearance: @value; -} - -// prefixer's tprop function fails with 2 arguments, and we dont want strings -.transition-property(@property1, @property2) { - -webkit-transition-property: @property1, @property2; - -moz-transition-property: @property1, @property2; - -o-transition-property: @property1, @property2; - -ms-transition-property: @property1, @property2; - transition-property: @property1, @property2; -} - -.transition-property(@property1, @property2, @property3) { - -webkit-transition-property: @property1, @property2, @property3; - -moz-transition-property: @property1, @property2, @property3; - -o-transition-property: @property1, @property2, @property3; - -ms-transition-property: @property1, @property2, @property3; - transition-property: @property1, @property2, @property3; -} - -.transition-property(@property1, @property2, @property3, @property4) { - -webkit-transition-property: @property1, @property2, @property3, @property4; - -moz-transition-property: @property1, @property2, @property3, @property4; - -o-transition-property: @property1, @property2, @property3, @property4; - -ms-transition-property: @property1, @property2, @property3, @property4; - transition-property: @property1, @property2, @property3, @property4; -} - -.transition-property(@property1, @property2, @property3, @property4, @property5) { - -webkit-transition-property: @property1, @property2, @property3, @property4, @property5; - -moz-transition-property: @property1, @property2, @property3, @property4, @property5; - -o-transition-property: @property1, @property2, @property3, @property4, @property5; - -ms-transition-property: @property1, @property2, @property3, @property4, @property5; - transition-property: @property1, @property2, @property3, @property4, @property5; -} - -.transition-transform(@value) { - -webkit-transition: -webkit-transform @value; - -moz-transition: -moz-transform @value; - -o-transition: -o-transform @value; - -ms-transition: -ms-transform @value; - transition: transform @value; -} - -.user-select(@value) { - -webkit-user-select: @value; - -moz-user-select: @value; - -ms-user-select: @value; - -o-user-select: @value; - user-select: @value; -} - -.text-size-adjust(@value) { - -webkit-text-size-adjust: @value; - -moz-text-size-adjust: @value; - -ms-text-size-adjust: @value; - -o-text-size-adjust: @value; - text-size-adjust: @value; -} - -.border-top-left-radius(@radius) { - -webkit-border-top-left-radius: @radius; - -moz-border-top-left-radius: @radius; - -ms-border-top-left-radius: @radius; - -o-border-top-left-radius: @radius; - border-top-left-radius: @radius; -} - -.border-top-right-radius(@radius) { - -webkit-border-top-right-radius: @radius; - -moz-border-top-right-radius: @radius; - -ms-border-top-right-radius: @radius; - -o-border-top-right-radius: @radius; - border-top-right-radius: @radius; -} - -.border-bottom-left-radius(@radius) { - -webkit-border-bottom-left-radius: @radius; - -moz-border-bottom-left-radius: @radius; - -ms-border-bottom-left-radius: @radius; - -o-border-bottom-left-radius: @radius; - border-bottom-left-radius: @radius; -} - -.border-bottom-right-radius(@radius) { - -webkit-border-bottom-right-radius: @radius; - -moz-border-bottom-right-radius: @radius; - -ms-border-bottom-right-radius: @radius; - -o-border-bottom-right-radius: @radius; - border-bottom-right-radius: @radius; -} - -.border-top-radius(@radius) { - .border-top-left-radius(@radius); - .border-top-right-radius(@radius); -} - -.border-bottom-radius(@radius) { - .border-bottom-left-radius(@radius); - .border-bottom-right-radius(@radius); -} - -.touch-scrolling() { - -webkit-overflow-scrolling: touch; - -moz-overflow-scrolling: touch; - -o-overflow-scrolling: touch; - -ms-overflow-scrolling: touch; - overflow-scrolling: touch; -} - -.touch-scrolling-clear() { - -webkit-overflow-scrolling: auto; - -moz-overflow-scrolling: auto; - -o-overflow-scrolling: auto; - -ms-overflow-scrolling: auto; - overflow-scrolling: auto; -} - -.calc-width(@value) { - width: -webkit-calc(@value); - width: -moz-calc(@value); - width: -ms-calc(@value); - width: -o-calc(@value); - width: calc(@value); -} - -.calc-margin-left(@value) { - margin-left: -webkit-calc(@value); - margin-left: -moz-calc(@value); - margin-left: -ms-calc(@value); - margin-left: -o-calc(@value); - margin-left: calc(@value); -} - -.display-flex() { - display: -webkit-flex; - display: -moz-flex; - display: -ms-flex; - display: -o-flex; - display: flex; -} - -.flex-direction(@dir) { - -webkit-flex-direction : @dir; - -moz-flex-direction : @dir; - -ms-flex-direction : @dir; - -o-flex-direction : @dir; - flex-direction : @dir; -} - -.flex-wrap(@wrap) { - -webkit-flex-wrap : @wrap; - -moz-flex-wrap : @wrap; - -ms-flex-wrap : @wrap; - -o-flex-wrap : @wrap; - flex-wrap : @wrap; -} - -.justify-content(@value) { - -webkit-justify-content : @value; - -moz-justify-content : @value; - -ms-justify-content : @value; - -o-justify-content : @value; - justify-content : @value; -} - -.align-content(@value) { - -webkit-align-content : @value; - -moz-align-content : @value; - -ms-align-content : @value; - -o-align-content : @value; - align-content : @value; -} - -.align-items(@value) { - -webkit-align-items : @value; - -moz-align-items : @value; - -ms-align-items : @value; - -o-align-items : @value; - align-items : @value; -} - -.align-self(@value) { - -webkit-align-left: @value; - -moz-align-left: @value; - -ms-align-left: @value; - -o-align-left: @value; - align-left: @value; -} - -.flex(@value) { - -webkit-flex: @value; - -moz-flex: @value; - -ms-flex: @value; - -o-flex: @value; - flex: @value; -} - -.perspective(@value) { - -webkit-perspective: @value; - -moz-perspective: @value; - -ms-perspective: @value; - -o-perspective: @value; - perspective: @value; -} - -.backface-visiblity(@value) { - -webkit-backface-visibility: @value; - -moz-backface-visibility: @value; - -ms-backface-visibility: @value; - -o-backface-visibility: @value; - backface-visiblity: @value; -} - -.filter(@value) { - -webkit-filter: @value; - -moz-filter: @value; - -ms-filter: @value; - -o-filter: @value; - filter: @value; -} diff --git a/tau/src/css/profile/prefixer.less b/tau/src/css/profile/prefixer.less deleted file mode 100644 index ff2b1b50..00000000 --- a/tau/src/css/profile/prefixer.less +++ /dev/null @@ -1,376 +0,0 @@ -//--------------------------------------------------- -// LESS Prefixer -//--------------------------------------------------- -// -// All of the CSS3 fun, none of the prefixes! -// -// As a rule, you can use the CSS properties you -// would expect just by adding a '.': -// -// box-shadow => .box-shadow(@args) -// -// Also, when shorthand is available, arguments are -// not parameterized. Learn CSS, not LESS Prefixer. -// -// ------------------------------------------------- -// TABLE OF CONTENTS -// (*) denotes a syntax-sugar helper -// ------------------------------------------------- -// -// .animation(@args) -// .animation-delay(@delay) -// .animation-direction(@direction) -// .animation-duration(@duration) -// .animation-fill-mode(@mode) -// .animation-iteration-count(@count) -// .animation-name(@name) -// .animation-play-state(@state) -// .animation-timing-function(@function) -// .background-size(@args) -// .border-radius(@args) -// .box-shadow(@args) -// .inner-shadow(@args) * -// .box-sizing(@args) -// .border-box() * -// .content-box() * -// .columns(@args) -// .column-count(@count) -// .column-gap(@gap) -// .column-rule(@args) -// .column-width(@width) -// .gradient(@default,@start,@stop) * -// .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])* -// .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])* -// .opacity(@factor) -// .transform(@args) -// .transform-origin(@args) -// .transform-style(@style) -// .rotate(@deg) -// .scale(@factor) -// .translate(@x,@y) -// .translate3d(@x,@y,@z) -// .translateHardware(@x,@y) * -// .text-shadow(@args) -// .transition(@args) -// .transition-delay(@delay) -// .transition-duration(@duration) -// .transition-property(@property) -// .transition-timing-function(@function) -// -// -// -// Credit to LESS Elements for the motivation and -// to CSS3Please.com for implementation. -// -// Copyright (c) 2012 Joel Sutherland -// MIT Licensed: -// http://www.opensource.org/licenses/mit-license.php -// -//--------------------------------------------------- - - -// Animation - -.animation(@args) { - -webkit-animation: @args; - -moz-animation: @args; - -ms-animation: @args; - -o-animation: @args; - animation: @args; -} -.animation-delay(@delay) { - -webkit-animation-delay: @delay; - -moz-animation-delay: @delay; - -ms-animation-delay: @delay; - -o-animation-delay: @delay; - animation-delay: @delay; -} -.animation-direction(@direction) { - -webkit-animation-direction: @direction; - -moz-animation-direction: @direction; - -ms-animation-direction: @direction; - -o-animation-direction: @direction; -} -.animation-duration(@duration) { - -webkit-animation-duration: @duration; - -moz-animation-duration: @duration; - -ms-animation-duration: @duration; - -o-animation-duration: @duration; -} -.animation-fill-mode(@mode) { - -webkit-animation-fill-mode: @mode; - -moz-animation-fill-mode: @mode; - -ms-animation-fill-mode: @mode; - -o-animation-fill-mode: @mode; - animation-fill-mode: @mode; -} -.animation-iteration-count(@count) { - -webkit-animation-iteration-count: @count; - -moz-animation-iteration-count: @count; - -ms-animation-iteration-count: @count; - -o-animation-iteration-count: @count; - animation-iteration-count: @count; -} -.animation-name(@name) { - -webkit-animation-name: @name; - -moz-animation-name: @name; - -ms-animation-name: @name; - -o-animation-name: @name; - animation-name: @name; -} -.animation-play-state(@state) { - -webkit-animation-play-state: @state; - -moz-animation-play-state: @state; - -ms-animation-play-state: @state; - -o-animation-play-state: @state; - animation-play-state: @state; -} -.animation-timing-function(@function) { - -webkit-animation-timing-function: @function; - -moz-animation-timing-function: @function; - -ms-animation-timing-function: @function; - -o-animation-timing-function: @function; - animation-timing-function: @function; -} - - -// Background Size - -.background-size(@args) { - -webkit-background-size: @args; - background-size: @args; -} - - -// Border Radius - -.border-radius(@args) { - -webkit-border-radius: @args; - border-radius: @args; - background-clip: padding-box; -} - - -// Box Shadows - -.box-shadow(@args) { - -webkit-box-shadow: @args; - box-shadow: @args; -} -.inner-shadow(@args) { - .box-shadow(inset @args); -} - - -// Box Sizing - -.box-sizing(@args) { - -webkit-box-sizing: @args; - -moz-box-sizing: @args; - box-sizing: @args; -} -.border-box(){ - .box-sizing(border-box); -} -.content-box(){ - .box-sizing(content-box); -} - - -// Columns - -.columns(@args) { - -webkit-columns: @args; - -moz-columns: @args; - columns: @args; -} -.column-count(@count) { - -webkit-column-count: @count; - -moz-column-count: @count; - column-count: @count; -} -.column-gap(@gap) { - -webkit-column-gap: @gap; - -moz-column-gap: @gap; - column-gap: @gap; -} -.column-width(@width) { - -webkit-column-width: @width; - -moz-column-width: @width; - column-width: @width; -} -.column-rule(@args) { - -webkit-column-rule: @args; - -moz-column-rule: @args; - column-rule: @args; -} - - -// Gradients - -.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) { - .linear-gradient-top(@default,@start,0%,@stop,100%); -} -.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) { - background-color: @default; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2)); - background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2); - background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2); - background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2); - background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2); - background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2); -} -.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) { - background-color: @default; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3)); - background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3); - background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3); - background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3); - background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3); - background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3); -} -.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) { - background-color: @default; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4)); - background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); - background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); - background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); - background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); - background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); -} -.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) { - background-color: @default; - background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2)); - background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2); - background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2); - background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2); - background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2); - background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2); -} -.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) { - background-color: @default; - background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3)); - background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3); - background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3); - background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3); - background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3); - background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3); -} -.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) { - background-color: @default; - background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4)); - background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); - background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); - background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); - background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); - background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); -} - - -// Opacity - -.opacity(@factor) { - @iefactor: @factor*100; - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{iefactor})"; - filter: ~"alpha(opacity=(@{iefactor}))"; - opacity: @factor; -} - - -// Text Shadow - -.text-shadow(@args) { - text-shadow: @args; -} - - -// Transforms - -.transform(@args) { - -webkit-transform: @args; - -moz-transform: @args; - -ms-transform: @args; - -o-transform: @args; - transform: @args; -} -.transform-origin(@args) { - -webkit-transform-origin: @args; - -moz-transform-origin: @args; - -ms-transform-origin: @args; - -o-transform-origin: @args; - transform-origin: @args; -} -.transform-style(@style) { - -webkit-transform-style: @style; - -moz-transform-style: @style; - -ms-transform-style: @style; - -o-transform-style: @style; - transform-style: @style; -} -.rotate(@deg:45deg){ - .transform(rotate(@deg)); -} -.scale(@factor:.5){ - .transform(scale(@factor)); -} -.translate(@x,@y){ - .transform(translate(@x,@y)); -} -.translate3d(@x,@y,@z) { - .transform(translate3d(@x,@y,@z)); -} -.translateHardware(@x,@y) { - .translate(@x,@y); - -webkit-transform: translate3d(@x,@y,0); - -moz-transform: translate3d(@x,@y,0); - -o-transform: translate3d(@x,@y,0); - -ms-transform: translate3d(@x,@y,0); - transform: translate3d(@x,@y,0); -} - - -// Transitions - -.transition(@args:200ms) { - -webkit-transition: @args; - -moz-transition: @args; - -o-transition: @args; - -ms-transition: @args; - transition: @args; -} -.transition-delay(@delay:0) { - -webkit-transition-delay: @delay; - -moz-transition-delay: @delay; - -o-transition-delay: @delay; - -ms-transition-delay: @delay; - transition-delay: @delay; -} -.transition-duration(@duration:200ms) { - -webkit-transition-duration: @duration; - -moz-transition-duration: @duration; - -o-transition-duration: @duration; - -ms-transition-duration: @duration; - transition-duration: @duration; -} -.transition-property(@property:all) { - -webkit-transition-property: @property; - -moz-transition-property: @property; - -o-transition-property: @property; - -ms-transition-property: @property; - transition-property: @property; -} -.transition-property(@property1, @property2, @property3) { - -webkit-transition-property: @property1, @property2, @property3; - -moz-transition-property: @property1, @property2, @property3; - -o-transition-property: @property1, @property2, @property3; - -ms-transition-property: @property1, @property2, @property3; - transition-property: @property1, @property2, @property3; -} -.transition-timing-function(@function:ease) { - -webkit-transition-timing-function: @function; - -moz-transition-timing-function: @function; - -o-transition-timing-function: @function; - -ms-transition-timing-function: @function; - transition-timing-function: @function; -} - diff --git a/tau/src/css/profile/tv/default/common/button.less b/tau/src/css/profile/tv/default/common/button.less index 52e8ff18..1cb1de1b 100644 --- a/tau/src/css/profile/tv/default/common/button.less +++ b/tau/src/css/profile/tv/default/common/button.less @@ -1,9 +1,28 @@ +@basic_btn_color_normal: rgb(211, 211, 211); +@basic_btn_color_focus: rgb(69, 143, 255); +@basic_btn_txt_color_normal: rgb(89, 89, 89); +@basic_btn_txt_color_focus: rgb(255, 255, 255); +@list_btn_color_focus: rgb(69, 143, 255); +@btn_color_with_icon: rgb(255, 255, 255); + +/**********************************************************************/ +/* Button(FIXED) */ +/**********************************************************************/ +@fixed_button_padding_top: 21 * @virtual_px; +@fixed_button_padding_bottom: 21 * @virtual_px; +@fixed_button_padding_left: 20 * @virtual_px; +@fixed_button_padding_right: 20 * @virtual_px; +@fixed_button_minimum_width: 216 * @virtual_px; +@fixed_button_inner_minimum_width: 134 * @virtual_px; +@fixed_button_minimum_height: 70 * @virtual_px; + .ui-btn { position: relative; display: block; padding: 30 * @virtual_px 20 * @virtual_px 25 * @virtual_px 20 * @virtual_px; font-size: 28 * @virtual_px; font-weight: bolder; + line-height: @fixed_button_line_height; text-align: center; white-space: nowrap; cursor: pointer; @@ -13,11 +32,9 @@ border: 0 none; min-height: @fixed_button_minimum_height; min-width: @fixed_button_minimum_width; - .border-radius(4 * @one_px); - &:not(.ui-btn-icon_only) { - background-color: @color_button_basic_normal; - } - color: @color_button_basic_txt_normal; + border-radius: 4 * @virtual_px; + background-color: @basic_btn_color_normal; + .ui-default; &.ui-multiline { padding-top: @fixed_button_multiline_padding_top; @@ -41,20 +58,17 @@ display: block; position: relative; zoom: 1; + line-height: 26 * @virtual_px; margin: 0; min-width: @fixed_button_inner_minimum_width; .ui-btn-text { display: block; - .LESStext-ellipsis(); - .focus-animation(color, background-color); span { - &.ui-text { - display: block; - .LESStext-ellipsis(); - .focus-animation(color, background-color); - } + display: block; + font-size: 22 * @virtual_px; bottom: 0; + margin-top: 5 * @virtual_px; } } @@ -67,120 +81,105 @@ left: 0; width: 100%; height: 100%; - .appearance(button); + -webkit-appearance: button; opacity: .1; cursor: pointer; - background-color: transparent; + background: transparent; font-size: 1 * @virtual_px; border: none; line-height: 999 * @virtual_px; } - // disable Button_basic - &.ui-state-disabled, &:disabled { - opacity: 0.4; - cursor: default; + + a&.ui-state-disabled, &:disabled { + background-color: rgba(red(@basic_btn_color_normal), green(@basic_btn_color_normal), blue(@basic_btn_color_normal), 0.4); } +} - &.ui-btn-icon_only { - padding: 0; - min-width: 110 * @virtual_px; - .ui-background { - display: none; - } - .ui-btn-inner { - padding-top: 0; - .ui-icon { - width: 110 * @virtual_px; - height: 110 * @virtual_px; - display: block; - position: relative; - margin: auto; - top: 0; - left: 0; - } - .ui-btn-text { - display: none; - } - } +.ui-listview { + .ui-btn { + background-color: inherit; } +} - // focused Button_basic - &.ui-focus { - .ui-text { - color: @color_button_basic_txt_focus; - } +.ui-btn[data-icon], .ui-drawer-close, li a.ui-btn{ + font-weight: inherit; + background-color: inherit; + color: @btn_color_with_icon; + overflow: hidden; +} + +.ui-default { + color: @basic_btn_txt_color_normal; + + a&.ui-state-disabled, &:disabled { + color: @color_button_default_text_disable; + cursor: default; } +} - // Button_text - &.ui-button-text { - border-image-source: url(images/Button/btn_text_nor.png); - border-image-slice: 4 fill; - border-image-width: auto; - // in border width units vw is not acceptable, we have to use px - border-bottom-width: round(3 * @one_px); - .border-radius(6 * @one_px); +.ui-color-red { + color: @color_button_red_text; + background-color: @color_button_red_normal_bg; - .ui-text { - color: @color_type_button_text_normal; - } + a&:active:hover, &:enabled:active:hover { + background-color: @color_button_red_press_bg; + } - &.ui-focus { - .ui-text { - color: @color_type_button_text_txt_focus; - } - } + &:enabled:focus { + background-color: @color_button_red_focus_bg; + } - &.ui-state-disabled { - opacity: 0.2; - } + a&.ui-state-disabled, &:disabled { + color: @color_button_red_text_disable; + background-color: @color_button_red_disable_bg; + cursor: default; } +} - // button with icon - &[data-icon] { - font-weight: inherit; - &:not(.ui-btn-icon_only) { - background-color: @color_button_icon_normal; - } +.ui-color-orange { + color: @color_button_orange_text; + background-color: @color_button_orange_normal_bg; - .ui-text { - color: @color_button_icon_text; - } - &.ui-focus { - .ui-text { - color: @color_button_icon_text_focus; - } - } + a&:active:hover, &:enabled:active:hover { + background-color: @color_button_orange_press_bg; + } - &.ui-state-disabled { - opacity: 1; - .ui-text { - color: @color_button_icon_text_dim; - } - .ui-icon { - opacity: 0.2; - } - } + &:enabled:focus { + background-color: @color_button_orange_focus_bg; } -} -.ui-listview { - .ui-btn { - background-color: inherit; + a&.ui-state-disabled, &:disabled { + color: @color_button_orange_text_disable; + background-color: @color_button_orange_disable_bg; + cursor: default; } } -.ui-drawer-close, li a.ui-btn{ - font-weight: inherit; - background-color: inherit; - color: @color_button_with_icon; - overflow: hidden; +.ui-color-green { + color: @color_button_green_text; + background-color: @color_button_green_normal_bg; + + a&:active:hover, &:enabled:active:hover { + background-color: @color_button_green_press_bg; + } + + &:enabled:focus { + background-color: @color_button_green_focus_bg; + } + + a&.ui-state-disabled, &:disabled { + color: @color_button_green_text_disable; + background-color: @color_button_green_disable_bg; + cursor: default; + } } .ui-btn, .ui-btn:active { .ui-background { outline: none; background-color: @color_default; + color: @basic_btn_txt_color_focus; } } @@ -191,7 +190,8 @@ a.ui-btn { button.ui-btn, input.ui-btn { box-sizing: border-box; - .appearance(none); + -webkit-appearance: none; + -moz-appearance: none; width: 100%; &.ui-inline { @@ -278,9 +278,11 @@ button.ui-btn, input.ui-btn { } .ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon, .ui-btn-icon-circle .ui-icon { - position: absolute; + position: absolute; /*top: 50%; margin-top: -9 * @virtual_px;*/ } +/* wongi_1018 : do not use. No more use 18 * @virtual_px default icons. */ + .ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon { position: absolute; left: 50%; @@ -295,7 +297,7 @@ button.ui-btn, input.ui-btn { left: 0 * @virtual_px; } -/* wongi_1018: for circle icon center positioning. */ +/* wongi_1018 : for circle icon center positioning. */ .ui-btn-icon-right .ui-icon { right: 4 * @virtual_px; top: 0; @@ -336,10 +338,11 @@ button.ui-btn, input.ui-btn { padding-bottom: 88 * @virtual_px; } +/* wongi_1017 : Icons */ /* icons sizing */ .ui-btn .ui-icon { - width: 76 * @virtual_px; - height: 76 * @virtual_px; + width: 80 * @virtual_px; + height: 80 * @virtual_px; } /* Padding for Icon with text */ @@ -360,41 +363,14 @@ button.ui-btn, input.ui-btn { .ui-icon { background-repeat: no-repeat; vertical-align: middle; - background-position: center center; - background-size: 100% 100%; - .transition(background 200ms); -} - -.ui-btn-icon-live, -.ui-btn-icon-movie, -.ui-btn-icon-tv-show, -.ui-btn-icon-source, -.ui-btn-icon-app, -.ui-btn-icon-add { - &.ui-shadow:not(.ui-focus):not(.ui-disabled).not(.ui-btn-icon_only) .ui-btn-inner:after { - content: ""; - width: 76 * @virtual_px; - height: 76 * @virtual_px; - top: 0; - left: 0; - right: 0; - margin: auto; - display: block; - position: absolute; - background: url('images/icons/bg_ico_76_shadow.png') no-repeat; - background-size: 77 * @virtual_px 76 * @virtual_px; - background-position: -3 * @virtual_px -1 * @virtual_px; - } + background-position: 0% 0%; + background-size: 100% !important; } + .ui-icon { - .mask-image('images/icons/app_ico_bg.png'); - .mask-size(100%); + -webkit-mask-image: url(images/icons/bg_ico_76_shadow.png), url(images/icons/app_ico_bg.png); + -webkit-mask-size: 80 * @virtual_px 80 * @virtual_px; z-index: 0; - position: relative; -} - -.ui-icon-web { - background-image: url(images/icons/app_ico_web.png); } /**************************************** @@ -402,16 +378,15 @@ ICON LIVE ****************************************/ .ui-icon-live, .ui-listview li a.ui-btn .ui-btn-inner .ui-icon.ui-icon-live { - background-color: @default_color; - background-image: url(images/icons/ico_live_foc.png); + background: rgb(69, 143, 255) url(images/icons/ico_live_foc.png); } .ui-listview li a.ui-btn.ui-btn-icon-live, .ui-btn-icon-live { - .ui-background { - background-color: rgb(69, 143, 255); - } + .ui-background { + background-color: rgb(69, 143, 255); + } &.ui-focus { .ui-btn-inner .ui-icon.ui-icon-live, @@ -422,28 +397,11 @@ ICON LIVE } /**************************************** -ICON PLAY MOVIE -****************************************/ -.ui-icon-play-movie, -.ui-listview li a.ui-btn .ui-btn-inner .ui-icon.ui-icon-play-movie { - background-image: url(images/icons/ico_controller_photo_play.png); - background-color: transparent; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - margin: auto !important; - z-index: 2; - -} - -/**************************************** ICON SHOW ****************************************/ .ui-icon-tv-show, .ui-listview li a.ui-btn .ui-btn-inner .ui-icon.ui-icon-tv-show { - background-color: rgb(255, 168, 0); - background-image: url(images/icons/ico_tv_show_foc.png); + background: rgb(255, 168, 0) url(images/icons/ico_tv_show_foc.png); } .ui-listview li a.ui-btn.ui-btn-icon-tv-show, @@ -465,16 +423,15 @@ ICON MOVE ****************************************/ .ui-icon-movie, .ui-listview li a.ui-btn .ui-btn-inner .ui-icon.ui-icon-movie { - background-image: url(images/icons/ico_moive_foc.png); - background-color: rgb(255, 99, 86); + background: rgb(255, 99, 86) url(images/icons/ico_moive_foc.png); } .ui-listview li a.ui-btn.ui-btn-icon-movie, .ui-btn-icon-movie { - .ui-background { - background-color: rgb(255, 99, 86); - } + .ui-background { + background-color: rgb(255, 99, 86); + } &.ui-focus { .ui-btn-inner .ui-icon.ui-icon-movie, @@ -489,15 +446,15 @@ ICON SOURCE ****************************************/ .ui-icon-source, .ui-listview li a.ui-btn .ui-btn-inner .ui-icon.ui-icon-source { - background-image: url(images/icons/ico_source_foc.png); - background-color: rgb(155, 122, 255); + background: rgb(155, 122, 255) url(images/icons/ico_source_foc.png); } .ui-listview li a.ui-btn.ui-btn-icon-source, .ui-btn-icon-source { - .ui-background { - background-color: @color_button_icon_source; - } + + .ui-background { + background-color: @list_btn_color_focus; + } &.ui-focus { .ui-btn-inner .ui-icon.ui-icon-source, @@ -512,56 +469,19 @@ ICON APP ****************************************/ .ui-icon-app, .ui-listview li a.ui-btn .ui-btn-inner .ui-icon.ui-icon-app { - background-color: rgb(71, 210, 188); - background-image: url(images/icons/ico_app_foc.png); + background: rgb(71, 210, 188) url(images/icons/ico_app_foc.png); } .ui-listview li a.ui-btn.ui-btn-icon-app, .ui-btn-icon-app { - .ui-background { - background-color: @color_button_icon_app; - } - - &.ui-focus { - .ui-btn-inner .ui-icon.ui-icon-app, - .ui-icon { - background-color: white; - } - } -} - -/**************************************** -ICON ADD -****************************************/ -.ui-icon-add, -.ui-listview li a.ui-btn .ui-btn-inner .ui-icon.ui-icon-add { - background-color: @color_button_icon_add; - background-image: url(images/icons/ico_add.png); - background-size: 70%; -} - -.ui-listview li a.ui-btn.ui-btn-icon-add, -.ui-btn-icon-add { - .ui-btn-inner { - opacity: 0.4; - } - .ui-background { - background-color: @color_button_icon_add_bg; - } - - &.ui-focus { - .ui-btn-inner { - opacity: 1; - } - .ui-background { - background-color: @color_button_icon_add_box_bg_focus; + background-color: @list_btn_color_focus; } + &.ui-focus { .ui-btn-inner .ui-icon.ui-icon-app, .ui-icon { - background-color: @color_button_icon_add_focus; - background-image: url(images/icons/ico_add_focus.png); + background-color: white; } } } @@ -573,6 +493,7 @@ ICON ADD } } + /**************************************** ANIMATION ****************************************/ @@ -580,60 +501,61 @@ ANIMATION .ui-btn { .ui-background { position: absolute; - .transition(200ms ease); - } - - /* FOCUS */ - &.ui-focus { - /* animation from down to up */ - &-up { - .ui-background { - bottom: 0; - right: 0; - left: 0; - top: 100%; - .transition-property(top); - } + -webkit-transition-duration: 200ms; + -webkit-transition-timing-function: ease; + } + + /* FOCUS */ + &.ui-focus { + /* animation from down to up */ + &-up { + .ui-background { + top: 100%; + height: 0; + width: 100%; + left: 0; + -webkit-transition-property: top, height; } - /* animation from up to down */ - &-down { - .ui-background { - right:0; - bottom: 100%; - left: 0; - top: 0; - .transition-property(bottom); - } + } + /* animation from up to down */ + &-down { + .ui-background { + height:0; + width: 100%; + left: 0; + top: 0; + -webkit-transition-property: top, height; } - /* animation from rigth to left */ - &-left{ - .ui-background { - bottom: 0; - left: 100%; - right: 0; - top: 0; - .transition-property(left); - } + } + /* animation from rigth to left */ + &-left{ + .ui-background { + width: 0; + height: 100%; + left: 100%; + top: 0; + -webkit-transition-property: left, width; } - /* animation from left to right */ - &-right { - .ui-background { - bottom:0; - right: 100%; - left: 0; - top: 0; - .transition-property(right); - } + } + /* animation from left to right */ + &-right { + .ui-background { + width:0; + height: 100%; + left: 0; + top: 0; + -webkit-transition-property: left, width; } + } + } - &.ui-focus { - .ui-background { - left: 0; - top: 0; - right: 0; - bottom: 0; - } - } + &.ui-focus { + .ui-background { + top: 0; + left: 0; + width: 100%; + height: 100%; + } } /* BLUR */ @@ -641,40 +563,40 @@ ANIMATION &.ui-blur-up { .ui-background { top: 0; - bottom: 100%; + height:0; left: 0; width: 100%; - .transition-property(bottom); + -webkit-transition-property: top, height; } } /* animation from up to down */ &.ui-blur-down { .ui-background { - bottom: 0; - right: 0; - left: 0; top: 100%; - .transition-property(top); + height: 0; + left: 0; + width: 100%; + -webkit-transition-property: top, height; } } /* animation from rigth to left */ &.ui-blur-left{ .ui-background { - bottom: 0; + width: 0; left: 0; top: 0; - right: 100%; - .transition-property(right); + height: 100%; + -webkit-transition-property: left, width; } } /* animation from left to right */ &.ui-blur-right { .ui-background { - bottom:0; - right: 0; - top: 0; + width:0; left: 100%; - .transition-property(left); + top: 0; + height: 100%; + -webkit-transition-property: left, width; } } } diff --git a/tau/src/css/profile/tv/default/common/checkboxradio.less b/tau/src/css/profile/tv/default/common/checkboxradio.less index d2236343..d12b0a2e 100644 --- a/tau/src/css/profile/tv/default/common/checkboxradio.less +++ b/tau/src/css/profile/tv/default/common/checkboxradio.less @@ -1,236 +1,87 @@ .basic-checkboxradio() { - .appearance(none); - height: 38 * @virtual_px; - opacity: 0.0; - width: 38 * @virtual_px; - vertical-align: middle; - position: relative; + -webkit-appearance: none; + height: 38 * @virtual_px; + opacity: 0.0; + width: 38 * @virtual_px; } .basic-label() { - display: inline-block; + display: inline-block; + line-height: 38 * @virtual_px; + margin-left: -38 * @virtual_px; + padding-left: 38 * @virtual_px; height: 38 * @virtual_px; - font-size: 28 * @virtual_px; - line-height: 38 * @virtual_px; - margin-left: -38 * @virtual_px; min-width: 38 * @virtual_px; - padding-bottom: 38 * @virtual_px; - padding-left: 57 * @virtual_px; - position: relative; } input[type=checkbox] { - .basic-checkboxradio(); - & + label { - .basic-label(); - background: url('images/Checkboxradio/checkbox_uncheck_nor.png') no-repeat 0 0; - } - &:disabled + label { - .basic-label(); - background: url('images/Checkboxradio/checkbox_uncheck_nor.png') no-repeat 0 0; - opacity: 0.2; - } - &:checked + label { - .basic-label(); - background: url('images/Checkboxradio/checkbox_check_nor.png') no-repeat 0 0; - } - &:checked:disabled + label { - .basic-label(); - background: url('images/Checkboxradio/checkbox_check_nor.png') no-repeat 0 0; - opacity: 0.2; - } + .basic-checkboxradio(); + & + label { + .basic-label(); + background: url('images/Checkboxradio/checkbox_uncheck_nor.png') no-repeat 0 0; + color: "#FFFFFF"; + } + &:disabled + label { + .basic-label(); + background: url('images/Checkboxradio/checkbox_uncheck_nor.png') no-repeat 0 0; + opacity: 0.2; + } + &:checked + label { + .basic-label(); + background: url('images/Checkboxradio/checkbox_check_nor.png') no-repeat 0 0; + color: "#FFFFFF"; + } + &:checked:disabled + label { + .basic-label(); + background: url('images/Checkboxradio/checkbox_check_nor.png') no-repeat 0 0; + opacity: 0.2; + } } -input[type=checkbox]:focus, -input[type=checkbox].ui-focus { - &:checked + label { - background: url('images/Checkboxradio/checkbox_check_foc.png') no-repeat 0 0; - color: @checkboxradio_label_text_focus; - } - & + label { - background: url('images/Checkboxradio/checkbox_uncheck_foc.png') no-repeat 0 0; - color: @checkboxradio_label_text_focus; - } +input[type=checkbox]:focus { + .basic-checkboxradio(); + &:checked + label { + .basic-label(); + background: url('images/Checkboxradio/checkbox_check_foc.png') no-repeat 0 0; + } + & + label { + .basic-label(); + background: url('images/Checkboxradio/checkbox_uncheck_foc.png') no-repeat 0 0; + } } input[type=radio] { - .basic-checkboxradio(); - & + label { - .basic-label(); - background: url('images/Checkboxradio/radiobtn_uncheck_nor.png') no-repeat 0 0; - color: inherit; - } - &:disabled + label { - .basic-label(); - background: url('images/Checkboxradio/radiobtn_uncheck_nor.png') no-repeat 0 0; - opacity: 0.2; - } - &:checked + label { - .basic-label(); - background: url('images/Checkboxradio/radiobtn_checked_nor.png') no-repeat 0 0; - } - &:checked:disabled + label { - .basic-label(); - background: url('images/Checkboxradio/radiobtn_checked_nor.png') no-repeat 0 0; - opacity: 0.2; - } -} - -input[type=radio]:focus, -input[type=radio].ui-focus { - .basic-checkboxradio(); - &:checked + label { - .basic-label(); - background: url('images/Checkboxradio/radiobtn_checked_foc.png') no-repeat 0 0; - color: @checkboxradio_label_text_focus; - } - & + label { - .basic-label(); - background: url('images/Checkboxradio/radiobtn_uncheck_foc.png') no-repeat 0 0; - color: @checkboxradio_label_text_focus; - } -} - -.checkboxradio-container { - height: 32 * @virtual_px; -} - -.ui-popup:not(.ui-ctxpopup).ui-popup-listview .ui-popup-content .ui-listview .li-has-radio, -.ui-popup:not(.ui-ctxpopup).ui-popup-listview .ui-popup-content .ui-listview .li-has-checkbox { - padding: 0; + .basic-checkboxradio(); + & + label { + .basic-label(); + background: url('images/Checkboxradio/radiobtn_off_nor.png') no-repeat 0 0; + color: "#FFFFFF"; + } + &:disabled + label { + .basic-label(); + background: url('images/Checkboxradio/radiobtn_off_nor.png') no-repeat 0 0; + opacity: 0.2; + } + &:checked + label { + .basic-label(); + background: url('images/Checkboxradio/radiobtn_on_nor.png') no-repeat 0 0; + color: "#FFFFFF"; + } + &:checked:disabled + label { + .basic-label(); + background: url('images/Checkboxradio/radiobtn_on_nor.png') no-repeat 0 0; + opacity: 0.2; + } } -.ui-listview { - .li-has-radio, - .li-has-checkbox { - padding: 0; - position: relative; - .checkboxradio-container { - height: auto; - padding: 32 * @virtual_px 43 * @virtual_px; - .ui-background { - position: absolute; - outline: none; - background-color: @color_default; - color: @color_button_basic_txt_focus; - } - } - } -} - -.ui-page.ui-gray-page { - input[type=radio], - input[type=checkbox]{ - &:checked + label { - color: inherit; - } - &.ui-focus:checked + label, - &:focus:checked + label{ - color: @checkboxradio_label_text_focus; - font-weight: bold; - } - } -} - -/** ANIMATION **/ -.checkboxradio-container { - .ui-background { - position: absolute; - .transition(200ms ease); - } - - /* FOCUS */ - &.ui-focus { - /* animation from down to up */ - &-up { - .ui-background { - top: 100%; - height: 0; - width: 100%; - left: 0; - .transition-property(top, height); - } - } - /* animation from up to down */ - &-down { - .ui-background { - height:0; - width: 100%; - left: 0; - top: 0; - .transition-property(top, height); - } - } - /* animation from rigth to left */ - &-left{ - .ui-background { - width: 0; - height: 100%; - left: 100%; - top: 0; - .transition-property(top, height); - } - } - /* animation from left to right */ - &-right { - .ui-background { - width:0; - height: 100%; - left: 0; - top: 0; - .transition-property(top, height); - } - } - } - - &.ui-focus { - .ui-background { - top: 0; - left: 0; - width: 100%; - height: 100%; - } - } - - /* BLUR */ - /* animation from down to up */ - &.ui-blur-up { - .ui-background { - top: 0; - height:0; - left: 0; - width: 100%; - .transition-property(top, height); - } - } - /* animation from up to down */ - &.ui-blur-down { - .ui-background { - top: 100%; - height: 0; - left: 0; - width: 100%; - .transition-property(top, height); - } - } - /* animation from rigth to left */ - &.ui-blur-left{ - .ui-background { - width: 0; - left: 0; - top: 0; - height: 100%; - .transition-property(top, height); - } - } - /* animation from left to right */ - &.ui-blur-right { - .ui-background { - width:0; - left: 100%; - top: 0; - height: 100%; - .transition-property(top, height); - } - } +input[type=radio].focus { + .basic-checkboxradio(); + &:checked + label { + .basic-label(); + background: url('images/Checkboxradio/radiobtn_on_foc.png') no-repeat 0 0; + } + & + label { + .basic-label(); + background: url('images/Checkboxradio/radiobtn_off_foc.png') no-repeat 0 0; + } } diff --git a/tau/src/css/profile/tv/default/common/contextualmenu.less b/tau/src/css/profile/tv/default/common/contextualmenu.less deleted file mode 100644 index 9bd60dfc..00000000 --- a/tau/src/css/profile/tv/default/common/contextualmenu.less +++ /dev/null @@ -1,139 +0,0 @@ -.ui-contextual-menu { - display: none; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - - &.ui-contextual-menu-open { - display: block; - } - - .ui-contextual-menu-main { - position: absolute; - top: 0; - left: 0; - right: 596 * @virtual_px; - bottom: 0; - z-index: 101; - overflow: hidden; - .flex(1 0 auto); - - // Become flex parent for the elements below - .display-flex(); - .flex-direction(column); - .justify-content(center); - .align-items(center); - } - - .ui-contextual-menu-buttons { - right: 40 * @virtual_px; - top: 75 * @virtual_px; - width: 546 * @virtual_px; - bottom: 353 * @virtual_px; - position: absolute; - z-index: 101; - overflow: hidden; - - - .ui-btn { - width: 104 * @virtual_px; - height: 115 * @virtual_px; - min-width: 104 * @virtual_px; - min-height: 115 * @virtual_px; - padding: 0; - margin-right: 26 * @virtual_px; - margin-bottom: 28 * @virtual_px; - &[data-icon]:not(.ui-btn-icon_only) { - background-color: transparent; - } - - .ui-btn-inner { - min-width: 104 * @virtual_px; - background-image: url("images/icons/btn_controller_nor.png"); - background-size: 64 * @virtual_px 64 * @virtual_px; - background-repeat: no-repeat; - background-position: top center; - .ui-icon { - top: 0; - left: 20 * @virtual_px; - width: 64 * @virtual_px; - height: 64 * @virtual_px; - .mask-image(); - .mask-size(64 * @virtual_px 64 * @virtual_px); - background-color: white; - background-image: none; - - &.ui-icon-live { - .mask-image("images/icons/ico_live_foc.png"); - } - - &.ui-icon-tv-show { - .mask-image("images/icons/ico_live_foc.png"); - } - - &.ui-icon-movie { - .mask-image("images/icons/ico_moive_foc.png"); - } - } - - .ui-btn-text.ui-btn-text-padding-left { - padding-left: 0; - padding-top: 71 * @virtual_px; - height: 115 * @virtual_px; - font-size: 21 * @virtual_px; - line-height: 22 * @virtual_px; - text-align: center; - text-transform: uppercase; - width: 104 * @virtual_px; - text-overflow: clip; - white-space: normal; - } - } - - &.ui-focus { - .ui-btn-inner { - background-image: none; - &::before { - content: ""; - position: absolute; - top: 0; - left: 20 * @virtual_px; - width: 64 * @virtual_px; - height: 64 * @virtual_px; - .mask-image("images/icons/app_ico_bg.png"); - .mask-size(64 * @virtual_px 64 * @virtual_px); - background-color: @default_color; - } - } - } - } - } - - .ui-contextual-menu-related { - right: 40 * @virtual_px; - width: 546 * @virtual_px; - top: 390 * @virtual_px; - bottom: 0; - position: absolute; - z-index: 101; - overflow: hidden; - - .ui-li-divider { - padding: 37 * @virtual_px 16 * @virtual_px 8 * @virtual_px 16 * @virtual_px; - font-size: 27 * @virtual_px; - font-weight: bold; - } - } - - .ui-contextual-menu-background { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.8); - z-index: 100; - } -}
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/common/core.less b/tau/src/css/profile/tv/default/common/core.less index 79a004fc..66816624 100644 --- a/tau/src/css/profile/tv/default/common/core.less +++ b/tau/src/css/profile/tv/default/common/core.less @@ -3,33 +3,42 @@ */ /*************************************************************** default font size (base font from WRT) - => small: 13 * @virtual_px - => normal: 17 * @virtual_px - => large: 20 * @virtual_px + => small: 13px + => normal: 17px + => large: 20px + +so, we set @font_size_default as 17px. +This value only used for @rem_base, not for html font-size +html font-size is set by WRT base font-size ***************************************************************/ +@font_size_default: 17px; // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS! + +@rem_base: (1rem/@font_size_default); +@em_base: 1em/@font_size_default; // WARNING: Don't use em unit! This value is to be removed. +@px_base: 1px; + +// Default unit for px created due to two different resolutions of TV profile +@virtual_px: 0.05208333333vw; + +@unit_base: @virtual_px; // was @rem_base -/** Font family */ @font_family: Tizen, Samsung Sans, Helvetica; +/****************************** + z-index order collection + ******************************/ +@z_base_maximum: 2147483647; +@z_base_header_footer: 1000; +@z_base_popup: @z_base_header_footer + 100; + /*************************************************************************** Common Colors **************************************************************************/ - -/** Common color defoult color*/ @color_default: rgb(69, 143, 255); /*************************************************************************** Common Style ***************************************************************************/ - -.tau-info-theme { - position: absolute; - top: -999px; - left: -999px; -} - - -/** Style for hidden screen */ .screen-hidden { visibility: hidden; position: absolute; top: -10000em; left: -10000em;} /*************************************************************************** @@ -66,7 +75,25 @@ img { Global LESS mixin collection ******************************/ -/** Mixin setting background size. Browser independent */ +// Mixin : background ************************ +.LESSbackground-img-with-gradient(@from: top, @startcolor: #3c3c3c, @endcolor: #111) { + background-image: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor)); /* Saf4+, Chrome */ + background-image: -webkit-linear-gradient(@from, @startcolor, @endcolor); + background-image: -moz-linear-gradient(@from, @startcolor, @endcolor); + background-image: -ms-linear-gradient(@from, @startcolor, @endcolor); + 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; @@ -75,7 +102,34 @@ img { background-size: @width @height; } -/** Mixin setting border radios. Browser independent */ +// 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; + -ms-border-image: url(@url) @width @height @repeat; + border-image: url(@url) @width @height @repeat; +} +.LESSborder-radius-topleft(@radius) { + -moz-border-radius-topleft: @radius; + -webkit-border-top-left-radius: @radius; + border-top-left-radius: @radius; +} +.LESSborder-radius-topright(@radius) { + -moz-border-radius-topright: @radius; + -webkit-border-top-right-radius: @radius; + border-top-right-radius: @radius; +} +.LESSborder-radius-bottomleft(@radius) { + -moz-border-radius-bottomleft: @radius; + -webkit-border-bottom-left-radius: @radius; + border-bottom-left-radius: @radius; +} +.LESSborder-radius-bottomright(@radius) { + -moz-border-radius-bottomright: @radius; + -webkit-border-bottom-right-radius: @radius; + border-bottom-right-radius: @radius; +} .LESSborder-radius-all(@radius) { -o-border-radius: @radius; -ms-border-radius: @radius; @@ -83,8 +137,14 @@ img { -webkit-border-radius: @radius; border-radius: @radius; } - -/** Mixin setting box shadow. Browser independent */ +.LESSborder-radius-allimportant(@radius) { + -o-border-radius: @radius ! important; + -ms-border-radius: @radius ! important; + -moz-border-radius: @radius ! important; + -webkit-border-radius: @radius ! important; + border-radius: @radius ! important; +} +// Mixin : box *************************** .LESSbox-shadow(@hshadow, @vshadow, @blur, @color) { -o-box-shadow: @hshadow @vshadow @blur @color; -ms-box-shadow: @hshadow @vshadow @blur @color; @@ -93,10 +153,80 @@ img { box-shadow: @hshadow @vshadow @blur @color; } -/** Mixin setting text ellipsis. Browser independent */ +.LESSbox-border-shadow(@size, @color) { + -o-box-shadow: inset 0 0 0 @size @color; + -ms-box-shadow: inset 0 0 0 @size @color; + -moz-box-shadow: inset 0 0 0 @size @color; + -webkit-box-shadow: inset 0 0 0 @size @color; + box-shadow: inset 0 0 0 @size @color; +} + +.LESSbox-shadow-line( @value ) { + -o-box-shadow: @value; + -ms-box-shadow: @value; + -moz-box-shadow: @value; + -webkit-box-shadow: @value; + box-shadow: @value; +} + +.LESSbox-boxsizing( @value ) { + -o-box-sizing: @value; + -ms-box-sizing: @value; + -moz-box-sizing: @value; + -webkit-box-sizing: @value; + box-sizing: @value; +} + +.LESSdisplaybox() { + display:-moz-box; + display:-webkit-box; + display:box; +} +//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; +} + +// Mixin : Utility ************************************ +// Mixin : transform +.LESStransform(@method) { + transform: @method; + -ms-transform: @method; + -moz-transform: @method; + -webkit-transform: @method; + -o-transform: @method; +} + +// Mixin : text ellipsis .LESStext-ellipsis() { white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; - overflow: hidden; +} + +.LESStext-no-ellipsis() { + white-space: normal; + overflow: visible !important; } diff --git a/tau/src/css/profile/tv/default/common/dateinput.less b/tau/src/css/profile/tv/default/common/dateinput.less deleted file mode 100644 index babacc3f..00000000 --- a/tau/src/css/profile/tv/default/common/dateinput.less +++ /dev/null @@ -1,72 +0,0 @@ -input[type=date] { - .appearance(none); -} - -.ui-date-input { - position: relative; - input { - display: none; - } - &:not(.ui-date-input-active) { - display: inline-block; - color: @color_input_number_text; - .ui-spin-control ~ .ui-spin-control { - border-left: 0; - padding-left: 30 * @virtual_px; - } - .ui-spin-control ~ .ui-spin-control::before { - text-align: center; - vertical-align: middle; - font-size: 30 * @virtual_px; - font-weight: bold; - content: '/'; - display: inline-block; - position: absolute; - left: 10 * @virtual_px; - top: 50%; - margin-top: -0.5em; - } - &.ui-date-input-focus { - background-color: @color_input_number_bg_focus; - color: @color_input_number_text_focus; - .ui-spin-control-number { - color: @color_input_number_text_focus; - } - } - } - &.ui-date-input-active { - z-index: 1000; - display: flex; - text-align: center; - position: absolute; - right: 0; - top: ~"-webkit-calc(-50% - 0.70em)"; - .ui-spin-control-active { - position: relative; - } - .ui-spin-control-active ~ .ui-spin-control-active { - border-left: 2 * @virtual_px solid @color_spincontrol_separator; - } - .ui-spin-control-active ~ .ui-spin-control-active::before { - content: ''; - display: none; - } - } -} - -.ui-date-input-placeholder { - display: inline-block; - position: relative; - font-size: 30 * @virtual_px; - vertical-align: top; -} - - -/** - * Interacion with others UI components - */ -.ui-listview li { - input[type=date] { - margin: -19 * @virtual_px 0; - } -} diff --git a/tau/src/css/profile/tv/default/common/drawer.less b/tau/src/css/profile/tv/default/common/drawer.less index 147e9aee..994242d3 100644 --- a/tau/src/css/profile/tv/default/common/drawer.less +++ b/tau/src/css/profile/tv/default/common/drawer.less @@ -1,102 +1,90 @@ -.ui-drawer .ui-listview, -.ui-home-bar-main, -.ui-drawer .ui-dynamic-box-no-content { - float: left; - height: 100vh; - background-color: @color_drawer_bg; - overflow: hidden; - position: relative; -} - -.ui-drawer .ui-dynamic-box .ui-listview, -.ui-home-bar-main { - width: 270 * @virtual_px; -} +@drawer_btn_close_background_color: rgb(69, 143, 255); +@drawer_btn_color: rgb(255, 255, 255); +@drawer_divider_color: rgb(42, 50, 64); +@drawer_divider_border: rgb(6, 8, 11); +@drawer_divider_btn_color: rgb(211, 211, 211); +@drawer_dinamic_footer_background_color: rgb(45, 45, 45); -.ui-home-bar-header-box { - overflow: hidden; -} -.ui-drawer .ui-dynamic-box .ui-listview, -.ui-home-bar, -.ui-home-bar-box, -.ui-home-bar-header-box { +.ui-drawer { + position : absolute; margin: 0; - overflow-y: scroll; - width: 270 * @virtual_px; - - .ui-li.ui-btn-up-s { - background-color: @color_drawer_bg; - } - .ui-li.ui-btn-down-s { - background-color: @color_drawer_list_press; + background-color : @color_drawer_bg; + z-index : 1201; + &.ui-drawer-left { + border-right : 1 * @virtual_px solid @color_list_border_bottom; + /* drawer right border color same to list border bottom color */ } - .ui-drawer-sub-list > .ui-btn-inner .ui-btn-text { - .ui-link-inherit { - padding-left: 26 * @virtual_px; - } + &.ui-drawer-right { + border-left : 1 * @virtual_px solid @color_list_border_bottom; } - li { - text-align: center; - border-bottom: none; - a { - width: auto; - height: auto; + .ui-listview { + margin : 0; + float: left; + height: 100vh; + width: 270 * @virtual_px; + overflow-y: scroll; - &.ui-btn, &.ui-btn[data-icon]:not(.ui-btn-icon_only) { - background-color: transparent; + + .ui-li.ui-btn-up-s { + background-color : @color_drawer_bg; + } + .ui-li.ui-btn-down-s { + background-color : @color_drawer_list_press; + } + .ui-drawer-sub-list > .ui-btn-inner .ui-btn-text { + .ui-link-inherit { + padding-left : 26 * @unit_base; } + } + li { + text-align: center; + border-bottom: none; + a { + width: auto; + height: auto; + .ui-btn-inner { + color: @drawer_btn_color; + overflow: visible; - .ui-btn-inner { - color: @color_drawer_btn; - overflow: visible; + .ui-btn-text { + margin: 0; + display: block; - .ui-btn-text { - margin: 0; - display: block; + &.ui-btn-text-padding-top { + padding: 0; + } - &.ui-btn-text-padding-top { - padding: 0; - } + .li-text-sub { + color: @drawer_btn_color; + } - .li-text-sub { - color: @color_drawer_btn; } } } } + li:hover { + background-color : @color_drawer_bg; + } + .ui-home-block { + padding: 40 * @virtual_px; + } } - li:hover { - background-color: @color_drawer_bg; - } - .ui-home-block { - padding: 40 * @virtual_px; - } -} - -.ui-drawer { - position: absolute; - margin: 0; - z-index: 900; - .display-flex(); - &.ui-drawer-left { - border-right: 1 * @virtual_px solid @color_drawer_border; - /* drawer right border color same to list border bottom color */ - } - &.ui-drawer-right { - border-left: 1 * @virtual_px solid @color_drawer_border; + .ui-listview-first { + li { + text-transform: uppercase; + } } - .ui-drawer-close { - float: left; + float:left; height: 100vh; width: 30 * @virtual_px; - background: @color_drawer_back_bg url(@drawer_back_background) no-repeat center center; + background: url(@drawer_back_background) no-repeat center center; padding: inherit; min-width: inherit; &.ui-focus { - background-color: @color_drawer_btn_close_background; + background-color: @drawer_btn_close_background_color; } } @@ -105,37 +93,13 @@ width: 636 * @virtual_px; height: 100vh; - &.ui-dynamic-box-no-content { - &.ui-dynamic-box-active { - .display-flex(); - .flex-direction(column); - .justify-content(center); - } - padding: 30 * @virtual_px; - header { - width: 100%; - font-size: @fixed_popup_header_font_size_no_box; - color: @color_popup_title_text_no_box; - font-weight: bold; - text-align: center; - } - - div { - width: 100%; - font-size: @fixed_popup_toast_font_size; - color: @color_popup_text_no_box; - text-align: center; - } - } - - .ui-listview { width: 100%; padding: 17 * @virtual_px 20 * @virtual_px; li:not(.ui-list-divider) { text-align: left; - background-color: @color_drawer_listview_not_divider; - border-bottom: solid 2 * @virtual_px @color_drawer_listview_not_divider_border; + background-color: @drawer_divider_color; + border-bottom: solid 2 @virtual_px @drawer_divider_border; margin-bottom: 14 * @virtual_px; > * { overflow: visible; @@ -147,7 +111,7 @@ } } - .ui-list-divider { + .ui-list-divider{ padding: 14 * @virtual_px 14 * @virtual_px; min-height: 0; background-color: transparent; @@ -155,7 +119,7 @@ > .ui-btn-text { font-size: 27 * @virtual_px; - color: @color_drawer_divider_btn; + color: @drawer_divider_btn_color; } > .ui-divider-normal-line { @@ -166,15 +130,11 @@ .ui-li-dynamic { text-transform: none; margin-bottom: 20 * @virtual_px; - padding: 0; a { padding: 0; - margin: 0; .ui-btn-inner { .ui-btn-text { - display: flex; - flex-direction: column; > img { width: 100%; z-index: 1; @@ -183,7 +143,7 @@ margin: 0; } footer { - background-color: @color_drawer_dynamic_footer_background; + background-color: @drawer_dinamic_footer_background_color; position: absolute; bottom: 0; left: 0; @@ -191,24 +151,16 @@ z-index: 2; overflow: hidden; - .ui-li-dynamic-footer-icon { - order: 5; - .mask-size(100%); - background-color: rgba(137, 137, 137, 0.8); - display: inline; - float: right; + img { width: 40 * @virtual_px; height: 40 * @virtual_px; margin: 5 * @virtual_px 20 * @virtual_px; float: right; - img { - display: none; - } } h2 { font-size: 24 * @virtual_px; - color: @color_drawer_footer_btn; - font-weight: normal; + color: @drawer_divider_btn_color; + font-weight: nornal; margin: 12 * @virtual_px 0 12 * @virtual_px 0; display: inline-block; overflow: hidden; @@ -219,16 +171,15 @@ } h3 { font-size: 20 * @virtual_px; - color: @color_drawer_footer_btn; - font-weight: normal; + color: @drawer_divider_btn_color; + font-weight: nornal; margin: 12 * @virtual_px 12 * @virtual_px 12 * @virtual_px 25 * @virtual_px; padding-right: 12 * @virtual_px; - border-right: @virtual_px solid @color_drawer_btn; + border-right: @virtual_px solid @drawer_btn_color; display: inline-block; float: left; } - div:not(.ui-background), - progress { + div, progress { display: none } } @@ -240,32 +191,32 @@ .ui-btn-text { footer { position: relative; + background-color: @drawer_btn_close_background_color; h2 { - color: @color_drawer_btn; - font-size: 24 * @virtual_px; + color: @drawer_btn_color; + font-size: 36 * @virtual_px; float: none; width: auto; margin: 25 * @virtual_px 0 0 25 * @virtual_px; display: block; } h3 { - color: @color_drawer_btn; + color: @drawer_btn_color; font-size: 20 * @virtual_px; clear: left; - margin-top: 2 * @virtual_px; - margin-right: 8 * @virtual_px; + margin-top: 2* @virtual_px; + margin-right: 8* @virtual_px; + padding-right: 8* @virtual_px; } - .ui-li-dynamic-footer-icon { - width: 56 * @virtual_px; - height: 56 * @virtual_px; - background-color: rgb(255, 255, 255); - margin: 25 * @virtual_px 20 * @virtual_px 0 20 * @virtual_px; + img { + margin: 25 * @virtual_px 20 * @virtual_px; } div { display: inline-block; float: left; - color: @color_drawer_btn; + color: @drawer_btn_color; font-size: 20 * @virtual_px; + margin-top: 2* @virtual_px; } progress { clear: both; @@ -273,363 +224,6 @@ padding-left: 25 * @virtual_px; padding-right: 25 * @virtual_px; } - .ui-background { - z-index: -1; - background-color: @color_drawer_footer_btn_background; - } - } - header { - position: absolute; - top: 0; - left: 0; - z-index: 10; - width: 100%; - .ui-li-dynamic-info { - float: right; - margin-top: 14 * @virtual_px; - margin-right: 18 * @virtual_px; - font-size: 22 * @virtual_px; - color: rgb(200, 200, 200); - } - } - } - } - } - } - &-1line { - a { - .ui-btn-inner { - .ui-btn-text { - footer { - display: flex; - align-items: center; - h2 { - order: 3; - flex: 1 0 auto; - font-size: 19 * @virtual_px; - } - h3 { - order: 1; - font-size: 24 * @virtual_px; - border-right: 0; - padding-right: 0; - font-weight: bold; - } - &::after { - order: 2; - content: ""; - display: inline-block; - padding-top: 8 * @virtual_px; - margin-right: 12 * @virtual_px; - height: 8 * @virtual_px; - width: 1 * @virtual_px; - background-color: @color_drawer_btn; - } - } - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - footer { - h2 { - font-size: 19 * @virtual_px; - margin: 12 * @virtual_px 0 12 * @virtual_px 0; - line-height: 24 * @virtual_px; - } - h3 { - font-size: 24 * @virtual_px; - line-height: 26 * @virtual_px; - margin: 12 * @virtual_px 12 * @virtual_px 12 * @virtual_px 25 * @virtual_px; - } - } - } - } - } - } - &-icon { - a { - .ui-btn-inner { - .ui-btn-text { - footer { - display: flex; - h2 { - order: 1; - flex: 1 0 auto; - margin-left: 25 * @virtual_px; - font-size: 24 * @virtual_px; - font-weight: bold; - } - .ui-li-dynamic-footer-icon { - order: 2; - } - } - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - footer { - h2 { - margin: 12 * @virtual_px 0 12 * @virtual_px 25 * @virtual_px; - } - .ui-li-dynamic-footer-icon { - margin-top: auto; - margin-bottom: auto; - width: 40 * @virtual_px; - height: 40 * @virtual_px; - } - } - } - } - } - } - } - } - &-icon-1line { - a { - .ui-btn-inner { - .ui-btn-text { - footer { - display: flex; - h2 { - order: 2; - flex: 1 0 auto; - margin: 10 * @virtual_px 25 * @virtual_px 10 * @virtual_px 0; - font-size: 30 * @virtual_px; - font-weight: bold; - line-height: 30 * @virtual_px; - } - .ui-li-dynamic-footer-icon { - width: 37 * @virtual_px; - height: 38 * @virtual_px; // @ webkit rendering patch original value: 37 - order: 1; - margin-left: 25 * @virtual_px; - margin-right: 12 * @virtual_px; - .mask-image("images/icons/ico_bg_37.png"); - .mask-size(37 * @virtual_px, 25 * @virtual_px); - .mask-composite(source-out); - .mask-repeat(no-repeat, no-repeat); - .mask-position(center, center); - &::after { - content: ""; - background-color: white; - widht: 100%; - height: 100%; - } - } - } - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - footer { - h2 { - font-size: 30 * @virtual_px; - font-weight: bold; - line-height: 30 * @virtual_px; - margin: 10 * @virtual_px 25 * @virtual_px 10 * @virtual_px 0; - } - .ui-li-dynamic-footer-icon { - margin: auto 12 * @virtual_px auto 25 * @virtual_px; - width: 37 * @virtual_px; - height: 38 * @virtual_px; // @ webkit rendering patch original value: 37 - } - } - } - } - } - } - } - &-multiline { - a { - .ui-btn-inner { - .ui-btn-text { - footer { - display: flex; - align-items: center; - h2 { - order: 3; - flex: 1 0 auto; - font-size: 24 * @virtual_px; - line-height: normal; - margin: 11 * @virtual_px 0; - } - h3 { - display: flex; - align-items: center; - order: 1; - font-size: 19 * @virtual_px; - line-height: 22 * @virtual_px; - border-right: 0; - padding-right: 0; - font-weight: normal; - &::after { - content: ""; - display: inline-block; - margin-left: 12 * @virtual_px; - height: 15 * @virtual_px; - width: 1 * @virtual_px; - background-color: @color_drawer_btn; - } - } - progress { - margin-right: 0; - margin-bottom: 0; - height: 4 * @virtual_px; - margin-top: 9 * @virtual_px; - &::-webkit-progress-bar { - background-color: @color_drawer_progressbar_bg; - } - &::-webkit-progress-value { - background-color: @color_drawer_progressbar_value; - } - } - } - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - footer { - display: inline; - h2 { - color: @color_drawer_btn; - font-size: 34 * @virtual_px; - line-height: 34 * @virtual_px; - font-weight: bold; - float: none; - width: auto; - margin: 25 * @virtual_px 0 0 25 * @virtual_px; - display: block; - } - h3 { - color: @color_drawer_btn; - font-size: 20 * @virtual_px; - font-weight: bold; - clear: left; - margin-top: 2 * @virtual_px; - margin-right: 0; - margin-bottom: 11 * @virtual_px; - padding-right: 8 * @virtual_px; - } - div { - .ui-li-dynamic-from { - font-size: 20 * @virtual_px; - } - .ui-li-dynamic-to { - font-size: 20 * @virtual_px; - } - } - progress { - height: 4 * @virtual_px; - margin-bottom: 20 * @virtual_px; - } - } - } - } - } - } - } - &.ui-li-grid-icon { - width: 280 * @virtual_px; - height: 280 * @virtual_px; - a { - height: 100%; - .ui-btn-inner { - height: 100%; - .ui-btn-text { - height: 100%; - img { - width: 100%; - position: absolute; - top: 0; - } - footer { - display: flex; - h2 { - order: 2; - flex: 1 0 auto; - margin: 25 * @virtual_px 25 * @virtual_px 25 * @virtual_px 0; - color: white; - font-size: 30 * @virtual_px; - line-height: normal; - font-weight: bolder; - } - .ui-li-dynamic-footer-icon { - width: 38 * @virtual_px; - // webkit rendering issue, original value 37: - height: 38 * @virtual_px; - order: 1; - margin: auto 12 * @virtual_px auto 25 * @virtual_px; - .mask-image("images/icons/ico_bg_37.png"); - .mask-size(37 * @virtual_px, 25 * @virtual_px); - .mask-composite(source-out); - .mask-repeat(no-repeat, no-repeat); - .mask-position(center, center); - background-color: @color_drawer_footer_btn_background; - } - } - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - footer { - h2 { - font-size: 30 * @virtual_px; - margin: 25 * @virtual_px 25 * @virtual_px 25 * @virtual_px 0; - } - .ui-li-dynamic-footer-icon { - margin: auto 12 * @virtual_px auto 25 * @virtual_px; - width: 37 * @virtual_px; - // webkit rendering issue, original value 37: - height: 38 * @virtual_px; - background-color: rgb(255, 255, 255); - } - } - } - } - } - } - } - &.ui-li-grid { - width: 280 * @virtual_px; - float: left; - margin-left: 6 * @virtual_px; - a { - .ui-btn-inner { - .ui-btn-text { - img { - width: 100%; - position: relative; - } - footer { - display: block; - position: relative; - h2 { - font-size: 24 * @virtual_px; - line-height: normal; - padding: 0 25 * @virtual_px; - margin: 20 * @virtual_px 0; - width: 100%; - color: white; - } - } - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - footer { - h2 { - //font-size: 30 * @virtual_px; - padding: 0 25 * @virtual_px; - margin: 20 * @virtual_px 0; - width: 100%; - } - } } } } @@ -637,8 +231,7 @@ } } - .ul-li-poster, - .ul-li-icon { + .ul-li-poster, .ul-li-icon { width: 185 * @virtual_px; float: left; a .ui-btn-inner .ui-btn-text { @@ -646,12 +239,11 @@ width: 185 * @virtual_px; } footer { - background-color: @color_drawer_poster_icon_footer_background; + background-color: @drawer_dinamic_footer_background_color; h2 { margin: 25 * @virtual_px; width: 135 * @virtual_px; float: none; - .transition(font 200ms); } } } @@ -667,194 +259,6 @@ } } - .ui-li-thumb { - padding: 0; - a { - margin: 0; - padding: 0; - .ui-btn-inner { - display: flex; - .ui-btn-text { - color: @color_list_btn_txt; - flex: 1 0 auto; - margin: 32 * @virtual_px 32 * @virtual_px 37 * @virtual_px 38 * @virtual_px; - .ui-text { - margin: 0; - font-size: 32 * @virtual_px; - line-height: normal; - font-weight: bold; - } - .li-text-sub { - margin: 0; - font-size: 20 * @virtual_px; - line-height: normal; - color: @color_list_btn_txt; - } - } - .thumb { - min-height: 124 * @virtual_px; - min-width: 124 * @virtual_px; - background-position: center center; - background-size: 100%; - img { - display: none; - } - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - color: @color_list_btn_txt_focus; - .ui-text { - font-weight: bold; - } - .li-text-sub { - color: @color_list_btn_txt_focus; - } - } - } - } - } - } - - .ui-li-lines-icon { - padding: 0; - a { - margin: 0; - padding: 0; - .ui-btn-inner { - display: flex; - width: 100%; - align-items: center; - .ui-btn-text { - display: flex; - flex: 1 0 auto; - flex-direction: column; - margin: 32 * @virtual_px 0 37 * @virtual_px 38 * @virtual_px; - padding-right: 0 * @virtual_px; - color: @color_list_btn_txt; - .ui-text { - margin: 0; - font-size: 32 * @virtual_px; - line-height: normal; - font-weight: bold; - } - .li-text-sub { - margin: 0; - font-size: 20 * @virtual_px; - line-height: normal; - color: @color_list_btn_txt; - } - } - .ui-icon { - min-height: 80 * @virtual_px; - min-width: 80 * @virtual_px; - position: relative; - right: 0; - top: 0; - margin: auto 32 * @virtual_px; - .mask-composite(source-over, source-out); - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - color: @color_list_btn_txt_focus; - .ui-text { - font-weight: bold; - } - .li-text-sub { - color: @color_list_btn_txt_focus; - } - } - .ui-icon { - background-color: white; - .mask-composite(source-over); - } - } - } - } - } - - .ui-li-icon-progressbar { - padding: 0; - a { - margin: 0; - padding: 0; - .ui-btn-inner { - display: flex; - width: 100%; - align-items: center; - .ui-btn-text { - color: @color_list_btn_txt; - flex: 1 0 auto; - flex-direction: column; - margin: 32 * @virtual_px 0 47 * @virtual_px 38 * @virtual_px; - padding-right: 0; - .ui-text { - display: inline-block; - margin: 0; - font-size: 32 * @virtual_px; - line-height: normal; - font-weight: normal; - } - progress { - margin-right: 0; - margin-bottom: 0; - height: 4 * @virtual_px; - margin-top: 9 * @virtual_px; - &::-webkit-progress-bar { - background-color: @color_drawer_progressbar_bg; - } - &::-webkit-progress-value { - background-color: @color_drawer_progressbar_value; - } - } - label { - float: right; - font-size: 20 * @virtual_px; - line-height: 100%; - margin-top: 24 * @virtual_px; - } - } - .ui-icon { - min-height: 80 * @virtual_px; - min-width: 80 * @virtual_px; - position: relative; - right: 0; - top: 0; - margin: auto 32 * @virtual_px; - .mask-composite(source-over, source-out); - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - color: @color_list_btn_txt_focus; - .ui-text { - font-weight: bold; - } - .li-text-sub { - color: @color_list_btn_txt_focus; - } - } - .ui-icon { - background-color: white; - .mask-composite(source-over); - } - } - } - &:not(.ui-focus) { - .ui-btn-inner { - .ui-icon { - background-image: none !important; - } - } - } - } - } - - .ul-li-icon { height: 185 * @virtual_px; a .ui-btn-inner .ui-btn-text { @@ -872,7 +276,6 @@ footer { h2 { color: black; - .transition(color 200ms); } } @@ -891,9 +294,8 @@ } } - .ul-li-poster, - .ul-li-icon { - &:nth-child(2n) { + .ul-li-poster, .ul-li-icon { + &:nth-child(3n+2), &:nth-child(3n) { margin-right: 16 * @virtual_px; } } @@ -901,130 +303,40 @@ } } -.ui-listview { - li.ui-li-contextual-menu { - padding: 0; - a { - &.ui-btn { - margin: 0; - padding: 0; - .ui-btn-inner { - display: flex; - width: 100%; - align-items: center; - .ui-btn-text { - order: 2; - flex: 1 0 auto; - display: flex; - align-items: center; - margin: 0; - padding: 0; - .ui-text { - margin: 0; - font-size: 24 * @virtual_px; - line-height: 24 * @virtual_px; - font-weight: normal; - color: @color_list_btn_txt; - } - img { - margin: 0 0 0 14 * @virtual_px; - float: none; - width: auto; - height: auto; - } - .ui-status-icon { - opacity: 0.7; - width: 30 * @virtual_px; - height: 30 * @virtual_px; - } - } - .ui-icon-wrapper { - display: flex; - flex-direction: column; - width: 95 * @virtual_px; - align-items: center; - .ui-icon { - flex: 1 0 auto; - position: relative; - margin: 29 * @virtual_px 19 * @virtual_px 3 * @virtual_px 32 * @virtual_px; - width: 44 * @virtual_px; - height: 44 * @virtual_px; - .mask-size(100%); - .mask-composite(source-over, source-out); - left: 0; - } - .ui-icon-title { - flex: 1 0 auto; - font-size: 24 * @virtual_px; - line-height: 24 * @virtual_px; - margin-bottom: 19 * @virtual_px; - text-align: center; - margin-left: 13 * @virtual_px; - color: @color_list_btn_txt; - } - } - } - } - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - .ui-text { - color: @color_list_btn_txt_focus; - } - .ui-status-icon { - opacity: 1.0; - } - } - .ui-icon-wrapper { - .ui-icon { - background-color: white; - } - .ui-icon-title { - color: @color_list_btn_txt_focus; - } - } - } - } - } - } -} - - - - .ui-drawer-overlay { - position: absolute; - z-index: 899; + position : absolute; + z-index : 1200; } .ui-header.ui-bar-s { &.ui-drawer-header { .ui-title { - margin-left: 40 * @virtual_px; + margin-left : 40 * @unit_base; } .ui-btn.ui-drawer-button.ui-btn-icon_only { position: absolute; top: 0; left: 0; - padding-left: 7 * @virtual_px; - padding-right: 8 * @virtual_px; - width: 27 * @virtual_px; - height: 48 * @virtual_px; + padding-left : 7 * @virtual_px; + padding-right : 8 * @virtual_px; + width : 27 * @virtual_px; + height : 48 * @virtual_px; &.ui-btn-down-s { - background-color: @color_bar_header_btn; + background-color : @color_bar_naviframe_press; } .ui-btn-inner.ui-btn-icon-only .ui-icon { top: 2 * @virtual_px; - width: 27 * @virtual_px; - height: 27 * @virtual_px; + width : 27 * @virtual_px; + height : 27 * @virtual_px; background-color: @color_bar_btn_normal; } } } } + .ui-dynamic-box { display: none; } @@ -1032,106 +344,3 @@ .ui-dynamic-box-active { display: block; } - -.ui-home-bar { - - &-background { - position: absolute; - display: none; - top: 0; - width: 100%; - height: 100%; - z-index: 901; - background-color: rgba(0, 0, 0, 0.7); - } - - &-background-active { - display: block; - } - - &-container { - position: absolute; - top: 0; - z-index: 902; - transition: all 0.2s ease-out; - } - &-box { - position: absolute; - left: 0; - bottom: 50 * @virtual_px; - top: 50 * @virtual_px; - } - - &-button-up { - background: url(@drawer_up) no-repeat center center; - right: 50 * @virtual_px; - height: 50 * @virtual_px; - top: 0; - left: 0; - position: absolute; - } - - &-button-down { - background: url(@drawer_down) no-repeat center center; - right: 50 * @virtual_px; - height: 50 * @virtual_px; - bottom: 0; - left: 0; - position: absolute; - } - - &-button-close { - width: 50 * @virtual_px; - top: 50 * @virtual_px; - bottom: 50 * @virtual_px; - right: 0; - background: rgba(255, 255, 255, 0.15) url(@drawer_close) no-repeat center center; - position: absolute; - text-align: center; - opacity: 0.5; - .transition(opacity 200ms); - - &.ui-focus { - opacity: 1; - } - } -} - -.ui-home-bar-main, -.ui-home-bar-box, -.ui-home-bar-header-box { - li { - width: 270 * @virtual_px; - height: 150 * @virtual_px; - .transition(all 0.2s ease-out); - overflow: hidden; - a.ui-btn { - padding: 0; - height: 100%; - font-size: 21 * @virtual_px; - font-weight: bold; - .border-radius(0); - .ui-btn-inner { - margin-top: 25 * @virtual_px; - margin-bottom: 14 * @virtual_px; - padding: 76 * @virtual_px 30 * @virtual_px 0; - - .ui-text { - line-height: 35 * @virtual_px; - } - } - .transition(font 200ms); - - &.ui-focus { - font-size: 25 * @virtual_px; - } - } - } - - li.ui-home-bar-header { - height: 196 * @virtual_px; - a { - padding: 40 * @virtual_px 0; - } - } -} diff --git a/tau/src/css/profile/tv/default/common/grid.less b/tau/src/css/profile/tv/default/common/grid.less index 4439e654..01f11cba 100644 --- a/tau/src/css/profile/tv/default/common/grid.less +++ b/tau/src/css/profile/tv/default/common/grid.less @@ -1,11 +1,15 @@ +@basic_btn_txt_color_normal_icon: rgb(211, 211, 211); + .ui-virtualgrid, .ui-grid { - .ui-btn, - .ui-btn.ui-disabled { - color: @color_grid_txt_normal; + + + + .ui-btn { + color: @basic_btn_txt_color_normal_icon; } .grid-icon { - width: 216 * @virtual_px; + width: 210 * @virtual_px; margin: 0 20 * @virtual_px 20 * @virtual_px 0; display: block; overflow: hidden; @@ -17,84 +21,24 @@ &.ui-btn .ui-icon { width: 106 * @virtual_px; height: 106 * @virtual_px; - .mask-size(106 * @virtual_px 106 * @virtual_px); + -webkit-mask-size: 106 * @virtual_px 106 * @virtual_px; margin-left: -53 * @virtual_px; background-size: 106 * @virtual_px 106 * @virtual_px; } - - &.ui-btn-icon-live.ui-shadow:not(.ui-focus):not(.ui-disabled) .ui-btn-inner:after, - &.ui-btn-icon-movie.ui-shadow:not(.ui-focus):not(.ui-disabled) .ui-btn-inner:after, - &.ui-btn-icon-tv-show.ui-shadow:not(.ui-focus):not(.ui-disabled) .ui-btn-inner:after, - &.ui-btn-icon-source.ui-shadow:not(.ui-focus):not(.ui-disabled) .ui-btn-inner:after, - &.ui-btn-icon-app.ui-shadow:not(.ui-focus):not(.ui-disabled) .ui-btn-inner:after, - &.ui-btn-icon-add.ui-shadow:not(.ui-focus):not(.ui-disabled) .ui-btn-inner:after { - width: 106 * @virtual_px; - height: 106 * @virtual_px; - background-size: 109 * @virtual_px 105 * @virtual_px; - background-position: -2 * @virtual_px 0; - } - - &.grid-2-line { - - &.ui-btn-icon-top .ui-btn-inner.ui-btn-hastxt { - padding-top: 80 * @virtual_px; - } - - .grid-icon-contents { - padding: 0 20 * @virtual_px; - text-align: center; - font-size: 26 * @virtual_px; - overflow: hidden; - text-overflow: ellipsis; - color: @color_grid_2_line_content; - z-index: 2; - - .grid-icon-content { - overflow: hidden; - text-overflow: ellipsis; - height: 31 * @virtual_px; - display: block; - } - - h1, h2, h3, h4 { - font-size: 30 * @virtual_px; - font-weight: normal; - margin: 0; - } - - .grid-icon-subtext { - overflow: hidden; - text-overflow: ellipsis; - color: @color_grid_2_line_content_subtext; - font-size: 22 * @virtual_px; - margin-top: -2 * @virtual_px; - display: block; - } - } + &:not(.ui-focus) { + background-color: rgb(28, 62, 59); } } .grid-thumbnail { - width: 304 * @virtual_px; + width: 303 * @virtual_px; margin: 0 20 * @virtual_px 20 * @virtual_px 0; display: block; overflow: hidden; - padding: 8 * @virtual_px; - &.ui-btn { - background-color: transparent; - } - - .ui-background { - background-color: @default_color; - } &.ui-btn .ui-btn-inner { margin: 0; } - .ui-btn-text.ui-btn-text-padding-left { - padding-left: 0 !important; - } - .grid-thumbnail-info { left: 21 * @virtual_px; right: 21 * @virtual_px; @@ -108,8 +52,8 @@ .grid-thumbnail-pic { z-index: 2; - width: 288 * @virtual_px; - height: 288 * @virtual_px; + width: 303 * @virtual_px; + height: 303 * @virtual_px; overflow: hidden; background-color: rgb(26,70,95); position: relative; @@ -119,65 +63,79 @@ max-width: 200 * @virtual_px; max-height: 200 * @virtual_px; position: absolute; - top: 144 * @virtual_px; - left: 144 * @virtual_px; + top: 152 * @virtual_px; + left: 152 * @virtual_px; margin: -100 * @virtual_px; } } .grid-thumbnail-pic-full { - width: 288 * @virtual_px; - height: 288 * @virtual_px; + width: 303 * @virtual_px; + height: 303 * @virtual_px; overflow: hidden; position: relative; z-index: 2; img { - min-width: 288 * @virtual_px; - min-height: 288 * @virtual_px; + min-width: 303 * @virtual_px; + min-height: 303 * @virtual_px; position: absolute; - top: 144 * @virtual_px; - left: 144 * @virtual_px; - margin: -144 * @virtual_px; + top: 152 * @virtual_px; + left: 152 * @virtual_px; + margin: -152 * @virtual_px; } } .grid-thumbnail-contents { - background: rgba(0, 0, 0, 0.3); + background: rgb(33, 36, 13); padding: 15 * @virtual_px 20 * @virtual_px; - text-align: center; font-size: 26 * @virtual_px; overflow: hidden; text-overflow: ellipsis; color: rgb(211, 211, 211); z-index: 2; - .grid-thumbnail-content { overflow: hidden; text-overflow: ellipsis; height: 31 * @virtual_px; - display: block; - - } - - h1, h2, h3, h4 { - font-size: 30 * @virtual_px !important; - font-weight: normal !important; - margin: 0; + display: block; } - .grid-thumbnail-subtext { overflow: hidden; text-overflow: ellipsis; color: rgb(128,128,128); font-size: 22 * @virtual_px; - margin-top: -2 * @virtual_px; + margin-top: -6 * @virtual_px; display: block; } } &.ui-btn.ui-focus { + .grid-thumbnail-pic { + border: solid @color_listview_focus; + border-top-width: 8 * @virtual_px; + border-left-width: 8 * @virtual_px; + border-right-width: 8 * @virtual_px; + img { + top: 144 * @virtual_px; + left: 144 * @virtual_px; + margin: -100 * @virtual_px; + } + } + + .grid-thumbnail-pic-full { + border: solid @color_listview_focus; + border-top-width: 8 * @virtual_px; + border-left-width: 8 * @virtual_px; + border-right-width: 8 * @virtual_px; + img { + top: 144 * @virtual_px; + left: 144 * @virtual_px; + margin: -152 * @virtual_px; + } + } + .grid-thumbnail-contents { - background-color: transparent; + background: @color_listview_focus; .grid-thumbnail-content, .grid-thumbnail-subtext { color: rgb(255, 255, 255); } @@ -186,7 +144,7 @@ &.ui-btn.ui-selected { .ui-btn-inner { - border: solid @default_color 10 * @virtual_px; + border: solid rgb(255, 169, 85) 10 * @virtual_px; } .ui-btn-text{ margin: -10 * @virtual_px; @@ -205,23 +163,9 @@ .ui-content { >.ui-virtualgrid, >.ui-grid { - margin-top: 20 * @virtual_px -@fixed_header_content_margin; - margin-right: -@fixed_header_content_margin; - margin-bottom: -@fixed_header_content_margin; - margin-left: 20 * @virtual_px - @fixed_header_content_margin; - } -} - - -.ui-table { - .ui-row { - .ui-column { - float: left; - overflow: hidden; - - &.ui-column-5 { - width: 20%; - } - } + margin-top: 20 * @virtual_px -@fixed_header_title_padding; + margin-right: -@fixed_header_title_padding; + margin-bottom: -@fixed_header_title_padding; + margin-left: 20 * @virtual_px - @fixed_header_title_padding; } -} +}
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/common/grids.less b/tau/src/css/profile/tv/default/common/grids.less index e2321067..33b27d2f 100644 --- a/tau/src/css/profile/tv/default/common/grids.less +++ b/tau/src/css/profile/tv/default/common/grids.less @@ -1,3 +1,9 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ + /* content configurations. */ .ui-grid { &-a, @@ -88,4 +94,4 @@ } } } -} +}
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/common/indexscrollbar.less b/tau/src/css/profile/tv/default/common/indexscrollbar.less index 2a34f77e..f6065127 100644 --- a/tau/src/css/profile/tv/default/common/indexscrollbar.less +++ b/tau/src/css/profile/tv/default/common/indexscrollbar.less @@ -3,7 +3,7 @@ position: fixed; right: 0; //TODO:bidi top: 0; - width: 40 * @virtual_px; + width: 40*@unit_base; height: 100%; background-color: @color_indexscrollbar_bg; z-index: 10; @@ -18,8 +18,8 @@ display: block; width: 100%; text-align: center; - font-size: 24 * @virtual_px; - height: 36 * @virtual_px; + font-size: 24 * @unit_base; + height: 36 * @unit_base; } li.ui-state-selected { background-color: @color_indexscrollbar_selected_bg; @@ -30,7 +30,7 @@ position: relative; height: auto; top: 0; - right: -40 * @virtual_px; + right: -40 * @unit_base; width: 100%; li { background-color: @color_indexscrollbar_bg_supplementary; @@ -44,7 +44,7 @@ } & + .ui-listview li { - padding-right: 40 * @virtual_px; + padding-right: 40*@unit_base; } } @@ -56,16 +56,16 @@ display: none; >span { - width: 140 * @virtual_px; - height: 87 * @virtual_px; + width: 140 * @unit_base; + height: 87 * @unit_base; position: absolute; display: block; top: 50%; left: 50%; - margin-left: -90 * @virtual_px; - margin-top: -43 * @virtual_px; - line-height: 87 * @virtual_px; - font-size: 70 * @virtual_px; + margin-left: -90 * @unit_base; + margin-top: -43 * @unit_base; + line-height: 87 * @unit_base; + font-size: 70 * @unit_base; text-align: center; background-color: @color_indexscrollbar_indicator_bg; color: @color_indexscrollbar_indicator_text_normal; diff --git a/tau/src/css/profile/tv/default/common/input.less b/tau/src/css/profile/tv/default/common/input.less index 8ae0fb64..38072a18 100644 --- a/tau/src/css/profile/tv/default/common/input.less +++ b/tau/src/css/profile/tv/default/common/input.less @@ -1,10 +1,11 @@ -input:not([type=number]):not([type=checkbox]):not([type=radio]), -textarea { +input:not([type=number]):not([type=checkbox]):not([type=radio]), textarea { background-color: @color_input_bg; color: @color_input_text; text-align: left; vertical-align: middle; font-size: 32 * @virtual_px; + font: bold; + border: solid 2px rgb(177, 177, 177); &:focus { color: @color_input_text_focus; @@ -25,10 +26,36 @@ input[type=password].pin { vertical-align: middle; text-align: center; font-size: 45 * @virtual_px; + font: bold; width: 58 * @virtual_px; height: 58 * @virtual_px; } +input[type=number]::-webkit-inner-spin-button, +input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; +} +input[type=number] { + color: @color_input_number_text; + text-align: center; + vertical-align: middle; + font-size: 29 * @virtual_px; + font: bold; + background: url(images/input/spin_button.png) no-repeat center center; + border: @virtual_px solid @color_input_text; + padding: 15 * @virtual_px; + background-color: @color_input_bg; + &:focus { + background-color: @color_input_number_bg_focus; + color: @color_input_number_text_focus; + border: @virtual_px solid @color_input_number_bg_focus; + } +} +.ui-number-input { + padding-top: 15 * @virtual_px; + padding-bottom: 22 * @virtual_px; +} + .ui-listview li { input:not([type=number]):not([type=checkbox]):not([type=radio]) { margin: -10 * @virtual_px 0; @@ -37,8 +64,8 @@ input[type=password].pin { margin: -17 * @virtual_px 0; } } -} -.input-box { - display: inline-block; -} + input[type=number] { + margin: -19 * @virtual_px 0; + } +}
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/common/layout.less b/tau/src/css/profile/tv/default/common/layout.less index 0ba8d3e6..3af96ebf 100644 --- a/tau/src/css/profile/tv/default/common/layout.less +++ b/tau/src/css/profile/tv/default/common/layout.less @@ -1,9 +1,11 @@ +@page_border_radius: 10 * @virtual_px; + /*************************************************************************** - Common Style + Common Style ***************************************************************************/ body { height: 100vh; - font-size: 34 * @virtual_px; + font-size: 34 * @unit_base; font-family: @font_family; background: @color_bg; background-size: 100% !important; @@ -31,40 +33,34 @@ body { &.ui-header-empty { .ui-content { margin-top: 59 * @virtual_px; - .border-top-left-radius(@fixed_layout_page_border_radius); - .border-top-right-radius(@fixed_layout_page_border_radius); + -webkit-border-top-left-radius: @page_border_radius; + -moz-border-top-left-radius: @page_border_radius; + border-top-left-radius: @page_border_radius; + -webkit-border-top-right-radius: @page_border_radius; + -moz-border-top-right-radius: @page_border_radius; + border-top-right-radius: @page_border_radius; } } &.ui-footer-empty { .ui-content { margin-bottom: 59 * @virtual_px; - .border-bottom-left-radius(@fixed_layout_page_border_radius); - .border-bottom-right-radius(@fixed_layout_page_border_radius); - } - } - - &.ui-gray-page { - .ui-content, - .ui-header { - background-color: @color_gray_content_bg; - color: @color_gray_content_text; - } - - .ui-header { - h1, h2, h3, h4, h5, h6 { - color: inherit; - } + -webkit-border-bottom-left-radius: @page_border_radius; + -moz-border-bottom-left-radius: @page_border_radius; + border-bottom-left-radius: @page_border_radius; + -webkit-border-bottom-right-radius: @page_border_radius; + -moz-border-bottom-right-radius: @page_border_radius; + border-bottom-right-radius: @page_border_radius; } } - - &.ui-page-blur { - .filter(blur(20 * @virtual_px)); - } } .scrolling-mode-touch { - .touch-scrolling(); + -webkit-overflow-scrolling: touch; + -moz-overflow-scrolling: touch; + -o-overflow-scrolling: touch; + -ms-overflow-scrolling: touch; + overflow-scrolling: touch; } .ui-content { @@ -73,18 +69,18 @@ body { overflow-y : visible; background-color: @color_content_bg; .scrolling-mode-touch; - padding: @fixed_header_content_padding; + padding: @fixed_header_title_padding; .ui-column-left { width: 298 * @virtual_px; float: left; - margin: -@fixed_header_title_margin 0 -@fixed_header_title_margin -@fixed_header_title_margin; + margin: -@fixed_header_title_padding 0 -@fixed_header_title_padding -@fixed_header_title_padding; } .ui-column-right { width: 1340 * @virtual_px; float: left; - margin: -@fixed_header_title_margin -@fixed_header_title_margin -@fixed_header_title_margin 0; + margin: -@fixed_header_title_padding -@fixed_header_title_padding -@fixed_header_title_padding 0; } p:first-child { @@ -99,8 +95,12 @@ body { height: @fixed_header_height; line-height: @fixed_header_line_height; background-color: @color_actionbar_title_bg; - .border-top-left-radius(@fixed_layout_page_border_radius); - .border-top-right-radius(@fixed_layout_page_border_radius); + -webkit-border-top-left-radius: @page_border_radius; + -moz-border-top-left-radius: @page_border_radius; + border-top-left-radius: @page_border_radius; + -webkit-border-top-right-radius: @page_border_radius; + -moz-border-top-right-radius: @page_border_radius; + border-top-right-radius: @page_border_radius; .ui-title { color: @color_actionbar_title_text; @@ -120,12 +120,7 @@ body { } .ui-title-text-fadeout { - // by hand, this is to custom for a handler -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - -moz-mask-image: -moz-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - -ms-mask-image: -ms-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - -o-mask-image: -o-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - mask-image: linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); } &.ui-has-more { @@ -133,12 +128,7 @@ body { padding-right: @fixed_header_more_title_padding; } .ui-title-text-fadeout { - // by hand, this is to custom for a handler -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); - -moz-mask-image: -moz-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); - -ms-mask-image: -ms-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 8 0%); - -o-mask-image: -o-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); - mask-image: linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); } } @@ -202,8 +192,7 @@ body { .ui-btn.ui-btn-inline { float: right; - margin: 29 * @virtual_px; - line-height: normal; + margin: 32 * @virtual_px; } .ui-btn.ui-btn-inline:nth-child(2) { @@ -219,8 +208,13 @@ body { bottom: 0; left: 0; background-color: @color_actionbar_title_bg; - .border-bottom-left-radius(@fixed_layout_page_border_radius); - .border-bottom-right-radius(@fixed_layout_page_border_radius); + -webkit-border-bottom-left-radius: @page_border_radius; + -moz-border-bottom-left-radius: @page_border_radius; + border-bottom-left-radius: @page_border_radius; + -webkit-border-bottom-right-radius: @page_border_radius; + -moz-border-bottom-right-radius: @page_border_radius; + border-bottom-right-radius: @page_border_radius; + background-color: @color_actionbar_title_bg; .ui-controlgroup-controls { .ui-btn { float:left; @@ -237,7 +231,7 @@ body { } /*************************************************************************** - Grid layout + Grid layout ***************************************************************************/ .ui-grid-col { > * { @@ -300,15 +294,7 @@ body { .ui-page-fullscreen { .ui-header, .ui-content, .ui-footer, &.ui-footer-empty .ui-content, &.ui-header-empty .ui-content { margin: 0; - .border-radius(0); - } -} - -.ui-page-black { - .ui-header { - background-color: @color_page_black_header; - } - .ui-content { - background-color: @color_page_black_content; + -webkit-border-radius: 0; + border-radius: 0; } } diff --git a/tau/src/css/profile/tv/default/common/listview.less b/tau/src/css/profile/tv/default/common/listview.less index 42adf8e4..0598bec4 100644 --- a/tau/src/css/profile/tv/default/common/listview.less +++ b/tau/src/css/profile/tv/default/common/listview.less @@ -1,22 +1,20 @@ +@font_size_list_item: 22 * @virtual_px; +@list_btn_txt_color_focus: rgb(255, 255, 255); +@list_txt_color_disabled: rgb(51, 51, 51); +@list_bg_color_white: rgb(255, 255, 255); +@list_sub_txt_color: rgb(189, 167, 146); +@list_radio_checkbox_label_color: rgb(89, 89, 89); +/************************ +Listview +*************************/ .ui-listview.white { - background-color: @color_listview_bg_color_white; -} + background-color: @list_bg_color_white; -.circle-icon { - content: ""; - z-index: 100; - position: absolute; - left:0; - top:0; - bottom: 50 * @virtual_px; - right: 0; - background-repeat: no-repeat; - background-position: center center; } .ui-listview { li { - font-size: @fixed_list_item_font_size; + font-size: @font_size_list_item; width: 100%; border-bottom: 1 * @virtual_px solid @color_listview_border; overflow: hidden; @@ -35,7 +33,8 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - .user-select(none); + -webkit-user-select: none; + color: @color_listview_text; } a.ui-btn { display: block; @@ -65,14 +64,11 @@ top: -4 * @virtual_px; } } - &.ui-state-disabled { - opacity: 0.2; - background-color: inherit; - } + } a.ui-btn.ui-focus { .ui-btn-inner { - color: @color_list_btn_txt_focus; + color: @list_btn_txt_color_focus; } } label.ui-popup-radio-label, @@ -81,123 +77,62 @@ padding: 0; float: left; } - .checkboxradio-container { - position: relative; + input[type="checkbox"] + label, + input[type="radio"] + label { + position: absolute; + right: 32 * @virtual_px; + top: 0 * @virtual_px; + margin-top: 32 * @virtual_px; + float: right; } .li-text-sub { display: block; color: @list_sub_txt_color; - font-size: 22 * @virtual_px; + font-size: 68%; text-overflow: ellipsis; overflow: hidden; line-height: 30 * @virtual_px; } - progress { - display: block; - padding-left: 0; - padding-right: 0; - } - - &.ul-li-box-icon { - height: 210 * @virtual_px; - border-bottom: none; - padding-top: 0; - padding-bottom: 0; - margin-bottom: 20 * @virtual_px; - a { - margin: 0; - background-color: @color_drawer_poster_icon_footer_background; - padding: 40 * @virtual_px 32 * @virtual_px; - .ui-btn-inner.ui-btn-hastxt { - .ui-btn-text { - padding: 0; - margin: 0; - } - } + .li-has-multiline { + padding-top: 6 * @virtual_px; + padding-bottom: 5 * @virtual_px; + min-height: 90 * @virtual_px; + .disabled, + .disabled > * { + color: rgb(51, 51, 51); } - } - - &.ul-li-box { - height: 210 * @virtual_px; - border-bottom: none; - padding-top: 0; - padding-bottom: 0; - margin-bottom: 20 * @virtual_px; - a { - margin: 0; - padding: 0; - .ui-btn-inner { - .ui-btn-text { - margin: 0; - position: relative; - > img { - min-width: 100%; - height: 160 * @virtual_px; - margin: 0; - margin-bottom: 50 * @virtual_px; - } - footer { - background-color: @color_drawer_poster_icon_footer_background; - position: absolute; - height: 50 * @virtual_px; - bottom: 0; - left: 0; - right: 0; - img { - margin: 10 * @virtual_px; - max-height: 30 * @virtual_px; - max-width: 30 * @virtual_px; - position: absolute; - left: 0; - top: 0; - } - > h2 { - position: absolute; - left: 0; - right: 0; - text-overflow: ellipsis; - overflow: hidden; - font-size: 26 * @virtual_px; - margin: 10 * @virtual_px; - float: none; - font-weight: normal; - * { - font-size: 26 * @virtual_px; - font-weight: normal; - } - } - img + h2 { - margin-left: 50 * @virtual_px; - } - } - } - } + .li-has-radio.disabled, + .li-has-radio.disabled .li-text-sub, + .li-has-checkbox.disabled, + .li-has-checkbox.disabled .li-text-sub { + color: @list_txt_color_disabled; } } - - &.ui-music::after { - .circle-icon(); - background-image: url(images/icons/btn_controller_nor.png), url(images/icons/app_ico_music.png); - } - - &.ui-movie::after { - .circle-icon(); - background-image: url(images/icons/btn_controller_nor.png), url(images/icons/app_ico_photo_video.png); - } - - &.ui-notification::after { - .circle-icon(); - background-image: url(images/icons/btn_controller_nor.png), url(images/icons/app_ico_noti.png); - } - - &.ui-web::after { - .circle-icon(); - background-image: url(images/icons/btn_controller_nor.png), url(images/icons/app_ico_wb.png); + .li-has-multiline > a { + margin-top: -6 * @virtual_px; + margin-bottom: -6 * @virtual_px; + padding-top: 6 * @virtual_px; + padding-bottom: 6 * @virtual_px; + } + .li-has-multiline-sup { + padding-top: 6 * @virtual_px; + padding-bottom: 5 * @virtual_px; + min-height: 90 * @virtual_px; + .disabled, + .disabled > * { + color: rgb(51, 51, 51); + } + > a { + margin-top: -36 * @virtual_px; + margin-bottom: -5 * @virtual_px; + padding-top: 36 * @virtual_px; + padding-bottom: 5 * @virtual_px; + } } - - &.ui-setting::after { - .circle-icon(); - background-image: url(images/icons/btn_controller_nor.png), url(images/icons/app_ico_setting.png); + progress { + display: block; + padding-left: 0; + padding-right: 0; } } @@ -206,9 +141,9 @@ box-sizing: border-box; padding-top: 18 * @virtual_px; padding-bottom: 18 * @virtual_px; - font-size: @fixed_list_divider_font_size; - background-color: @color_listview_bg_color_white; - color: @color_list_divider_text; + font-size: @font_size_list_divider_text; + background-color: @list_bg_color_white; + color: @color_listview_text; border: 0; .ui-divider-normal-line { @@ -221,129 +156,15 @@ background-color: @color_list_divider_line_bg; } - & > .ui-btn-text { + &>.ui-btn-text { box-sizing: border-box; color: @color_list_divider_text; } } } -.ui-listview-transparent { - .ui-li-divider, - .ui-li-divider-btn { - background-color: transparent; - font-size: 27 * @virtual_px; - color: @color_drawer_divider_btn; - .ui-divider-text { - span { - opacity: 0.5; - } - } - - .ui-divider-normal-line { - display: none; - } - } -} - -.ui-popup-listview.ui-ctxpopup { - .ui-listview { - li { - padding: 0; - border-bottom-color: @color_popover_border; - border-bottom-width: 2 * @virtual_px; - a.ui-btn { - padding: 0; - margin: 0; - &[data-icon]:not(.ui-btn-icon_only) { - background-color: transparent; - } - - .ui-background { - background-color: @default_color; - } - - .ui-btn-inner { - min-width: 220 * @virtual_px; - .ui-btn-text { - padding: 25 * @virtual_px; - color: @color_popover; - margin: 0; - .ui-text { - color: @color_popover; - } - } - .ui-icon { - height: 37 * @virtual_px; - width: 37 * @virtual_px; - top: 20 * @virtual_px; - left: 32 * @virtual_px; - .mask-size(37 * @virtual_px 37 * @virtual_px); - } - } - - &.ui-state-disabled { - background-color: white; - .ui-btn-inner { - .ui-btn-text { - color: @color_popover_disabled; - .ui-text { - color: @color_popover_disabled; - } - } - } - } - - &.ui-focus { - .ui-btn-inner { - .ui-btn-text { - color: @color_popover_focus; - .ui-text { - color: @color_popover_focus; - } - } - } - &.ui-state-disabled { - .ui-btn-inner { - .ui-btn-text { - color: @color_popover_focus_disabled; - .ui-text { - color: @color_popover_focus_disabled; - } - } - } - } - } - - &.ui-btn-icon-left { - .ui-btn-inner { - min-width: 310 * @virtual_px; - .ui-btn-text { - padding-left: 89 * @virtual_px; - } - } - } - } - } - } -} - -.ui-gray-page { - .ui-listview li { - background-color: @gray_content_listview_bg; - color: @gray_content_listview_text; - border-color: @gray_content_list_divider_line_bg; - } -} - -.ui-content > .ui-listview { - margin: -@fixed_header_title_margin; -} - -div[data-role="popup"] .ui-listview { - .li-has-checkbox, - .li-has-radio { - border-bottom-style: solid; - border-bottom-width: thick; - } -} +.ui-content > .ui-listview, +.ui-content > .ui-scrollview-view > .ui-listview, +{ + margin: -@fixed_header_title_padding; +}
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/common/marquee.less b/tau/src/css/profile/tv/default/common/marquee.less deleted file mode 100644 index 379355f4..00000000 --- a/tau/src/css/profile/tv/default/common/marquee.less +++ /dev/null @@ -1,11 +0,0 @@ -.ui-marquee-start { - position: relative !important; - text-overflow: clip !important; -} - -.ui-marquee-clone { - display: inline !important; - margin-left: 50 * @virtual_px; - margin-rigth: 50 * @virtual_px; -} - diff --git a/tau/src/css/profile/tv/default/common/popup.less b/tau/src/css/profile/tv/default/common/popup.less index 7059dcda..da92b379 100644 --- a/tau/src/css/profile/tv/default/common/popup.less +++ b/tau/src/css/profile/tv/default/common/popup.less @@ -1,11 +1,15 @@ +@font_size_popup_toast: 24 * @virtual_px; +@font_size_popup_body: 34 * @virtual_px; +@popup_color_text_content: rgb(61, 61, 61); +@popup_border_radius: 10 * @virtual_px; +@popup_header_padding_right: 64 * @virtual_px; +@popup_header_padding_left: 64 * @virtual_px; +@popup_shadow: rgba(0, 0, 0, 0.67); + /*********************** Normal Popup ***********************/ -@no_header_border_width: 13 * @virtual_px; -@popup_box_shadow_radius: 9; -@popup_box_shadow_radius_total: 2 * @popup_box_shadow_radius; - .ui-selectmenu-hidden { top: -9999px; left: -9999px; @@ -14,187 +18,57 @@ Normal Popup .ui-popup { position: absolute; + width: 688 * @virtual_px; display: inline-table; + background-color: @color_popup_bg; visibility: hidden; z-index: 1000; max-height: 80%; + -webkit-border-radius: @popup_border_radius; + -moz-border-radius: @popup_border_radius; + border-radius: @popup_border_radius; + box-shadow: 0 2px 5px @popup_shadow; - header { - width: 100%; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - } - - &:not(.ui-popup-no-box) { - &:not(.ui-ctxpopup) { - &:not(.ui-popup-toast) { - // 411 - 18px of box-shadow - min-height: (411 - @popup_box_shadow_radius_total) * @virtual_px; - - &.ui-popup-progress { - min-height: (378 - @popup_box_shadow_radius_total) * @virtual_px; - - .ui-popup-wrapper { - min-height: (378 - @popup_box_shadow_radius_total) * @virtual_px - @no_header_border_width; - } - } - - &.ui-header-empty { - min-height: (305 - @popup_box_shadow_radius_total) * @virtual_px; - border-top: @no_header_border_width solid @color_popup_header_bg; - - .ui-popup-wrapper { - min-height: (305 - @popup_box_shadow_radius_total) * @virtual_px - @no_header_border_width; - } - - &.ui-popup-progress { - min-height: (208 - @popup_box_shadow_radius_total) * @virtual_px; - - .ui-popup-wrapper { - min-height: (208 - @popup_box_shadow_radius_total) * @virtual_px - @no_header_border_width; - } - } - } - - // This block corresponds to the cases where popup is missing header - // so the whole block will have different height - .ui-popup-wrapper { - min-height: (411 - @popup_box_shadow_radius_total) * @virtual_px; - } - } - } - - header { - min-height: @fixed_popup_header_height; - line-height: @fixed_popup_header_height; - font-size: @fixed_popup_header_font_size; - background-color: @color_popup_header_bg; - color: @color_popup_title_text; - padding-right: @fixed_popup_header_padding_right; - padding-left: @fixed_popup_header_padding_left; - - &:first-child { - .border-top-radius(@fixed_popup_border_radius); - } - } - - .ui-popup-content { - color: @color_popup_text; - background-color: @color_popup_bg; - font-size: @fixed_popup_body_font_size; - line-height: 33 * @virtual_px; - padding: 53 * @virtual_px 73 * @virtual_px; - - &:first-child { - .border-top-radius(@fixed_popup_border_radius); - } - - &:last-child { - .border-bottom-radius(@fixed_popup_border_radius); - } - } - } &:not(.ui-popup-toast) { - background-color: @color_popup_bg; - // 688 - total box-shadow width - width: (688 - @popup_box_shadow_radius_total) * @virtual_px; - .border-radius(@fixed_popup_border_radius); - .box-shadow(0 2 * @virtual_px @popup_box_shadow_radius * @virtual_px @color_popup_shadow); position: absolute; } - .ui-popup-wrapper { - .display-flex(); - .flex-direction(column); - .justify-content(space-between); - } - - &.ui-popup-no-box { - background-color: transparent; - .box-shadow(none); - - .calc-width(~"100% - " (100 * @virtual_px)); - header { - font-size: @fixed_popup_header_font_size_no_box; - color: @color_popup_title_text_no_box; - font-weight: bold; - } - - .ui-popup-content { - font-size: @fixed_popup_toast_font_size; - color: @color_popup_text_no_box; - } + &:not(.ui-ctxpopup).ui-header-empty { + border-top-color: @color_popup_header_bg; + border-top-width: 20 * @virtual_px; + border-top-style: solid; } - .ui-popup-content { + header { width: 100%; + min-height: @fixed_popup_header_height; + line-height: @fixed_popup_header_height; + font-size: @fixed_popup_header_font_size; text-align: center; + background-color: @color_popup_header_bg; + color: @color_popup_title_text; + padding-right: @popup_header_padding_right; + padding-left: @popup_header_padding_left; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } - // For expanding to the whole content - .flex(1 0 auto); - - // Become flex parent for the elements below - .display-flex(); - .flex-direction(column); - .justify-content(center); - .align-items(center); - - p { - margin-top: 0; - margin-bottom: 0; - } - - h1 { - font-size: @fixed_popup_body_title_font_size; - font-weight: bold; - line-height: 35 * @virtual_px; - padding-top: 14.5 * @virtual_px; - padding-bottom: 14.5 * @virtual_px; - margin-top: 0; - margin-bottom: 0; - } + .ui-popup-content { + width: 100%; + font-size: @font_size_popup_body; + text-align: left; + color: @color_popup_text; + background-color: @color_popup_bg; + padding: 80 * @virtual_px 64 * @virtual_px; .ui-listview { - text-align: left; - li { - font-size: @fixed_popup_body_font_size; - color: @color_popup_text_content; - > *, - .ui-btn-text { - color: @color_popup_text_content; - } - } - } - } - - // Padding is not even when progress bar is inside popup with headers - &:not(.ui-header-empty):not(.ui-footer-empty) { - .ui-popup-content { - // Padding top is 1.125 bigger than bottom (53 * 1.125 ~= 60) - padding-top: 64 * @virtual_px; - padding-bottom: 56 * @virtual_px; - } - } - - // Popup settings for progress content - &.ui-popup-progress { - .ui-popup-content { - .flex-direction(row); - - .ui-progress-processing { - margin: 0; - .flex(0 0 50 * @virtual_px); // Progress wheel width - - & + * { - text-align: left; - margin-left: 20 * @virtual_px; - .flex(0 1 auto); + font-size: @font_size_popup_body; + color: @popup_color_text_content; + > *, .ui-btn-text { + color: @popup_color_text_content; } } } @@ -206,12 +80,8 @@ Normal Popup background-color: @color_popup_bg; margin: 0; - &:last-child { - .border-bottom-radius(@fixed_popup_border_radius); - } - &.ui-grid-col-2 { - .display-flex(); + display: inline-flex; > .ui-btn { border-left: 0 none; @@ -239,61 +109,13 @@ Normal Popup } &.ui-btn-up-s, &.ui-btn-hover-s { - background-color: @color_button_basic_normal; - color: @color_button_basic_txt_normal; + background-color: @basic_btn_color_normal; + color: @basic_btn_txt_color_normal; } - &.ui-btn-down-s, &.ui-focus { - background-color: @color_popup_footer_btn_focus; - color: @color_button_basic_txt_focus; - } - } - } - - &.ui-popup-ticker { - top: initial !important; - bottom: 20 * @virtual_px !important; - left: 20 * @virtual_px !important; - margin: 0 !important; - } - - &.ui-tooltip { - font-size: 22 * @virtual_px; - color: @color_tooltip; - text-align: center; - padding: 0 18 * @virtual_px; - &.ui-ctxpopup { - border-image-source: url(images/tooltip/tooltip_bg.png); - border-image-slice: 6 6 8 6 fill; - border-image-width: auto; - border-image-outset: 8 * @virtual_px; - // in border width units vw is not acceptable, we have to use px - border-width: round(8 * @one_px) ; - .border-radius(0); - - &.ui-popup-arrow-b { - .ui-arrow { - background-image: url("images/tooltip/tooltip_arrow.png"); - background-color: transparent; - background-repeat: no-repeat; - transform: none; - margin-bottom: -24 * @virtual_px; - width: 12 * @virtual_px; - height: 12 * @virtual_px; - } - } - - /*arrow at the top of popup*/ - &.ui-popup-arrow-t { - .ui-arrow { - background-image: url("images/tooltip/tooltip_arrow_up.png"); - background-color: transparent; - background-repeat: no-repeat; - transform: none; - margin-top: -26 * @virtual_px; - width: 12 * @virtual_px; - height: 12 * @virtual_px; - } + &.ui-btn-down-s, &.ui-focus{ + background-color: @basic_btn_color_focus; + color: @basic_btn_txt_color_focus; } } } @@ -304,28 +126,15 @@ Popup with listview ****************************************/ .ui-popup:not(.ui-ctxpopup) { &.ui-popup-listview { - width: (944 - @popup_box_shadow_radius_total) * @virtual_px; - - .ui-popup-wrapper { - .flex-direction(row); - .flex-wrap(wrap); - } - - header { - .align-self(stretch); - } + width: 944 * @virtual_px; + height: 603 * @virtual_px; .ui-popup-content { - // Stop being flex - display: block; - + float: left; width: initial; min-width: 670 * @virtual_px; height: 501 * @virtual_px; padding: 0; - - .border-bottom-left-radius(@fixed_popup_border_radius); - .ui-listview { margin: 0; @@ -343,19 +152,18 @@ Popup with listview } footer { - width: 256 * @virtual_px; + float: left; + width: 273 * @virtual_px; height: 501 * @virtual_px; background-color: rgb(237, 237, 237) ; - > .ui-btn { margin-left: 20 * @virtual_px; margin-right: 20 * @virtual_px; margin-top: 10 * @virtual_px; - width: 216 * @virtual_px; - - &:first-child { - margin-top: 20 * @virtual_px; - } + width: 233 * @virtual_px; + } + > .ui-btn:first-child { + margin-top: 20 * @virtual_px; } } } @@ -367,36 +175,24 @@ Popup Toast .ui-popup { &.ui-popup-toast { position: absolute; - width: 1838 * @virtual_px; + width: calc(~"100% - " (82 * @virtual_px)); margin-left: 41 * @virtual_px; margin-right: 41 * @virtual_px; margin-bottom: 38 * @virtual_px; - font-size: @fixed_popup_toast_font_size; + font-size: @font_size_popup_toast; + border: 3 * @virtual_px solid @color_popup_border; bottom: 0; top: auto; - height: 205 * @virtual_px; - border-image-source: url(images/popup/modal_dialogs_banner_bg.png); - border-image-slice: 15 18 21 18 fill; - border-image-width: auto; - // in border width units vw is not acceptable, we have to use px - border-width: round(21 * @one_px); - .border-radius(0); - - .ui-popup-wrapper { + height: auto; + + &.ui-header-empty { + border: 0; + } + + .ui-popup-content { + padding: 10*@virtual_px 16*@virtual_px 10*@virtual_px 16*@virtual_px; background-color: @color_popup_bg; - display: table; - width: 100%; - height: 163 * @virtual_px; - - .ui-popup-content { - display: table-cell; - vertical-align: middle; - background-color: @color_popup_bg; - text-align: center; - // 53vpx = 205vpx - 3 * (line height). - // 3 lines is the max toast capacity in UX Guide - padding: 0 73 * @virtual_px; - } + text-align: center; } } } @@ -407,9 +203,9 @@ Active Popup .ui-popup-active.ui-popup { visibility: visible; - .transform(translate3d(-50%, -50%, 0)); - left: 50%; - top: 50%; + top: 0; + left: 0; + bottom: 0; &.ui-popup-toast { top: auto; @@ -422,13 +218,8 @@ Active Popup top: 0; width: 100%; height: 100%; - z-index: 999; + z-index: 100; background-color: rgba(0, 0, 0, 0.7); - &.ui-popup-toast-overlay { - .mask-image("images/popup/modal_banner_type_shadow.png"); - .mask-position(bottom); - .mask-repeat(repeat-x); - } } @@ -439,26 +230,13 @@ Context Popup position: absolute; box-shadow: none; width: initial; - .transform(translate3d(0, 0, 0)); .ui-popup-content { padding: 0; - .border-radius(4 * @virtual_px); - + border-radius: 4 * @virtual_px; li { a.ui-btn { color: inherit; - .ui-btn-inner:after { - background-image: none; - } - &.ui-state-disabled, - .ui-btn:disabled { - opacity: 1; - .ui-icon, - .ui-btn-text { - opacity: 1; - } - } } } } @@ -467,7 +245,7 @@ Context Popup &.ui-popup-arrow-b { .ui-arrow { bottom: 0; - margin-bottom: -7 * @virtual_px; + margin-bottom: -8 * @virtual_px; } } @@ -475,50 +253,47 @@ Context Popup &.ui-popup-arrow-t { .ui-arrow { top: 0; - margin-top: -7 * @virtual_px; + margin-top: -8 * @virtual_px; } } /*arrow at the left of popup*/ &.ui-popup-arrow-l { .ui-arrow { - margin-left: -7 * @virtual_px; - left: 0; + /*TODO*/ } } /*arrow at the right of popup*/ &.ui-popup-arrow-r { .ui-arrow { - margin-right: -7 * @virtual_px; - right: 0; + /*TODO*/ } } .ui-arrow { - z-index: -1; - border: 1 * @virtual_px; + //border-style: solid; + //border-width: 10 * @virtual_px; + border: 1px; width: 14.14 * @virtual_px; height: 14.14 * @virtual_px; background: @color_popup_bg; position: absolute; - .rotate(45deg); - - .transition(background-color 200ms ease); - &.ui-focus { - background-color: @color_default; + -webkit-transform: rotate(45deg); + &.top { + //border-color: transparent transparent @color_ctxpopup_background transparent; + margin: -8 * @virtual_px; + } + &.left { + //border-color: transparent transparent transparent @color_ctxpopup_background; + margin: -6 * @virtual_px; + } + &.right { + //border-color: transparent @color_ctxpopup_background transparent transparent; + margin: -6 * @virtual_px; + } + &.bottom { + //border-color: @color_ctxpopup_background transparent transparent transparent; + margin: -6 * @virtual_px; } } -} - -/*********************** - Custom Popup -***********************/ -.ui-popup.ui-popup-custom { - .ui-popup-header-icon { - vertical-align: middle; - margin-right: 14 * @virtual_px; - max-height: 50 * @virtual_px; - height: auto; - width: auto; - } -} +}
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/common/progress.less b/tau/src/css/profile/tv/default/common/progress.less index 25a8ad3f..8fc620fb 100644 --- a/tau/src/css/profile/tv/default/common/progress.less +++ b/tau/src/css/profile/tv/default/common/progress.less @@ -2,197 +2,125 @@ * Progressbar */ -.tv-progress-indeterminate() { - from { - .mask-image('./images/Progress/tw_progressbar_indeterminate1_holo_dark.png'); - .mask-position(0); - } - - to { - .mask-image('./images/Progress/tw_progressbar_indeterminate1_holo_dark.png'); - .mask-position(20 * @virtual_px); - } -} - @-webkit-keyframes indeterminate { - .tv-progress-indeterminate(); -} - -@-moz-keyframes indeterminate { - .tv-progress-indeterminate(); -} - -@-ms-keyframes indeterminate { - .tv-progress-indeterminate(); -} - -@-o-keyframes indeterminate { - .tv-progress-indeterminate(); + from {background-image: url('./images/Progress/tw_progressbar_indeterminate1_holo_dark.png');} + to {background-image: url('./images/Progress/tw_progressbar_indeterminate2_holo_dark.png');} } - -@keyframes indeterminate { - .tv-progress-indeterminate(); -} - -.tv-progress-rotating() { - from { - -webkit-transform: rotate(360deg); - } - to { - -webkit-transform: rotate(0deg); - } -} - @-webkit-keyframes rotating { - .tv-progress-rotating(); -} - -@-moz-keyframes rotating { - .tv-progress-rotating(); -} - -@-ms-keyframes rotating { - .tv-progress-rotating(); -} - -@-o-keyframes rotating { - .tv-progress-rotating(); -} - -@keyframes rotating { - .tv-progress-rotating(); + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } } progress { - position: relative; - padding-left: 16 * @virtual_px; - padding-right:16 * @virtual_px; - margin-top: 14 * @virtual_px; - margin-bottom: 14 * @virtual_px; - width: 100%; - height: 4 * @virtual_px; - .appearance(none); - border: none; + position: relative; + padding-left: 16 * @virtual_px; + padding-right:16 * @virtual_px; + margin-top: 14 * @virtual_px; + margin-bottom: 14 * @virtual_px; + color: @color_progressbar_text; + width: 100%; + height: 6 * @virtual_px; + -webkit-appearance: none; + border: none; } progress::-webkit-progress-bar { - position: relative; - background-color: @color_progressbar_normal_bg; - overflow: hidden; + position: relative; + background-color: @color_progressbar_normal_bg; + border-radius: 2 * @virtual_px; + overflow: hidden; } -progress { - &:not(.ui-progress-color)::-webkit-progress-value { - background-color: @color_progressbar_value_bg; - } - &.ui-progress-color::-webkit-progress-value { - background-color: @default_color; - } - &::-webkit-progress-value { - height: 100%; - overflow: hidden; - } - &.ui-progress-big { - height: 8 * @virtual_px; - } +progress::-webkit-progress-value { + background-color: @color_progressbar_value_bg; + height:6 * @virtual_px; + border-radius: 2 * @virtual_px; + overflow: hidden; } progress.ui-progress-indeterminate::-webkit-progress-value { - background-repeat: no-repeat; - background-size: 100% 100%; - // this has no sense because we are styling a webkit prop but leave it - // nonetheless - .animation(indeterminate 300ms linear infinite); + background-repeat: no-repeat; + background-size: 100% 100%; + -webkit-animation: indeterminate 150ms infinite; } .ui-progress-proportion { - display: inline-block; - float: left; - font-size: @fixed_progress_proportion_font_size; - padding-left: 16 * @virtual_px; - padding-right: 16 * @virtual_px; - color: @color_progressbar_text; - width: 34 * @virtual_px; -} - -//when left right text is given -.ui-progress-text-container { - padding-left: 16 * @virtual_px; - padding-right:16 * @virtual_px; - display: flex; - margin-top: 14 * @virtual_px; - margin-bottom: 14 * @virtual_px; - - progress { - padding: 0; - margin: 0; - display: block; - flex: 1; - width: inherit; - margin-top: 10 * @virtual_px; - &.ui-progress-big { - margin-top: 15 * @virtual_px; - } - } - - .ui-progress-ratio { - padding-right: 10 * @virtual_px; - padding-left: 20 * @virtual_px; - width: inherit; - font-size: 22 * @virtual_px; - } - - .ui-progress-proportion { - padding-right: 20 * @virtual_px; - padding-left: 10 * @virtual_px; - width: inherit; - font-size: 22 * @virtual_px; - } - - &.ui-progress-big { - progress { - height: 8 * @virtual_px; - margin-top: 15 * @virtual_px; - } - .ui-progress-ratio, .ui-progress-proportion { - font-size: 34 * @virtual_px; - } - } + display: inline-block; + float: left; + font-size: @fixed_progress_proportion_font_size; + padding-left: 16 * @virtual_px; + padding-right: 16 * @virtual_px; + margin-top: -10 * @virtual_px; } .ui-progress-ratio { - display: inline-block; - float: right; - font-size: @fixed_progress_ratio_font_size; - padding-left: 16 * @virtual_px; - padding-right: 16 * @virtual_px; - color: @color_progressbar_text; - width: 34 * @virtual_px; + display: inline-block; + float: right; + font-size: @fixed_progress_ratio_font_size; + padding-left: 16 * @virtual_px; + padding-right: 16 * @virtual_px; + margin-top: -10 * @virtual_px; } .ui-progress-processing { - background-color: @color_default; - .mask-image("./images/Progress/progress_wheel.png"); - .mask-size(50 * @virtual_px 50 * @virtual_px); - .mask-repeat(no-repeat); - width: 50 * @virtual_px; - height: 50 * @virtual_px; - margin: (34 * @virtual_px) auto (14 * @virtual_px) auto; - .animation(rotating 1s linear infinite); - // @TODO animation delay causes "Blink" to pause before loading mask, may need a workaround + background-image: url("./images/Progress/tw_widget_popup_activity.png"); + background-repeat: no-repeat; + background-size: 100% 100%; + -webkit-animation: rotating 1s linear infinite; + width:80 * @virtual_px; + height:80 * @virtual_px; + margin: 0 auto; + margin-top: 34 * @virtual_px; + margin-bottom: 14 * @virtual_px; } - .ui-processing-text { - margin: 0 auto; - text-align: center; - width: 168 * @virtual_px; - font-size: 24 * @virtual_px; - color: @color_progressbar_text; -} - -progress.ui-progress-color + .ui-progress-ratio { - color: @default_color; + margin: 0 auto; + text-align: center; + width: 168 * @virtual_px; + font-size: 24 * @virtual_px; +} + +progress.ui-progress-controllable { + -webkit-appearance: none; + border: none; + height: 6 * @virtual_px; + position: relative; + width: 100%; + + &::-webkit-progress-bar { + background-color: rgba(255, 255, 255, 0.25); + overflow: visible; + } + + &::-webkit-progress-value { + background-color: rgba(255, 255, 255, 1.0); + overflow: visible; + position: relative; + } + + &::-webkit-progress-value:after { + content: url('images/Progress/progressbar_thumb_nor.png'); + height: 38 * @virtual_px; + position: absolute; + right: -18 * @virtual_px; + top: -16 * @virtual_px; + width: 38 * @virtual_px; + } + + &.disabled { + opacity: 0.4; + } + + &.ui-focus { + &::-webkit-progress-bar { + background-color: @color_progressbar_normal_bg; + } + + &::-webkit-progress-value { + background-color: @color_progressbar_value_bg; + } + + &::-webkit-progress-value:after { + content: url('images/Progress/progressbar_thumb_foc.png'); + } + } } - -progress.ui-progress-big + .ui-progress-ratio { - font-size: 34 * @virtual_px; -}
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/common/reset.less b/tau/src/css/profile/tv/default/common/reset.less index f63b86d0..b5be2a5e 100644 --- a/tau/src/css/profile/tv/default/common/reset.less +++ b/tau/src/css/profile/tv/default/common/reset.less @@ -1,4 +1,4 @@ -// normalize.css v1.0.0 | MIT License | git.io/normalize +/*! normalize.css v1.0.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions @@ -77,7 +77,8 @@ audio:not([controls]) { html { font-size: 100%; /* 1 */ - .text-size-adjust(100%); + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ } /* @@ -431,8 +432,10 @@ input[type="date"] { */ input[type="search"] { - .appearance(textfield); - .content-box(); + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; } /* @@ -442,7 +445,7 @@ input[type="search"] { input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - .appearance(none); + -webkit-appearance: none; } /* diff --git a/tau/src/css/profile/tv/default/common/scrollbar.less b/tau/src/css/profile/tv/default/common/scrollbar.less index a2575abc..d3aa76d3 100644 --- a/tau/src/css/profile/tv/default/common/scrollbar.less +++ b/tau/src/css/profile/tv/default/common/scrollbar.less @@ -1,7 +1,7 @@ ::-webkit-scrollbar { - width: 0; - height: 0; - -webkit-border-radius: 0; + width: 8 * @virtual_px; + height: 8 * @virtual_px; + -webkit-border-radius: 8 * @virtual_px; } ::-webkit-scrollbar-track, diff --git a/tau/src/css/profile/tv/default/common/scroller.less b/tau/src/css/profile/tv/default/common/scroller.less index e35e2379..f4d7742c 100644 --- a/tau/src/css/profile/tv/default/common/scroller.less +++ b/tau/src/css/profile/tv/default/common/scroller.less @@ -40,9 +40,9 @@ display: none; position: absolute; background-repeat: no-repeat; - .animation-duration(470ms); - .animation-timing-function(step-start); - .animation-fill-mode(forwards); + -webkit-animation-duration: 0.47s; + -webkit-animation-timing-function: step-start; + -webkit-animation-fill-mode: forwards; } .ui-scrollbar-bouncing-effect.ui-top { @@ -77,7 +77,7 @@ background-image: url(@bg_scroller_bouncing_effect_right); } -.tv-scroller-ui-vertical-show() { +@-webkit-keyframes ui-vertical-show { 0% { background-position: center -0* @virtual_px; } @@ -113,7 +113,7 @@ } } -.tv-scroller-ui-vertical-hide() { +@-webkit-keyframes ui-vertical-hide { 0% { background-position: center -600* @virtual_px; } @@ -149,7 +149,7 @@ } } -.tv-scroller-ui-horizontal-show() { +@-webkit-keyframes ui-horizontal-show { 0% { background-position: -0* @virtual_px center; } @@ -185,7 +185,7 @@ } } -.tv-scroller-ui-horizontal-hide() { +@-webkit-keyframes ui-horizontal-hide { 0% { background-position: -600* @virtual_px center; } @@ -221,103 +221,23 @@ } } -@-webkit-keyframes ui-vertical-show { - .tv-scroller-ui-vertical-show(); -} - -@-moz-keyframes ui-vertical-show { - .tv-scroller-ui-vertical-show(); -} - -@-ms-keyframes ui-vertical-show { - .tv-scroller-ui-vertical-show(); -} - -@-o-keyframes ui-vertical-show { - .tv-scroller-ui-vertical-show(); -} - -@keyframes ui-vertical-show { - .tv-scroller-ui-vertical-show(); -} - -@-webkit-keyframes ui-vertical-hide { - .tv-scroller-ui-vertical-hide(); -} - -@-moz-keyframes ui-vertical-hide { - .tv-scroller-ui-vertical-hide(); -} - -@-ms-keyframes ui-vertical-hide { - .tv-scroller-ui-vertical-hide(); -} - -@-o-keyframes ui-vertical-hide { - .tv-scroller-ui-vertical-hide(); -} - -@keyframes ui-vertical-hide { - .tv-scroller-ui-vertical-hide(); -} - -@-webkit-keyframes ui-horizontal-show { - .tv-scroller-ui-horizontal-show(); -} - -@-moz-keyframes ui-horizontal-show { - .tv-scroller-ui-horizontal-show(); -} - -@-ms-keyframes ui-horizontal-show { - .tv-scroller-ui-horizontal-show(); -} - -@-o-keyframes ui-horizontal-show { - .tv-scroller-ui-horizontal-show(); -} - -@keyframes ui-horizontal-show { - .tv-scroller-ui-horizontal-show(); -} - -@-webkit-keyframes ui-horizontal-hide { - .tv-scroller-ui-horizontal-hide(); -} - -@-moz-keyframes ui-horizontal-hide { - .tv-scroller-ui-horizontal-hide(); -} - -@-ms-keyframes ui-horizontal-hide { - .tv-scroller-ui-horizontal-hide(); -} - -@-o-keyframes ui-horizontal-hide { - .tv-scroller-ui-horizontal-hide(); -} - -@keyframes ui-horizontal-hide { - .tv-scroller-ui-horizontal-hide(); -} - .ui-scrollbar-bouncing-effect.ui-top.ui-show, .ui-scrollbar-bouncing-effect.ui-bottom.ui-show { display: block; - .animation-name(ui-vertical-show); + -webkit-animation-name: ui-vertical-show; } .ui-scrollbar-bouncing-effect.ui-top.ui-hide, .ui-scrollbar-bouncing-effect.ui-bottom.ui-hide { display: block; - .animation-name(ui-vertical-hide); + -webkit-animation-name: ui-vertical-hide; } .ui-scrollbar-bouncing-effect.ui-left.ui-show, .ui-scrollbar-bouncing-effect.ui-right.ui-show { display: block; - .animation-name(ui-horizontal-show); + -webkit-animation-name: ui-horizontal-show; } .ui-scrollbar-bouncing-effect.ui-left.ui-hide, .ui-scrollbar-bouncing-effect.ui-right.ui-hide { display: block; - .animation-name(ui-horizontal-hide); + -webkit-animation-name: ui-horizontal-hide; } diff --git a/tau/src/css/profile/tv/default/common/scrollhandler.less b/tau/src/css/profile/tv/default/common/scrollhandler.less deleted file mode 100644 index b0b7a925..00000000 --- a/tau/src/css/profile/tv/default/common/scrollhandler.less +++ /dev/null @@ -1,79 +0,0 @@ -.ui-handler { - position: fixed; - overflow: hidden; - opacity: 0; - height: 100%; - width: 100%; - .transition(opacity 200ms); - - &.disabled { - display: none; - } - - &.ui-handler-direction- { - &x { - height: 25 * @virtual_px; - bottom: 4 * @virtual_px; - left: 0; - - .ui-handler-handle { - height: 100%; - min-width: 47 * @virtual_px; - padding: 0 4 * @virtual_px; - } - - .ui-handler-thumb { - min-width: 47 * @virtual_px; - } - } - &y { - top: 0; - right: 4 * @virtual_px; - width: 16 * @virtual_px; - - .ui-handler-handle { - width: 100%; - min-height: 47 * @virtual_px; - padding: 4 * @virtual_px 0; - } - - .ui-handler-thumb { - margin: 0 auto; - width: 8 * @virtual_px; - min-height: 47 * @virtual_px; - } - } - } - - .ui-handler-track { - position: relative; - width: 100%; - height: 100%; - - .ui-handler-handle { - position: absolute; - top: 0; - left: 0; - .transition-transform(400ms); - .border-box(); - - .ui-handler-thumb { - background-position: center; - background-repeat: no-repeat; - height: 100%; - .border-radius(11 * @virtual_px); - background-color: @color_scrollview_handler_dark; - } - - } - } -} - -.ui-handler-visible { - opacity: 1; -} - -.scrollbar-disabled { - overflow: hidden !important; -} - diff --git a/tau/src/css/profile/tv/default/common/scrollview.less b/tau/src/css/profile/tv/default/common/scrollview.less deleted file mode 100644 index 0b144c80..00000000 --- a/tau/src/css/profile/tv/default/common/scrollview.less +++ /dev/null @@ -1,108 +0,0 @@ -.ui-scrollview-clip { - position: relative; - z-index: 99; - - .ui-scrollview-view { - overflow-x: hidden; - overflow-y: visible; - box-sizing: border-box; - } - - // top indicator is shown - &.ui-scrollindicator-top { - .ui-overflow-indicator-top { - opacity: 1; - } - } - //bottom indicator is shown - &.ui-scrollindicator-bottom { - .ui-overflow-indicator-bottom { - opacity: 1; - } - } -} - -.ui-scrolllistview .ui-li-divider { - z-index: 10; -} - -.ui-scroll-jump-top-bg { - position: absolute; - top: 9 * @virtual_px; - right: 13 * @virtual_px; - width: 37 * @virtual_px; - height: 37 * @virtual_px; -} - -.ui-scroll-jump-left-bg { - position: absolute; - bottom: 9 * @virtual_px; - left: 13 * @virtual_px; - width: 37 * @virtual_px; - height: 37 * @virtual_px; -} - -.ui-overflow-indicator-top, -.ui-overflow-indicator-bottom { - position: fixed; - opacity: 0; - display: block; - .transition(opacity 400ms); - height: 47 * @virtual_px; - - .mask-repeat(repeat-x); -} - -.ui-page.ui-footer-empty .ui-content .ui-overflow-indicator-top { - .border-top-left-radius(@fixed_layout_page_border_radius); - .border-top-right-radius(@fixed_layout_page_border_radius); -} - -.ui-page.ui-footer-empty .ui-content .ui-overflow-indicator-bottom { - .border-bottom-left-radius(@fixed_layout_page_border_radius); - .border-bottom-right-radius(@fixed_layout_page_border_radius); -} - - -.ui-overflow-indicator-top { - .mask-image("./images/Scrollview/scrollbar_mask_top.png"); - .mask-position(top); -} - -.ui-overflow-indicator-bottom { - .mask-image("./images/Scrollview/scrollbar_mask_bottom.png"); - .mask-position(bottom); -} - - -/* - * the values below are for the group index - */ -.ui-content { - &.ui-scrollview-clip { - /* - * padding here set to zero - otherwise the list scrolls underneath the top heading and can be seen above it - */ - &:not(.content-padding) { - padding: 0; - } - > .ui-scrollview-view { - margin: 0; - } - - > .ui-listview.ui-scrollview-view { - /* - * 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 - */ - margin: 0; - } - - /* - * Section for scroll handler to hide native scrollbar - */ - &.ui-hide-scrollbar::-webkit-scrollbar { - display: none; - } - } -}
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/common/selectmenu.less b/tau/src/css/profile/tv/default/common/selectmenu.less deleted file mode 100644 index 2b727f34..00000000 --- a/tau/src/css/profile/tv/default/common/selectmenu.less +++ /dev/null @@ -1,208 +0,0 @@ -.ui-selectmenu { - box-sizing: border-box; - width: 100%; - display: table; - position: relative; - background-color: @color_selectmenu_bg; - color: @color_selectmenu_list_item_txt; - - .border-radius(8 * @virtual_px); - - height: 72 * @virtual_px; - &:focus, - &:active { - color: @color_selectmenu_list_item_focus_txt; - background-color: @color_default; - span::before { - background-color: @color_selectmenu_list_item_bg; - } - } - &:not(.ui-selectmenu-inline) > span { - max-width: 0 * @virtual_px; - } - span::before { - content: ""; - position: absolute; - - right: 0; - top: 0; - left: 20 * @virtual_px; - bottom: 0; - - width: 26 * @virtual_px; - height: 26 * @virtual_px; - background-color: @color_selectmenu_list_item_txt; - overflow: auto; - margin: auto 24 * @virtual_px auto auto; - - .mask-repeat(no-repeat); - .mask-image("images/Selectmenu/ico_dropdown_menu_open_arrow.png"); - .mask-size(26 * @virtual_px 26 * @virtual_px); - } - &:focus span::before { - background-color: @color_selectmenu_list_item_bg; - } - - &.ui-selectmenu-label { - height: 100%; - background-color: @color_selectmenu_label_bg; - } - select { - width: 100%; - display: none; - } - - &-inline { - width: auto; - height: auto; - display: inline-block; - } - - &-placeholder { - box-sizing: border-box; - text-align: left; - width: 100%; - display: table-cell; - vertical-align: middle; - position: relative; - height: 100%; - line-height: 72 * @virtual_px; - white-space: nowrap; - padding: 0 70 * @virtual_px 0 32 * @virtual_px; - overflow: hidden; - text-overflow: ellipsis; - font-size: @font_size_selectmenu_list; - } - - &-disabled { - color: @color_selectmenu_font_dim; - opacity: 1; - } - - &-active { - .border-bottom-right-radius(0); - .border-bottom-left-radius(0); - - background-color: @color_selectmenu_active; - - &::-webkit-scrollbar { - display: none; - } - - } - - /* Options */ - &-options { - position: absolute; - opacity: 0; - display: none; - box-sizing: border-box; - list-style: none; - padding: 0; - overflow: hidden; - margin: 0 0; - - background-color: @color_selectmenu_list_item_bg; - .border-bottom-right-radius(8 * @virtual_px); - .border-bottom-left-radius(8 * @virtual_px); - - color: @color_selectmenu_list_item; - &:focus { - outline: none; - } - &.ui-selectmenu-active { - opacity: 1; - overflow-y: auto; - z-index: (@z_base_popup + 1); - display: block; - } - li { - padding: 0 70 * @virtual_px 0 32 * @virtual_px; - border-top: 1 * @virtual_px solid @color_selectmenu_list_item_border_top; - font-size: @font_size_selectmenu_list; - display: block; - position: relative; - min-height: 72 * @virtual_px; - line-height: 72 * @virtual_px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - &:first-child { - border-top: 0; - } - &:not(.ui-selectmenu-optiongroup):not(.ui-selectmenu-disabled):active { - background-color: @color_selectmenu_list_item_bg_press; - } - &:focus, - &:active { - outline: none; - background-color: @color_default; - color: @color_selectmenu_list_item_bg; - } - - &.ui-selectmenu-selected { - color: @color_selectmenu_list_item_selected; - - &:focus { - color: @color_selectmenu_list_item_focus; - span { - background-color: @color_selectmenu_list_item_focus; - } - - &::after { - background-color: @color_selectmenu_list_item_selected_focus; - } - } - - &:focus::after { - background-color: @color_selectmenu_list_item_focus_txt; - } - - - & span { - background-color: @color_selectmenu_list_item_selected; - } - - &::after { - content: ""; - position: absolute; - - right: 0; - top: 0; - left: 20 * @virtual_px; - bottom: 0; - - width: 26 * @virtual_px; - height: 26 * @virtual_px; - .mask-repeat(no-repeat); - .mask-image("images/Selectmenu/ico_dropdown_menu_check.png"); - .mask-size(26 * @virtual_px 26 * @virtual_px); - - background-color: @color_selectmenu_list_item_selected; - - overflow: auto; - margin: auto 24 * @virtual_px auto auto; - - } - } - } - - } -} - -.ui-select-native select { - display: block; - top: 0; - left: 0; - position: absolute; - height: 100%; - outline: 0; - opacity: 0; - border: 0; - margin: 0; -} - -.ui-title + .ui-selectmenu { - float: right; - margin: 35 * @virtual_px; -} diff --git a/tau/src/css/profile/tv/default/common/slider.less b/tau/src/css/profile/tv/default/common/slider.less index 928c7986..8f4a15bd 100644 --- a/tau/src/css/profile/tv/default/common/slider.less +++ b/tau/src/css/profile/tv/default/common/slider.less @@ -1,5 +1,14 @@ -/** Slider popup z-index */ -@z_base_slider_popup: 111; +@border_radius: .2em; + +@unit_base_slider : @virtual_px * 0.5; +@z_base_slider_popup : 11; + +@popup-height: 54 * @virtual_px; +@popup-width: 45 * @virtual_px; +@img_height: 72 * @unit_base_slider; +@img_width: 72 * @unit_base_slider; +@handle_height: 72 * @unit_base_slider; +@handle_width: 72 * @unit_base_slider; label.ui-slider { display: block; @@ -12,8 +21,12 @@ select.ui-slider-switch { .ui-slider-container { position: relative; vertical-align: middle; - overflow: hidden; - height: 38 * @virtual_px; + + height: 27 * @unit_base_slider; + padding-top: 21 * @virtual_px; + padding-bottom: 21 * @virtual_px; + padding-left: 36 * @unit_base_slider; + padding-right: 36 * @unit_base_slider; // focused slider, but not pressed &.ui-focus { @@ -29,160 +42,126 @@ select.ui-slider-switch { } .ui-slider-left-volume, -.ui-slider-left-bright, -.ui-slider-right-volume, -.ui-slider-right-bright { +.ui-slider-left-bright { position: absolute; + vertical-align: middle; + margin-top: 10 * @virtual_px; + margin-bottom: 10 * @virtual_px; + margin-left: -44 *@virtual_px; top: 0 * @virtual_px; - left: 0; - width: @fixed_slider_image_size; - height: @fixed_slider_image_size; -} + height: @img_height; + width: @img_width; -.ui-slider-left-volume, -.ui-slider-left-bright { - left: 0; -} - -.ui-slider-left-bright { background: url(images/Slider/00_slider_button_brightness_01.png) no-repeat; - .LESSbackground-size(@fixed_slider_image_size, @fixed_slider_image_height); + .LESSbackground-size(@img_width, @img_height); } .ui-slider-left-volume { background: url(images/Slider/00_slider_button_volume_01.png) no-repeat; - .LESSbackground-size(@fixed_slider_image_size, @fixed_slider_image_height); + .LESSbackground-size(@img_width, @img_height); } .ui-slider-right-volume, .ui-slider-right-bright { - right: 0; -} + position: absolute; + vertical-align: middle; + margin-top: 10 * @virtual_px; + margin-bottom: 10 * @virtual_px; + top: 0 * @virtual_px; + right: -44 * @virtual_px; + height: @img_height; + width: @img_width; -.ui-slider-right-bright { background: url(images/Slider/00_slider_button_brightness_02.png) no-repeat; - .LESSbackground-size(@fixed_slider_image_size, @fixed_slider_image_height); + .LESSbackground-size(@img_width, @img_height); } .ui-slider-right-volume { background: url(images/Slider/00_slider_button_volume_02.png) no-repeat; - .LESSbackground-size(@fixed_slider_image_size, @fixed_slider_image_height); + .LESSbackground-size(@img_width, @img_height); } -.ui-slider-left-text, -.ui-slider-right-text { +.ui-slider-left-text { position: absolute; + left: 0 !important; - top: 4 * @virtual_px; - height: 100%; + top: 6 * @virtual_px; + height: 37 * @virtual_px; - text-align: right; + text-align: center; color: @color_slider_left_text; - font-size: 26 * @virtual_px; -} - -.ui-slider-left-text { - left: 0; + margin-top: -10 * @virtual_px; } .ui-slider-right-text { - right: 0; + position: absolute; + right: 0 !important; + + top: 6 * @virtual_px; + height: 37 * @virtual_px; + + text-align: center; + color: @color_slider_right_text; + + margin-top: -10 * @virtual_px; } div.ui-slider:not(.ui-toggle-switch) { - position: absolute; - left: 0; - right: 0; - - height: 8 * @virtual_px; + position: relative; - background-color: @color_slider_bg; + top: 9 * @unit_base_slider; + height: 13 * @unit_base_slider; + margin-left: 8 * @unit_base_slider; + margin-right: 8 * @unit_base_slider; - margin: 15 * @virtual_px 20 * @virtual_px; + .LESSborder-radius-all( 10 * @virtual_px ); + .LESSbox-shadow(0 * @virtual_px, 0 * @virtual_px, 2 * @virtual_px, @color_progress_shadow); + background-color: @color_progress_bar; - .ui-slider-handle { + .ui-btn { &.ui-focus { background-color: transparent; } - top: -15 * @virtual_px; + top: -0.75rem; margin-top: 0; - padding: 0; - } - - a.ui-slider-handle-press { - background-image: url(images/Slider/00_slider_handle_press.png); - .transition(background 200ms); - } -} - -.ui-slider-icon { - div.ui-slider:not(.ui-toggle-switch) { - right: 0; - left: @fixed_slider_image_size; - } -} - -.ui-slider-text-1 { - div.ui-slider:not(.ui-toggle-switch) { - right: 1rem; - left: 1rem; } - .ui-slider-left-text, - .ui-slider-right-text { - width: 1rem; + .ui-btn-inner { + padding: 0.3rem 0 0 0; } -} - -.ui-slider-text-2 { - div.ui-slider:not(.ui-toggle-switch) { - right: 2rem; - left: 2rem; + .ui-btn-text { + color: @color_slider_handle_text; } - .ui-slider-left-text, - .ui-slider-right-text { - width: 2rem; - } -} -.ui-slider-text-3 { - div.ui-slider:not(.ui-toggle-switch) { - right: 3rem; - left: 3rem; - } - .ui-slider-left-text, - .ui-slider-right-text { - width: 3rem; - } -} + a.ui-slider-handle-press { + background-image: url(images/Slider/00_slider_handle_press.png); -.ui-slider-text-4 { - div.ui-slider:not(.ui-toggle-switch) { - right: 4rem; - left: 4rem; - } - .ui-slider-left-text, - .ui-slider-right-text { - width: 4rem; + .ui-btn-text { + color: @color_slider_handle_text_press; + } } } a.ui-slider-handle { position: relative; - z-index: 110; + z-index: 10; - min-width: 38 * @virtual_px; - min-height: 38 * @virtual_px; - width: 38 * @virtual_px; - height: 38 * @virtual_px; + min-width: 40px; + min-height: 40px; + width: 40px; + height: 40px; - margin-left: -19 * @virtual_px; + color: @color_slider_handle_text; + font-size: 0.95rem; - background: url(images/Slider/slider_thumb_fill.png) no-repeat; - .LESSbackground-size(@fixed_slider_handle_width, @fixed_slider_handle_height); + background: url(images/Slider/00_slider_handle.png) no-repeat; + .LESSbackground-size(@handle_width, @handle_height); - .box-shadow(none); - display: block; + -o-box-shadow: none; + -ms-box-shadow: none; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; .ui-background { visibility: hidden; @@ -192,9 +171,9 @@ a.ui-slider-handle { .ui-ctxpopup.ui-popup.ui-slider-popup { z-index: @z_base_slider_popup; - min-width: @fixed_slider_popup_min_width; + min-width: @popup-width; width: auto; - line-height: @fixed_slider_popup_min_height; + line-height: @popup-height; padding-left: 5 * @virtual_px; padding-right: 5 * @virtual_px; @@ -203,7 +182,7 @@ a.ui-slider-handle { text-align: center; font-size: 1.5rem; - .LESSborder-radius-all(@fixed_slider_border_radius); + .LESSborder-radius-all(@border_radius); &>.ui-arrow { border-width: 6 * @virtual_px; @@ -214,10 +193,12 @@ a.ui-slider-handle { .ui-slider-bg { position: absolute; - height: 8 * @virtual_px; + height: 13 * @unit_base_slider; width: 0; - background-color: @color_slider_value; + .LESSborder-radius-all( 10 * @virtual_px ); + .LESSbox-shadow(0 * @virtual_px, 0 * @virtual_px, 2 * @virtual_px, @color_progress_shadow); + background-color: @color_progress_value; &.ui-slider-bg-has-center { .LESSborder-radius-all( 0 ); @@ -226,18 +207,15 @@ a.ui-slider-handle { .ui-slider { text-align: center; - - &.ui-disabled { - opacity: 0.3; - } + width: calc(~"100% - " 40 * @virtual_px); a { &:focus { - background-color: @color_slider_value; + background-color: @color_bg; &.ui-slider-handle { background: url(images/Slider/00_slider_handle_press.png) no-repeat; - .LESSbackground-size(@fixed_slider_handle_width, @fixed_slider_handle_height); + .LESSbackground-size(@handle_width, @handle_height); -o-box-shadow: none; -ms-box-shadow: none; -moz-box-shadow: none; @@ -256,5 +234,5 @@ a.ui-slider-handle { width: 5 * @virtual_px; height: 20 * @virtual_px; background-color: #555; - z-index: 110; + z-index: 10; } diff --git a/tau/src/css/profile/tv/default/common/spincontrol.less b/tau/src/css/profile/tv/default/common/spincontrol.less deleted file mode 100644 index 780533a9..00000000 --- a/tau/src/css/profile/tv/default/common/spincontrol.less +++ /dev/null @@ -1,124 +0,0 @@ - -.ui-spin-control { - input[type=number]::-webkit-inner-spin-button, - input[type=number]::-webkit-outer-spin-button { - .appearance(none); - } - input[type=number]::-webkit-textfield-decoration-container { - padding: 0; - margin: 0; - display: inline; - } - input[type=number]::-webkit-input-placeholder { - padding: 0; - margin: 0; - } - - position: relative; - input[type=number] { - display: none; - } - .ui-spin-control-number { - color: @color_input_number_text; - text-align: center; - vertical-align: middle; - font-size: 30 * @virtual_px; - font-weight: bold; - border: 0; - background-color: transparent; - &:focus { - color: @color_input_number_text_focus; - } - } - &:not(.ui-spin-control-active) { - display: inline-block; - .ui-spin-control-number { - display: inline; - } - } - ~.ui-spin-control:not(.ui-spin-control-active) { - margin-left: 4 * @virtual_px; - } - - &.ui-spin-control-active { - z-index: 1000; - display: inline-block; - background-color: @color_input_bg; - text-align: center; - position: absolute; - right: 0; - top: ~"-webkit-calc(-50% - 0.70em)"; - .up { - display: none; - } - .down { - display: none; - } - .ui-spin-control-number { - color: @color_input_number_text; - text-align: center; - vertical-align: middle; - font-size: 30 * @virtual_px; - font-weight: bold; - border: 0; - background-color: transparent; - padding: (15 + 12) * @virtual_px 33 * @virtual_px; - line-height: 64 * @virtual_px; - } - &.ui-spin-control-focus { - .up { - -webkit-mask: url("images/SpinControl/ico_spincontrol_up.png") no-repeat center top; - background-color: white; - width: 100%; - height: 15 * @virtual_px; - top: 12 * @virtual_px; - position: absolute; - display: block; - } - .down { - -webkit-mask: url("images/SpinControl/ico_spincontrol_down.png") no-repeat center bottom; - background-color: white; - width: 100%; - height: 15 * @virtual_px; - bottom: 12 * @virtual_px; - position: absolute; - display: block; - } - } - } - &.ui-spin-control-focus { - background-color: @color_input_number_bg_focus; - .ui-spin-control-number { - color: @color_input_number_text_focus; - } - } - .ui-spin-control-active ~ .ui-spin-control-active { - border-left: 2 * @virtual_px solid @color_spincontrol_separator; - } - } - - .ui-spin-control-placeholder { - display: inline-block; - position: relative; - font-size: 30 * @virtual_px; - vertical-align: top; - } - - .ui-spin-control-overlay { - height: 100%; - width: 100%; - position: absolute; - top: 0; - left: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 100; - } - - /** - * Interacion with others UI components - */ - .ui-listview li { - input[type=number] { - margin: -19 * @virtual_px 0; - } - } diff --git a/tau/src/css/profile/tv/default/common/tabbar.less b/tau/src/css/profile/tv/default/common/tabbar.less index e1a1dc7a..bacc3baf 100644 --- a/tau/src/css/profile/tv/default/common/tabbar.less +++ b/tau/src/css/profile/tv/default/common/tabbar.less @@ -63,7 +63,8 @@ line-height: 36 * @virtual_px; /* Horizontal centering when positon is absolute */ left: 50%; - .translate(-50%, 0); + transform: translate(-50%, 0); + -webkit-transform: translate(-50%, 0); } &.ui-btn-icon-only { @@ -85,7 +86,8 @@ top : 7 * @virtual_px; /* Horizontal centering when positon is absolute */ left : 50%; - .translate(-50%, 0); + transform: translate(-50%, 0); + -webkit-transform: translate(-50%, 0); } } diff --git a/tau/src/css/profile/tv/default/common/textinputsearch.less b/tau/src/css/profile/tv/default/common/textinputsearch.less deleted file mode 100644 index eab2476e..00000000 --- a/tau/src/css/profile/tv/default/common/textinputsearch.less +++ /dev/null @@ -1,219 +0,0 @@ -/** Abstract class for standard input */ -.LESSinput-normal { - .border-radius(5 * @virtual_px); - border-color: @color_list_editfield; - border-width: 5 * @virtual_px; - border-style: solid; - color: @color_input_text; -} - -/** Abstract class for standard input, which is focused*/ -.LESSinput-focus { - border-color: @default_color; - color: @color_input_text_focus; - &::-webkit-input-placeholder { - color: @color_input_text_focus; - } - background-clip: padding-box; -} - -/** Abstract class for standard input, which is hightlighted */ -.LESSinput-highlight { - .LESSinput-normal(); - color: @color_input_text_focus; - /* and blue caret*/ -} - -/** Abstract class for small input */ -.LESSsmall-or-inside-popup-normal{ - .border-radius(0); - padding: 7 * @virtual_px 14 * @virtual_px; - font-size: 24 * @virtual_px; - border-style: solid; - border-width: 4 * @virtual_px; - border-color: @color_input_border_small; - color: @color_input_text_small; -} - -/** Abstract class for small input, which is focused */ -.LESSsmall-or-inside-popup-focus { - .LESSinput-focus(); - border-color: @color_input_border_small_focus; - color: @color_input_text_small; -} - -/** Abstract class for small input, which is hightlighted */ -.LESSsmall-or-inside-popup-highlight { - .LESSsmall-or-inside-popup-normal(); - border-color: @color_list_editfield; - /* and blue caret*/ -} - - -input:not([type=number]):not([type=checkbox]):not([type=radio]):not([type=date]):not([type=time]).ui-input-text, -textarea.ui-input-text { - .appearance(none); - - background-color: @color_list_editfield; - background-image: none; - padding: 11 * @virtual_px 24 * @virtual_px; - font-size: 32 * @virtual_px; - - color: @color_input_text; - &::-webkit-input-placeholder { - color: @color_input_text; - .focus-animation(color); - } - .focus-animation(color, border, border-radius); - - &.pin { - padding: 14 * @virtual_px; - text-align: center; - } - -/*to disable*/ - &:not(.ui-textinput-small).ui-focus { - .LESSinput-focus(); - } - - &.ui-textinput-small { - .LESSsmall-or-inside-popup-normal(); - &.ui-focus { - .LESSsmall-or-inside-popup-focus(); - } - } -} - - -/** Input in popup is always small */ -.ui-popup { - // container for textbox, which can be focusable - .input-box { - &.ui-focus { - input:not([type=number]):not([type=checkbox]):not([type=radio]):not([type=date]):not([type=time]).ui-input-text, - textarea.ui-input-text { - &.ui-highlight { - .LESSsmall-or-inside-popup-highlight(); - } - .LESSsmall-or-inside-popup-focus(); - } - } - input:not([type=number]):not([type=checkbox]):not([type=radio]):not([type=date]):not([type=time]).ui-input-text, - textarea.ui-input-text { - &.ui-textinput-small, - &:not(.ui-textinput-small) { - .LESSsmall-or-inside-popup-normal(); - } - } - } -} - -/** Input in container (e.g. search bar and text input) */ -.input-box, -.input-search-bar { - // normal container - input:not([type=number]):not([type=checkbox]):not([type=radio]):not([type=date]):not([type=time]).ui-input-text, - textarea.ui-input-text { - &:not(.ui-textinput-small) { - .LESSinput-normal(); - } - - &.ui-textinput-small { - .LESSsmall-or-inside-popup-normal(); - } - } - // focused container - &.ui-focus { - input:not([type=number]):not([type=checkbox]):not([type=radio]):not([type=date]):not([type=time]).ui-input-text, - textarea.ui-input-text { - &:not(.ui-textinput-small) { - .LESSinput-focus(); - // ready to write - &.ui-highlight { - .LESSinput-highlight(); - } - } - - &.ui-textinput-small { - .LESSsmall-or-inside-popup-focus(); - // ready to write - &.ui-highlight { - .LESSsmall-or-inside-popup-highlight(); - } - } - } - } -} - - - -/** Search bar */ -.input-search-bar { - position: relative; - overflow: hidden; - - .ui-input-search { - display: block; - margin: 33 * @virtual_px 23 * @virtual_px 23 * @virtual_px; - position: relative; - - input:not([type=number]):not([type=checkbox]):not([type=radio]):not([type=date]):not([type=time]).ui-input-text { - padding-right: 30 * @virtual_px; - padding-left: 15 * @virtual_px; - width: 100%; - - display: block; - } - - .ui-search-bar-icon-box { - position: absolute; - right: 11 * @virtual_px; - top: 11 * @virtual_px; - width: 45 * @virtual_px; - height: 45 * @virtual_px; - .mask-image('images/Searchbar/ico_search.png'); - .mask-size(45 * @virtual_px); - background-color: @color_searchbar_icon; - } - } - - .ui-btn.ui-btn-search-front-icon { - position: absolute; - top: 32 * @virtual_px; - width: 130 * @virtual_px; - min-width: 130 * @virtual_px; - padding: 0; - .ui-btn-inner { - padding: 0; - .ui-icon { - margin: 12 * @virtual_px auto; - width: 45 * @virtual_px; - height: 45 * @virtual_px; - background-size: 45 * @virtual_px 45 * @virtual_px; - .mask-image(); - } - } - } -} - -.ui-search-bar-icon-left { - .ui-input-search { - margin-left: 150 * @virtual_px; - } - .ui-btn.ui-btn-search-front-icon { - left: 0; - } -} - -.ui-search-bar-icon-right { - .ui-input-search { - margin-right: 150 * @virtual_px; - } - .ui-btn.ui-btn-search-front-icon { - right: 0; - } -} - -.ui-title + .input-search-bar { - float: right; -} diff --git a/tau/src/css/profile/tv/default/common/timeinput.less b/tau/src/css/profile/tv/default/common/timeinput.less deleted file mode 100644 index c2d1acf7..00000000 --- a/tau/src/css/profile/tv/default/common/timeinput.less +++ /dev/null @@ -1,71 +0,0 @@ -input[type=time] { - .appearance(none); -} - -.ui-time-input { - position: relative; - input { - display: none; - } - &:not(.ui-time-input-active) { - display: inline-block; - color: @color_input_number_text; - .ui-spin-control ~ .ui-spin-control { - border-left: 0; - padding-left: 30 * @virtual_px; - } - .ui-spin-control ~ .ui-spin-control::before { - text-align: center; - vertical-align: middle; - font-size: 30 * @virtual_px; - font-weight: bold; - content: ':'; - display: inline-block; - position: absolute; - left: 10 * @virtual_px; - top: 50%; - margin-top: -0.6em; - } - &.ui-time-input-focus { - background-color: @color_input_number_bg_focus; - color: @color_input_number_text_focus; - .ui-spin-control-number { - color: @color_input_number_text_focus; - } - } - } - &.ui-time-input-active { - z-index: 1000; - display: flex; - text-align: center; - position: absolute; - right: 0; - top: ~"-webkit-calc(-50% - 0.70em)"; - .ui-spin-control-active { - position: relative; - } - .ui-spin-control-active ~ .ui-spin-control-active { - border-left: 2 * @virtual_px solid @color_spincontrol_separator; - } - .ui-spin-control-active ~ .ui-spin-control-active::before { - content: ''; - display: none; - } - } -} - -.ui-time-input-placeholder { - display: inline-block; - position: relative; - font-size: 30 * @virtual_px; - vertical-align: top; -} - -/** - * Interacion with others UI components - */ -.ui-listview li { - input[type=time] { - margin: -19 * @virtual_px 0; - } -} diff --git a/tau/src/css/profile/tv/default/common/toggleswitch.less b/tau/src/css/profile/tv/default/common/toggleswitch.less new file mode 100644 index 00000000..5fc1ba73 --- /dev/null +++ b/tau/src/css/profile/tv/default/common/toggleswitch.less @@ -0,0 +1,132 @@ +/* + * toggle switch + */ +.ui-switch-activation, .ui-switch-handler { + display: block; + background: url('images/Controller_icon/tw_btn_toggle_dark.png') no-repeat; +} + +.ui-switch { + width: 100%; + color: @color_switch_text; +} + +.ui-toggleswitch { + display: block; + width: @fixed_toggleswitch_width; + margin: 0 auto; +} +.ui-switch-text { + margin-top: @fixed_toggleswitch_text_margin_top; + margin-bottom: @fixed_toggleswitch_text_margin_bottom; + padding: 0 30 * @virtual_px; + font-size: @fixed_toggleswitch_text_font_size; + text-align: center; +} +.ui-switch-input { + display: none; +} + +.ui-switch-inneroffset { + width: 50%; + height: 100%; +} + +.ui-switch-activation { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + background-position: -2 * @virtual_px -72 * @virtual_px; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-handler { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-position: -2 * @virtual_px -288 * @virtual_px; + left: 0%; + } +} + +.ui-switch-activation:active { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + background-position: -2 * @virtual_px -144 * @virtual_px; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-handler:active { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-position: -2 * @virtual_px -360 * @virtual_px; + left: 0% + } +} + +.ui-switch-activation:disable { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + background-position: -2 * @virtual_px -0 * @virtual_px; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-handler:disable { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-position: -2 * @virtual_px -216 * @virtual_px; + left: 0%; + } +} + +.ui-switch-input:checked ~ & { + display: none; + + .ui-switch-activation { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + background-position: -2 * @virtual_px -72 * @virtual_px; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-handler { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-position: -2 * @virtual_px -504 * @virtual_px; + left: 72%; + } + } + .ui-switch-activation:active { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + background-position: -2 * @virtual_px -144 * @virtual_px; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-handler:active { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-position: -2 * @virtual_px -576 * @virtual_px; + left: 72%; + } + } + .ui-switch-activation:disable { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + background-position: -2 * @virtual_px -0 * @virtual_px; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-handler:disable { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-position: -2 * @virtual_px -432 * @virtual_px; + left: 72%; + } + } +} + diff --git a/tau/src/css/profile/tv/default/common/transition.fade.less b/tau/src/css/profile/tv/default/common/transition.fade.less index fdad2340..51111c01 100644 --- a/tau/src/css/profile/tv/default/common/transition.fade.less +++ b/tau/src/css/profile/tv/default/common/transition.fade.less @@ -1,61 +1,45 @@ -// keyframes need to be prefixed by hand since prefixer does not support them -// and less below version 1.7.0 does not autoprefix them -.tv-fadein() { +@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } - -.tv-fadeout() { - from { opacity: 1; } - to { opacity: 0; } -} - -@-webkit-keyframes fadein { - .tv-fadein(); -} - @-moz-keyframes fadein { - .tv-fadein(); -} - -@-ms-keyframes fadein { - .tv-fadein(); -} - -@-o-keyframes fadein { - .tv-fadein(); + from { opacity: 0; } + to { opacity: 1; } } - @keyframes fadein { - .tv-fadein(); + from { opacity: 0; } + to { opacity: 1; } } @-webkit-keyframes fadeout { - .tv-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } - @-moz-keyframes fadeout { - .tv-fadeout(); -} - -@-ms-keyframes fadeout { - .tv-fadeout(); -} - -@-o-keyframes fadeout { - .tv-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } - @keyframes fadeout { - .tv-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } .fade.out { opacity: 0; - .animation(fadeout 125ms); + -webkit-animation-duration: 125ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 125ms; + -moz-animation-name: fadeout; + animation-duration: 125ms; + animation-name: fadeout; } .fade.in { opacity: 1; - .animation(fadein 225ms); + -webkit-animation-duration: 225ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 225ms; + -moz-animation-name: fadein; + animation-duration: 225ms; + animation-name: fadein; } diff --git a/tau/src/css/profile/tv/default/common/transition.less b/tau/src/css/profile/tv/default/common/transition.less index 0d5b20ba..cc555b2e 100644 --- a/tau/src/css/profile/tv/default/common/transition.less +++ b/tau/src/css/profile/tv/default/common/transition.less @@ -4,7 +4,9 @@ width: 100vw; height: 100vh; overflow: hidden; - .border-box(); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .ui-pre-in { @@ -15,10 +17,18 @@ left: 0; } .in { - .animation-timing-function(ease-out); - .animation-duration(350ms); + -webkit-animation-timing-function: ease-out; + -webkit-animation-duration: 350ms; + -moz-animation-timing-function: ease-out; + -moz-animation-duration: 350ms; + animation-timing-function: ease-out; + animation-duration: 350ms; } .out { - .animation-timing-function(ease-in); - .animation-duration(225ms); + -webkit-animation-timing-function: ease-in; + -webkit-animation-duration: 225ms; + -moz-animation-timing-function: ease-in; + -moz-animation-duration: 225ms; + animation-timing-function: ease-in; + animation-duration: 225ms; } diff --git a/tau/src/css/profile/tv/default/common/transition.slideup.less b/tau/src/css/profile/tv/default/common/transition.slideup.less index 7fb47597..5583ac18 100644 --- a/tau/src/css/profile/tv/default/common/transition.slideup.less +++ b/tau/src/css/profile/tv/default/common/transition.slideup.less @@ -1,78 +1,69 @@ /* slide up */ .slideup.out { - .animation(fadeout 250ms); + -webkit-animation-name: fadeout; + -webkit-animation-duration: 250ms; + -moz-animation-name: fadeout; + -moz-animation-duration: 250ms; + animation-name: fadeout; + animation-duration: 250ms; } .slideup.in { - .translate3d(0, 0, 0); - .animation(slideinfrombottom 250ms); + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfrombottom; + -webkit-animation-duration: 250ms; + -moz-transform: translateY(0); + -moz-animation-name: slideinfrombottom; + -moz-animation-duration: 250ms; + transform: translateY(0); + animation-name: slideinfrombottom; + animation-duration: 250ms; } .slideup.in.reverse { - .animation(fadein 150ms); + -webkit-animation-name: fadein; + -webkit-animation-duration: 150ms; + -moz-animation-name: fadein; + -moz-animation-duration: 150ms; + animation-name: fadein; + animation-duration: 150ms; } .slideup.out.reverse { z-index: 101; - .translate3d(0, 100%, 0); - .animation(slideouttobottom 200ms); -} - -.tv-slideinfrombottom { - from { - .translate3d(0, 100%, 0); - } - to { - .translate3d(0, 0, 0); - } + -webkit-transform: translateY(100%); + -webkit-animation-name: slideouttobottom; + -webkit-animation-duration: 200ms; + -moz-transform: translateY(100%); + -moz-animation-name: slideouttobottom; + -moz-animation-duration: 200ms; + transform: translateY(100%); + animation-name: slideouttobottom; + animation-duration: 200ms; } @-webkit-keyframes slideinfrombottom { - .tv-slideinfrombottom; + from { -webkit-transform: translateY(100%); } + to { -webkit-transform: translateY(0); } } - @-moz-keyframes slideinfrombottom { - .tv-slideinfrombottom; -} - -@-ms-keyframes slideinfrombottom { - .tv-slideinfrombottom; + from { -moz-transform: translateY(100%); } + to { -moz-transform: translateY(0); } } - -@-o-keyframes slideinfrombottom { - .tv-slideinfrombottom; -} - @keyframes slideinfrombottom { - .tv-slideinfrombottom; -} - -.tv-slideouttobottom { - from { - .translate3d(0, 0, 0); - } - - to { - .translate3d(0, 100%, 0); - } + from { transform: translateY(100%); } + to { transform: translateY(0); } } @-webkit-keyframes slideouttobottom { - .tv-slideouttobottom; + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(100%); } } - @-moz-keyframes slideouttobottom { - .tv-slideouttobottom; -} - -@-ms-keyframes slideouttobottom { - .tv-slideouttobottom; -} - -@-o-keyframes slideouttobottom { - .tv-slideinfrombottom; + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(100%); } } - @keyframes slideouttobottom { - .tv-slideouttobottom; + from { transform: translateY(0); } + to { transform: translateY(100%); } } diff --git a/tau/src/css/profile/tv/default/theme-black/fixedUIStyle.less b/tau/src/css/profile/tv/default/theme-black/fixedUIStyle.less index e3e9af6a..41e643cb 100644 --- a/tau/src/css/profile/tv/default/theme-black/fixedUIStyle.less +++ b/tau/src/css/profile/tv/default/theme-black/fixedUIStyle.less @@ -11,162 +11,65 @@ - progress: text for ratio */ -/** Pixel equivalent. Should be used instead of a pixel. */ @virtual_px: 0.05208333333vw; -@one_px: 1920 / 100 * 0.05208333333px; - -/** Time of focus/blur transition*/ -@focus_transition_duration: 200ms; /***********************************************************************/ /* Layout(FIXED) */ /***********************************************************************/ -/** Content header margin (fixed). */ -@fixed_header_content_margin: 60 * @virtual_px; -/** Content header padding (fixed). */ -@fixed_header_content_padding: 60 * @virtual_px; -/** Header height (fixed). */ @fixed_header_height: 146 * @virtual_px; -/** Header line height (fixed). */ @fixed_header_line_height: 146 * @virtual_px; -/** Header title font size (fixed). */ @fixed_header_title_font_size: 36 * @virtual_px; -/** Header title margin (fixed). */ -@fixed_header_title_margin: 60 * @virtual_px; -/** Header title padding (fixed). */ @fixed_header_title_padding: 60 * @virtual_px; -/** Header title icon padding (fixed). */ @fixed_header_title_icon_padding: 60 * @virtual_px; -/** Header title icon position x (fixed). */ @fixed_header_title_icon_position_x: 16 * @virtual_px; -/** Header title icon position y (fixed). */ @fixed_header_title_icon_position_y: 14 * @virtual_px; -/** Header title icon size (fixed). */ @fixed_header_title_icon_size: 34 * @virtual_px; -/** Header more title padding (fixed). */ @fixed_header_more_title_padding: 78 * @virtual_px; -/** Header more width (fixed). */ @fixed_header_more_width: 68 * @virtual_px; -/** Footer height (fixed). */ @fixed_footer_height: 146 * @virtual_px; -/** Layout page border radius (fixed). */ -@fixed_layout_page_border_radius: 10 * @virtual_px; /**********************************************************************/ /* Button(FIXED) */ /**********************************************************************/ -/** Button line height (fixed). */ +@fixed_button_padding_top: 28.5 * @virtual_px; +@fixed_button_padding_bottom: 28.5 * @virtual_px; +@fixed_button_padding_left: 10 * @virtual_px; +@fixed_button_padding_right: 10 * @virtual_px; +@fixed_button_font_size: 31 * @virtual_px; @fixed_button_line_height: 28 * @virtual_px; -/** Button multiline padding top (fixed). */ @fixed_button_multiline_padding_top: 10 * @virtual_px; -/** Button multiline padding bottom (fixed). */ @fixed_button_multiline_padding_bottom: 10 * @virtual_px; -/** Button icon height (fixed). */ @fixed_button_icon_height: 76 * @virtual_px; -/** Button icon background size (fixed). */ @fixed_button_icon_bg_size: 60 * @virtual_px; -/** Minimum width of button */ -@fixed_button_minimum_width: 216 * @virtual_px; -/** Minimum width of inner button */ -@fixed_button_inner_minimum_width: 134 * @virtual_px; -/** Minimum heigth of button */ -@fixed_button_minimum_height: 70 * @virtual_px; /**********************************************************************/ /* Popup(FIXED) */ /**********************************************************************/ -/** Popup header height (fixed). */ @fixed_popup_header_height: 84 * @virtual_px; -/** Popup header font size (fixed). */ @fixed_popup_header_font_size: 30 * @virtual_px; -/** Popup header font size (fixed). */ -@fixed_popup_header_font_size_no_box: 35 * @virtual_px; -/** Popup footer height (fixed). */ +@fixed_popup_header_padding_top: 14 * @virtual_px; +@fixed_popup_header_padding_bottom: 14 * @virtual_px; +@fixed_popup_header_padding_left: 16 * @virtual_px; +@fixed_popup_header_padding_right: 16 * @virtual_px; @fixed_popup_footer_height: 90 * @virtual_px; -/** Popup footer button font size (fixed). */ +@fixed_popup_footer_btn_padding_top: 27 * @virtual_px; +@fixed_popup_footer_btn_padding_bottom: 28 * @virtual_px; @fixed_popup_footer_btn_font_size: 30 * @virtual_px; -/** Popup toast font size (fixed). */ -@fixed_popup_toast_font_size: 24 * @virtual_px; -/** Popup body font size (fixed). */ -@fixed_popup_body_font_size: 28 * @virtual_px; -/** Popup body title font size (fixed). */ -@fixed_popup_body_title_font_size: 30 * @virtual_px; -/** Popup border radius (fixed). */ -@fixed_popup_border_radius: 8 * @virtual_px; -/** Popup header right padding (fixed). */ -@fixed_popup_header_padding_right: 64 * @virtual_px; -/** Popup header left padding (fixed). */ -@fixed_popup_header_padding_left: 64 * @virtual_px; /**********************************************************************/ /* ToggleSwitch(FIXED) */ /**********************************************************************/ -/** Toggle switch width (fixed). */ @fixed_toggleswitch_width: 140 * @virtual_px; -/** Toggle switch height (fixed). */ @fixed_toggleswitch_height: 70 * @virtual_px; -/** Toggle switch text margin top (fixed). */ @fixed_toggleswitch_text_margin_top: 30 * @virtual_px; -/** Toggle switch text margin bottom (fixed). */ @fixed_toggleswitch_text_margin_bottom: 40 * @virtual_px; -/** Toggle switch text font size (fixed). */ @fixed_toggleswitch_text_font_size: 34 * @virtual_px; -/** Toggle switch act margin top (fixed). */ @fixed_toggleswitch_act_margin_top: 23 * @virtual_px; -/** Toggle switch handler width (fixed). */ @fixed_toggleswitch_handler_width: 86 * @virtual_px; -/** Toggle switch handler height (fixed). */ @fixed_toggleswitch_handler_height: 70 * @virtual_px; /*********************************************************************/ /* Progress(FIXED) */ /*********************************************************************/ -/** Progress proportion font size (fixed). */ @fixed_progress_proportion_font_size: 20 * @virtual_px; -/** Progress ratio font size (fixed). */ @fixed_progress_ratio_font_size: 20 * @virtual_px; - -/*********************************************************************/ -/* List(FIXED) */ -/*********************************************************************/ -/** List item font size (fixed) */ -@fixed_list_item_font_size: 22 * @virtual_px; -/** List divider text font size */ -@fixed_list_divider_font_size: 30 * @virtual_px; - -/*********************************************************************/ -/* Slider(FIXED) */ -/*********************************************************************/ -/** Slider border radius (fixed) */ -@fixed_slider_border_radius: .2em; -/** Slider popup minimum height (fixed) */ -@fixed_slider_popup_min_height: 54 * @virtual_px; -/** Slider popup minimum width (fixed) */ -@fixed_slider_popup_min_width: 45 * @virtual_px; -/** Slider image height (fixed) */ -@fixed_slider_image_height: 36 * @virtual_px; -/** Slider image width (fixed) */ -@fixed_slider_image_size: 36 * @virtual_px; -/** Slider handle height (fixed) */ -@fixed_slider_handle_height: 36 * @virtual_px; -/** Slider handle width (fixed) */ -@fixed_slider_handle_width: 36 * @virtual_px; - -/*********************************************************************/ -/* SelectMenu(FIXED) */ -/*********************************************************************/ -/** SelectMenu z-index base */ -@z_base_header_footer: 1000; -/** SelectMenu z-index base for header and footer*/ -@z_base_smallpopup: @z_base_header_footer + 100; -/** SelectMenu z-index for the popup like */ -@z_base_popup: @z_base_smallpopup + 100; - -/*selectmenu list font size*/ -@font_size_selectmenu_list : 30 * @virtual_px; -/*selectmenu label font size*/ -@font_size_selectmenu_label_normal : 30 * @virtual_px; -/*selectmenu label press font size*/ -@font_size_selectmenu_label_press : 30 * @virtual_px; -/*selectmenu label dim font size*/ -@font_size_selectmenu_label_dim : 30 * @virtual_px; diff --git a/tau/src/css/profile/tv/default/theme-black/images/Button/btn_text_nor.png b/tau/src/css/profile/tv/default/theme-black/images/Button/btn_text_nor.png Binary files differdeleted file mode 100644 index b6430162..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Button/btn_text_nor.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/checkbox_uncheck_foc.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/checkbox_uncheck_foc.png Binary files differindex f7c57a3a..e2737e5b 100644 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/checkbox_uncheck_foc.png +++ b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/checkbox_uncheck_foc.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/checkbox_uncheck_nor.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/checkbox_uncheck_nor.png Binary files differindex a8edf542..98eb7f3e 100644 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/checkbox_uncheck_nor.png +++ b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/checkbox_uncheck_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_checked_foc.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_checked_foc.png Binary files differdeleted file mode 100755 index 1b8da752..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_checked_foc.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_checked_nor.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_checked_nor.png Binary files differdeleted file mode 100755 index 118fa88e..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_checked_nor.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_off_foc.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_off_foc.png Binary files differnew file mode 100755 index 00000000..f260790e --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_off_foc.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_off_nor.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_off_nor.png Binary files differnew file mode 100755 index 00000000..23c68a6c --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_off_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_checked_foc.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_on_foc.png Binary files differindex 109efb19..109efb19 100644..100755 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_checked_foc.png +++ b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_on_foc.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_checked_nor.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_on_nor.png Binary files differindex c6e9dffb..c6e9dffb 100644..100755 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_checked_nor.png +++ b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_on_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_uncheck_foc.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_uncheck_foc.png Binary files differdeleted file mode 100644 index ae255331..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_uncheck_foc.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_uncheck_nor.png b/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_uncheck_nor.png Binary files differdeleted file mode 100644 index f6c3522d..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/radiobtn_uncheck_nor.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..58ece6d1 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..17cfbc4b --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..822a2c4a --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_holo_dark.png Binary files differnew file mode 100755 index 00000000..b62d463b --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_pressed_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..57a7dd4b --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_off_pressed_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..58cf05a6 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..190d5155 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..d4db421c --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_holo_dark.png Binary files differnew file mode 100755 index 00000000..c7af2831 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_pressed_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..30bb2bd7 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_check_on_pressed_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..23d166d8 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..0effb3aa --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..e6e6501c --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_holo_dark.png Binary files differnew file mode 100755 index 00000000..5b3394ba --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..880f013c --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..fbe3ec35 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..2e7be697 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..820f99be --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_holo_dark.png Binary files differnew file mode 100755 index 00000000..1a40c574 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_pressed_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..c506c2b5 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_off_pressed_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..e756903f --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..a521e064 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..775ce3f0 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_holo_dark.png Binary files differnew file mode 100755 index 00000000..830b6455 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_pressed_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..04f8b1b1 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_btn_radio_on_pressed_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark.png Binary files differnew file mode 100755 index 00000000..266c73ff --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_dim.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_dim.png Binary files differnew file mode 100755 index 00000000..699eb3e0 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_dim.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png Binary files differnew file mode 100755 index 00000000..71e5b20c --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..ebb05a6a --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png Binary files differnew file mode 100755 index 00000000..a53449ac --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png Binary files differnew file mode 100755 index 00000000..53e8ee4a --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..ef5ae332 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png Binary files differnew file mode 100755 index 00000000..ba749816 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..acdf9c47 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..6f99bc85 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_holo_dark.png Binary files differnew file mode 100755 index 00000000..28e54740 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..b74f64e5 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_divider.png b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_divider.png Binary files differnew file mode 100644 index 00000000..30605ce3 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_divider.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_focused.png b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_focused.png Binary files differnew file mode 100644 index 00000000..b26e87c4 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_focused.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_normal.png b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_normal.png Binary files differnew file mode 100644 index 00000000..59b9ae14 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_normal.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_02.png b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_02.png Binary files differnew file mode 100644 index 00000000..f3ff1edc --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_02.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_03.png b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_03.png Binary files differnew file mode 100644 index 00000000..05ddd261 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_03.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_04.png b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_04.png Binary files differnew file mode 100644 index 00000000..879851c0 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_04.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_05.png b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_05.png Binary files differnew file mode 100644 index 00000000..b5233245 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_05.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_06.png b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_06.png Binary files differnew file mode 100644 index 00000000..d320e18c --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_06.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_add.png b/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_add.png Binary files differdeleted file mode 100644 index cb54b013..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_add.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_close.png b/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_close.png Binary files differdeleted file mode 100755 index 48f38392..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_close.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_brightness_off.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_brightness_off.png Binary files differnew file mode 100755 index 00000000..c1d4bf44 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_brightness_off.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_brightness_on.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_brightness_on.png Binary files differnew file mode 100755 index 00000000..22e92bf8 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_brightness_on.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_mute.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_mute.png Binary files differnew file mode 100755 index 00000000..a68530ae --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_mute.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_outdoor_off.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_outdoor_off.png Binary files differnew file mode 100755 index 00000000..5b0c4146 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_outdoor_off.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_outdoor_on.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_outdoor_on.png Binary files differnew file mode 100755 index 00000000..98276530 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_outdoor_on.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_sound.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_sound.png Binary files differnew file mode 100755 index 00000000..f66d6bad --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_sound.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_sound_off.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_sound_off.png Binary files differnew file mode 100755 index 00000000..3038dff3 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_sound_off.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_vibrate.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_vibrate.png Binary files differnew file mode 100755 index 00000000..23330743 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_device_options_vibrate.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_ic_lock_power_off.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_ic_lock_power_off.png Binary files differnew file mode 100755 index 00000000..35ab7604 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_ic_lock_power_off.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_ic_lock_restart.png b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_ic_lock_restart.png Binary files differnew file mode 100755 index 00000000..b32aa3a8 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Popup/tw_ic_lock_restart.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Progress/progress_wheel.png b/tau/src/css/profile/tv/default/theme-black/images/Progress/progress_wheel.png Binary files differdeleted file mode 100644 index 9e5b177b..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Progress/progress_wheel.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate1_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate1_holo_dark.png Binary files differindex 5b934df6..5ad93579 100755 --- a/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate1_holo_dark.png +++ b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate1_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate2_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate2_holo_dark.png Binary files differnew file mode 100755 index 00000000..bffc30de --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate2_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate3_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate3_holo_dark.png Binary files differnew file mode 100755 index 00000000..a41e8c3f --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate3_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate4_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate4_holo_dark.png Binary files differnew file mode 100755 index 00000000..51c68076 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_progressbar_indeterminate4_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_scrubber_control_focused_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_scrubber_control_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..0d807e2c --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_scrubber_control_focused_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_scrubber_control_holo_dark.png b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_scrubber_control_holo_dark.png Binary files differnew file mode 100755 index 00000000..b7c6fdbb --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_scrubber_control_holo_dark.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_widget_popup_activity.png b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_widget_popup_activity.png Binary files differnew file mode 100755 index 00000000..f49d2390 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Progress/tw_widget_popup_activity.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Scrollview/scrollbar_mask_bottom.png b/tau/src/css/profile/tv/default/theme-black/images/Scrollview/scrollbar_mask_bottom.png Binary files differdeleted file mode 100644 index 064dfec0..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Scrollview/scrollbar_mask_bottom.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Scrollview/scrollbar_mask_top.png b/tau/src/css/profile/tv/default/theme-black/images/Scrollview/scrollbar_mask_top.png Binary files differdeleted file mode 100644 index ddc96f67..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Scrollview/scrollbar_mask_top.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Searchbar/ico_search.png b/tau/src/css/profile/tv/default/theme-black/images/Searchbar/ico_search.png Binary files differdeleted file mode 100644 index 77fc0e58..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Searchbar/ico_search.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Searchbar/search_searchbar_bg_nor.png b/tau/src/css/profile/tv/default/theme-black/images/Searchbar/search_searchbar_bg_nor.png Binary files differdeleted file mode 100755 index ad1a285d..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Searchbar/search_searchbar_bg_nor.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Searchbar/search_searchbar_small_bg_nor.png b/tau/src/css/profile/tv/default/theme-black/images/Searchbar/search_searchbar_small_bg_nor.png Binary files differdeleted file mode 100755 index 72121449..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Searchbar/search_searchbar_small_bg_nor.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/core_dropdown_label_icon_arrow.png b/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/core_dropdown_label_icon_arrow.png Binary files differdeleted file mode 100644 index fb111b05..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/core_dropdown_label_icon_arrow.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/core_icon_expand_open.png b/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/core_icon_expand_open.png Binary files differdeleted file mode 100755 index 2e608cfd..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/core_icon_expand_open.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_arrow_down.png b/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_arrow_down.png Binary files differdeleted file mode 100644 index f1702296..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_arrow_down.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_arrow_up.png b/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_arrow_up.png Binary files differdeleted file mode 100644 index 1970c85b..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_arrow_up.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_dropdown_menu_check.png b/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_dropdown_menu_check.png Binary files differdeleted file mode 100755 index 9e7d1146..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_dropdown_menu_check.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_dropdown_menu_open_arrow.png b/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_dropdown_menu_open_arrow.png Binary files differdeleted file mode 100755 index 7395e325..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/ico_dropdown_menu_open_arrow.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/round_rectangle_4X4.png b/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/round_rectangle_4X4.png Binary files differdeleted file mode 100644 index 5a1f51d3..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Selectmenu/round_rectangle_4X4.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_uncheck_foc.png b/tau/src/css/profile/tv/default/theme-black/images/Slider/00_slider_handle.png Binary files differindex ae255331..c6e9dffb 100755 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_uncheck_foc.png +++ b/tau/src/css/profile/tv/default/theme-black/images/Slider/00_slider_handle.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Slider/00_slider_popup_bg.png b/tau/src/css/profile/tv/default/theme-black/images/Slider/00_slider_popup_bg.png Binary files differnew file mode 100644 index 00000000..ef0a56ec --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/Slider/00_slider_popup_bg.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Slider/slider_thumb_fill.png b/tau/src/css/profile/tv/default/theme-black/images/Slider/slider_thumb_fill.png Binary files differdeleted file mode 100644 index db3f2a9d..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/Slider/slider_thumb_fill.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/SpinControl/ico_spincontrol_down.png b/tau/src/css/profile/tv/default/theme-black/images/SpinControl/ico_spincontrol_down.png Binary files differdeleted file mode 100644 index fbeb94b1..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/SpinControl/ico_spincontrol_down.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/SpinControl/ico_spincontrol_up.png b/tau/src/css/profile/tv/default/theme-black/images/SpinControl/ico_spincontrol_up.png Binary files differdeleted file mode 100644 index f5b25873..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/SpinControl/ico_spincontrol_up.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/00_field_btn_clear_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/00_field_btn_clear_press.png Binary files differnew file mode 100644 index 00000000..778108ea --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/00_field_btn_clear_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/00_search_icon.png b/tau/src/css/profile/tv/default/theme-black/images/controls/00_search_icon.png Binary files differnew file mode 100644 index 00000000..c634b56a --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/00_search_icon.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/00_slider_popup_bg.png b/tau/src/css/profile/tv/default/theme-black/images/controls/00_slider_popup_bg.png Binary files differnew file mode 100644 index 00000000..ef0a56ec --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/00_slider_popup_bg.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_back_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_back_press.png Binary files differnew file mode 100644 index 00000000..76183717 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_back_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_call_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_call_press.png Binary files differnew file mode 100644 index 00000000..5b837fd1 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_call_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_check_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_check_press.png Binary files differnew file mode 100644 index 00000000..8df9a9cf --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_check_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_cancel_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_cancel_press.png Binary files differnew file mode 100644 index 00000000..a5b56394 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_cancel_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_closed_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_closed_press.png Binary files differnew file mode 100644 index 00000000..452209df --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_closed_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_minus.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_minus.png Binary files differnew file mode 100644 index 00000000..0f0170f7 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_minus.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_minus_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_minus_press.png Binary files differnew file mode 100644 index 00000000..0f0170f7 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_minus_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_opened_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_opened_press.png Binary files differnew file mode 100644 index 00000000..5b5cbd04 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_opened_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_send_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_send_press.png Binary files differnew file mode 100644 index 00000000..521b4b22 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_expand_send_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_gear_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_gear_press.png Binary files differnew file mode 100644 index 00000000..8e4b359e --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_gear_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_grid_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_grid_press.png Binary files differnew file mode 100644 index 00000000..ca6b7690 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_grid_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_home_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_home_press.png Binary files differnew file mode 100644 index 00000000..1ba38209 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_home_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_info_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_info_press.png Binary files differnew file mode 100644 index 00000000..1e5d984f --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_info_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_left_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_left_press.png Binary files differnew file mode 100644 index 00000000..b4eca6db --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_left_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_plus.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_plus.png Binary files differnew file mode 100644 index 00000000..12cbe299 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_plus.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_plus_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_plus_press.png Binary files differnew file mode 100644 index 00000000..12cbe299 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_plus_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_refresh_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_refresh_press.png Binary files differnew file mode 100644 index 00000000..33ff934d --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_refresh_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_rename_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_rename_press.png Binary files differnew file mode 100644 index 00000000..e3603b86 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_rename_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_right_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_right_press.png Binary files differnew file mode 100644 index 00000000..659ea765 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_right_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_search.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_search.png Binary files differnew file mode 100644 index 00000000..12f47148 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_search.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_search_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_search_press.png Binary files differnew file mode 100644 index 00000000..12f47148 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_search_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_star.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_star.png Binary files differnew file mode 100644 index 00000000..f6083945 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_star.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_star_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_star_press.png Binary files differnew file mode 100644 index 00000000..f6083945 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_star_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_warning_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_warning_press.png Binary files differnew file mode 100644 index 00000000..4a39960a --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_button_warning_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_icon_jump_left_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_icon_jump_left_press.png Binary files differnew file mode 100644 index 00000000..9c299acf --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_icon_jump_left_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_icon_jump_press.png b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_icon_jump_press.png Binary files differnew file mode 100644 index 00000000..3692cbdb --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/controls/button/00_icon_jump_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_bg.png b/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_bg.png Binary files differindex 012c5f9d..b12e070c 100644..100755 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_bg.png +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_bg.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_music.png b/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_music.png Binary files differdeleted file mode 100755 index d9e6b3de..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_music.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_noti.png b/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_noti.png Binary files differdeleted file mode 100755 index e0b46897..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_noti.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_photo_video.png b/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_photo_video.png Binary files differdeleted file mode 100755 index 1a18912b..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_photo_video.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_setting.png b/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_setting.png Binary files differdeleted file mode 100755 index 15a9f1d9..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_setting.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_wb.png b/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_wb.png Binary files differdeleted file mode 100755 index ef01017c..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_wb.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_web.png b/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_web.png Binary files differdeleted file mode 100755 index ef01017c..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/app_ico_web.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/btn_controller_nor.png b/tau/src/css/profile/tv/default/theme-black/images/icons/btn_controller_nor.png Binary files differdeleted file mode 100755 index 574eebe5..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/btn_controller_nor.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_add.png b/tau/src/css/profile/tv/default/theme-black/images/icons/dynamicbar_ico_bg.png Binary files differindex ef67f571..53323f44 100755 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_add.png +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/dynamicbar_ico_bg.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_add_focus.png b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_add_focus.png Binary files differdeleted file mode 100755 index 97cb7d3e..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_add_focus.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_homebar_editmode_arrow_down.png b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_app_nor.png Binary files differindex 9cfdbb52..5f5e2cc7 100755 --- a/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_homebar_editmode_arrow_down.png +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_app_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_bg_37.png b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_bg_37.png Binary files differdeleted file mode 100644 index 1a0f0892..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_bg_37.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/Searchbar/search_searchbar_small_bg_foc.png b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_live_nor.png Binary files differindex 0a81cdcc..89c3cc07 100755 --- a/tau/src/css/profile/tv/default/theme-black/images/Searchbar/search_searchbar_small_bg_foc.png +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_live_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_moive_nor.png b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_moive_nor.png Binary files differnew file mode 100755 index 00000000..00693ab7 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_moive_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_uncheck_nor.png b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_schedulerec_nor.png Binary files differindex f6c3522d..f58bb260 100755 --- a/tau/src/css/profile/tv/default/theme-black/images/Checkboxradio/old/radiobtn_uncheck_nor.png +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_schedulerec_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_source_nor.png b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_source_nor.png Binary files differnew file mode 100755 index 00000000..5cef3a88 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_source_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_controller_photo_play.png b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_tv_show_nor.png Binary files differindex 647b2a73..8e0bfb07 100644..100755 --- a/tau/src/css/profile/tv/default/theme-black/images/icons/ico_controller_photo_play.png +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/ico_tv_show_nor.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_homebar_editmode_arrow_up.png b/tau/src/css/profile/tv/default/theme-black/images/icons/user_change_area_userlist_ico_bg.png Binary files differindex da6a996e..b89e2b66 100755 --- a/tau/src/css/profile/tv/default/theme-black/images/HomeBar/ico_homebar_editmode_arrow_up.png +++ b/tau/src/css/profile/tv/default/theme-black/images/icons/user_change_area_userlist_ico_bg.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_bg_foc.png b/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_bg_foc.png Binary files differdeleted file mode 100644 index cb5d15fd..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_bg_foc.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_bg_nor.png b/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_bg_nor.png Binary files differdeleted file mode 100644 index ad1a285d..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_bg_nor.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_small_bg_foc.png b/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_small_bg_foc.png Binary files differdeleted file mode 100644 index 0a81cdcc..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_small_bg_foc.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_small_bg_nor.png b/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_small_bg_nor.png Binary files differdeleted file mode 100644 index 72121449..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/input/search_searchbar_small_bg_nor.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_Back.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_Back.png Binary files differnew file mode 100644 index 00000000..815a3438 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_Back.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_Back_press.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_Back_press.png Binary files differnew file mode 100644 index 00000000..fcbc3466 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_Back_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_SIP_close_press_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_SIP_close_press_web.png Binary files differnew file mode 100644 index 00000000..5d036a34 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_SIP_close_press_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_SIP_close_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_SIP_close_web.png Binary files differnew file mode 100644 index 00000000..76f10ec9 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_SIP_close_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_cancel_press_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_cancel_press_web.png Binary files differnew file mode 100644 index 00000000..872ad335 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_cancel_press_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_cancel_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_cancel_web.png Binary files differnew file mode 100644 index 00000000..3c37e96a --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_cancel_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_delete_press_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_delete_press_web.png Binary files differnew file mode 100644 index 00000000..829c8b05 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_delete_press_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_delete_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_delete_web.png Binary files differnew file mode 100644 index 00000000..d105c7b1 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_delete_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_done_press_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_done_press_web.png Binary files differnew file mode 100644 index 00000000..b56c0f19 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_done_press_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_done_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_done_web.png Binary files differnew file mode 100644 index 00000000..7b58fc45 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_done_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_edit_press_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_edit_press_web.png Binary files differnew file mode 100644 index 00000000..b52b2b6a --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_edit_press_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_edit_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_edit_web.png Binary files differnew file mode 100644 index 00000000..a56d1f69 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_edit_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_more.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_more.png Binary files differnew file mode 100644 index 00000000..95f17c75 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_more.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_more_press.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_more_press.png Binary files differnew file mode 100644 index 00000000..d4d6951e --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_more_press.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_plus_press_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_plus_press_web.png Binary files differnew file mode 100644 index 00000000..f15fb719 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_plus_press_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_plus_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_plus_web.png Binary files differnew file mode 100644 index 00000000..d49406f6 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_plus_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_search_press_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_search_press_web.png Binary files differnew file mode 100644 index 00000000..464c5c77 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_search_press_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_search_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_search_web.png Binary files differnew file mode 100644 index 00000000..7788bece --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_search_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_select_all_press_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_select_all_press_web.png Binary files differnew file mode 100644 index 00000000..32ae22e4 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_select_all_press_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_select_all_web.png b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_select_all_web.png Binary files differnew file mode 100644 index 00000000..ce4af60f --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/images/page/00_icon_select_all_web.png diff --git a/tau/src/css/profile/tv/default/theme-black/images/popup/modal_banner_type_shadow.png b/tau/src/css/profile/tv/default/theme-black/images/popup/modal_banner_type_shadow.png Binary files differdeleted file mode 100644 index 360da5d1..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/popup/modal_banner_type_shadow.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/popup/modal_dialogs_banner_bg.png b/tau/src/css/profile/tv/default/theme-black/images/popup/modal_dialogs_banner_bg.png Binary files differdeleted file mode 100644 index 29035e60..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/popup/modal_dialogs_banner_bg.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_arrow.png b/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_arrow.png Binary files differdeleted file mode 100644 index 78f85aa7..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_arrow.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_arrow_up.png b/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_arrow_up.png Binary files differdeleted file mode 100644 index 19f9db70..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_arrow_up.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_bg.png b/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_bg.png Binary files differdeleted file mode 100644 index f7c64124..00000000 --- a/tau/src/css/profile/tv/default/theme-black/images/tooltip/tooltip_bg.png +++ /dev/null diff --git a/tau/src/css/profile/tv/default/theme-black/style.changeable.less b/tau/src/css/profile/tv/default/theme-black/style.changeable.less new file mode 100644 index 00000000..25ed9896 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/style.changeable.less @@ -0,0 +1,4 @@ +@import "theme.changeable.less"; +@import "fixedUIStyle.less"; +@import "9-patch.less"; +@import "../wearable.less"; diff --git a/tau/src/css/profile/tv/default/theme-black/style.less b/tau/src/css/profile/tv/default/theme-black/style.less new file mode 100644 index 00000000..79838dd9 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/style.less @@ -0,0 +1,4 @@ +@import "theme.less"; +@import "fixedUIStyle.less"; +@import "9-patch.less"; +@import "../tv.less"; diff --git a/tau/src/css/profile/tv/default/theme-black/theme.changeable.less b/tau/src/css/profile/tv/default/theme-black/theme.changeable.less new file mode 100644 index 00000000..dc4ab613 --- /dev/null +++ b/tau/src/css/profile/tv/default/theme-black/theme.changeable.less @@ -0,0 +1,140 @@ +/*************************************************************************** + Body +***************************************************************************/ +@color_bg: B011; +@color_text: T0811; + +/*************************************************************************** + Action Bar +***************************************************************************/ +@color_actionbar_title_text: T012; +@color_actionbar_title_bg: B0511; +@color_actionbar_more_pressed_bg: @color_button_default_press_bg; +@icon_actionbar_more_detail_normal: "./images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png"; +@icon_actionbar_more_detail_disable: "./images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png"; +@icon_actionbar_more_overflow_normal: "./images/Actionbar/tw_ic_menu_moreoverflow_normal_holo_dark.png"; +@icon_actionbar_more_overflow_disable: "./images/Actionbar/tw_ic_menu_moreoverflow_disable_holo_dark.png"; +@icon_actionbar_more_selectall_normal: "./images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png"; +@icon_actionbar_more_selectall_disable: "./images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png"; + +/**************************************************************************** + Content +****************************************************************************/ + +@color_content_bg: rgba(75, 66, 55, 0.4); + +/**************************************************************************** + Progress Bar +****************************************************************************/ +@color_progressbar_text: @color_text; +@color_progressbar_normal_bg: B065L3; +@color_progressbar_value_bg: B065L2; + +/**************************************************************************** + Processing +****************************************************************************/ +@color_processing_text: T097; + +/**************************************************************************** + Toggle Switch +****************************************************************************/ +@color_switch_text: T0811; + +/*************************************************************************** + Buttons +***************************************************************************/ +@color_button_default_text: T041; +@color_button_default_text_pressed: T041P; +@color_button_default_text_disable: T041D; + +@color_button_default_normal_bg: W011; +@color_button_default_focus_bg: W011; +@color_button_default_press_bg: W011P; +@color_button_default_disable_bg: W011D; + +@color_button_red_text: T041; +@color_button_red_text_pressed: T041P; +@color_button_red_text_disable: T041D; +@color_button_red_normal_bg: W012; +@color_button_red_focus_bg: W012; +@color_button_red_press_bg: W012P; +@color_button_red_disable_bg: W012D; + +@color_button_orange_text: T041; +@color_button_orange_text_pressed: T041P; +@color_button_orange_text_disable: T041D; +@color_button_orange_normal_bg: W013; +@color_button_orange_focus_bg: W013; +@color_button_orange_press_bg: W013P; +@color_button_orange_disable_bg: W013D; + +@color_button_green_text: T041; +@color_button_green_text_pressed: T041P; +@color_button_green_text_disable: T041D; +@color_button_green_normal_bg: W014; +@color_button_green_focus_bg: W014; +@color_button_green_press_bg: W014P; +@color_button_green_disable_bg: W014D; + +@color_bar_naviframe_press : B0511P; +@color_bar_btn_normal : B052L1; +@color_bar_btn_press : B052L1P; + + +/*************************************************************************** + Popup +***************************************************************************/ +@color_popup_title_text: T091; +@color_popup_bg: B061L1E; +@color_popup_header_bg: B061L2; +@color_popup_border: B061L7; +@color_popup_button_bg: B065L4; +@color_popup_button_press_bg: B065L4P; +@color_popup_overlay: W1712; +@color_popup_text: rgb(61, 61, 61); +/*************************************************************************** + index scrollbar (vertical) +***************************************************************************/ +@color_indexscrollbar_bg: B0722; +@color_indexscrollbar_bg_supplementary: B0723; +@color_indexscrollbar_text: T0311; +@color_indexscrollbar_selected_bg: B0724; +@color_indexscrollbar_selected_text: T0311P; +@color_indexscrollbar_selected_text_supplementary: T0313; + +@color_indexscrollbar_indicator_bg: B0731; +@color_indexscrollbar_indicator_text_normal: T0312; +@color_indexscrollbar_indicator_text_selected: T0312P; + +/*************************************************************************** + Listview +***************************************************************************/ +@color_list_press_bg: B041P; +@color_listview_border: B0222; +@color_listview_text: T0211; +@color_listview_text_press: T0211P; +@color_listview_text_dim: T0211D; +@color_listview_text_highlight: T0212; + +@color_list_border_bottom: B0223; + +/*************************************************************************** + Scroller +***************************************************************************/ +@color_tab_normal: B0514; +@color_tab_active: B0514P1; +@color_scroller_scrollbar_color: B071; +@bg_scroller_bouncing_effect_top: "./images/Scroller/scrollbar-bouncing-effect-top.png"; +@bg_scroller_bouncing_effect_bottom: "./images/Scroller/scrollbar-bouncing-effect-bottom.png"; +@bg_scroller_bouncing_effect_left: "./images/Scroller/scrollbar-bouncing-effect-left.png"; +@bg_scroller_bouncing_effect_right: "./images/Scroller/scrollbar-bouncing-effect-right.png"; + +/*************************************************************************** + Drawer +***************************************************************************/ +@color_drawer_bg : B077; +@color_drawer_list_press : B041P; +@color_drawer_overlay_bg : B016; + +@drawer_back_background: "./images/Drawer/ico_homebar_menu_arrow.png"; +@drawer_icon_background: "./images/icons/dynamicbar_ico_bg.png";
\ No newline at end of file diff --git a/tau/src/css/profile/tv/default/theme-black/theme.color.less b/tau/src/css/profile/tv/default/theme-black/theme.color.less deleted file mode 100644 index 28090651..00000000 --- a/tau/src/css/profile/tv/default/theme-black/theme.color.less +++ /dev/null @@ -1,247 +0,0 @@ -/*************************************************************************** - Body -***************************************************************************/ -@color_bg: rgb(0, 0, 0); // #[color] main background body color -@color_text: rgb(250, 250, 250); // #[color] main body text color -@default_color: rgb(69, 143, 255); // #[color] default color for button elements - -/*************************************************************************** - Action Bar -***************************************************************************/ -@color_actionbar_title_text: rgb(255, 255, 255); // #[color] title text color -@color_actionbar_title_bg: rgb(42,76,130); // #[color] title background color -@color_actionbar_more_pressed_bg: rgb(99, 93, 89); // #[color] more pressed background color -@icon_actionbar_more_detail_normal: "./images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png"; -@icon_actionbar_more_detail_disable: "./images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png"; -@icon_actionbar_more_overflow_normal: "./images/Actionbar/tw_ic_menu_moreoverflow_normal_holo_dark.png"; -@icon_actionbar_more_overflow_disable: "./images/Actionbar/tw_ic_menu_moreoverflow_disable_holo_dark.png"; -@icon_actionbar_more_selectall_normal: "./images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png"; -@icon_actionbar_more_selectall_disable: "./images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png"; - -/**************************************************************************** - Page -****************************************************************************/ -@color_page_black_header: rgb(7, 10, 17); // #[color] background color of header in black mode -@color_page_black_content: rgba(7, 10, 17, 0.5); // #[color] background color of header in black mode -@color_content_bg: rgb(53, 80, 123); // #[color] background color -@color_gray_content_bg: rgb(233, 236, 240); // #[color] gray page background color -@color_gray_content_text: rgb(98, 103, 112); // #[color] gray page text color - -/**************************************************************************** - Progress Bar -****************************************************************************/ -@color_progressbar_text: rgb(255, 255, 255); // #[color] text color -@color_progressbar_normal_bg: rgba(255, 255, 255, 0.1); // #[color] normal background color -@color_progressbar_value_bg: rgba(255, 255, 255, 0.7); // #[color] value background color - -/*************************************************************************** - Buttons -***************************************************************************/ -@color_button_basic_normal: rgb(204, 204, 204); // #[color] Color of basic button background - normal -@color_button_basic_txt_normal: rgb(89, 89, 89); // #[color] Color of basic button text - normal -@color_button_basic_txt_focus: rgb(255, 255, 255); // #[color] Color of basic button text - focused - -@color_button_icon_source: @default_color; // #[color] Background color of icon source button -@color_button_icon_app: @default_color; // #[color] Background color of icon app button -@color_button_icon_movie: rgb(255, 99, 86); // #[color] Background color of icon movie button -@color_button_icon_show: rgb(255, 168, 0); // #[color] Background color of icon show button -@color_button_icon_live: @default_color; // #[color] Background color of icon live button -@color_button_icon_add_bg: rgba(81, 91, 110, 0.45); // #[color] Background color of icon add button -@color_button_icon_add: rgba(255, 255, 255, 0.30); // #[color] Color of icon add button -@color_button_icon_add_bg_focus: rgb(20, 71, 159); // #[color] Background color of icon add button -@color_button_icon_add_focus: rgb(255, 255, 255); // #[color] Color of icon add button -@color_button_icon_add_box_bg_focus: @default_color; // #[color] Background color of whole box after focus -@color_button_with_icon: rgb(255, 255, 255); // #[color] Text color of button with icon - -@color_button_icon_text: rgb(211, 211, 211); // #[color] Icon button text color -@color_button_icon_text_focus: rgb(255, 255, 255); // #[color] Focused icon button text color -@color_button_icon_text_dim: rgba(255, 255, 255, 0.2); // #[color] Disabled icon button text color -@color_button_icon_normal: rgba(0, 0, 0, 0.3); - - -@color_bar_header_btn: rgba(95, 159, 232, 1); // #[color] Bar header button background color -@color_bar_btn_normal: rgba(244, 244, 244, 1); // #[color] Bar button normal background color - -@color_type_button_text_normal: rgb(164, 167, 174); // #[color] Color of text in button with class ui-button-text -@color_type_button_text_txt_focus: rgb(255, 255, 255); // #[color] Color of text in focused button with class ui-button-text -/*************************************************************************** - Popup -***************************************************************************/ -@color_popup_title_text: rgb(255, 255, 255); // #[color] title text color -@color_popup_title_text_no_box: rgb(211, 211, 211); // #[color] title text color (no-box mode) -@color_popup_bg: rgb(255, 255, 255); // #[color] background color -@color_popup_border: rgb(128, 72, 0); // #[color] border background color -@color_popup_header_bg: rgb(42,76,130); // #[color] header background color -@color_popup_header_border: rgb(67, 67, 67); // #[color] header border background color -@color_popup_text: rgb(61, 61, 61); // #[color] content text color -@color_popup_text_no_box: rgb(134, 134, 134); // #[color] content text color (no-box mode) -@color_popup_footer_btn_focus: @default_color; // #[color] button background color - focused -@color_popup_text_content: rgb(61, 61, 61); // #[color] list item text color -@color_popup_shadow: rgba(0, 0, 0, 0.67); // #[color] shadow color -@color_popover: rgb(89, 89, 89); // #[color] text color of list item in popover -@color_popover_focus: rgb(255, 255, 255); // #[color] text color of list item in popover (focus) -@color_popover_focus_disabled: rgba(255, 255, 255, 0.2); // #[color] text color of list item in popover (focus,disabled) -@color_popover_border: rgb(222, 222, 222); // #[color] border color for li element in list in popover -@color_popover_disabled: rgba(89, 89, 89, 0.2); // #[color] text color of list item in popover (disabled) -@color_tooltip: rgb(29, 29, 29); // #[color] color of tooltip text - -/*************************************************************************** - Index scrollbar (vertical) -***************************************************************************/ -@color_indexscrollbar_bg: rgb(34, 34, 34); // #[color] bar background color -@color_indexscrollbar_bg_supplementary: rgb(44, 44, 44); // #[color] bar supplementary background color -@color_indexscrollbar_text: rgb(89, 89, 89); // #[color] bar text color -@color_indexscrollbar_selected_bg: #f99107; // #[color] bar selected background color -@color_indexscrollbar_selected_text: rgb(255, 255, 255); // #[color] bar selected text color -@color_indexscrollbar_selected_text_supplementary: rgb(255, 144, 0); // #[color] bar selected supplementary text color - -@color_indexscrollbar_indicator_bg: rgb(88, 73, 58); // #[color] bar indicator background color -@color_indexscrollbar_indicator_text_normal: rgb(255, 255, 255); // #[color] bar indicator text normal color -@color_indexscrollbar_indicator_text_selected: rgb(255, 144, 0); // #[color] bar indicator text selected color - -/*************************************************************************** - Listview -***************************************************************************/ -@color_listview_border: rgb(74, 102, 144); // #[color] list border color -@color_listview_text: rgb(255, 255, 255); // #[color] text color -@color_list_btn_txt: rgb(164, 167, 174); // #[color] list item text color -@color_list_btn_txt_focus: rgb(255, 255, 255); // #[color] focused list item text color -@color_listview_txt_disabled: rgb(51, 51, 51); // Disabled element text color -@color_list_divider_text: rgb(66, 87, 144); // #[color] List divider text color -@color_list_divider_line_bg: rgb(66, 87, 144); // #[color] List divider normal line background color -@color_listview_bg_color_white: rgb(255, 255, 255); // #[color] list divider background color -@list_sub_txt_color: rgb(189, 167, 146); // #[color] list item sub text color -@gray_content_listview_bg: rgb(221, 224, 228); // #[color] list item background color for gray page -@gray_content_listview_text: rgb(89, 89, 89); // #[color] list item text color for gray page -@gray_content_list_divider_line_bg: rgb(89, 89, 89); // #[color] list divider background color for gray page - -/*************************************************************************** - Scroller -***************************************************************************/ -@color_tab_normal: rgb(53, 48, 44); // #[color] Tab indicator normal background color -@color_tab_active: rgb(249, 145, 7); // #[color] Tab indicator active background color -@color_scroller_scrollbar_color: #666666; // #[color] scrollbar color -@bg_scroller_bouncing_effect_top: "./images/Scroller/scrollbar-bouncing-effect-top.png"; -@bg_scroller_bouncing_effect_bottom: "./images/Scroller/scrollbar-bouncing-effect-bottom.png"; -@bg_scroller_bouncing_effect_left: "./images/Scroller/scrollbar-bouncing-effect-left.png"; -@bg_scroller_bouncing_effect_right: "./images/Scroller/scrollbar-bouncing-effect-right.png"; - -/*************************************************************************** - Scrollview -****************************************************************************/ -@color_scrollview_handler_bright: rgba(255, 255, 255, 0.1); // #[color] handler background color -@color_scrollview_handler_dark: rgba(0, 0, 0, 0.25); - -/*************************************************************************** - Drawer -***************************************************************************/ -@color_drawer_bg: rgba(0,0,0,.85); // #[color] background color -@color_drawer_back_bg: rgba(0,0,0,.5); -@color_drawer_border: rgba(64, 64, 64, 1); // #[color] border color -@color_drawer_list_press: rgba(95, 160, 233, 1); // listview button press background color -@drawer_back_background: "./images/Drawer/ico_homebar_menu_arrow.png"; -@color_drawer_btn_close_background: @default_color; // button close background color -@color_drawer_footer_btn_background: @default_color; // #[color] list item, footer button background color -@color_drawer_btn: rgb(255, 255, 255); // #[color] listview text color -@color_drawer_listview_not_divider: rgb(42, 50, 64); // #[color] list item background color -@color_drawer_listview_not_divider_border: rgb(6, 8, 11); // #[color] List bottom line background color -@color_drawer_divider_btn: rgb(211, 211, 211); // #[color] list divider text color -@color_drawer_footer_btn: rgb(211, 211, 211); // #[color] footer button color -@color_drawer_dynamic_footer_background: rgb(45, 45, 45); // #[color] footer background color of dynamic list elements -@color_drawer_poster_icon_footer_background: rgb(45, 45, 45); // #[color] footer background color of poster/icon elements -@color_drawer_progressbar_bg: rgba(255, 255, 255, 0.1); // #[color] progress bar background -@color_drawer_progressbar_value: rgba(255, 255, 255, 0.7); // #[color] progress bar value - -@drawer_up: "./images/HomeBar/ico_homebar_editmode_arrow_up.png"; -@drawer_down: "./images/HomeBar/ico_homebar_editmode_arrow_down.png"; -@drawer_close: "./images/HomeBar/ico_close.png"; - -/*************************************************************************** - Grid -***************************************************************************/ -@color_grid_txt_normal: rgb(211, 211, 211); // #[color] buttons text basic color -@color_grid_btn_focus_border: @default_color; // #[color] Focused button border color -@color_grid_btn_focus_thumb_content: @default_color; // #[color] Focused thumbnail content background color -@color_grid_2_line_content: rgba(255, 255, 255, 0.8); // #[color] Grid 2 line icon text color -@color_grid_2_line_content_subtext: rgba(255, 255, 255, 0.5); // #[color] Grid 2 line icon subtext color - -/*************************************************************************** - Input -***************************************************************************/ -@color_input_bg: rgb(255, 255, 255); // #[color] background color -@color_input_text: rgb(204, 204, 204); // #[color] text color -@color_input_border: rgba(61, 61, 61, 0.5); // #[color] border color -@color_input_text_small: rgba(61, 61, 61, 0.5); // #[color] text color for small input -@color_input_border: rgba(61, 61, 61, 0.5); // #[color] border color -@color_input_text_focus: rgb(61, 61, 61); // #[color] Focused text color -@color_input_number_text: @default_color; // #[color] Number text color -@color_input_number_bg_focus: @default_color; // #[color] Focused number background color -@color_input_number_border_focus: @default_color; // #[color] Focused number border color -@color_input_number_text_focus: rgb(255, 255, 255); // #[color] Focused number text color - -/*************************************************************************** - Scrollbar -***************************************************************************/ -@color_scrollbar_thumb_bg: rgba(0, 0, 0, 0.25); // #[color] thumb background color - -/*************************************************************************** - Slider -***************************************************************************/ -@color_slider_handle_text: rgb(250, 250, 250); // #[color] handle text color -@color_slider_handle_text_press: rgb(250, 250, 250); // #[color] handle pressed text color -@color_slider_popup_text: rgb(76, 81, 88); // #[color] popup text color -@color_slider_popup_bg: rgb(238, 238, 238); // #[color] popup background color -@color_slider_left_text: rgba(255, 255, 255, 0.7); // #[color] left text color -@color_slider_right_text: rgba(255, 255, 255, 0.7); // #[color] right text color -@color_slider_bg: rgba(255, 255, 255, 0.25); // #[color] background color -@color_slider_value: rgb(255, 255, 255); // #[color] value color -@slider_lessbox_shadow: green;//rgb(116, 113, 127); // #[color] shadow over slider - -/*************************************************************************** - SelectMenu -***************************************************************************/ -@color_selectmenu_list_group_index_bg : rgb(76,115,33);//W021L1; // #[color] list group background color -@color_selectmenu_list_line : rgb(76,115,33);//W021L2; // #[color] list group divider line color -@color_selectmenu_border_placeholder: rgb(76,115,33);//W021L2; // #[color] placeholder border color -@color_selectmenu_label_bg : rgb(176,115,3);// B0733; // #[color] label background color -@color_selectmenu_list_group_stroke: rgb(76,115,33);//B0733L1; // #[color] list stroke line color -@color_selectmenu_list_item_bg_press: rgb(76,115,33);//B0733P; // #[color] list item background press color -@color_selectmenu_icon: rgb(176,115,4); //B0734; // #[color] icon color -@color_selectmenu_font_dim: rgb(18, 53, 29); //12351D; // #[color] color for dimmed font -@color_selectmenu_placeholder_bg: rgb(76,115,33); // #[color] selectmenu placeholder background -@color_selectmenu_list_item_bg: rgb(255, 255, 255); // #[color] selectmenu list item background -@color_selectmenu_bg: rgba(0, 0, 0, 0.3); // #[color] main background -@color_selectmenu_placeholder: rgba(193, 193, 193, 0.8); // #[color] main background for placeholder -@color_selectmenu_arrow_background: rgba(89, 89, 89, 0.9); // #[color] arrow backgorund will change color of image -@color_selectmenu_active: rgba(0, 0, 0, 0.5); // #[color] active selectmenu -@color_selectmenu_list_item: rgb(89, 89, 89); // #[color] color of text in option -@color_selectmenu_list_item_border_top: rgb(222, 222, 222); // #[color] border in the list -@color_selectmenu_list_item_txt: rgb(175, 175, 175); // #[color] default color for text -@color_selectmenu_list_item_focus: rgba(255, 255, 255, 0.9); // #[color] focus for list item -@color_selectmenu_list_item_selected: rgba(69, 143, 255, 0.9); // #[color] selected list item -@color_selectmenu_list_item_selected_focus:rgb(255, 255, 255); // #[color] selected and focused list item -@color_selectmenu_list_item_focus_txt: rgb(255, 255, 255); // #[color] text for focused elements -/*************************************************************************** - InputSearchBar -***************************************************************************/ -@color_list_editfield : rgb(255, 255, 255); // #[color] text input background color -@color_searchbar: rgb(255, 255, 255); //#[color] background color of searchbar input -@color_searchbar_default_text : rgb(93, 97, 118); // #[color] search input color of text -@color_searchbar_border : rgb(255, 255, 255); // #[color] color of search bar input border -@color_searchbar_border_focus : @default_color;// #[color] color of search bar input border (focus) -@color_searchbar_button_shadow0 : rgb(122, 125, 134); // #[color] color of shadow of searchbar -@color_searchbar_button_shadow1 : rgb(34, 34, 34); // #[color] color of shadow of searchbar -@color_searchbar_icon: rgba(61, 61, 61, 0.5); // #[color] color of icon on searchbar -@color_searchbar_icon_focus: @default_color; // #[color] color of icon on searchbar (focus) -@color_input_border_small: rgb(178, 178, 178); //#[color] color of small textinput border -@color_input_border_small_focus: @default_color; //#[color] color of small textinput border (focus) - -/*************************************************************************** - Checkboxradio -***************************************************************************/ -@gray_content_checkboxradio_label_text: rgb(69, 143, 255); // #[color] label text color for gray page -@checkboxradio_label_text_focus: rgb(255, 255, 255); // #[color] label text color when focused -/*************************************************************************** - SpinControl -***************************************************************************/ -@color_spincontrol_separator: rgba(125, 125, 125, 0.15); //#[color] spin control separator color diff --git a/tau/src/css/profile/tv/default/theme-black/theme.less b/tau/src/css/profile/tv/default/theme-black/theme.less index 4ed79a1a..ea8d70ba 100644 --- a/tau/src/css/profile/tv/default/theme-black/theme.less +++ b/tau/src/css/profile/tv/default/theme-black/theme.less @@ -1,8 +1,187 @@ -@import "theme.color.less"; -@import "fixedUIStyle.less"; -@import "9-patch.less"; -@import "../tv.less"; - -.tau-info-theme:after { - content: "black"; -} +/*************************************************************************** + Body +***************************************************************************/ +@color_bg: rgb(0, 0, 0); /* B011 : Main Background color */ +@color_text: rgb(250, 250, 250); /* B012 : Main font color */ + +/*************************************************************************** + Action Bar +***************************************************************************/ +@color_actionbar_title_text: rgb(255, 255, 255); +@color_actionbar_title_bg: rgb(42,76,130); +@color_actionbar_border: rgb(42,76,130); +@color_actionbar_more_pressed_bg: @color_button_default_press_bg; +@icon_actionbar_more_detail_normal: "./images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png"; +@icon_actionbar_more_detail_disable: "./images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png"; +@icon_actionbar_more_overflow_normal: "./images/Actionbar/tw_ic_menu_moreoverflow_normal_holo_dark.png"; +@icon_actionbar_more_overflow_disable: "./images/Actionbar/tw_ic_menu_moreoverflow_disable_holo_dark.png"; +@icon_actionbar_more_selectall_normal: "./images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png"; +@icon_actionbar_more_selectall_disable: "./images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png"; +@color_actionbar_tab_nav_active_bg: rgb(255, 144, 0); + +@color_bar_naviframe_press : rgba(95, 159, 232, 1); +@color_bar_btn_normal : rgba(244, 244, 244, 1); /* B052L1 : Font&Icon (normal) */ +@color_bar_btn_press : rgba(244, 244, 244, 1); /* B052L1P : Title text button press bg */ + +/**************************************************************************** + Content +****************************************************************************/ + +@color_content_bg: rgb(53, 80, 123); + +/**************************************************************************** + Progress Bar +****************************************************************************/ +@color_progressbar_text: rgb(255, 255, 255); +@color_progressbar_normal_bg: rgb(17, 17, 17); +@color_progressbar_value_bg: rgb(255, 134, 0); + +/**************************************************************************** + Processing +****************************************************************************/ +@color_processing_text: rgb(255, 255, 255); + +/**************************************************************************** + Toggle Switch +****************************************************************************/ +@color_switch_text: rgb(255, 255, 255); + +/*************************************************************************** + Buttons +***************************************************************************/ +@color_button_default_text: rgb(255, 255, 255); +@color_button_default_text_disable: rgb(51, 51, 51); +@color_button_default_normal_bg: rgb(29, 66, 62); +@color_button_default_focus_bg: rgb(75, 66, 55); +@color_button_default_press_bg: rgb(99, 93, 89); +@color_button_default_disable_bg: rgb(29, 26, 24); + +@color_button_red_text: rgb(255, 255, 255); +@color_button_red_text_disable: rgba(255, 255, 255, 0.15); +@color_button_red_normal_bg: #ce2302; +@color_button_red_focus_bg: #ce2302; +@color_button_red_press_bg: #dd654e; +@color_button_red_disable_bg: #4e1910; + +@color_button_orange_text: rgb(255, 255, 255); +@color_button_orange_text_disable: rgba(255, 255, 255, 0.15); +@color_button_orange_normal_bg: #ed8600; +@color_button_orange_focus_bg: #ed8600; +@color_button_orange_press_bg: #f0aa56; +@color_button_orange_disable_bg: #462805; + +@color_button_green_text: rgb(255, 255, 255); +@color_button_green_text_disable: rgba(255, 255, 255, 0.15); +@color_button_green_normal_bg: #64a323; +@color_button_green_focus_bg: #64a323; +@color_button_green_press_bg: #92be5e; +@color_button_green_disable_bg: #26351e; + +/*************************************************************************** + Popup +***************************************************************************/ +@color_popup_title_text: rgb(255, 255, 255); +@color_popup_bg: rgb(255, 255, 255); +@color_popup_border: rgb(128, 72, 0); +@color_popup_header_bg: rgb(42,76,130); +@color_popup_header_border: rgb(67, 67, 67); +@color_popup_button_bg: rgb(72, 65, 60); +@color_popup_button_press_bg: rgb(99, 93, 89); +@color_popup_overlay: rgba(0, 0, 0, 0.7); +@color_popup_text: rgb(61, 61, 61); + +/*************************************************************************** + Popup +***************************************************************************/ +@color_list_border: rgb(53, 81, 124); +@color_list_press_bg: rgb(88, 74, 58); + +/*************************************************************************** + index scrollbar (vertical) +***************************************************************************/ +@color_indexscrollbar_bg: rgb(34, 34, 34); +@color_indexscrollbar_bg_supplementary: rgb(44, 44, 44); +@color_indexscrollbar_text: rgb(89, 89, 89); +@color_indexscrollbar_selected_bg: #f99107; +@color_indexscrollbar_selected_text: rgb(255, 255, 255); +@color_indexscrollbar_selected_text_supplementary: rgb(255, 144, 0); + +@color_indexscrollbar_indicator_bg: rgb(88, 73, 58); +@color_indexscrollbar_indicator_text_normal: rgb(255, 255, 255); +@color_indexscrollbar_indicator_text_selected: rgb(255, 144, 0); + +/*************************************************************************** + Listview +***************************************************************************/ +@color_listview_border: rgb(74, 102, 144); +@color_listview_text: rgb(255, 255, 255); +@color_listview_text_press: rgb(255, 255, 255); +@color_listview_text_dim: rgb(52, 52, 52); +@color_listview_text_highlight: rgb(255, 149, 0); + +@color_list_border_bottom: rgba(64, 64, 64, 1); /* B0223 */ +@color_listview_focus: rgb(69, 143, 255); + +/*************************************************************************** + Scroller +***************************************************************************/ +@color_tab_normal: rgb(53, 48, 44); +@color_tab_active: rgb(249, 145, 7); +@color_scroller_scrollbar_color: #666666; +@bg_scroller_bouncing_effect_top: "./images/Scroller/scrollbar-bouncing-effect-top.png"; +@bg_scroller_bouncing_effect_bottom: "./images/Scroller/scrollbar-bouncing-effect-bottom.png"; +@bg_scroller_bouncing_effect_left: "./images/Scroller/scrollbar-bouncing-effect-left.png"; +@bg_scroller_bouncing_effect_right: "./images/Scroller/scrollbar-bouncing-effect-right.png"; + +/*************************************************************************** + Slider +***************************************************************************/ +@color_slider_handle_text: rgb(250, 250, 250); +@color_slider_handle_text_press: rgb(250, 250, 250); +@color_slider_popup_text: rgb(76, 81, 88); +@color_slider_popup_bg: rgb(238, 238, 238); +@color_slider_left_text: rgb(186, 186, 186); +@color_slider_right_text: rgb(186, 186, 186); +@color_slider_label_text: rgb(255, 255, 255); + +/*************************************************************************** + Progress +***************************************************************************/ +@color_progress_bar: rgb(51, 67, 83); +@color_progress_value: rgb(65, 91, 254); +@color_progress_shadow: rgb(116, 113, 127); +@color_progress_value_shadow0: rgb(38, 53, 146); +@color_progress_value_shadow1: rgb(98, 127, 203); +@color_progress_shadow0: rgb(49, 49, 56); +@color_progress_shadow1: rgb(116, 113, 127); + +/*************************************************************************** + Drawer +***************************************************************************/ +@color_drawer_bg : rgba(0,0,0,.85); /* B077 : Drawer BG */ +@color_drawer_list_press : rgba(95, 160, 233, 1); /* B041P : Drawer list pressed */ +@color_drawer_overlay_bg : rgba(8, 8, 8, 0.7); /* B016 : Drawer overlay BG */ + +@drawer_back_background: "./images/Drawer/ico_homebar_menu_arrow.png"; +@drawer_icon_background: "./images/icons/app_ico_bg.png"; +@drawer_icon_shadow: "./images/icons/bg_ico_76_shadow.png"; +/*************************************************************************** + Input +***************************************************************************/ +@color_input_bg: rgb(255, 255, 255); +@color_input_text: rgba(61, 61, 61, 0.5); +@color_input_text_focus: rgb(61, 61, 61); +@color_input_number_text: rgb(69, 143, 255); +@color_input_number_bg_focus: rgb(69, 143, 255); +@color_input_number_text_focus: rgb(255, 255, 255); +/*************************************************************************** + Scrollbar +***************************************************************************/ +@color_scrollbar_thumb_bg: rgba(0, 0, 0, 0.25); + +/*************************************************************************** + Listdivider +***************************************************************************/ +@font_size_list_divider_text: 30 * @virtual_px; +@color_list_divider_text: rgb(66, 87, 144); +@color_list_divider_line_bg: rgb(66, 87, 144); diff --git a/tau/src/css/profile/tv/default/tv.less b/tau/src/css/profile/tv/default/tv.less index 06864671..df11cf86 100644 --- a/tau/src/css/profile/tv/default/tv.less +++ b/tau/src/css/profile/tv/default/tv.less @@ -1,10 +1,8 @@ -@import "../../prefixer.less"; -@import "../../prefixer.ext.less"; -@import "../../helpers.less"; @import "common/reset.less"; @import "common/core.less"; @import "common/layout.less"; @import "common/progress.less"; +@import "common/toggleswitch.less"; @import "common/button.less"; @import "common/popup.less"; @import "common/listview.less"; @@ -20,16 +18,7 @@ @import "common/tabindicator.less"; @import "common/drawer.less"; @import "common/input.less"; -@import "common/spincontrol.less"; -@import "common/timeinput.less"; -@import "common/dateinput.less"; @import "common/checkboxradio.less"; @import "common/scrollbar.less"; @import "common/grids.less"; @import "common/tabbar.less"; -@import "common/marquee.less"; -@import "common/scrollview.less"; -@import "common/scrollhandler.less"; -@import "common/selectmenu.less"; -@import "common/textinputsearch.less"; -@import "common/contextualmenu.less"; diff --git a/tau/src/css/profile/wearable/changeable/common/button.less b/tau/src/css/profile/wearable/changeable/common/button.less index 38eb9a97..2042a11c 100644 --- a/tau/src/css/profile/wearable/changeable/common/button.less +++ b/tau/src/css/profile/wearable/changeable/common/button.less @@ -32,25 +32,9 @@ overflow: hidden; background-repeat: no-repeat; background-size: @fixed_button_icon_bg_size @fixed_button_icon_bg_size; - position: relative; } } -.ui-btn-icon::before { - content: ""; - background-color: @color_button_icon_bg; - -webkit-mask-size: @fixed_button_icon_bg_size @fixed_button_icon_bg_size; - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: 0 0; - width: @fixed_button_icon_bg_size; - height: @fixed_button_icon_bg_size; - top : 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - position: absolute; - -webkit-mask-image: -webkit-linear-gradient(transparent,transparent); -} - .ui-default { color: @color_button_default_text; background-color: @color_button_default_normal_bg; @@ -136,7 +120,8 @@ a.ui-btn { button.ui-btn, input.ui-btn { box-sizing: border-box; - .appearance(none); + -webkit-appearance: none; + -moz-appearance: none; width: 100%; &.ui-inline { diff --git a/tau/src/css/profile/wearable/changeable/common/checkboxradio.less b/tau/src/css/profile/wearable/changeable/common/checkboxradio.less index 06c49aab..f13adb02 100644 --- a/tau/src/css/profile/wearable/changeable/common/checkboxradio.less +++ b/tau/src/css/profile/wearable/changeable/common/checkboxradio.less @@ -1,109 +1,106 @@ -input[type="checkbox"]:not(.ui-switch-input), +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; height: 56px; width: 56px; font-size: 32px; - .appearance(none); + -webkit-appearance: none; position: relative; } input[type="radio"] { background-color: @color_checkboxradio_radiobox; - .mask-image('images/Controller_icon/tw_btn_radiobox_holo_dark.png'); - .mask-repeat(no-repeat); - .mask-size(100% 100%); + -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png); + -webkit-mask-repeat: no-repeat; } input[type="radio"]::after { content: ""; background-color: @color_checkboxradio_radiobox_line; - .mask-image('images/Controller_icon/tw_btn_radiobox_line.png'); - .mask-repeat(no-repeat); - .mask-size(100% 100%); - width: 100%; - height: 100%; + -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png); + -webkit-mask-repeat: no-repeat; + width: 56px; height: 56px; position: absolute; } input[type="radio"]:checked::before { content: ""; background-color: @color_checkboxradio_radio; - .mask-image('images/Controller_icon/tw_btn_radio_holo_dark.png'); - .mask-repeat(no-repeat); - .mask-size(100% 100%); - width: 100%; - height: 100%; + -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png); + -webkit-mask-repeat: no-repeat; + width: 56px; height: 56px; position: absolute; } input[type="radio"]:active { background-color : @color_checkboxradio_radiobox_press; - .mask-image('images/Controller_icon/tw_btn_radiobox_holo_dark.png'); - .mask-repeat(no-repeat); + -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_holo_dark.png); + -webkit-mask-repeat: no-repeat; } input[type="radio"]:active::after { content: ""; background-color: @color_checkboxradio_radiobox_line_press; - .mask-image('images/Controller_icon/tw_btn_radiobox_line.png'); - .mask-repeat(no-repeat); - width: 100%; - height: 100%; + -webkit-mask-image: url(images/Controller_icon/tw_btn_radiobox_line.png); + -webkit-mask-repeat: no-repeat; + width: 56px; height: 56px; position: absolute; } input[type="radio"]:active:checked::before { content: ""; background-color: @color_checkboxradio_radio_press; - .mask-image('images/Controller_icon/tw_btn_radio_holo_dark.png'); - .mask-repeat(no-repeat); - width: 100%; - height: 100%; + -webkit-mask-image: url(images/Controller_icon/tw_btn_radio_holo_dark.png); + -webkit-mask-repeat: no-repeat; + width: 56px; height: 56px; position: absolute; } -input[type="checkbox"]:not(.ui-switch-input) { - .mask-image('images/Controller_icon/tw_btn_checkbox_holo_dark.png'); - .mask-repeat(no-repeat); - .mask-size(100% 100%); - background-color: @color_checkboxradio_checkbox; - &::after { - content: ""; - background-color: @color_checkboxradio_checkbox_line; - .mask-image('images/Controller_icon/tw_btn_checkbox_line_holo_dark.png'); - .mask-repeat(no-repeat); - .mask-size(100% 100%); - width: 100%; - height: 100%; - position: absolute; - } - &:checked::before { - content: ""; - .mask-image('images/Controller_icon/tw_btn_check_holo_dark.png'); - .mask-repeat(no-repeat); - .mask-size(100% 100%); - background-color: @color_checkboxradio_check; - width: 100%; - height: 100%; - position: absolute; - } - &:active { - background-color: @color_checkboxradio_checkbox_press; - &::after { - content: ""; - background-color: @color_checkboxradio_checkbox_line_press; - width: 100%; - height: 100%; - position: absolute; - } - &:checked::before { - content: ""; - background-color: @color_checkboxradio_check_press; - width: 100%; - height: 100%; - position: absolute; - } - } -}
\ No newline at end of file +input[type="checkbox"] { + -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png); + -webkit-mask-repeat: no-repeat; + background-color: @color_checkboxradio_checkbox; +} + +input[type="checkbox"]::after { + content: ""; + background-color: @color_checkboxradio_checkbox_line; + -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png); + -webkit-mask-repeat: no-repeat; + width: 56px; height: 56px; + position: absolute; +} + +input[type="checkbox"]:checked::before { + content: ""; + -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png); + -webkit-mask-repeat: no-repeat; + background-color: @color_checkboxradio_check; + width: 56px; height: 56px; + position: absolute; +} + +input[type="checkbox"]:active { + -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_holo_dark.png); + -webkit-mask-repeat: no-repeat; + background-color: @color_checkboxradio_checkbox_press; +} + +input[type="checkbox"]:active::after { + content: ""; + -webkit-mask-image: url(images/Controller_icon/tw_btn_checkbox_line_holo_dark.png); + -webkit-mask-repeat: no-repeat; + background-color: @color_checkboxradio_checkbox_line_press; + width: 56px; height: 56px; + position: absolute; +} + +input[type="checkbox"]:active:checked::before { + content: ""; + -webkit-mask-image: url(images/Controller_icon/tw_btn_check_holo_dark.png); + -webkit-mask-repeat: no-repeat; + background-color: @color_checkboxradio_check_press; + width: 56px; height: 56px; + position: absolute; +} diff --git a/tau/src/css/profile/wearable/changeable/common/circleprogressbar.less b/tau/src/css/profile/wearable/changeable/common/circleprogressbar.less deleted file mode 100644 index 693a5d14..00000000 --- a/tau/src/css/profile/wearable/changeable/common/circleprogressbar.less +++ /dev/null @@ -1,72 +0,0 @@ -.ui-circle-progress { - display: none; -} - -// specific style for progressbar -.ui-progressbar.ui-progressbar-full { - position: fixed; - top: 0; left: 0; - width: 100%; - height: 100%; -} - -.ui-progressbar.ui-progressbar-large { - width: 100 * @unit_base; - height: 100 * @unit_base; -} - -.ui-progressbar.ui-progressbar-medium { - width: 84 * @unit_base; - height: 84 * @unit_base; -} - -.ui-progressbar.ui-progressbar-small { - width: 56 * @unit_base; - height: 56 * @unit_base; -} - -// common style for progressbar -.ui-progressbar { - position: relative; - display: inline-block; - pointer-events: none; - - .ui-progressbar-value.ui-progressbar-half { - clip: rect(auto, auto, auto, auto); - .ui-progressbar-value-right { - -webkit-transform: rotate(180deg); - } - } - .ui-progressbar-value { - clip: rect(0, 1em, 1em, .5em); - width: 100%; - height: 100%; - position: absolute; - - .ui-progressbar-value-left { - border: 8 * @unit_base solid @color_circleprogressbar_value; - border-radius: 50%; - clip: rect(0, .5em, 1em, 0); - height: 100%; - width: 100%; - position: absolute; - } - - .ui-progressbar-value-right { - border: 8 * @unit_base solid @color_circleprogressbar_value; - border-radius: 50%; - clip: rect(0, .5em, 1em, 0); - width: 100%; - height: 100%; - position: absolute; - } - } - - .ui-progressbar-bg { - border: 8 * @unit_base solid @color_circleprogressbar_bg; - border-radius: 50%; - width: 100%; - height: 100%; - } - -} diff --git a/tau/src/css/profile/wearable/changeable/common/circularindexscrollbar.less b/tau/src/css/profile/wearable/changeable/common/circularindexscrollbar.less deleted file mode 100644 index d826c7ce..00000000 --- a/tau/src/css/profile/wearable/changeable/common/circularindexscrollbar.less +++ /dev/null @@ -1,40 +0,0 @@ -.ui-circularindexscrollbar { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - - .ui-circularindexscrollbar-indicator { - position: absolute; - top: 50%; - left: 50%; - width: 158 * @unit_base; - height: 158 * @unit_base; - line-height: 158 * @unit_base; - border-radius: 50%; - background-color: @color_circularindexscrollbar_indicator_bg; - .transition(opacity 250ms ease-out); - .transform(translate(-50%, -50%)); - opacity: 0; - } - - &.ui-circularindexscrollbar-show { - pointer-events: auto; - .ui-circularindexscrollbar-indicator { - opacity: 1; - } - } - - .ui-circularindexscrollbar-indicator-text { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - font-size: 70 * @unit_base; - color: @color_circularindexscrollbar_indicator_text; - } -} diff --git a/tau/src/css/profile/wearable/changeable/common/core.less b/tau/src/css/profile/wearable/changeable/common/core.less index 293c4dc0..9e42b93c 100644 --- a/tau/src/css/profile/wearable/changeable/common/core.less +++ b/tau/src/css/profile/wearable/changeable/common/core.less @@ -1,4 +1,3 @@ - /* * Common definition for theme */ @@ -8,12 +7,11 @@ => normal: 17px => large: 20px -This is only applied to gear2. -so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S. +so, we set @font_size_default as 17px. This value only used for @rem_base, not for html font-size html font-size is set by WRT base font-size ***************************************************************/ -@font_size_default: 16px; // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS! +@font_size_default: 17px; // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS! @rem_base: (1rem/@font_size_default); @em_base: 1em/@font_size_default; // WARNING: Don't use em unit! This value is to be removed. @@ -33,13 +31,6 @@ html font-size is set by WRT base font-size /*************************************************************************** Common Style ***************************************************************************/ - -.tau-info-theme { - position: absolute; - top: -999px; - left: -999px; -} - .screen-hidden { visibility: hidden; position: absolute; top: -10000em; left: -10000em;} /*************************************************************************** @@ -51,7 +42,9 @@ button, input { } * { - .border-box(); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } a { diff --git a/tau/src/css/profile/wearable/changeable/common/drawer.less b/tau/src/css/profile/wearable/changeable/common/drawer.less deleted file mode 100644 index dc4d0ef4..00000000 --- a/tau/src/css/profile/wearable/changeable/common/drawer.less +++ /dev/null @@ -1,23 +0,0 @@ -.ui-drawer { - width: 100%; - height: 100%; - position : fixed; - top: 0; - background-color : @color_bg; - z-index : 1201; - box-sizing : border-box; - - &.ui-drawer-close { - overflow: hidden; - } - &.ui-drawer-open { - overflow: auto; - } -} - -.ui-drawer-overlay { - top: 0; - position : fixed; - background-color: rgba(0, 0, 0, 0.8); - z-index : 1200; -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/common/indexscrollbar.less b/tau/src/css/profile/wearable/changeable/common/indexscrollbar.less index 89ad2823..c2633dea 100644 --- a/tau/src/css/profile/wearable/changeable/common/indexscrollbar.less +++ b/tau/src/css/profile/wearable/changeable/common/indexscrollbar.less @@ -9,7 +9,7 @@ background-color: @color_indexscrollbar_bg; z-index: 10; overflow: visible; // To show 2nd indexbar - .user-select(none); + -webkit-user-select: none; // Needed for vmouse events cursor: pointer; ul { diff --git a/tau/src/css/profile/wearable/changeable/common/layout.less b/tau/src/css/profile/wearable/changeable/common/layout.less index 7b8f2d19..ebfe9b20 100644 --- a/tau/src/css/profile/wearable/changeable/common/layout.less +++ b/tau/src/css/profile/wearable/changeable/common/layout.less @@ -1,12 +1,8 @@ /*************************************************************************** Common Style ***************************************************************************/ -.w-layout-no-tap-color() { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - html { - .w-layout-no-tap-color(); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { height: 100%; @@ -20,34 +16,34 @@ body { width: 100%; height: 100%; overflow: hidden; + display:none; position: absolute; top:0; left:0; - display: none; background: @color_bg; &.ui-page-active { - display: flex; - display: -webkit-flex; - flex-direction: column; - -webkit-flex-direction: column; + display: block; } &.ui-page-build { - display: flex; - display: -webkit-flex; - flex-direction: column; - -webkit-flex-direction: column; + display: block; visibility: hidden; } - .w-layout-no-tap-color(); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* overrides webkit link color */ +} + +.scrolling-mode-touch { + -webkit-overflow-scrolling: touch; + -moz-overflow-scrolling: touch; + -o-overflow-scrolling: touch; + -ms-overflow-scrolling: touch; + overflow-scrolling: touch; } .ui-content { - width: 100%; - height: auto; + width:auto; + height: 100%; overflow: auto; - .touch-scrolling(); - flex: 1; - -webkit-flex: 1; + .scrolling-mode-touch; } .ui-header { @@ -60,13 +56,10 @@ body { .ui-title { color: @color_actionbar_title_text; font-size: @fixed_header_title_font_size; - font-weight: bold; white-space: nowrap; - overflow: hidden; - margin: 0; + margin: 0px; padding-left: @fixed_header_title_padding; padding-right: @fixed_header_title_padding; - -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); &.ui-icon { padding-left: @fixed_header_title_icon_padding; @@ -76,10 +69,16 @@ body { } } + .ui-title-text-fadeout { + -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); + } + &.ui-has-more { .ui-title { padding-right: @fixed_header_more_title_padding; - -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 75%); + } + .ui-title-text-fadeout { + -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); } } @@ -96,8 +95,8 @@ body { .ui-more { display: block; position: absolute; - top: 0; - right: 0; + top: 0px; + right: 0px; width: @fixed_header_more_width; height: 100%; overflow: hidden; @@ -107,57 +106,57 @@ body { cursor: pointer; &:active { - background-color: @color_actionbar_more_pressed_bg; + background-color: @color_actionbar_more_pressed_bg !important; } &.ui-icon-detail { background-color: @color_actionbar_normal_bg; - .mask-image(@icon_actionbar_more_detail_normal); - .mask-size(52 * @unit_base 60 * @unit_base); - .mask-position(center); - .mask-repeat(no-repeat); + -webkit-mask-image: url(@icon_actionbar_more_detail_normal); + -webkit-mask-size: 52 * @unit_base 60 * @unit_base; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; &[disabled="disabled"] { .ui-more-disable; background-color: @color_actionbar_normal_disable; - .mask-image(@icon_actionbar_more_detail_disable); - .mask-size(52 * @unit_base 60 * @unit_base); - .mask-position(center); - .mask-repeat(no-repeat); + -webkit-mask-image: url(@icon_actionbar_more_detail_disable); + -webkit-mask-size: 52 * @unit_base 60 * @unit_base; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; } } &.ui-icon-overflow { background-color: @color_actionbar_normal_bg; - .mask-image(@icon_actionbar_more_overflow); - .mask-size(52 * @unit_base 60 * @unit_base); - .mask-position(center); - .mask-repeat(no-repeat); + -webkit-mask-image: url(@icon_actionbar_more_overflow); + -webkit-mask-size: 52 * @unit_base 60 * @unit_base; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; &[disabled="disabled"] { .ui-more-disable; background-color: @color_actionbar_normal_disable; - .mask-image(@icon_actionbar_more_overflow); - .mask-size(52 * @unit_base 60 * @unit_base); - .mask-position(center); - .mask-repeat(no-repeat); + -webkit-mask-image: url(@icon_actionbar_more_overflow); + -webkit-mask-size: 52 * @unit_base 60 * @unit_base; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; } } &.ui-icon-selectall { background-color: @color_actionbar_normal_bg; - .mask-image(@icon_actionbar_more_selectall_normal); - .mask-size(52 * @unit_base 60 * @unit_base); - .mask-position(center); - .mask-repeat(no-repeat); + -webkit-mask-image: url(@icon_actionbar_more_selectall_normal); + -webkit-mask-size: 52 * @unit_base 60 * @unit_base; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; &[disabled="disabled"] { .ui-more-disable; background-color: @color_actionbar_normal_disable; - .mask-image(@icon_actionbar_more_selectall_disable); - .mask-size(52 * @unit_base 60 * @unit_base); - .mask-position(center); - .mask-repeat(no-repeat); + -webkit-mask-image: url(@icon_actionbar_more_selectall_disable); + -webkit-mask-size: 52 * @unit_base 60 * @unit_base; + -webkit-mask-position: center; + -webkit-mask-repeat: no-repeat; } } } @@ -167,58 +166,9 @@ body { .ui-footer { width: 100%; height: @fixed_footer_height; - position: relative; - bottom: 0; - left: 0; - - .ui-btn.ui-btn-icon-only { - position: relative; - text-indent: -9999 * @unit_base; - &::before { - content: ""; - position: absolute; - -webkit-mask-size: 50 * @unit_base 50 * @unit_base; - -webkit-mask-repeat: no-repeat; - width: 50 * @unit_base; - height: 50 * @unit_base; - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - } - } -} - - -/*************************************************************************** - Page Scroll -***************************************************************************/ -.ui-page.ui-scroll-on { - .ui-scroller { - width: 100%; - height: auto; - overflow: hidden; - overflow-y: auto; - .touch-scrolling(); - flex: 1; - -webkit-flex: 1; - } - .ui-content { - height: auto !important; - flex: none; - -webkit-flex: none; - } - - .ui-footer { - position: relative; - } -} - -.ui-footer.ui-fixed { - position: fixed !important; + position: absolute; bottom: 0; left: 0; - width: 100%; - -webkit-transform : translate3d(0, 0, 0); } /*************************************************************************** diff --git a/tau/src/css/profile/wearable/changeable/common/listview.extra.less b/tau/src/css/profile/wearable/changeable/common/listview.extra.less deleted file mode 100644 index 600b31ab..00000000 --- a/tau/src/css/profile/wearable/changeable/common/listview.extra.less +++ /dev/null @@ -1,69 +0,0 @@ - -.ui-listview .ui-li-has-action-icon { - .ui-action-text { - width: calc(~"100% - "77*@unit_base); - height: 100%; - &::after { - content: ""; - position: absolute; - height: 56 * @unit_base; - width: 2 * @unit_base; - background-color: @color_text; - right: 68 * @unit_base; - top: 20%; - } - } - - .ui-action-divider { - display: none; - } - - .ui-action-delete, .ui-action-setting, .ui-action-add { - position: absolute; - height: 100%; - width: 72 * @unit_base; - right:0; - top: 0; - -webkit-mask-size: 56 * @unit_base 56 * @unit_base; - -webkit-mask-repeat: no-repeat; - -webkit-mask-position: center center; - padding: 0; - margin: 0; - } - - .ui-action-delete { - -webkit-mask-image: url(./images/listview/tw_list_delete_holo_dark.png); - background-color: @color_list_actionicon_image_normal; - } - .ui-action-setting { - -webkit-mask-image: url(./images/listview/tw_list_setting_holo_dark.png); - background-color: @color_list_actionicon_image_normal; - } - .ui-action-add { - -webkit-mask-image: url(./images/listview/tw_list_add_holo_dark.png); - background-color: @color_list_actionicon_image_normal; - } - - &.ui-li-active { - background-color: transparent; - & .ui-action-text:active { - background-color: @color_list_press_bg; - color: @color_listview_text_press; - } - } - - .ui-action-delete:active, .ui-action-setting:active, .ui-action-add:active { - background-color: @color_list_press_bg; - color: @color_listview_text_press; - } -} - -.ui-listview .li-divider { - height: 30 * @unit_base; - min-height: 30 * @unit_base; - line-height: 30 * @unit_base; - padding: 0 8 * @unit_base 0 16 * @unit_base; - background-color: @color_list_divider_bg; - color: @color_list_divider_text; - font-size: 24 * @unit_base; -} diff --git a/tau/src/css/profile/wearable/changeable/common/listview.less b/tau/src/css/profile/wearable/changeable/common/listview.less index 03ab010d..f950bef1 100644 --- a/tau/src/css/profile/wearable/changeable/common/listview.less +++ b/tau/src/css/profile/wearable/changeable/common/listview.less @@ -1,3 +1,4 @@ +@font_size_list_item: 40 * @unit_base; /************************ Listview *************************/ @@ -5,8 +6,8 @@ Listview font-size: @font_size_list_item; line-height: 48 * @unit_base; width: 100%; - min-height: @list_item_min_height; - padding: @list_item_padding; + min-height: 100 * @unit_base; + padding: 21*@unit_base 8*@unit_base 20*@unit_base 16*@unit_base; border-bottom: 1px solid @color_listview_border; overflow: hidden; text-overflow: ellipsis; @@ -18,7 +19,7 @@ Listview white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - .user-select(none); + -webkit-user-select: none; color: @color_listview_text; } } @@ -26,8 +27,8 @@ Listview display: block; width: 100%; height: 100%; - margin: @list_anchor_margin; // Fill-up to the parent li - padding: @list_item_anchor_padding; // Compensate lost padding of li + margin: -21*@unit_base -16*@unit_base; // Fill-up to the parent li + padding: 26*@unit_base 16*@unit_base; // Compensate lost padding of li .LESSbox-boxsizing( content-box ); // Change size calculation criteria } @@ -36,7 +37,7 @@ Listview color: @color_listview_text_press; } -.ui-listview .ui-listview-divider { +.ui-listview .li-divider { height: 30 * @unit_base; min-height: 30 * @unit_base; line-height: 30 * @unit_base; @@ -46,7 +47,54 @@ Listview font-size: 24 * @unit_base; } -.ui-listview .ui-li-sub-text { - color: @color_listview_sub_text; - font-size: 28 * @unit_base; +.ui-listview .ui-li-has-action-icon { + .ui-action-text{ + width: -webkit-calc(~"100% - "74*@unit_base); + height: 100%; + position: absolute; + left: 0; + padding-left: 16 * @unit_base; + padding-top: 20 * @unit_base; + padding-bottom: 20 * @unit_base; + margin-top: -20 * @unit_base; + } + + .ui-action-divider { + position: absolute; + height: 60 * @unit_base; + width: 2 * @unit_base; + background-color: @color_text; + right: 72 * @unit_base; + top: 20%; + } + + .ui-action-delete, .ui-action-setting, .ui-action-add { + position: absolute; + height: 100%; + width: 72 * @unit_base; + right:0; + top: 0; + -webkit-mask-size: 56 * @unit_base 56 * @unit_base; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + padding-top: 45 * @unit_base; + padding-bottom: 45 * @unit_base; + } + + .ui-action-delete { + -webkit-mask-image: url(./images/listview/tw_list_delete_holo_dark.png); + background-color: @color_list_actionicon_image_normal; + } + .ui-action-setting { + -webkit-mask-image: url(./images/listview/tw_list_setting_holo_dark.png); + background-color: @color_list_actionicon_image_normal; + } + .ui-action-add { + -webkit-mask-image: url(./images/listview/tw_list_add_holo_dark.png); + background-color: @color_list_actionicon_image_normal; + } + + .ui-action-text:active, .ui-action-delete:active, .ui-action-setting:active, .ui-action-add:active { + background-color: @color_list_actionicon_divider; + } } diff --git a/tau/src/css/profile/wearable/changeable/common/marquee.less b/tau/src/css/profile/wearable/changeable/common/marquee.less deleted file mode 100644 index 0b19202e..00000000 --- a/tau/src/css/profile/wearable/changeable/common/marquee.less +++ /dev/null @@ -1,32 +0,0 @@ -.ui-marquee { - position: relative; - white-space: nowrap; - overflow: hidden; - -webkit-user-select: none; -} - -.ui-marquee.ui-marquee-gradient { - text-overflow: clip; - -webkit-mask-image: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 85%, transparent 100%); -} - -.ui-marquee.ui-marquee-ellipsis { - .ui-marquee-content { - display: block; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.ui-marquee-content { - overflow: visible; - display: inline-block; -} - -.ui-marquee-anim-running { - -webkit-animation-play-state: running; -} - -.ui-marquee-anim-stopped { - -webkit-animation-play-state: paused; -} diff --git a/tau/src/css/profile/wearable/changeable/common/pageindicator.less b/tau/src/css/profile/wearable/changeable/common/pageindicator.less deleted file mode 100644 index e523695c..00000000 --- a/tau/src/css/profile/wearable/changeable/common/pageindicator.less +++ /dev/null @@ -1,64 +0,0 @@ -/**************************************************** - Page Indicator -*****************************************************/ -.ui-page-indicator { - position: absolute; - left: 50%; - .transform(translate3d(-50%, 0, 0)); - white-space: nowrap; - max-width: 100%; - overflow: hidden; - - .ui-page-indicator-item { - position: relative; - display: inline-block; - width: 13 * @unit_base; - height: 13 * @unit_base; - -webkit-mask-image: -webkit-radial-gradient(black 4 * @unit_base, transparent 6 * @unit_base); - background-color: @color_page_indicator_normal; - margin-right: 9 * @unit_base; - .transition-duration(250ms); - &:last-child { - margin-right: 0; - } - &.ui-page-indicator-active { - background-color: @color_page_indicator_selected; - } - } - - &.ui-page-indicator-circular { - top: 0; - left: 0; - width: 100vw; - height: 100vw; - .transform(none); - pointer-events: none; - .ui-page-indicator-item { - .transition(none); - position: absolute; - top: 50%; - left: 50%; - margin-top : -5 * @unit_base; - margin-left : -5 * @unit_base; - -webkit-mask-image: none; - background-color: transparent; - margin-right: 0; - &::before { - content: ""; - position: absolute; - width: 100%; - height: 100%; - -webkit-mask-image: -webkit-radial-gradient(black 2 * @unit_base, transparent 4 * @unit_base); - background-color: @color_page_indicator_normal; - .transition(250ms transform ease-out); - } - &.ui-page-indicator-active { - background-color: transparent; - &::before { - background-color: @color_page_indicator_selected; - .transform(scale3d(1.5, 1.5, 1.5)); - } - } - } - } -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/common/popup.less b/tau/src/css/profile/wearable/changeable/common/popup.less index a6a9b531..ed05bc13 100644 --- a/tau/src/css/profile/wearable/changeable/common/popup.less +++ b/tau/src/css/profile/wearable/changeable/common/popup.less @@ -5,18 +5,14 @@ Normal Popup ***********************/ .ui-popup { - position: fixed; + position: absolute; left: 0px; width:100%; margin: 0; background-color: @color_popup_bg; border: 3px solid @color_popup_border; display: none; - z-index: @z_base_popup; - - &:not(.ui-ctxpopup) { - bottom: 0; - } + z-index: 1000; .ui-popup-header { width: 100%; @@ -43,7 +39,7 @@ Normal Popup background-color: @color_popup_bg; padding: 10*@px_base 16*@px_base 9*@px_base 16*@px_base; overflow:auto; - .touch-scrolling(); + .scrolling-mode-touch; .ui-listview, .ui-inline-listview { @@ -62,22 +58,6 @@ Normal Popup padding-top: @fixed_popup_footer_btn_padding_top; padding-bottom: @fixed_popup_footer_btn_padding_bottom; font-size: @fixed_popup_footer_btn_font_size; - - &.ui-btn-icon-only { - position: relative; - text-indent: -9999 * @unit_base; - &::before { - content: ""; - position: absolute; - -webkit-mask-size: 50 * @unit_base 50 * @unit_base; - -webkit-mask-repeat: no-repeat; - width: 50 * @unit_base; - height: 50 * @unit_base; - top: 50%; - left: 50%; - -webkit-transform: translate3d(-50%, -50%, 0); - } - } } } @@ -96,49 +76,12 @@ Normal Popup } /*********************** -Popup Container Scroll -***********************/ -.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) { - max-height:100%; - - .ui-popup-wrapper { - width:100%; - max-height:100%; - overflow: auto !important; - .touch-scrolling(); - } - - .ui-popup-content { - height: auto !important; - } - - .ui-popup-header.ui-fixed { - position: absolute !important; - top: 0; - left: 0; - width: 100%; - z-index: @z_base_popup + @z_base_header_footer; - } - - .ui-popup-footer.ui-fixed { - position: absolute !important; - bottom: 0; - left: 0; - width: 100%; - z-index: @z_base_popup + @z_base_header_footer; - -webkit-transform : translate3d(0, 0, 0); - } -} - -/*********************** Option Popup ***********************/ .ui-popup.ui-ctxpopup { background-color: transparent; width: 100%; border: 0 none; - border-radius: 0; - overflow: visible; div&.ui-popup-content-size { width: auto; @@ -195,8 +138,10 @@ Option Popup height: 56*@unit_base; margin-top: -28*@unit_base; background-color: @color_option_popup_list_icon_bg; - .mask-size(56 * @unit_base 56 * @unit_base); - .mask-repeat(no-repeat) + -webkit-mask-size: 56*@unit_base 56*@unit_base; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + mask-size: 56*@unit_base 56*@unit_base; } } .ui-listview a.ui-list-icon:active::before { @@ -247,8 +192,10 @@ Option Popup margin-top: -21.5*@unit_base; margin-left: -21.5*@unit_base; background-color: @color_option_popup_inline_list_icon_bg; - .mask-size(43 * @unit_base 43 * @unit_base); - .mask-repeat(no-repeat); + -webkit-mask-size: 43*@unit_base 43*@unit_base; + -webkit-mask-repeat: no-repeat; + mask-size: 43*@unit_base 43*@unit_base; + mask-repeat: no-repeat; } } @@ -265,7 +212,8 @@ Option Popup overflow: hidden; position: absolute; display: none; - .animation-duration(0); + animation-duration: 0; + -webkit-animation-duration: 0; span { width: 20*@px_base; @@ -275,8 +223,10 @@ Option Popup position:absolute; top:6*@px_base; left:8*@px_base; - .transform(rotate(55deg) skew(24deg)); - .animation-duration(0); + -webkit-transform: rotate(55deg) skew(24deg); + transform: rotate(55deg) skew(24deg); + animation-duration: 0; + -webkit-animation-duration: 0; } } @@ -298,8 +248,9 @@ Option Popup &.ui-popup-arrow-b .ui-arrow { display: block; - bottom: -14*@px_base; - .rotate(180deg); + bottom:-14*@px_base; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } &.ui-popup-arrow-t .ui-arrow { display: block; @@ -308,12 +259,14 @@ Option Popup &.ui-popup-arrow-r .ui-arrow { display: block; right:-25*@px_base; - .rotate(90deg); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } &.ui-popup-arrow-l .ui-arrow { display: block; left:-25*@px_base; - .rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); } } @@ -326,49 +279,23 @@ Popup Toast margin-bottom: 0; font-size: @font_size_popup_toast; border: 3px solid @color_popup_border; - border-radius: 0; - border-left: 0; - border-right: 0; position: absolute; bottom: 0; - top: auto !important; + top: auto; height: auto; .ui-popup-content { min-height: initial; - padding: 11*@unit_base 42*@unit_base 12*@unit_base 42*@unit_base; + padding: 22*@unit_base 13*@unit_base 23*@unit_base 13*@unit_base; background-color: @color_popup_bg; } } -.ui-popup.ui-popup-toast.ui-popup-toast-graphic { - .ui-popup-toast-icon { - width: 56 * @unit_base; - height: 56 * @unit_base; - position: relative; - left: 50%; - transform: translateX(-50%); - text-indent: -10000px; - overflow: hidden; - - &::after { - content: ""; - width: 100%; - height: 100%; - position: absolute; - left: 0; - .mask-size(100% 100%); - .mask-repeat(no-repeat); - .mask-position(50% 50%); - } - } -} - /**************************************** Popup Overlay ****************************************/ .ui-popup-overlay { - position: fixed; + position: absolute; display:none; top: 0; width: 100%; diff --git a/tau/src/css/profile/wearable/changeable/common/popup.transition.less b/tau/src/css/profile/wearable/changeable/common/popup.transition.less index 48e57421..52ce4fe7 100644 --- a/tau/src/css/profile/wearable/changeable/common/popup.transition.less +++ b/tau/src/css/profile/wearable/changeable/common/popup.transition.less @@ -3,117 +3,56 @@ Popup Transition ****************************************/ .ui-popup { &.slideup.in { - .animation-name(popupslideinfrombottom); - .animation-duration(250ms); - .transition-timing-function(ease-in-out); + -webkit-animation-name: popupslideinfrombottom; + -webkit-animation-duration: 250ms; + -webkit-transition-timing-function: ease-in-out; + animation-name: popupslideinfrombottom; + animation-duration: 250ms; + transition-timing-function: ease-in-out; } &.slideup.out { - .animation-name(popupslideouttobottom); - .animation-duration(250ms); - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; - .transition-timing-function(ease-in-out); + -webkit-animation-name: popupslideouttobottom; + -webkit-animation-duration: 250ms; + -webkit-transition-timing-function: ease-in-out; + animation-name: popupslideouttobottom; + animation-duration: 250ms; + transition-timing-function: ease-in-out; } } -.w-pupup-popupslideinfrombottom() { - from { .transform(translateY(100%)); } - to { .transform(translateY(0%)); } -} - -.w-popup-slideouttobottom() { - from { .transform(translateY(0%)); } - to { .transform(translateY(100%)); } -} - @-webkit-keyframes popupslideinfrombottom { - .w-pupup-popupslideinfrombottom(); -} - -@-moz-keyframes popupslideinfrombottom { - .w-pupup-popupslideinfrombottom(); -} - -@-ms-keyframes popupslideinfrombottom { - .w-pupup-popupslideinfrombottom(); -} - -@-o-keyframes popupslideinfrombottom { - .w-pupup-popupslideinfrombottom(); + from { transform: translateY(100%); } + to { transform: translateY(0%); } } - @keyframes popupslideinfrombottom { - .w-pupup-popupslideinfrombottom(); + from { transform: translateY(100%); } + to { transform: translateY(0%); } } @-webkit-keyframes popupslideouttobottom { - .w-popup-slideouttobottom(); -} - -@-moz-keyframes popupslideouttobottom { - .w-popup-slideouttobottom(); -} - -@-ms-keyframes popupslideouttobottom { - .w-popup-slideouttobottom(); -} - -@-o-keyframes popupslideouttobottom { - .w-popup-slideouttobottom(); + from { transform: translateY(0%); } + to { transform: translateY(100%); } } - @keyframes popupslideouttobottom { - .w-popup-slideouttobottom(); + from { transform: translateY(0%); } + to { transform: translateY(100%); } } -.ui-popup { - &.pop.in { - -webkit-animation-name: popuppopin; - -webkit-animation-duration: 350ms; - -webkit-transition-timing-function: ease-in-out; - animation-name: popuppopin; - animation-duration: 350ms; - transition-timing-function: ease-in-out; - } - &.pop.out { - -webkit-animation-name: popuppopout; - -webkit-animation-duration: 350ms; - -webkit-transition-timing-function: ease-in-out; - animation-name: popuppopout; - animation-duration: 350ms; - transition-timing-function: ease-in-out; - } -} - -@-webkit-keyframes popuppopin { - from { - transform: scale3d(1.35, 1.35, 1); - opacity: 0; - } - to { - transform: scale3d(1, 1, 1); - opacity: 1; - } -} -@-webkit-keyframes popuppopout { - from { - transform: scale3d(1, 1, 1); - opacity: 1; - } - to { - transform: scale3d(1.35, 1.35, 1); - opacity: 0; - } -} /**************************************** Popup Overlay Transition ****************************************/ .ui-popup-overlay { - &.slideup.in, &.pop.in { - .animation(fadein 250ms); + &.slideup.in { + -webkit-animation-name: fadein; + -webkit-animation-duration: 250ms; + animation-name: fadein; + animation-duration: 250ms; } - &.slideup.out, &.pop.out { - .animation(fadeout 250ms); + &.slideup.out { + -webkit-animation-name: fadeout; + -webkit-animation-duration: 250ms; + animation-name: fadeout; + animation-duration: 250ms; } } @@ -124,119 +63,73 @@ Option Popup Transition .ui-popup.ui-popup-arrow-l, .ui-popup.ui-popup-arrow-r { &.slideup.in { - .animation(ctxpopupslideinfrombottom 250ms ease-in-out);; + -webkit-animation-name: ctxpopupslideinfrombottom; + -webkit-animation-duration: 250ms; + -webkit-transition-timing-function: ease-in-out; + animation-name: ctxpopupslideinfrombottom; + animation-duration: 250ms; + transition-timing-function: ease-in-out; } &.slideup.out { - .animation(ctxpopupslideouttobottom 250ms ease-in-out);; + -webkit-animation-name: ctxpopupslideouttobottom; + -webkit-animation-duration: 250ms; + -webkit-transition-timing-function: ease-in-out; + animation-name: ctxpopupslideouttobottom; + animation-duration: 250ms; + transition-timing-function: ease-in-out; } } .ui-popup.ui-popup-arrow-b { &.slideup.in { - .animation(ctxpopupslideinfromtop 250ms ease-in-out); + -webkit-animation-name: ctxpopupslideinfromtop; + -webkit-animation-duration: 250ms; + -webkit-transition-timing-function: ease-in-out; + animation-name: ctxpopupslideinfromtop; + animation-duration: 250ms; + transition-timing-function: ease-in-out; } &.slideup.out { - .animation(ctxpopupslideouttotop 250ms ease-in-out); + -webkit-animation-name: ctxpopupslideouttotop; + -webkit-animation-duration: 250ms; + -webkit-transition-timing-function: ease-in-out; + animation-name: ctxpopupslideouttotop; + animation-duration: 250ms; + transition-timing-function: ease-in-out; } } -.w-popup-ctxpopupslideinfrombottom() { +@-webkit-keyframes ctxpopupslideinfrombottom { from { transform: translateY(20%); opacity: 0.0;} to { transform: translateY(0%); opacity: 1.0; } } - -.w-popup-ctxpopupslideouttobottom() { - from { transform: translateY(0%); opacity: 1.0;} - to { transform: translateY(20%); opacity: 0.0;} -} - -.w-popup-ctxpopupslideinfromtop() { - from { transform: translateY(-20%); opacity: 0.0;} - to { transform: translateY(0%); opacity: 1.0; } -} - -.w-popup-ctxpopupslideouttotop() { - from { transform: translateY(0%); opacity: 1.0;} - to { transform: translateY(-20%); opacity: 0.0;} -} - - -@-webkit-keyframes ctxpopupslideinfrombottom { - .w-popup-ctxpopupslideinfrombottom(); -} - -@-moz-keyframes ctxpopupslideinfrombottom { - .w-popup-ctxpopupslideinfrombottom(); -} - -@-ms-keyframes ctxpopupslideinfrombottom { - .w-popup-ctxpopupslideinfrombottom(); -} - -@-o-keyframes ctxpopupslideinfrombottom { - .w-popup-ctxpopupslideinfrombottom(); -} - @keyframes ctxpopupslideinfrombottom { - .w-popup-ctxpopupslideinfrombottom(); + from { transform: translateY(20%); opacity: 0.0;} + to { transform: translateY(0%); opacity: 1.0;} } @-webkit-keyframes ctxpopupslideouttobottom { - .w-popup-ctxpopupslideouttobottom(); -} - -@-moz-keyframes ctxpopupslideouttobottom { - .w-popup-ctxpopupslideouttobottom(); -} - -@-ms-keyframes ctxpopupslideouttobottom { - .w-popup-ctxpopupslideouttobottom(); -} - -@-o-keyframes ctxpopupslideouttobottom { - .w-popup-ctxpopupslideouttobottom(); + from { transform: translateY(0%); opacity: 1.0;} + to { transform: translateY(20%); opacity: 0.0;} } - @keyframes ctxpopupslideouttobottom { - .w-popup-ctxpopupslideouttobottom(); + from { transform: translateY(0%); opacity: 1.0;} + to { transform: translateY(20%); opacity: 0.0;} } @-webkit-keyframes ctxpopupslideinfromtop { - .w-popup-ctxpopupslideinfromtop(); -} - -@-ms-keyframes ctxpopupslideinfromtop { - .w-popup-ctxpopupslideinfromtop(); -} - -@-ms-keyframes ctxpopupslideinfromtop { - .w-popup-ctxpopupslideinfromtop(); -} - -@-o-keyframes ctxpopupslideinfromtop { - .w-popup-ctxpopupslideinfromtop(); + from { transform: translateY(-20%); opacity: 0.0;} + to { transform: translateY(0%); opacity: 1.0; } } - @keyframes ctxpopupslideinfromtop { - .w-popup-ctxpopupslideinfromtop(); + from { transform: translateY(-20%); opacity: 0.0;} + to { transform: translateY(0%); opacity: 1.0;} } @-webkit-keyframes ctxpopupslideouttotop { - .w-popup-ctxpopupslideouttotop(); -} - -@-moz-keyframes ctxpopupslideouttotop { - .w-popup-ctxpopupslideouttotop(); -} - -@-ms-keyframes ctxpopupslideouttotop { - .w-popup-ctxpopupslideouttotop(); -} - -@-o-keyframes ctxpopupslideouttotop { - .w-popup-ctxpopupslideouttotop(); + from { transform: translateY(0%); opacity: 1.0;} + to { transform: translateY(-20%); opacity: 0.0;} } - @keyframes ctxpopupslideouttotop { - .w-popup-ctxpopupslideouttotop(); -} - + from { transform: translateY(0%); opacity: 1.0;} + to { transform: translateY(-20%); opacity: 0.0;} +}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/common/processing.less b/tau/src/css/profile/wearable/changeable/common/processing.less index e730ad64..017eb5f4 100644 --- a/tau/src/css/profile/wearable/changeable/common/processing.less +++ b/tau/src/css/profile/wearable/changeable/common/processing.less @@ -1,387 +1,16 @@ -/*********************** -Processing -***********************/ -@-webkit-keyframes fullprocess { - 0% { - -webkit-mask-position: 0 0; - } - 1.5% { - -webkit-mask-position: -100vw 0; - } - 3% { - -webkit-mask-position: -200vw 0; - } - 4.5% { - -webkit-mask-position: -300vw 0; - } - 6% { - -webkit-mask-position: -400vw 0; - } - 7.5% { - -webkit-mask-position: -500vw 0; - } - 9% { - -webkit-mask-position: -600vw 0; - } - 12% { - -webkit-mask-position: 0 -100vw; - } - 13.5% { - -webkit-mask-position: -100vw -100vw; - } - 15% { - -webkit-mask-position: -200vw -100vw; - } - 16.5% { - -webkit-mask-position: -300vw -100vw; - } - 18% { - -webkit-mask-position: -400vw -100vw; - } - 19.5% { - -webkit-mask-position: -500vw -100vw; - } - 21% { - -webkit-mask-position: -600vw -100vw; - } - 24% { - -webkit-mask-position: 0 -200vw; - } - 25.5% { - -webkit-mask-position: -100vw -200vw; - } - 27% { - -webkit-mask-position: -200vw -200vw; - } - 28.5% { - -webkit-mask-position: -300vw -200vw; - } - 30% { - -webkit-mask-position: -400vw -200vw; - } - 31.5% { - -webkit-mask-position: -500vw -200vw; - } - 33% { - -webkit-mask-position: -600vw -200vw; - } - 36% { - -webkit-mask-position: 0 -300vw; - } - 37.5% { - -webkit-mask-position: -100vw -300vw; - } - 39% { - -webkit-mask-position: -200vw -300vw; - } - 40.5% { - -webkit-mask-position: -300vw -300vw; - } - 42% { - -webkit-mask-position: -400vw -300vw; - } - 43.5% { - -webkit-mask-position: -500vw -300vw; - } - 45% { - -webkit-mask-position: -600vw -300vw; - } - 48% { - -webkit-mask-position: 0 -400vw; - } - 49.5% { - -webkit-mask-position: -100vw -400vw; - } - 51% { - -webkit-mask-position: -200vw -400vw; - } - 52.5% { - -webkit-mask-position: -300vw -400vw; - } - 54% { - -webkit-mask-position: -400vw -400vw; - } - 55.5% { - -webkit-mask-position: -500vw -400vw; - } - 57% { - -webkit-mask-position: -600vw -400vw; - } - 60% { - -webkit-mask-position: 0 -500vw; - } - 61.5% { - -webkit-mask-position: -100vw -500vw; - } - 63% { - -webkit-mask-position: -200vw -500vw; - } - 64.5% { - -webkit-mask-position: -300vw -500vw; - } - 66% { - -webkit-mask-position: -400vw -500vw; - } - 67.5% { - -webkit-mask-position: -500vw -500vw; - } - 69% { - -webkit-mask-position: -600vw -500vw; - } - 72% { - -webkit-mask-position: 0 -600vw; - } - 73.5% { - -webkit-mask-position: -100vw -600vw; - } - 75% { - -webkit-mask-position: -200vw -600vw; - } - 76.5% { - -webkit-mask-position: -300vw -600vw; - } - 78% { - -webkit-mask-position: -400vw -600vw; - } - 79.5% { - -webkit-mask-position: -500vw -600vw; - } - 81% { - -webkit-mask-position: -600vw -600vw; - } - 84% { - -webkit-mask-position: 0 -700vw; - } - 85.5% { - -webkit-mask-position: -100vw -700vw; - } - 87% { - -webkit-mask-position: -200vw -700vw; - } - 88.5% { - -webkit-mask-position: -300vw -700vw; - } - 90% { // 60 - -webkit-mask-position: -400vw -700vw; - } - 91.5% { - -webkit-mask-position: -500vw -700vw; - } - 93% { - -webkit-mask-position: -600vw -700vw; - } - 94.5% { - -webkit-mask-position: 0 -900vw; - } - 96% { - -webkit-mask-position: -100vw -900vw; - } - 97.5% { - -webkit-mask-position: -200vw -900vw; - } - 99% { - -webkit-mask-position: -300vw -900vw; - } - 100% { - -webkit-mask-position: -400vw -900vw; - } +@-webkit-keyframes rotating { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } } - -@-webkit-keyframes smallprocess { - 0% { - -webkit-mask-position: 0 0; - } - 1.5% { - -webkit-mask-position: 0 -86px; - } - 3% { - -webkit-mask-position: 0 -172px; - } - 4.5% { - -webkit-mask-position: 0 -258px; - } - 6% { - -webkit-mask-position: 0 -344px; - } - 7.5% { - -webkit-mask-position: 0 -430px; - } - 9% { - -webkit-mask-position: 0 -516px; - } - 10.5% { - -webkit-mask-position: 0 -602px; - } - 12% { - -webkit-mask-position: 0 -688px; - } - 13.5% { - -webkit-mask-position: 0 -774px; - } - 15% { - -webkit-mask-position: 0 -860px; - } - 16.5% { - -webkit-mask-position: 0 -946px; - } - 18% { - -webkit-mask-position: 0 -1032px; - } - 19.5% { - -webkit-mask-position: 0 -1118px; - } - 21% { - -webkit-mask-position: 0 -1204px; - } - 22.5% { - -webkit-mask-position: 0 -1290px; - } - 24% { - -webkit-mask-position: 0 -1376px; - } - 25.5% { - -webkit-mask-position: 0 -1462px; - } - 27% { - -webkit-mask-position: 0 -1548px; - } - 28.5% { - -webkit-mask-position: 0 -1634px; - } - 30% { - -webkit-mask-position: 0 -1720px; - } - 31.5% { - -webkit-mask-position: 0 -1806px; - } - 33% { - -webkit-mask-position: 0 -1892px; - } - 34.5% { - -webkit-mask-position: 0 -1978px; - } - 36% { - -webkit-mask-position: 0 -2064px; - } - 37.5% { - -webkit-mask-position: 0 -2150px; - } - 39% { - -webkit-mask-position: 0 -2236px; - } - 40.5% { - -webkit-mask-position: 0 -2322px; - } - 42% { - -webkit-mask-position: 0 -2408px; - } - 43.5% { - -webkit-mask-position: 0 -2494px; - } - 45% { - -webkit-mask-position: 0 -2580px; - } - 46.5% { - -webkit-mask-position: 0 -2666px; - } - 48% { - -webkit-mask-position: 0 -2752px; - } - 49.5% { - -webkit-mask-position: 0 -2838px; - } - 51% { - -webkit-mask-position: 0 -2924px; - } - 52.5% { - -webkit-mask-position: 0 -3010px; - } - 54% { - -webkit-mask-position: 0 -3096px; - } - 55.5% { - -webkit-mask-position: 0 -3182px; - } - 57% { - -webkit-mask-position: 0 -3268px; - } - 58.5% { - -webkit-mask-position: 0 -3354px; - } - 60% { - -webkit-mask-position: 0 -3440px; - } - 61.5% { - -webkit-mask-position: 0 -3526px; - } - 63% { - -webkit-mask-position: 0 -3612px; - } - 64.5% { - -webkit-mask-position: 0 -3698px; - } - 66% { - -webkit-mask-position: 0 -3784px; - } - 67.5% { - -webkit-mask-position: 0 -3870px; - } - 69% { - -webkit-mask-position: 0 -3956px; - } - 70.5% { - -webkit-mask-position: 0 -4042px; - } - 72% { - -webkit-mask-position: 0 -4128px; - } - 73.5% { - -webkit-mask-position: 0 -4214px; - } - 75% { - -webkit-mask-position: 0 -4300px; - } - 76.5% { - -webkit-mask-position: 0 -4386px; - } - 78% { - -webkit-mask-position: 0 -4472px; - } - 79.5% { - -webkit-mask-position: 0 -4558px; - } - 81% { - -webkit-mask-position: 0 -4644px; - } - 84% { - -webkit-mask-position: 0 -4730px; - } - 88% { - -webkit-mask-position: 0 -4816px; - } - 92% { - -webkit-mask-position: 0 -4902px; - } - 96% { - -webkit-mask-position: 0 -4988px; - } - 100% { - -webkit-mask-position: 0 -5074px; - } -} - - .ui-processing { - background-color: @color_processing; - -webkit-mask-image: url("./images/Processing/processingsmall.png"); - -webkit-mask-repeat: no-repeat; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-timing-function: step-start; - -webkit-animation-name: smallprocess; + background-color: @color_processing_activity_01; + -webkit-mask-image: url("./images/Progress/tw_widget_activity_01.png"); + -webkit-mask-size: 100% 100%; + -webkit-repeat: no-repeat; + -webkit-animation: rotating 1s linear infinite; - width: 86 * @unit_base; - height: 86 * @unit_base; + width:80 * @unit_base; + height:80 * @unit_base; margin: 0 auto; margin-top: 34 * @unit_base; margin-bottom: 14 * @unit_base; @@ -391,34 +20,4 @@ Processing text-align: center; width: 168 * @unit_base; font-size: 24 * @unit_base; - color: @color_processing_text; -} - -.ui-processing.ui-processing-full-size { - background-color: transparent; - -webkit-mask-image: none; - -webkit-animation: none; - pointer-events: none; - position: fixed; - width: 100vw; - height: 100vw; - top: 50%; - left: 0; - .transform(translate3d(0, -50%, 0)); - margin: 0; -} - -.ui-processing.ui-processing-full-size::after { - content: ""; - background-color: @color_processing; - -webkit-mask-image: url("./images/Processing/processingfull.png"); - -webkit-mask-size: 700vw 900vw; - -webkit-mask-repeat: no-repeat; - -webkit-animation-duration: 1s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-timing-function: step-start; - -webkit-animation-name: fullprocess; - width: 100%; - height: 100%; - position: absolute; } diff --git a/tau/src/css/profile/wearable/changeable/common/progress.less b/tau/src/css/profile/wearable/changeable/common/progress.less index 0670b4eb..c24564ca 100644 --- a/tau/src/css/profile/wearable/changeable/common/progress.less +++ b/tau/src/css/profile/wearable/changeable/common/progress.less @@ -2,52 +2,33 @@ * Progressbar */ -.w-progress-indeterminate() { +@-webkit-keyframes indeterminate { 0% { - .mask-image('./images/Progress/tw_progressbar_indeterminate1_holo_dark.png'); - .mask-repeat(no-repeat); + -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate1_holo_dark.png); + -webkit-mask-repeat: no-repeat; background-color: @color_progressbar_indeterminate; } 25% { - .mask-image('./images/Progress/tw_progressbar_indeterminate2_holo_dark.png'); - .mask-repeat(no-repeat); + -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate2_holo_dark.png); + -webkit-mask-repeat: no-repeat; background-color: @color_progressbar_indeterminate; } 50% { - .mask-image('./images/Progress/tw_progressbar_indeterminate3_holo_dark.png'); - .mask-repeat(no-repeat); + -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate3_holo_dark.png); + -webkit-mask-repeat: no-repeat; background-color: @color_progressbar_indeterminate; } 75% { - .mask-image('./images/Progress/tw_progressbar_indeterminate4_holo_dark.png'); - .mask-repeat(no-repeat); + -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate4_holo_dark.png); + -webkit-mask-repeat: no-repeat; background-color: @color_progressbar_indeterminate; } 100% { - .mask-image('./images/Progress/tw_progressbar_indeterminate5_holo_dark.png'); - .mask-repeat(no-repeat); + -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate5_holo_dark.png); + -webkit-mask-repeat: no-repeat; background-color: @color_progressbar_indeterminate; } -} - -@-webkit-keyframes indeterminate { - .w-progress-indeterminate(); -} - -@-moz-keyframes indeterminate { - .w-progress-indeterminate(); -} -@-ms-keyframes indeterminate { - .w-progress-indeterminate(); -} - -@-o-keyframes indeterminate { - .w-progress-indeterminate(); -} - -@keyframes indeterminate { - .w-progress-indeterminate(); } progress { @@ -56,9 +37,10 @@ progress { padding-right:16 * @unit_base; margin-top: 14 * @unit_base; margin-bottom: 14 * @unit_base; + color: @color_progressbar_text; width: 100%; height: 6 * @unit_base; - .appearance(none); + -webkit-appearance: none; border: none; } @@ -81,7 +63,7 @@ progress.ui-progress-indeterminate::-webkit-progress-bar { } progress.ui-progress-indeterminate::-webkit-progress-value { background-size: 100% 100%; - .animation(indeterminate 150ms infinite); + -webkit-animation: indeterminate 150ms infinite; } .ui-progress-proportion { @@ -91,7 +73,6 @@ progress.ui-progress-indeterminate::-webkit-progress-value { padding-left: 16 * @unit_base; padding-right: 16 * @unit_base; margin-top: -10 * @unit_base; - color: @color_progressbar_text; } .ui-progress-ratio { @@ -101,5 +82,4 @@ progress.ui-progress-indeterminate::-webkit-progress-value { padding-left: 16 * @unit_base; padding-right: 16 * @unit_base; margin-top: -10 * @unit_base; - color: @color_progressbar_text; } diff --git a/tau/src/css/profile/wearable/changeable/common/reset.less b/tau/src/css/profile/wearable/changeable/common/reset.less index 34f33263..1d9ce4f2 100644 --- a/tau/src/css/profile/wearable/changeable/common/reset.less +++ b/tau/src/css/profile/wearable/changeable/common/reset.less @@ -1,8 +1,8 @@ -//! normalize.css v1.0.0 | MIT License | git.io/normalize - -// ========================================================================== -// HTML5 display definitions -// ========================================================================== +/*! normalize.css v1.0.0 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ /* * default outline set none */ @@ -73,7 +73,8 @@ audio:not([controls]) { html { font-size: 100%; /* 1 */ - .text-size-adjust(100%); /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ } /* @@ -412,8 +413,10 @@ input[type="date"] { */ input[type="search"] { - .appearance(textfield); - .content-box(); + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; } /* @@ -423,7 +426,7 @@ input[type="search"] { input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - .appearance(none); + -webkit-appearance: none; } /* diff --git a/tau/src/css/profile/wearable/changeable/common/scroller.less b/tau/src/css/profile/wearable/changeable/common/scroller.less index 022f1346..dea82b8b 100644 --- a/tau/src/css/profile/wearable/changeable/common/scroller.less +++ b/tau/src/css/profile/wearable/changeable/common/scroller.less @@ -6,30 +6,31 @@ } .ui-scrollbar-bar-type.ui-scrollbar-horizontal { - left: 0; - bottom: 0; + left: 0px; + bottom: 0px; width: 100%; height: 8px; } .ui-scrollbar-bar-type.ui-scrollbar-vertical { - right: 0; - top: 0; - width: 8 * @unit_base; + right: 0px; + top: 0px; + width: 8px; height: 100%; } .ui-scrollbar-bar-type .ui-scrollbar-indicator { position: absolute; + margin: 2px; background-color: @color_scroller_scrollbar_color; } .ui-scrollbar-bar-type.ui-scrollbar-horizontal .ui-scrollbar-indicator { - height: 4 * @unit_base; + height: 4px; } .ui-scrollbar-bar-type.ui-scrollbar-vertical .ui-scrollbar-indicator { - width: 4 * @unit_base; + width: 4px; } /*************************************************************************** @@ -39,150 +40,208 @@ display: none; position: absolute; background-repeat: no-repeat; - .animation-duration(0.47s); - .animation-timing-function(step-start); - .animation-fill-mode(forwards); - background-color: @color_scroller_bouncing_effect_glow; - &::before { - content: ""; - position: absolute; - background-color: @color_scroller_bouncing_effect_edge; + -webkit-animation-duration: 0.47s; + -webkit-animation-timing-function: step-start; + -webkit-animation-fill-mode: forwards; +} + +.ui-scrollbar-bouncing-effect.ui-top { + width: 100%; + height: 56px; + top:0px; + left:0px; + background-image: url(@bg_scroller_bouncing_effect_top); + background-size: 100% 1200px; +} + +.ui-scrollbar-bouncing-effect.ui-bottom { + width: 100%; + height: 56px; + bottom:0px; + left:0px; + background-image: url(@bg_scroller_bouncing_effect_bottom); + background-size: 100% 1200px; +} + +.ui-scrollbar-bouncing-effect.ui-left { + width: 56px; + height: 100%; + top:0px; + left:0px; + background-image: url(@bg_scroller_bouncing_effect_left); + background-size: 1200px 100%; +} + +.ui-scrollbar-bouncing-effect.ui-right { + width: 56px; + height: 100%; + top:0px; + right:0px; + background-image: url(@bg_scroller_bouncing_effect_right); + background-size: 1200px 100%; +} + +@-webkit-keyframes ui-vertical-show { + 0% { + background-position: center -0px; + } + 10% { + background-position: center -60px; + } + 20% { + background-position: center -120px; + } + 30% { + background-position: center -180px; + } + 40% { + background-position: center -240px; + } + 50% { + background-position: center -300px; + } + 60% { + background-position: center -360px; + } + 70% { + background-position: center -420px; + } + 80% { + background-position: center -480px; + } + 90% { + background-position: center -540px; + } + 100% { + background-position: center -540px; } } -.ui-scrollbar-bouncing-effect { - &.ui-top, - &.ui-bottom { - width: 100%; - height: 50 * @unit_base; - left: 0; - -webkit-mask-size: 100% 50 * @unit_base; - &::before { - width: 100%; - height: 2 * @unit_base; - -webkit-mask-size: 100% 2 * @unit_base; - } - } - &.ui-left, - &.ui-right { - width: 50 * @unit_base; - height: 100%; - top: 0; - -webkit-mask-size: 50 * @unit_base 100%; - &::before { - width: 1 * @unit_base; - height: 100%; - -webkit-mask-size: 1 * @unit_base 100%; - } - } - &.ui-top { - top: 0; - .mask-image(@bg_scroller_bouncing_effect_top_glow); - &::before { - .mask-image(@bg_scroller_bouncing_effect_top_edge); - } - } - &.ui-bottom { - bottom: 0; - .mask-image(@bg_scroller_bouncing_effect_bottom_glow); - &::before { - .mask-image(@bg_scroller_bouncing_effect_bottom_edge); - } - } - &.ui-left { - left: 0; - .mask-image(@bg_scroller_bouncing_effect_left_glow); - &::before { - .mask-image(@bg_scroller_bouncing_effect_left_edge); - } - } - &.ui-right { - right: 0; - .mask-image(@bg_scroller_bouncing_effect_right_glow); - &::before { - .mask-image(@bg_scroller_bouncing_effect_right_edge); - } +@-webkit-keyframes ui-vertical-hide { + 0% { + background-position: center -600px; + } + 10% { + background-position: center -660px; + } + 20% { + background-position: center -720px; + } + 30% { + background-position: center -780px; + } + 40% { + background-position: center -840px; + } + 50% { + background-position: center -900px; + } + 60% { + background-position: center -960px; + } + 70% { + background-position: center -1020px; + } + 80% { + background-position: center -1080px; + } + 90% { + background-position: center -1140px; + } + 100% { + background-position: center -1140px; } } -@-webkit-keyframes ui-bouncing-show { +@-webkit-keyframes ui-horizontal-show { 0% { - opacity: 0; + background-position: -0px center; } 10% { - opacity: 0.1; + background-position: -60px center; } 20% { - opacity: 0.2; + background-position: -120px center; } 30% { - opacity: 0.3; + background-position: -180px center; } 40% { - opacity: 0.4; + background-position: -240px center; } 50% { - opacity: 0.5; + background-position: -300px center; } 60% { - opacity: 0.6; + background-position: -360px center; } 70% { - opacity: 0.7; + background-position: -420px center; } 80% { - opacity: 0.8; + background-position: -480px center; } 90% { - opacity: 0.9; + background-position: -540px center; } 100% { - opacity: 1; + background-position: -540px center; } } -@-webkit-keyframes ui-bouncing-hide { +@-webkit-keyframes ui-horizontal-hide { 0% { - opacity: 1; + background-position: -600px center; } 10% { - opacity: 0.9; + background-position: -660px center; } 20% { - opacity: 0.8; + background-position: -720px center; } 30% { - opacity: 0.7; + background-position: -780px center; } 40% { - opacity: 0.6; + background-position: -840px center; } 50% { - opacity: 0.5; + background-position: -900px center; } 60% { - opacity: 0.4; + background-position: -960px center; } 70% { - opacity: 0.3; + background-position: -1020px center; } 80% { - opacity: 0.2; + background-position: -1080px center; } 90% { - opacity: 0.1; + background-position: -1140px center; } 100% { - opacity: 0; + background-position: -1140px center; } } -.ui-scrollbar-bouncing-effect.ui-show { +.ui-scrollbar-bouncing-effect.ui-top.ui-show, +.ui-scrollbar-bouncing-effect.ui-bottom.ui-show { display: block; - .animation-name(ui-bouncing-show); + -webkit-animation-name: ui-vertical-show; } - -.ui-scrollbar-bouncing-effect.ui-hide { +.ui-scrollbar-bouncing-effect.ui-top.ui-hide, +.ui-scrollbar-bouncing-effect.ui-bottom.ui-hide { + display: block; + -webkit-animation-name: ui-vertical-hide; +} +.ui-scrollbar-bouncing-effect.ui-left.ui-show, +.ui-scrollbar-bouncing-effect.ui-right.ui-show { + display: block; + -webkit-animation-name: ui-horizontal-show; +} +.ui-scrollbar-bouncing-effect.ui-left.ui-hide, +.ui-scrollbar-bouncing-effect.ui-right.ui-hide { display: block; - .animation-name(ui-bouncing-hide); + -webkit-animation-name: ui-horizontal-hide; } diff --git a/tau/src/css/profile/wearable/changeable/common/sectionchanger.less b/tau/src/css/profile/wearable/changeable/common/sectionchanger.less deleted file mode 100644 index eaf6cf63..00000000 --- a/tau/src/css/profile/wearable/changeable/common/sectionchanger.less +++ /dev/null @@ -1,3 +0,0 @@ -.ui-section-changer { - height: 100%; -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/common/selector.less b/tau/src/css/profile/wearable/changeable/common/selector.less deleted file mode 100644 index ae420e6c..00000000 --- a/tau/src/css/profile/wearable/changeable/common/selector.less +++ /dev/null @@ -1,116 +0,0 @@ -.ui-selector { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: @color_selector_layer_bg; - .ui-layer { - position: absolute; - display: none; - width: 54 * @unit_base; - height: 54 * @unit_base; - border-radius: 50%; - - &.ui-layer-active { - display: block; - width: 100%; - height: 100%; - z-index: 3; - .ui-item { - visibility: visible; - .transition(transform 300ms ease-out); - } - } - &.ui-layer-hide { - .ui-item { - visibility: visible; - .transition(transform 100ms ease-out); - } - } - &.ui-layer-prev { - display: block; - top: 50%; - left: 50%; - margin: -28 * @unit_base; - z-index: 2; - background-color: @color_selector_layer_sub1_bg; - } - - &.ui-layer-prev-prev { - display: block; - top: 50%; - left: 50%; - margin: -28 * @unit_base; - z-index: 1; - background-color: @color_selector_layer_sub2_bg; - } - - &.ui-layer-next { - display: block; - top: 50%; - left: 50%; - margin: -28 * @unit_base; - z-index: 2; - background-color: @color_selector_layer_sub1_bg; - } - - &.ui-layer-next-next { - display: block; - top: 50%; - left: 50%; - margin: -28 * @unit_base; - z-index: 1; - background-color: @color_selector_layer_sub2_bg; - } - - .ui-item { - background-color: @color_selector_icon_bg; - position: absolute; - visibility: hidden; - width: 56 * @unit_base; - height: 56 * @unit_base; - top: 50%; - left: 50%; - border-radius: 50%; - margin: -28 * @unit_base; - z-index: 100; - &:active { - background-color: @color_selector_icon_bg_press; - } - } - } - .ui-selector-indicator, .ui-selector-indicator-arrow { - position: absolute; - width: 182 * @unit_base; - height: 182 * @unit_base; - top: 50%; - left: 50%; - margin: -91 * @unit_base; - text-align: center; - line-height: 182 * @unit_base; - font-size: 28 * @unit_base; - } - .ui-selector-indicator { - z-index: 11; - } - .ui-selector-indicator-arrow { - z-index: 0; - &::before { - position: absolute; - content: ""; - width: 100%; - height: 100%; - top: 0; - left: 0; - .mask-image('./images/Common/b_rotary_selector_center_pointer.png'); - .mask-size(100% 100%); - .mask-repeat(no-repeat); - background-color: rgba(116, 196, 252, 1); - - } - &:active::before { - background-color: @color_selector_handler_border_press; - } - } -} diff --git a/tau/src/css/profile/wearable/changeable/common/snaplistview.less b/tau/src/css/profile/wearable/changeable/common/snaplistview.less deleted file mode 100644 index 98a48a3d..00000000 --- a/tau/src/css/profile/wearable/changeable/common/snaplistview.less +++ /dev/null @@ -1,10 +0,0 @@ -.ui-snap-container { - -webkit-scroll-snap-type: mandatory; - -webkit-scroll-snap-destination: 50% 50%; - &.ui-snap-disabled { - -webkit-scroll-snap-type: none; - } -} -.ui-snap-listview-item { - -webkit-scroll-snap-coordinate: 50% 50%; -} diff --git a/tau/src/css/profile/wearable/changeable/common/swipelist.less b/tau/src/css/profile/wearable/changeable/common/swipelist.less index 9371036a..17f698e5 100644 --- a/tau/src/css/profile/wearable/changeable/common/swipelist.less +++ b/tau/src/css/profile/wearable/changeable/common/swipelist.less @@ -1,16 +1,6 @@ .ui-swipelist { position: absolute; top: 0; - .ui-swipelist-icon { - width: 20%; - height: 100%; - -webkit-mask-repeat : no-repeat; - -webkit-mask-size: 100% 100%; - } - .ui-swipelist-text { - top: 50%; - transform: translate3d(0, -50%, 0); - } } .ui-swipelist-left, .ui-swipelist-right { position: absolute; @@ -18,11 +8,11 @@ } .ui-swipelist-left { - .linear-gradient-left(@color_list_swipe_left_start_bg, @color_list_swipe_left_start_bg, 0%, @color_list_swipe_left_end_bg, 0%); + background: -webkit-linear-gradient(left, @color_list_swipe_left_start_bg 0%, @color_list_swipe_left_end_bg 0%); } .ui-swipelist-right { - .linear-gradient-right(@color_list_swipe_right_start_bg, @color_list_swipe_right_start_bg, 0%, @color_list_swipe_right_end_bg, 0%); + background: -webkit-linear-gradient(right, @color_list_swipe_right_start_bg 0%, @color_list_swipe_right_end_bg 0%); } .ui-swipelist-icon, .ui-swipelist-text { position: absolute; @@ -32,10 +22,12 @@ Icon and text need to set position or url and so on. We thought that swipelist's content style need to be implemented by developer wanted. */ + width: 20%; + height: 100%; margin-left: 2%; background-color: @color_list_swipe_icon_btn_call; - .mask-image('./images/Swipelist/b_logs_icon_body_btn_call_nor.png'); - .mask-repeat(no-repeat); + -webkit-mask-image: url("./images/Swipelist/b_logs_icon_body_btn_call_nor.png"); + -webkit-mask-repeat : no-repeat; } .ui-swipelist-left .ui-swipelist-text { /* @@ -43,16 +35,20 @@ We thought that swipelist's content style need to be implemented by developer wanted. */ margin-left: 40%; + height: 100%; + line-height: 90px; } .ui-swipelist-right .ui-swipelist-icon { /* Icon and text need to set position or url and so on. We thought that swipelist's content style need to be implemented by developer wanted. */ + width: 20%; + height: 100%; margin-left: 80%; background-color: @color_list_swipe_icon_btn_msg; - .mask-image('./images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png'); - .mask-repeat(no-repeat); + -webkit-mask-image : url("./images/Swipelist/b_logs_icon_actionbar_btn_msg_nor.png"); + -webkit-mask-repeat : no-repeat; } .ui-swipelist-right .ui-swipelist-text { /* @@ -60,4 +56,6 @@ We thought that swipelist's content style need to be implemented by developer wanted. */ margin-left: 20%; + height: 100%; + line-height: 90px; } diff --git a/tau/src/css/profile/wearable/changeable/common/toggleswitch.less b/tau/src/css/profile/wearable/changeable/common/toggleswitch.less index cc4ba40a..539ed0e9 100644 --- a/tau/src/css/profile/wearable/changeable/common/toggleswitch.less +++ b/tau/src/css/profile/wearable/changeable/common/toggleswitch.less @@ -1,134 +1,164 @@ /* * toggle switch */ +.ui-switch-activation, .ui-switch-inneroffset, .ui-switch-handler { + display: block; + -webkit-mask-image: url(images/Controller_icon/toggle_changeable.png); + -webkit-mask-repeat: no-repeat; +} + .ui-switch { width: 100%; color: @color_switch_text; } -.ui-switch-inneroffset, -.ui-switch-handler { - display: none; +.ui-toggleswitch { + display: block; + width: @fixed_toggleswitch_width; + margin: 0 auto; } .ui-switch-text { margin-top: @fixed_toggleswitch_text_margin_top; margin-bottom: @fixed_toggleswitch_text_margin_bottom; - padding: 0 30px; + padding: 0 30; font-size: @fixed_toggleswitch_text_font_size; text-align: center; } +.ui-switch-input { + display: none; +} -.ui-switch-sub-text { - margin-top: @fixed_toggleswitch_sub_text_margin_top; - font-size: @fixed_toggleswitch_sub_text_font_size; - text-align: center; - color: @color_switch_sub_text; +.ui-switch-inneroffset { + width: 110px; + height: 88px; + position: absolute; } -.ui-toggleswitch { - position: relative; - display: inline-block; +.ui-switch-inneroffset:active { + background-color: @color_toggle_off_handler_press; +} + +.ui-switch-activation { width: @fixed_toggleswitch_width; height: @fixed_toggleswitch_height; - overflow: hidden; - &.ui-toggleswitch-large { - width: @fixed_toggleswitch_large_width; - height: @fixed_toggleswitch_large_height; + -webkit-mask-position: 0 0; + background-color: @color_toggle_off_bg; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-inneroffset { + -webkit-mask-position: 0 -120px; + background-color: @color_toggle_off_handler; + margin-left: 9px; + margin-top: 11px; } - & .ui-switch-input { - position: absolute; - width: 100%; - height: 100%; - -webkit-appearance: none; - display: block; - - &::before { - content: ""; - position: absolute; - width: 100%; - height: 100%; - .mask-image('images/Controller_icon/toggle_changeable.png'); - .mask-size(100% 400%); - .mask-repeat(no-repeat); - .mask-position(0 0); - background-color: @color_toggle_off_bg_press; - z-index: 0; - } + .ui-switch-inneroffset:active { + background-color: @color_toggle_off_handler_press; + } - &:active { - &::before { - background-color: @color_toggle_off_bg_press; - } - & ~ .ui-switch-activation, - ~ .ui-switch-button { - background-color: @color_toggle_off_handler_press; - &::before { - background-color: @color_toggle_off_handler_off_press; - } - } - } + .ui-switch-handler { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + -webkit-mask-position: 0 -218px; + background-color: @color_toggle_off_handler_off; + left: 0%; } +} - & .ui-switch-activation, - .ui-switch-button { - width: 100%; - height: 100%; - .mask-image('images/Controller_icon/toggle_changeable.png'); - .mask-size(100% 400%); - .mask-repeat(no-repeat); - .mask-position(0 33.3%); - background-color: @color_toggle_off_handler; - position: absolute; - top: 0; - left: 0; - pointer-events: none; - z-index: 1; - - &::before { - content: ""; - position: absolute; - width: 100%; - height: 100%; - .mask-image('images/Controller_icon/toggle_changeable.png'); - .mask-size(100% 400%); - .mask-repeat(no-repeat); - .mask-position(0 66.7%); - background-color: @color_toggle_off_handler_off; - top: 0; - left: 0; - } +.ui-switch-activation:active { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + background-color: @color_toggle_off_bg_press; + margin: z0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-handler:active { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-color: @color_toggle_off_handler_off_press; + left: 0% } +} + +.ui-switch-activation:disable { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + background-color: @color_toggle_off_bg_dim; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-handler:disable { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-color: @color_toggle_off_handler_off_dim; + left: 0%; + } +} + +.ui-switch-input:checked ~ & { + display: none; - & .ui-switch-input:checked { - & ~ .ui-switch-activation, - ~ .ui-switch-button { - width: 100%; - height: 100%; + .ui-switch-activation { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + -webkit-mask-position: 0 0; + background-color: @color_toggle_on_bg; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + + .ui-switch-inneroffset { + -webkit-mask-position: 0 -120px; background-color: @color_toggle_on_handler; - .mask-position(0 33%); // To correct position error - .transform(translate3d(36.23%, 0, 0)); - &::before { - .mask-position(0 100%); - background-color: @color_toggle_on_handler_on; - } + margin-left: 89px; + margin-top: 11px; + } + + .ui-switch-inneroffset:active { + background-color: @color_toggle_on_handler_press; + } + + .ui-switch-handler { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + -webkit-mask-position: 0 -316px; + background-color: @color_toggle_on_handler_on; + left: 0; } + } + .ui-switch-activation:active { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + background-color: @color_toggle_on_bg_press; - &::before { - background-color: @color_toggle_on_bg; + .ui-switch-handler:active { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-color: @color_toggle_on_handler_on_press; + left: 0; } + } + .ui-switch-activation:disable { + width: @fixed_toggleswitch_width; + height: @fixed_toggleswitch_height; + margin: 0 auto; + margin-top: @fixed_toggleswitch_act_margin_top; + background-color: @color_toggle_on_bg_dim; - &:active { - &::before { - background-color: @color_toggle_on_bg_press; - } - & ~ .ui-switch-activation, ~ .ui-switch-button { - background-color: @color_toggle_on_handler_press; - &::before { - background-color: @color_toggle_on_handler_on_press; - } - } + .ui-switch-handler:disable { + position: relative; + width: @fixed_toggleswitch_handler_width; + height: @fixed_toggleswitch_handler_height; + background-color: @color_toggle_on_handler_on_dim; + left: 0; } } } diff --git a/tau/src/css/profile/wearable/changeable/common/transition.fade.less b/tau/src/css/profile/wearable/changeable/common/transition.fade.less index b348f30a..51111c01 100644 --- a/tau/src/css/profile/wearable/changeable/common/transition.fade.less +++ b/tau/src/css/profile/wearable/changeable/common/transition.fade.less @@ -1,55 +1,45 @@ -.w-transition-fadein() { - from { opacity: 0; } - to { opacity: 1; } -} - -.w-transition-fadeout() { - from { opacity: 1; } - to { opacity: 0; } -} - @-webkit-keyframes fadein { - .w-transition-fadein(); + from { opacity: 0; } + to { opacity: 1; } } - @-moz-keyframes fadein { - .w-transition-fadein(); -} - -@-ms-keyframes fadein { - .w-transition-fadein(); + from { opacity: 0; } + to { opacity: 1; } } - @keyframes fadein { - .w-transition-fadein(); + from { opacity: 0; } + to { opacity: 1; } } @-webkit-keyframes fadeout { - .w-transition-fadein(); + from { opacity: 1; } + to { opacity: 0; } } - @-moz-keyframes fadeout { - .w-transition-fadeout(); -} - -@-ms-keyframes fadeout { - .w-transition-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } - -@-o-keyframes fadeout { - .w-transition-fadeout(); -} - @keyframes fadeout { - .w-transition-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } .fade.out { opacity: 0; - .animation(fadeout 125ms); + -webkit-animation-duration: 125ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 125ms; + -moz-animation-name: fadeout; + animation-duration: 125ms; + animation-name: fadeout; } .fade.in { opacity: 1; - .animation(fadein 225ms); + -webkit-animation-duration: 225ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 225ms; + -moz-animation-name: fadein; + animation-duration: 225ms; + animation-name: fadein; } diff --git a/tau/src/css/profile/wearable/changeable/common/transition.less b/tau/src/css/profile/wearable/changeable/common/transition.less index d365eb4a..10f95b51 100644 --- a/tau/src/css/profile/wearable/changeable/common/transition.less +++ b/tau/src/css/profile/wearable/changeable/common/transition.less @@ -4,24 +4,31 @@ width: 100%; height: 100%; overflow: hidden; - .border-box(); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .ui-pre-in { z-index: 100; visibility: visible; - display: flex; - display: -webkit-flex; - flex-direction: column; - -webkit-flex-direction: column; + display: block; top: 0px; left: 0px; } .in { - .animation-timing-function(ease-out); - .animation-duration(350ms); + -webkit-animation-timing-function: ease-out; + -webkit-animation-duration: 350ms; + -moz-animation-timing-function: ease-out; + -moz-animation-duration: 350ms; + animation-timing-function: ease-out; + animation-duration: 350ms; } .out { - .animation-timing-function(ease-in); - .animation-duration(225ms); + -webkit-animation-timing-function: ease-in; + -webkit-animation-duration: 225ms; + -moz-animation-timing-function: ease-in; + -moz-animation-duration: 225ms; + animation-timing-function: ease-in; + animation-duration: 225ms; } diff --git a/tau/src/css/profile/wearable/changeable/common/transition.pop.less b/tau/src/css/profile/wearable/changeable/common/transition.pop.less deleted file mode 100644 index 78da5d50..00000000 --- a/tau/src/css/profile/wearable/changeable/common/transition.pop.less +++ /dev/null @@ -1,79 +0,0 @@ -@-webkit-keyframes popin { - from { - transform: scale3d(0.3, 0.3, 1); - opacity: 0; - } - to { - transform: scale3d(1, 1, 1); - opacity: 1; - } -} -@-webkit-keyframes popout { - from { - transform: scale3d(1, 1, 1); - opacity: 1; - } - to { - transform: scale3d(1.7, 1.7, 1); - opacity: 0; - } -} -@-webkit-keyframes popoutreverse { - from { - transform: scale3d(1, 1, 1); - opacity: 1; - } - to { - transform: scale3d(0.3, 0.3, 1); - opacity: 0; - } -} -@-webkit-keyframes popinreverse { - from { - transform: scale3d(1.7, 1.7, 1); - opacity: 0; - } - to { - transform: scale3d(1, 1, 1); - opacity: 1; - } -} -.pop.out.reverse { - z-index:100; - -webkit-animation-duration: 225ms; - -webkit-animation-name: popoutreverse; - -moz-animation-duration: 225ms; - -moz-animation-name: popoutreverse; - animation-duration: 225ms; - animation-name: popoutreverse; - .animation-fill-mode(forwards); -} -.pop.in.reverse { - z-index:200; - -webkit-animation-duration: 225ms; - -webkit-animation-name: popinreverse; - -moz-animation-duration: 225ms; - -moz-animation-name: popinreverse; - animation-duration: 225ms; - animation-name: popinreverse; - .animation-fill-mode(forwards); -} -.pop.in { - -webkit-animation-duration: 225ms; - -webkit-animation-name: popin; - -moz-animation-duration: 225ms; - -moz-animation-name: popin; - animation-duration: 225ms; - animation-name: popin; - .animation-fill-mode(forwards); -} -.pop.out { - z-index:200; - -webkit-animation-duration: 225ms; - -webkit-animation-name: popout; - -moz-animation-duration: 225ms; - -moz-animation-name: popout; - animation-duration: 225ms; - animation-name: popout; - .animation-fill-mode(forwards); -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/common/transition.slideup.less b/tau/src/css/profile/wearable/changeable/common/transition.slideup.less index 2080fa12..f4d9ee09 100644 --- a/tau/src/css/profile/wearable/changeable/common/transition.slideup.less +++ b/tau/src/css/profile/wearable/changeable/common/transition.slideup.less @@ -1,114 +1,69 @@ -@-webkit-keyframes slideupin { - .w-transition-slideupin(); -} -@-o-keyframes slideupin { - .w-transition-slideupin(); -} -@-ms-keyframes slideupin { - .w-transition-slideupin(); -} -@-moz-keyframes slideupin { - .w-transition-slideupin(); -} -@keyframes slideupin { - .w-transition-slideupin(); -} - -@-webkit-keyframes slideupout { - .w-transition-slideupout(); -} -@-o-keyframes slideupout { - .w-transition-slideupout(); -} -@-ms-keyframes slideupout { - .w-transition-slideupout(); -} -@-moz-keyframes slideupout { - .w-transition-slideupout(); -} -@keyframes slideupout { - .w-transition-slideupout(); +/* slide up */ +.slideup.out { + -webkit-animation-name: fadeout; + -webkit-animation-duration: 250ms; + -moz-animation-name: fadeout; + -moz-animation-duration: 250ms; + animation-name: fadeout; + animation-duration: 250ms; } -@-webkit-keyframes slideupinreverse { - .w-transition-slideupinreverse(); -} -@-o-keyframes slideupinreverse { - .w-transition-slideupinreverse(); -} -@-ms-keyframes slideupinreverse { - .w-transition-slideupinreverse(); -} -@-moz-keyframes slideupinreverse { - .w-transition-slideupinreverse(); -} -@keyframes slideupinreverse { - .w-transition-slideupinreverse(); +.slideup.in { + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfrombottom; + -webkit-animation-duration: 250ms; + -moz-transform: translateY(0); + -moz-animation-name: slideinfrombottom; + -moz-animation-duration: 250ms; + transform: translateY(0); + animation-name: slideinfrombottom; + animation-duration: 250ms; } -@-webkit-keyframes slideupoutreverse { - .w-transition-slideupoutreverse(); -} -@-o-keyframes slideupoutreverse { - .w-transition-slideupoutreverse(); -} -@-ms-keyframes slideupoutreverse { - .w-transition-slideupoutreverse(); -} -@-moz-keyframes slideupoutreverse { - .w-transition-slideupoutreverse(); -} -@keyframes slideupoutreverse { - .w-transition-slideupoutreverse(); +.slideup.in.reverse { + -webkit-animation-name: fadein; + -webkit-animation-duration: 250ms; + -moz-animation-name: fadein; + -moz-animation-duration: 250ms; + animation-name: fadein; + animation-duration: 250ms; } -.w-transition-slideupin() { - from { .transform(translateY(100%)); } - to { .transform(translateY(0)); } +.slideup.out.reverse { + z-index: 101; + -webkit-transform: translateY(100%); + -webkit-animation-name: slideouttobottom; + -webkit-animation-duration: 250ms; + -moz-transform: translateY(100%); + -moz-animation-name: slideouttobottom; + -moz-animation-duration: 250ms; + transform: translateY(100%); + animation-name: slideouttobottom; + animation-duration: 250ms; } -.w-transition-slideupout() { - from { - .transform(scale3d(1, 1, 1)); - opacity: 1; - } - to { - .transform(scale3d(.6, .6, 1)); - opacity: .3; - } +@-webkit-keyframes slideinfrombottom { + from { -webkit-transform: translateY(100%); } + to { -webkit-transform: translateY(0); } } - -.w-transition-slideupoutreverse() { - from { .transform(translateY(0)); } - to { .transform(translateY(100%)); } +@-moz-keyframes slideinfrombottom { + from { -moz-transform: translateY(100%); } + to { -moz-transform: translateY(0); } } - -.w-transition-slideupinreverse() { - from { - .transform(scale3d(.6, .6, 1)); - opacity: .3; - } - to { - .transform(scale3d(1, 1, 1)); - opacity: 1; - } +@keyframes slideinfrombottom { + from { transform: translateY(100%); } + to { transform: translateY(0); } } -.slideup.in:not(.ui-popup) { - .transform(translateY(0)); - .animation(slideupin 400ms cubic-bezier(0.25, 0.46, 0.45, 1.0)); +@-webkit-keyframes slideouttobottom { + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(100%); } } -.slideup.out:not(.ui-popup) { - .transform(scale3d(.6, .6, 1)); - .animation(slideupout 400ms cubic-bezier(0.25, 0.46, 0.45, 1.0)); -} - -.slideup.out.reverse:not(.ui-popup) { - z-index: 101; - .transform(translateY(100%)); - .animation(slideupoutreverse 400ms cubic-bezier(0.25, 0.46, 0.45, 1.0)); +@-moz-keyframes slideouttobottom { + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(100%); } } -.slideup.in.reverse:not(.ui-popup) { - .transform(scale3d(1, 1, 1)); - .animation(slideupinreverse 400ms cubic-bezier(0.25, 0.46, 0.45, 1.0)); +@keyframes slideouttobottom { + from { transform: translateY(0); } + to { transform: translateY(100%); } } diff --git a/tau/src/css/profile/wearable/changeable/common/viewswitcher.less b/tau/src/css/profile/wearable/changeable/common/viewswitcher.less deleted file mode 100644 index a29f50a7..00000000 --- a/tau/src/css/profile/wearable/changeable/common/viewswitcher.less +++ /dev/null @@ -1,38 +0,0 @@ -.ui-view-switcher { - height: 100%; - overflow: hidden; - &.ui-view-carousel { - .ui-view { - display: none; - position: absolute; - z-index: -1000; - top: 50%; - background-color: @color_moreoptions_bg; - &.ui-view-carousel-active { - display: inline; - z-index: 100; - left: 50%; - transform: translate3d(-50%, 0, 0); - .ui-view-carousel-dim { - opacity: 0; - } - } - &.ui-view-carousel-left { - display: inline; - left: 0; - } - &.ui-view-carousel-right { - display: inline; - right: 0; - } - .ui-view-carousel-dim { - position: absolute; - top: 0; - width: 100%; - height: 100%; - opacity: 0.6; - background-color: @color_viewswitcher_dim_bg; - } - } - } -} diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/fixedUIStyle.less b/tau/src/css/profile/wearable/changeable/theme-changeable/fixedUIStyle.less index b36ee453..1edaa837 100644 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/fixedUIStyle.less +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/fixedUIStyle.less @@ -24,8 +24,6 @@ @fixed_header_title_icon_size: 34px; @fixed_header_more_title_padding: 78px; @fixed_header_more_width: 68px; -@fixed_header_expand_height: 80px; -@fixed_header_expand_title_top: 20px; @fixed_footer_height: 85px; /**********************************************************************/ @@ -59,17 +57,14 @@ /**********************************************************************/ /* ToggleSwitch(FIXED) */ /**********************************************************************/ -@fixed_toggleswitch_width: 103.5px; -@fixed_toggleswitch_height: 55px; -@fixed_toggleswitch_large_width: 207px; -@fixed_toggleswitch_large_height: 110px; +@fixed_toggleswitch_width: 207px; +@fixed_toggleswitch_height: 110px; @fixed_toggleswitch_text_margin_top: 30px; @fixed_toggleswitch_text_margin_bottom: 40px; @fixed_toggleswitch_text_font_size: 34px; -@fixed_toggleswitch_sub_text_margin_top: 48px; -@fixed_toggleswitch_sub_text_margin_bottom: 55px; -@fixed_toggleswitch_sub_text_font_size: 26px; - +@fixed_toggleswitch_act_margin_top: 23px; +@fixed_toggleswitch_handler_width: 110px; +@fixed_toggleswitch_handler_height: 88px; /*********************************************************************/ /* Progress(FIXED) */ diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png Binary files differnew file mode 100644 index 00000000..cac8bf27 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png Binary files differnew file mode 100644 index 00000000..2048b43e --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png Binary files differnew file mode 100644 index 00000000..b61c7a69 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png Binary files differnew file mode 100644 index 00000000..ea2506c9 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Common/b_rotary_selector_center_pointer.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Common/b_rotary_selector_center_pointer.png Binary files differdeleted file mode 100755 index 5a2f348c..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Common/b_rotary_selector_center_pointer.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Common/masking_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Common/masking_bg.png Binary files differdeleted file mode 100644 index 935dad63..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Common/masking_bg.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/ref_btn_check_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/ref_btn_check_holo_dark.png Binary files differdeleted file mode 100644 index 90062665..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/ref_btn_check_holo_dark.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/tw_btn_check_bg_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/tw_btn_check_bg_holo_dark.png Binary files differdeleted file mode 100644 index 1a1b0831..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/tw_btn_check_bg_holo_dark.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/tw_btn_check_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/tw_btn_check_holo_dark.png Binary files differdeleted file mode 100644 index 04f94920..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Check/tw_btn_check_holo_dark.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_bg_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_bg_holo_dark.png Binary files differdeleted file mode 100644 index 96ee932f..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_bg_holo_dark.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_off_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_off_holo_dark.png Binary files differdeleted file mode 100644 index 2f8ad8c8..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_off_holo_dark.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_on_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_on_holo_dark.png Binary files differdeleted file mode 100644 index f2023925..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/On_Off/tw_btn_control_on_holo_dark.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Radio/tw_btn_radio_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Radio/tw_btn_radio_holo_dark.png Binary files differdeleted file mode 100644 index 29b536f6..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/Radio/tw_btn_radio_holo_dark.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/toggle_changeable.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/toggle_changeable.png Binary files differindex 69500e88..deae7152 100644..100755 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/toggle_changeable.png +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/toggle_changeable.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..23d166d8 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..0effb3aa --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..e6e6501c --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_holo_dark.png Binary files differnew file mode 100755 index 00000000..5b3394ba --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..880f013c --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark.png Binary files differnew file mode 100755 index 00000000..266c73ff --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark_dim.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark_dim.png Binary files differnew file mode 100755 index 00000000..699eb3e0 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark_dim.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png Binary files differnew file mode 100755 index 00000000..71e5b20c --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..ebb05a6a --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png Binary files differnew file mode 100755 index 00000000..a53449ac --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png Binary files differnew file mode 100755 index 00000000..53e8ee4a --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..ef5ae332 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png Binary files differnew file mode 100755 index 00000000..ba749816 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..acdf9c47 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..6f99bc85 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_holo_dark.png Binary files differnew file mode 100755 index 00000000..28e54740 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..b74f64e5 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png Binary files differnew file mode 100644 index 00000000..17a9ba1c --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_dim.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png Binary files differnew file mode 100644 index 00000000..d7a00641 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_normal.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png Binary files differnew file mode 100644 index 00000000..f9154706 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_minus_pressed.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png Binary files differnew file mode 100644 index 00000000..0f733479 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_dim.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png Binary files differnew file mode 100644 index 00000000..e3823c39 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_normal.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png Binary files differnew file mode 100644 index 00000000..e0d7382f --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_dialbtn_plus_pressed.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_divider.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_divider.png Binary files differnew file mode 100644 index 00000000..30605ce3 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_divider.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_left_softbtn.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_left_softbtn.png Binary files differnew file mode 100644 index 00000000..6bf1b2e2 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_left_softbtn.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_bg_focused.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_bg_focused.png Binary files differnew file mode 100644 index 00000000..b26e87c4 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_bg_focused.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_bg_normal.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_bg_normal.png Binary files differnew file mode 100644 index 00000000..59b9ae14 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_bg_normal.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_dot.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_dot.png Binary files differnew file mode 100644 index 00000000..aa5a1d2f --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_dot.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_dot_01.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_dot_01.png Binary files differnew file mode 100644 index 00000000..c9a2d8b4 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_num_dot_01.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_right_softbtn.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_right_softbtn.png Binary files differnew file mode 100644 index 00000000..023945a8 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_right_softbtn.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_time_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_time_bg.png Binary files differnew file mode 100644 index 00000000..f5bf6714 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_time_bg.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_01.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_01.png Binary files differnew file mode 100644 index 00000000..9d0ed360 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_01.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_02.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_02.png Binary files differnew file mode 100644 index 00000000..f3ff1edc --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_02.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_03.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_03.png Binary files differnew file mode 100644 index 00000000..05ddd261 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_03.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_04.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_04.png Binary files differnew file mode 100644 index 00000000..879851c0 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_04.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_05.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_05.png Binary files differnew file mode 100644 index 00000000..b5233245 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_05.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_06.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_06.png Binary files differnew file mode 100644 index 00000000..d320e18c --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Datetimepicker/tw_timepicker_wheel_06.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/b_fast_scroll_rollover_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/b_fast_scroll_rollover_bg.png Binary files differdeleted file mode 100644 index dbfb43bc..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/b_fast_scroll_rollover_bg.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/b_index_scroll_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/b_index_scroll_bg.png Binary files differdeleted file mode 100644 index 348e3aa5..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/b_index_scroll_bg.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/list_scroll_triggle.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/list_scroll_triggle.png Binary files differdeleted file mode 100644 index 983d398e..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Indicator/list_scroll_triggle.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/List/b_body_edge_shadow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/List/b_body_edge_shadow.png Binary files differdeleted file mode 100644 index 8dbabd01..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/List/b_body_edge_shadow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/List/b_list_focus_bg_108.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/List/b_list_focus_bg_108.png Binary files differdeleted file mode 100644 index 8ecc8c16..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/List/b_list_focus_bg_108.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/b_popup_edge_shadow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/b_popup_edge_shadow.png Binary files differdeleted file mode 100644 index 55909506..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/b_popup_edge_shadow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_brightness_off.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_brightness_off.png Binary files differnew file mode 100755 index 00000000..c1d4bf44 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_brightness_off.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_brightness_on.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_brightness_on.png Binary files differnew file mode 100755 index 00000000..22e92bf8 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_brightness_on.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_mute.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_mute.png Binary files differnew file mode 100755 index 00000000..a68530ae --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_mute.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_outdoor_off.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_outdoor_off.png Binary files differnew file mode 100755 index 00000000..5b0c4146 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_outdoor_off.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_outdoor_on.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_outdoor_on.png Binary files differnew file mode 100755 index 00000000..98276530 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_outdoor_on.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_sound.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_sound.png Binary files differnew file mode 100755 index 00000000..f66d6bad --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_sound.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_sound_off.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_sound_off.png Binary files differnew file mode 100755 index 00000000..3038dff3 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_sound_off.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_vibrate.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_vibrate.png Binary files differnew file mode 100755 index 00000000..23330743 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_device_options_vibrate.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_ic_lock_power_off.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_ic_lock_power_off.png Binary files differnew file mode 100755 index 00000000..35ab7604 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_ic_lock_power_off.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_ic_lock_restart.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_ic_lock_restart.png Binary files differnew file mode 100755 index 00000000..b32aa3a8 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_ic_lock_restart.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_popup_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_popup_bg.png Binary files differdeleted file mode 100644 index c1909ebb..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_popup_bg.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_popup_bg_cover.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_popup_bg_cover.png Binary files differdeleted file mode 100644 index 689082c5..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_popup_bg_cover.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_bg.png Binary files differdeleted file mode 100644 index 25fc62e2..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_bg.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_bg_cover.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_bg_cover.png Binary files differdeleted file mode 100644 index 05bd6a3a..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_bg_cover.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_image_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_image_bg.png Binary files differdeleted file mode 100755 index 3505b864..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_image_bg.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_outline.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_outline.png Binary files differdeleted file mode 100644 index 23108624..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Popup/tw_toast_popup_outline.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Processing/processingfull.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Processing/processingfull.png Binary files differdeleted file mode 100644 index 68039349..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Processing/processingfull.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Processing/processingsmall.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Processing/processingsmall.png Binary files differdeleted file mode 100644 index 326bda83..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Processing/processingsmall.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate1_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate1_holo_dark.png Binary files differnew file mode 100755 index 00000000..6cdff14a --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate1_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate2_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate2_holo_dark.png Binary files differnew file mode 100755 index 00000000..17905b90 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate2_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate3_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate3_holo_dark.png Binary files differnew file mode 100755 index 00000000..b17353df --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate3_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate4_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate4_holo_dark.png Binary files differnew file mode 100755 index 00000000..719a2bc9 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate4_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate5_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate5_holo_dark.png Binary files differnew file mode 100755 index 00000000..420de532 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_progressbar_indeterminate5_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_scrubber_control_focused_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_scrubber_control_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..0d807e2c --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_scrubber_control_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_scrubber_control_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_scrubber_control_holo_dark.png Binary files differnew file mode 100755 index 00000000..b7c6fdbb --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_scrubber_control_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_widget_activity_01.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_widget_activity_01.png Binary files differnew file mode 100755 index 00000000..ff2ca71f --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_widget_activity_01.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_widget_activity_02.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_widget_activity_02.png Binary files differnew file mode 100755 index 00000000..bb437cd0 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Progress/tw_widget_activity_02.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_bottom_edge.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_bottom_edge.png Binary files differdeleted file mode 100644 index 7259d14b..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_bottom_edge.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_bottom_glow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_bottom_glow.png Binary files differdeleted file mode 100644 index 5b150b06..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_bottom_glow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_bottom_edge.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_bottom_edge.png Binary files differdeleted file mode 100644 index ded117d9..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_bottom_edge.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_bottom_glow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_bottom_glow.png Binary files differdeleted file mode 100644 index 96f3684c..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_bottom_glow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_left_edge.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_left_edge.png Binary files differdeleted file mode 100644 index c7950f4f..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_left_edge.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_left_glow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_left_glow.png Binary files differdeleted file mode 100644 index 5337045a..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_left_glow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_right_edge.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_right_edge.png Binary files differdeleted file mode 100644 index 4037cb5b..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_right_edge.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_right_glow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_right_glow.png Binary files differdeleted file mode 100644 index 7319c76b..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_circle_right_glow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_left_edge.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_left_edge.png Binary files differdeleted file mode 100644 index 413fccdf..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_left_edge.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_left_glow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_left_glow.png Binary files differdeleted file mode 100644 index 11015e41..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_left_glow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_right_edge.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_right_edge.png Binary files differdeleted file mode 100644 index e14f69bb..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_right_edge.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_right_glow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_right_glow.png Binary files differdeleted file mode 100644 index 69ed30be..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_right_glow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_top_edge.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_top_edge.png Binary files differdeleted file mode 100644 index 6138e661..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_top_edge.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_top_glow.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_top_glow.png Binary files differdeleted file mode 100644 index 73b2fc9a..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/bouncing_top_glow.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-bottom.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-bottom.png Binary files differnew file mode 100644 index 00000000..326b95d3 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-bottom.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-left.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-left.png Binary files differnew file mode 100644 index 00000000..8673b014 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-left.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-right.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-right.png Binary files differnew file mode 100644 index 00000000..d2281f95 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-right.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-top.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-top.png Binary files differnew file mode 100644 index 00000000..980d474f --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Scroller/scrollbar-bouncing-effect-top.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Title_bar/b_detail_bg_cover.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/Title_bar/b_detail_bg_cover.png Binary files differdeleted file mode 100644 index bfa456c4..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/Title_bar/b_detail_bg_cover.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_field_btn_clear.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_field_btn_clear.png Binary files differnew file mode 100644 index 00000000..eff4c22d --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_field_btn_clear.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_field_btn_clear_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_field_btn_clear_press.png Binary files differnew file mode 100644 index 00000000..778108ea --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_field_btn_clear_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_search_icon.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_search_icon.png Binary files differnew file mode 100644 index 00000000..c634b56a --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_search_icon.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_brightness_01.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_brightness_01.png Binary files differnew file mode 100644 index 00000000..8f9214fa --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_brightness_01.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_brightness_02.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_brightness_02.png Binary files differnew file mode 100644 index 00000000..0df85e03 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_brightness_02.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_volume_01.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_volume_01.png Binary files differnew file mode 100644 index 00000000..1f410236 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_volume_01.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_volume_02.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_volume_02.png Binary files differnew file mode 100644 index 00000000..0f6f7f4b --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_button_volume_02.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_handle.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_handle.png Binary files differnew file mode 100644 index 00000000..3a646866 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_handle.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_handle_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_handle_press.png Binary files differnew file mode 100644 index 00000000..ecb7e42f --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_handle_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_popup_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_popup_bg.png Binary files differnew file mode 100644 index 00000000..ef0a56ec --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/00_slider_popup_bg.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_back.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_back.png Binary files differnew file mode 100644 index 00000000..76183717 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_back.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_back_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_back_press.png Binary files differnew file mode 100644 index 00000000..76183717 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_back_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_call.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_call.png Binary files differnew file mode 100644 index 00000000..5b837fd1 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_call.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_call_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_call_press.png Binary files differnew file mode 100644 index 00000000..5b837fd1 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_call_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_check.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_check.png Binary files differnew file mode 100644 index 00000000..8df9a9cf --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_check.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_check_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_check_press.png Binary files differnew file mode 100644 index 00000000..8df9a9cf --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_check_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_cancel.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_cancel.png Binary files differnew file mode 100644 index 00000000..a5b56394 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_cancel.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_cancel_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_cancel_press.png Binary files differnew file mode 100644 index 00000000..a5b56394 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_cancel_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_closed.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_closed.png Binary files differnew file mode 100644 index 00000000..452209df --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_closed.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_closed_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_closed_press.png Binary files differnew file mode 100644 index 00000000..452209df --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_closed_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_minus.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_minus.png Binary files differnew file mode 100644 index 00000000..0f0170f7 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_minus.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_minus_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_minus_press.png Binary files differnew file mode 100644 index 00000000..0f0170f7 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_minus_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_opened.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_opened.png Binary files differnew file mode 100644 index 00000000..5b5cbd04 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_opened.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_opened_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_opened_press.png Binary files differnew file mode 100644 index 00000000..5b5cbd04 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_opened_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_send.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_send.png Binary files differnew file mode 100644 index 00000000..521b4b22 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_send.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_send_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_send_press.png Binary files differnew file mode 100644 index 00000000..521b4b22 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_expand_send_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_gear.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_gear.png Binary files differnew file mode 100644 index 00000000..8e4b359e --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_gear.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_gear_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_gear_press.png Binary files differnew file mode 100644 index 00000000..8e4b359e --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_gear_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_grid.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_grid.png Binary files differnew file mode 100644 index 00000000..ca6b7690 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_grid.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_grid_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_grid_press.png Binary files differnew file mode 100644 index 00000000..ca6b7690 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_grid_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_home.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_home.png Binary files differnew file mode 100644 index 00000000..1ba38209 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_home.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_home_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_home_press.png Binary files differnew file mode 100644 index 00000000..1ba38209 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_home_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_info.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_info.png Binary files differnew file mode 100644 index 00000000..1e5d984f --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_info.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_info_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_info_press.png Binary files differnew file mode 100644 index 00000000..1e5d984f --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_info_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_left.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_left.png Binary files differnew file mode 100644 index 00000000..b4eca6db --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_left.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_left_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_left_press.png Binary files differnew file mode 100644 index 00000000..b4eca6db --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_left_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_plus.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_plus.png Binary files differnew file mode 100644 index 00000000..12cbe299 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_plus.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_plus_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_plus_press.png Binary files differnew file mode 100644 index 00000000..12cbe299 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_plus_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_refresh.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_refresh.png Binary files differnew file mode 100644 index 00000000..33ff934d --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_refresh.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_refresh_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_refresh_press.png Binary files differnew file mode 100644 index 00000000..33ff934d --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_refresh_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_rename.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_rename.png Binary files differnew file mode 100644 index 00000000..e3603b86 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_rename.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_rename_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_rename_press.png Binary files differnew file mode 100644 index 00000000..e3603b86 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_rename_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_right.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_right.png Binary files differnew file mode 100644 index 00000000..659ea765 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_right.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_right_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_right_press.png Binary files differnew file mode 100644 index 00000000..659ea765 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_right_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_search.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_search.png Binary files differnew file mode 100644 index 00000000..12f47148 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_search.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_search_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_search_press.png Binary files differnew file mode 100644 index 00000000..12f47148 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_search_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_star.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_star.png Binary files differnew file mode 100644 index 00000000..f6083945 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_star.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_star_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_star_press.png Binary files differnew file mode 100644 index 00000000..f6083945 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_star_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_warning.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_warning.png Binary files differnew file mode 100644 index 00000000..4a39960a --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_warning.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_warning_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_warning_press.png Binary files differnew file mode 100644 index 00000000..4a39960a --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_button_warning_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump.png Binary files differnew file mode 100644 index 00000000..3692cbdb --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_left.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_left.png Binary files differnew file mode 100644 index 00000000..9c299acf --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_left.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_left_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_left_press.png Binary files differnew file mode 100644 index 00000000..9c299acf --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_left_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_press.png Binary files differnew file mode 100644 index 00000000..3692cbdb --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/controls/button/00_icon_jump_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/b_list_focus_bg.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/b_list_focus_bg.png Binary files differdeleted file mode 100755 index 0e0e92c3..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/b_list_focus_bg.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/b_list_focus_bg_ef.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/b_list_focus_bg_ef.png Binary files differdeleted file mode 100755 index 6a6e2b78..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/b_list_focus_bg_ef.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_add_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_add_holo_dark.png Binary files differnew file mode 100644 index 00000000..bd24e0eb --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_add_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_delete_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_delete_holo_dark.png Binary files differnew file mode 100644 index 00000000..ccbb7006 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_delete_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_setting_holo_dark.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_setting_holo_dark.png Binary files differnew file mode 100644 index 00000000..5b902230 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_setting_holo_dark.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_sub_line_left.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_sub_line_left.png Binary files differdeleted file mode 100755 index a6fbfd1a..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_sub_line_left.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_sub_line_right.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_sub_line_right.png Binary files differdeleted file mode 100755 index 6fa22494..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/images/listview/tw_list_sub_line_right.png +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_Back.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_Back.png Binary files differnew file mode 100644 index 00000000..815a3438 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_Back.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_Back_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_Back_press.png Binary files differnew file mode 100644 index 00000000..fcbc3466 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_Back_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_SIP_close_press_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_SIP_close_press_web.png Binary files differnew file mode 100644 index 00000000..5d036a34 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_SIP_close_press_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_SIP_close_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_SIP_close_web.png Binary files differnew file mode 100644 index 00000000..76f10ec9 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_SIP_close_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_cancel_press_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_cancel_press_web.png Binary files differnew file mode 100644 index 00000000..872ad335 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_cancel_press_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_cancel_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_cancel_web.png Binary files differnew file mode 100644 index 00000000..3c37e96a --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_cancel_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_delete_press_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_delete_press_web.png Binary files differnew file mode 100644 index 00000000..829c8b05 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_delete_press_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_delete_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_delete_web.png Binary files differnew file mode 100644 index 00000000..d105c7b1 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_delete_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_done_press_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_done_press_web.png Binary files differnew file mode 100644 index 00000000..b56c0f19 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_done_press_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_done_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_done_web.png Binary files differnew file mode 100644 index 00000000..7b58fc45 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_done_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_edit_press_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_edit_press_web.png Binary files differnew file mode 100644 index 00000000..b52b2b6a --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_edit_press_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_edit_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_edit_web.png Binary files differnew file mode 100644 index 00000000..a56d1f69 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_edit_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_more.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_more.png Binary files differnew file mode 100644 index 00000000..95f17c75 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_more.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_more_press.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_more_press.png Binary files differnew file mode 100644 index 00000000..d4d6951e --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_more_press.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_plus_press_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_plus_press_web.png Binary files differnew file mode 100644 index 00000000..f15fb719 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_plus_press_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_plus_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_plus_web.png Binary files differnew file mode 100644 index 00000000..d49406f6 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_plus_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_search_press_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_search_press_web.png Binary files differnew file mode 100644 index 00000000..464c5c77 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_search_press_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_search_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_search_web.png Binary files differnew file mode 100644 index 00000000..7788bece --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_search_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_select_all_press_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_select_all_press_web.png Binary files differnew file mode 100644 index 00000000..32ae22e4 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_select_all_press_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_select_all_web.png b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_select_all_web.png Binary files differnew file mode 100644 index 00000000..ce4af60f --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/images/page/00_icon_select_all_web.png diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/style.changeable.less b/tau/src/css/profile/wearable/changeable/theme-changeable/style.changeable.less new file mode 100644 index 00000000..25ed9896 --- /dev/null +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/style.changeable.less @@ -0,0 +1,4 @@ +@import "theme.changeable.less"; +@import "fixedUIStyle.less"; +@import "9-patch.less"; +@import "../wearable.less"; diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/theme.color.less b/tau/src/css/profile/wearable/changeable/theme-changeable/theme.changeable.less index 09a875f0..9e61637d 100644 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/theme.color.less +++ b/tau/src/css/profile/wearable/changeable/theme-changeable/theme.changeable.less @@ -19,12 +19,6 @@ @color_actionbar_normal_disable: B052L1D; /**************************************************************************** - Circle Progress Bar -****************************************************************************/ -@color_circleprogressbar_bg: B065L3; -@color_circleprogressbar_value: B065L2; - -/**************************************************************************** Progress Bar ****************************************************************************/ @color_progressbar_text: @color_text; @@ -36,13 +30,13 @@ Processing ****************************************************************************/ @color_processing_text: T097; -@color_processing: B065L6; +@color_processing_activity_01: B066L1; +@color_processing_activity_02: B066L2; /**************************************************************************** Toggle Switch ****************************************************************************/ @color_switch_text: T0811; -@color_switch_sub_text: T161; @color_toggle_on_bg: W014L1; @color_toggle_on_bg_press: W014L1P; @color_toggle_on_bg_dim: W014L1D; @@ -98,10 +92,6 @@ @color_button_green_press_bg: W014P; @color_button_green_disable_bg: W014D; - -@color_button_icon_bg: F022L1i; - - /*************************************************************************** Popup ***************************************************************************/ @@ -148,12 +138,6 @@ @color_indexscrollbar_indicator_text_selected: T0312P; /*************************************************************************** - circular index scrollbar -***************************************************************************/ -@color_circularindexscrollbar_indicator_bg: B0731; -@color_circularindexscrollbar_indicator_text: T0312P; - -/*************************************************************************** Listview ***************************************************************************/ @color_list_press_bg: B041P; @@ -167,15 +151,6 @@ @color_list_actionicon_image_disable: F022L1iD; @color_list_divider_bg: B012; @color_list_divider_text: T0231; -@color_listview_sub_text: T022; -@color_listview_sub_text_press: T022P; -@color_listview_sub_text_dim: T022D; - -/**************************************************************************** - Listview with Marquee -****************************************************************************/ -@color_listview_fadeout_bg: B0211; -@color_listview_fadeout_pressed_bg: B041P; /*************************************************************************** Scroller @@ -183,16 +158,10 @@ @color_tab_normal: B0514; @color_tab_active: B0514P1; @color_scroller_scrollbar_color: B071; -@color_scroller_bouncing_effect_glow: B018E; -@color_scroller_bouncing_effect_edge: B019; -@bg_scroller_bouncing_effect_top_glow: "./images/Scroller/bouncing_top_glow.png"; -@bg_scroller_bouncing_effect_top_edge: "./images/Scroller/bouncing_top_edge.png"; -@bg_scroller_bouncing_effect_right_glow: "./images/Scroller/bouncing_right_glow.png"; -@bg_scroller_bouncing_effect_right_edge: "./images/Scroller/bouncing_right_edge.png"; -@bg_scroller_bouncing_effect_bottom_glow: "./images/Scroller/bouncing_bottom_glow.png"; -@bg_scroller_bouncing_effect_bottom_edge: "./images/Scroller/bouncing_bottom_edge.png"; -@bg_scroller_bouncing_effect_left_glow: "./images/Scroller/bouncing_left_glow.png"; -@bg_scroller_bouncing_effect_left_edge: "./images/Scroller/bouncing_left_edge.png"; +@bg_scroller_bouncing_effect_top: "./images/Scroller/scrollbar-bouncing-effect-top.png"; +@bg_scroller_bouncing_effect_bottom: "./images/Scroller/scrollbar-bouncing-effect-bottom.png"; +@bg_scroller_bouncing_effect_left: "./images/Scroller/scrollbar-bouncing-effect-left.png"; +@bg_scroller_bouncing_effect_right: "./images/Scroller/scrollbar-bouncing-effect-right.png"; /*************************************************************************** Swipe list @@ -227,32 +196,3 @@ @color_checkboxradio_checkbox_line: W231; @color_checkboxradio_checkbox_line_press: W231P; @color_checkboxradio_checkbox_line_dim: W231D; - -/*************************************************************************** - Page Indicator -***************************************************************************/ -@color_page_indicator_normal: T0211D; -@color_page_indicator_selected: W1911; - -/*************************************************************************** - More options -***************************************************************************/ -@color_moreoptions_bg: #fafafa; - -/*************************************************************************** - View Switcher -***************************************************************************/ -@color_viewswitcher_dim_bg: #000000; - -/*************************************************************************** - Selector -***************************************************************************/ -@color_selector_layer_bg: B0511D; -@color_selector_icon_bg: B0554; -@color_selector_icon_bg_press: B0554P; -@color_selector_icon_bg_dim: B0554D; -@color_selector_handler_bg: B057; -@color_selector_handler_border: B057L1; -@color_selector_handler_border_press: B057L1P; -@color_selector_layer_sub1_bg: B058L1; -@color_selector_layer_sub2_bg: B058L2;
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/theme.circle.less b/tau/src/css/profile/wearable/changeable/theme-changeable/theme.circle.less deleted file mode 100644 index 3f9c8d44..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/theme.circle.less +++ /dev/null @@ -1,23 +0,0 @@ -@import "../theme-circle/theme.changeable.less"; -@import "../theme-circle/fixedUIStyle.less"; -@import "../theme-circle/theme.layout.less"; -@import "../theme-circle/9-patch.less"; - -@import "../../../prefixer.less"; -@import "../../../prefixer.ext.less"; -@import "../theme-circle/layout.less"; -@import "../theme-circle/core.less"; -@import "../theme-circle/toggleswitch.less"; -@import "../theme-circle/popup.less"; -@import "../theme-circle/listview.less"; -@import "../theme-circle/listview.extra.less"; -@import "../theme-circle/checkboxradio.less"; -@import "../theme-circle/button.less"; -@import "../theme-circle/circleprogressbar.less"; -@import "../theme-circle/indexscrollbar.less"; -@import "../theme-circle/drawer.less"; -@import "../theme-circle/marquee.less"; -@import "../theme-circle/pageindicator.less"; -@import "../theme-circle/progress.less"; -@import "../theme-circle/scroller.less"; -@import "../theme-circle/test.less"; diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/theme.layout.less b/tau/src/css/profile/wearable/changeable/theme-changeable/theme.layout.less deleted file mode 100644 index c6048a6e..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/theme.layout.less +++ /dev/null @@ -1,8 +0,0 @@ -/************************ -Listview -*************************/ -@list_item_min_height: 100 * @unit_base; -@list_item_anchor_padding: 26*@unit_base 8*@unit_base 26*@unit_base 16*@unit_base; -@list_item_padding: 26*@unit_base 8*@unit_base 26*@unit_base 16*@unit_base; -@font_size_list_item: 40 * @unit_base; -@list_anchor_margin: -26*@unit_base -16*@unit_base; diff --git a/tau/src/css/profile/wearable/changeable/theme-changeable/theme.less b/tau/src/css/profile/wearable/changeable/theme-changeable/theme.less deleted file mode 100644 index fa3fdc58..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-changeable/theme.less +++ /dev/null @@ -1,9 +0,0 @@ -@import "theme.color.less"; -@import "theme.layout.less"; -@import "fixedUIStyle.less"; -@import "9-patch.less"; -@import "../wearable.less"; - -.tau-info-theme:after { - content: "default"; -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/9-patch.less b/tau/src/css/profile/wearable/changeable/theme-circle/9-patch.less deleted file mode 100644 index e69de29b..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/9-patch.less +++ /dev/null diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/button.less b/tau/src/css/profile/wearable/changeable/theme-circle/button.less deleted file mode 100644 index 28786a60..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/button.less +++ /dev/null @@ -1,84 +0,0 @@ -/*************************************************************************** - button -***************************************************************************/ -.ui-default { - color: @color_button_default_text; - background-color: @color_button_default_normal_bg; - - a&:active:hover, &:enabled:active:hover { - background-color: @color_button_default_press_bg; - } - - &:enabled:focus { - background-color: @color_button_default_focus_bg; - } - - a&.ui-state-disabled, &:disabled { - color: @color_button_default_text_disable; - background-color: @color_button_default_disable_bg; - } -} - -.ui-color-red { - color: @color_button_red_text; - background-color: @color_button_red_normal_bg; - - a&:active:hover, &:enabled:active:hover { - background-color: @color_button_red_press_bg; - } - - &:enabled:focus { - background-color: @color_button_red_focus_bg; - } - - a&.ui-state-disabled, &:disabled { - color: @color_button_red_text_disable; - background-color: @color_button_red_disable_bg; - } -} - -.ui-color-orange { - color: @color_button_orange_text; - background-color: @color_button_orange_normal_bg; - - a&:active:hover, &:enabled:active:hover { - background-color: @color_button_orange_press_bg; - } - - &:enabled:focus { - background-color: @color_button_orange_focus_bg; - } - - a&.ui-state-disabled, &:disabled { - color: @color_button_orange_text_disable; - background-color: @color_button_orange_disable_bg; - } -} - -.ui-color-green { - color: @color_button_green_text; - background-color: @color_button_green_normal_bg; - - a&:active:hover, &:enabled:active:hover { - background-color: @color_button_green_press_bg; - } - - &:enabled:focus { - background-color: @color_button_green_focus_bg; - } - - a&.ui-state-disabled, &:disabled { - color: @color_button_green_text_disable; - background-color: @color_button_green_disable_bg; - } -} - -.ui-grid-col-btn (@counter) when (@counter > 0) { - .ui-grid-col-btn((@counter - 1)); - - .ui-grid-col-@{counter} > .ui-btn { - border-left:solid 1px @color_bg_cover; - } -} - -.ui-grid-col-btn(3); diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/checkboxradio.less b/tau/src/css/profile/wearable/changeable/theme-circle/checkboxradio.less deleted file mode 100644 index 9f5a667a..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/checkboxradio.less +++ /dev/null @@ -1,141 +0,0 @@ -/*************************************************************************** - checkbox / radio button -***************************************************************************/ -input[type="checkbox"]:not(.ui-switch-input), -input[type="radio"] { - height: 86px; - width: 86px; -} - -input[type="checkbox"]:not(.ui-switch-input) { - //gray bg, light gray check mark - -webkit-mask-image: none; - background: -webkit-radial-gradient(@color_checkboxradio_checkbox_bg_uncheck 67%, transparent 71%, transparent), url("images/Controller_icon/Check/ref_btn_check_holo_dark.png") no-repeat; - background-size: 100% 100%; - //green bg - &::before { - content: ""; - -webkit-mask-image: none; - background: -webkit-radial-gradient(@color_checkboxradio_checkbox_bg 67%, transparent 71%, transparent); - height: 100%; - width: 100%; - opacity: 0; - position: absolute; - .transition(all 300ms ease-in); - } - // white check mark - &::after { - .mask-image('images/Controller_icon/Check/tw_btn_check_holo_dark.png'); - .mask-repeat(repeat); - .mask-position(center bottom); - background-color: @color_checkboxradio_check; - height: 0; - .transition-property(height); - .transition-duration(500ms); - bottom: 0; - .mask-size(100%); - } - &:checked { - &::before { - .animation(checkon 300ms ease-out); - .transition(none); - -webkit-mask-image: none; - background: -webkit-radial-gradient(@color_checkboxradio_checkbox_bg 67%, transparent 71%, transparent); - opacity: 1; - } - &::after { - height: 100%; - } - } - - &:active { - background-color: transparent; - &::after { - width: 100%; - height: 0; - } - &:checked { - &::before { - -webkit-mask-image: none; - background: -webkit-radial-gradient(@color_checkboxradio_checkbox_bg 67%, transparent 71%, transparent); - } - &::after { - background-color: @color_checkboxradio_check; - height: 100%; - } - } - } -} - -//check on animation -@-webkit-keyframes checkon { - .transition-checkon(); -} -@-o-keyframes slideupinreverse { - .transition-checkon(); -} -@-ms-keyframes slideupinreverse { - .transition-checkon(); -} -@-moz-keyframes slideupinreverse { - .transition-checkon(); -} -@keyframes slideupinreverse { - .transition-checkon(); -} - -.transition-checkon() { - from { - opacity: 0.5; - .transform(scale(0.8)); - } - 100% { - opacity: 1.0; - .transform(scale(1.0)); - } -} - -input[type="radio"] { - background: -webkit-radial-gradient(transparent, transparent 59%, @color_checkboxradio_radiobox_line 63%, @color_checkboxradio_radiobox_line 68%, transparent 72%, transparent); - -webkit-mask-image: none; - &::after { - content: ""; - .mask-image('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); - background-color: @color_checkboxradio_radio_off; - } - &::before { - content: ""; - background-color: @color_checkboxradio_radio; - .mask-image('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); - .mask-repeat(no-repeat); - width: 100%; - height: 100%; - .mask-size(100% 100%); - position: absolute; - .transform(scale(0)); - .transition(transform 300ms); - } - &:checked { - &::before { - background-color: @color_checkboxradio_radio; - .mask-image('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); - .transform(scale(1.0)); - z-index: 1; - } - } - &:active { - background-color: transparent; - -webkit-mask-image: initial; - &::after { - .mask-image('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); - background-color: @color_checkboxradio_radio_off; - } - &:checked::before { - background-color: @color_checkboxradio_radio; - .mask-image('images/Controller_icon/Radio/tw_btn_radio_holo_dark.png'); - } - &:checked::after { - content: none; - } - } -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/circleprogressbar.less b/tau/src/css/profile/wearable/changeable/theme-circle/circleprogressbar.less deleted file mode 100644 index 8cd0cae1..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/circleprogressbar.less +++ /dev/null @@ -1,31 +0,0 @@ -/*************************************************************************** - circle progress bar -***************************************************************************/ -.ui-progressbar { - .ui-progressbar-value { - .ui-progressbar-value-left { - border: 13 * @unit_base solid @color_circleprogressbar_value; - } - - .ui-progressbar-value-right { - border: 13 * @unit_base solid @color_circleprogressbar_value; - } - } - - .ui-progressbar-bg { - border: 13 * @unit_base solid @color_circleprogressbar_bg; - } - - &.ui-progressbar-small { - .ui-progressbar-value { - .ui-progressbar-value-left, - .ui-progressbar-value-right { - border: 5 * @unit_base solid @color_circleprogressbar_value; - } - } - - .ui-progressbar-bg { - border: 5 * @unit_base solid @color_circleprogressbar_bg; - } - } -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/circularindexscrollbar.less b/tau/src/css/profile/wearable/changeable/theme-circle/circularindexscrollbar.less deleted file mode 100644 index 39c5f289..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/circularindexscrollbar.less +++ /dev/null @@ -1,26 +0,0 @@ -/*************************************************************************** - circular index scroll bar -***************************************************************************/ -.ui-circularindexscrollbar { - .ui-circularindexscrollbar-indexbar { - background: -webkit-radial-gradient(center, ellipse cover, transparent 59%, @color_circularindexscrollbar_bg 59%); - } - - .ui-circularindexscrollbar-index { - span { - color: @color_circularindexscrollbar_text_normal; - } - - &.ui-state-selected span{ - color: @color_circularindexscrollbar_text_selected; - } - } - - .ui-circularindexscrollbar-indicator { - background-color: @color_circularindexscrollbar_indicator_bg; - } - - .ui-circularindexscrollbar-indicator-text { - color: @color_circularindexscrollbar_indicator_text; - } -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/core.less b/tau/src/css/profile/wearable/changeable/theme-circle/core.less deleted file mode 100644 index 1c9deb2b..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/core.less +++ /dev/null @@ -1,25 +0,0 @@ -/* - * Common definition for theme - */ -/*************************************************************** - default font size (base font from WRT) - => small: 13px - => normal: 17px - => large: 20px - -This is only applied to gear2. -so, we set @font_size_default as 17px on gear2 and it was changed to 16px since gear-S. -This value only used for @rem_base, not for html font-size -html font-size is set by WRT base font-size -***************************************************************/ -@font_size_default: 16px; // Default unit font size. DO NOT USE THIS VALUE IN WIDGET CSS! - -@rem_base: (1rem/@font_size_default); -@em_base: 1em/@font_size_default; // WARNING: Don't use em unit! This value is to be removed. -@px_base: 1px; - -@unit_base: @rem_base; - -a { - color: @color_text; -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/drawer.less b/tau/src/css/profile/wearable/changeable/theme-circle/drawer.less deleted file mode 100644 index a39c87d9..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/drawer.less +++ /dev/null @@ -1,11 +0,0 @@ -/*************************************************************************** - drawer -***************************************************************************/ -.ui-drawer { - background-color : @color_drawer_bg; - border-radius: 50%; -} - -.ui-drawer-overlay { - background-color: @color_actionbar_title_bg_disable; -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/fixedUIStyle.less b/tau/src/css/profile/wearable/changeable/theme-circle/fixedUIStyle.less deleted file mode 100644 index 60ce8750..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/fixedUIStyle.less +++ /dev/null @@ -1,78 +0,0 @@ -/************************************************************************/ -/* fixedUIStyle.less */ -/************************************************************************/ -/* When system font-size is changed, winset size (ex. header, footer, button, etc, - include font) also changed. But in UX guide, some UI elements should have fixed - size regardless of system font size. - So, this less file supports fixed style for some elements. - - Layout: header, footer, button - - Popup : popup header, popup footer - - toggleswitch - - progress: text for ratio -*/ - -/***********************************************************************/ -/* Layout(FIXED) */ -/***********************************************************************/ -@fixed_header_height: 115px; -@fixed_header_small_height: 88px; -@fixed_header_has_sub_title_height: 89px; -@fixed_header_line_height: 36px; -@fixed_header_expand_height: 203px; -@fixed_header_expand_title_top: 142px; -@fixed_header_title_padding_top: 54px; -@fixed_header_small_title_padding_top: 44px; -@fixed_header_has_sub_title_padding_top: 38px; -@fixed_header_title_font_size: 30px; -@fixed_header_title_padding: 64px; -@fixed_header_title_icon_padding: 60px; -@fixed_header_title_icon_position_x: 16px; -@fixed_header_title_icon_position_y: 14px; -@fixed_header_title_icon_size: 34px; -@fixed_header_more_title_padding: 78px; -@fixed_header_more_width: 140px; -@fixed_header_more_height: 140px; -@fixed_footer_btn_width: 700px; -@fixed_footer_btn_height: 700px; -@fixed_footer_btn_margin_bottom: -22px; -@fixed_footer_height: 98px; -@fixed_page_footer_padding_bottom: 23px; - -/**********************************************************************/ -/* Popup(FIXED) */ -/**********************************************************************/ -@fixed_popup_header_height: 122px; -@fixed_popup_header_font_size: 30px; -@fixed_popup_header_padding_top: 53px; -@fixed_popup_header_padding_bottom: 33px; -@fixed_popup_header_padding_left: 61px; -@fixed_popup_header_padding_right: 61px; -@fixed_popup_footer_height: 700px; -@fixed_popup_footer_width: 700px; -@fixed_popup_icon_width: 50px; -@fixed_popup_icon_height: 50px; -@fixed_popup_btn_margin: 5px; - -/**********************************************************************/ -/* ToggleSwitch(FIXED) */ -/**********************************************************************/ -@fixed_toggleswitch_text_margin_top: 60px; -@fixed_toggleswitch_text_margin_bottom: 48px; -@fixed_toggleswitch_text_font_size: 34px; -@fixed_toggleswitch_sub_text_margin_top: 48px; -@fixed_toggleswitch_sub_text_margin_bottom: 55px; -@fixed_toggleswitch_sub_text_font_size: 26px; -@fixed_toggleswitch_width: 86px; -@fixed_toggleswitch_height: 86px; -@fixed_toggleswitch_handler_width: 86px; -@fixed_toggleswitch_handler_height: 86px; -@fixed_toggleswitch_handle_on_margin_left: 0; -@fixed_toggleswitch_handle_position: 0 -49px; -@fixed_toggleswitch_on_position: 0 -98px; -@fixed_toggleswitch_off_position: 0 -147px; - -/**********************************************************************/ -/* List(FIXED) */ -/**********************************************************************/ -@fixed_list_btn_icon_size: 60px; -@fixed_list_btn_icon_margin: 29px; diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/indexscrollbar.less b/tau/src/css/profile/wearable/changeable/theme-circle/indexscrollbar.less deleted file mode 100644 index fa763d4c..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/indexscrollbar.less +++ /dev/null @@ -1,3 +0,0 @@ -.ui-indexscrollbar { - display: none; -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/layout.less b/tau/src/css/profile/wearable/changeable/theme-circle/layout.less deleted file mode 100644 index 70940cf0..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/layout.less +++ /dev/null @@ -1,164 +0,0 @@ -/*************************************************************************** - Common Style - -***************************************************************************/ -/*************************************************************************** - Development Tip - If you want to implement specific css code of circle device, - you should implement specific code here. - But when you implement code, you should check duplicate value - between common/layout.less and this file. - If you have duplicate value, please change static value to variable value. -***************************************************************************/ -body { - background: @color_bg_cover; - color : @color_text; -} - -.ui-header { - height: @fixed_header_height; - line-height: @fixed_header_line_height; - background-color: transparent; - - .ui-title { - color: @color_actionbar_title_text; - text-align: center; - padding-top: @fixed_header_title_padding_top; - margin-left: 40 * @unit_base; - margin-right: 40 * @unit_base; - padding-left: 24 * @unit_base; - padding-right: 24 * @unit_base; - &.ui-icon { - background: none !important; - padding-left: 24 * @unit_base; - } - } - - &.ui-header-small { - height: @fixed_header_small_height; - .ui-title { - padding-top: @fixed_header_small_title_padding_top; - } - } - - &.ui-has-more { - .ui-title { - padding-right: 24 * @unit_base; - -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - } - .ui-more { - position: fixed; - top: 50%; - right: -@fixed_header_more_width / 2 * @unit_base; - width: @fixed_header_more_width; - height: @fixed_header_more_height; - transform: translate(0, -50%); - &.ui-icon-overflow { - .mask-image(); - .mask-position(initial); - background-color: transparent; - &[disabled="disabled"] { - .mask-position(initial); - } - &:active { - background-color: transparent; - } - } - &::before { - content: ""; - position: absolute; - width: 140 * @unit_base; - height: 140 * @unit_base; - background-color: @color_moreoptions_handler; - border-radius: 50%; - .transform(scale(0)); - top: 0; - right: 0; - .transition(transform ease-out 300ms); - } - &:active::before { - .transition(transform ease-out 300ms); - .transform(scale(1)); - } - &::after { - content: ""; - position: absolute; - width: 32 * @unit_base; - height: 36 * @unit_base; - .mask-box-image("images/Actionbar/tw_ic_menu_moreoverflow_holo_dark.png"); - background-color: @color_moreoptions_bg; - border-radius: 50%; - top: 50%; - right: 50%; - .transform(translate(0, -50%)); - } - } - } -} -.ui-page { - background-image: -webkit-radial-gradient(transparent -200%, transparent -190%, @color_bg_cover 69%), -webkit-radial-gradient(@color_bg 71%, transparent 0px); - background-position: 0px 0px, 0px 0px; - .ui-content { - text-align: center; - } - .ui-footer.ui-bottom-button{ - position: fixed !important; - bottom: 0; - z-index: 1000; - height: 28%; - .ui-btn { - left: 50%; - width: 100%; - height: 130%; - position: relative; - margin: 0; - padding: 8% 22% 16%; - background: -webkit-radial-gradient(center, circle cover, @color_footer_button_bg 50%, transparent 50%); - background-size: 300% 840%; - background-position: 50% 17%; - background-repeat: no-repeat; - -webkit-transition: transform 150ms ease-out; - -webkit-transform: translate(-50%, 0); - - &:active { - background: -webkit-radial-gradient(center, circle cover, @color_footer_button_bg_press 50%, transparent 50%); - background-position: 50% 17%; - background-repeat: no-repeat; - background-size: 300% 840%; - -webkit-transform: translate(-50%, -23%); - } - - &.ui-btn-icon-only::before { - top: 0; - -webkit-transform: translate(-50%, 56%); - -webkit-transition: transform 150ms ease-out; - } - } - - } -} - -/*************************************************************************** - Page Scroll -***************************************************************************/ -.ui-page.ui-scroll-on { - overflow: hidden; - .touch-scrolling-clear(); - - .ui-content { - margin-top: 122 * @unit_base; - padding-bottom: 114 * @unit_base; - padding-top: 0; - } - .ui-header { - ~ .ui-content { - margin-top: 0; - } - ~ .ui-scroller > .ui-content { - margin-top: 0; - } - } - .ui-content ~ .ui-footer:not(.ui-expandable-footer) { - margin-top: -85 * @unit_base; - } -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/listview.extra.less b/tau/src/css/profile/wearable/changeable/theme-circle/listview.extra.less deleted file mode 100644 index 43e581d0..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/listview.extra.less +++ /dev/null @@ -1,41 +0,0 @@ -/*************************************************************************** - listview extra -***************************************************************************/ -.ui-listview .ui-li-has-action-icon { - .ui-action-text { - &::after { - background-color: @color_text; - } - } - - .ui-action-delete { - background-color: @color_list_actionicon_image_normal; - } - .ui-action-setting { - background-color: @color_list_actionicon_image_normal; - } - .ui-action-add { - background-color: @color_list_actionicon_image_normal; - } - - &.ui-li-active { - & .ui-action-text:active { - background-color: @color_list_press_bg; - color: @color_listview_text_press; - } - } - - .ui-action-delete:active, .ui-action-setting:active, .ui-action-add:active { - background-color: @color_list_press_bg; - color: @color_listview_text_press; - } -} - -.ui-listview .li-divider { - height: 33 * @unit_base; - min-height: 33 * @unit_base; - line-height: 31 * @unit_base; - background-color: @color_list_divider_bg; - color: @color_list_divider_text; - padding: 0; -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/listview.less b/tau/src/css/profile/wearable/changeable/theme-circle/listview.less deleted file mode 100644 index 5a2d5203..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/listview.less +++ /dev/null @@ -1,129 +0,0 @@ -/*************************************************************************** - listview -***************************************************************************/ -.ui-listview { - li { - font-size: @font_size_list_item; - min-height: @list_item_min_height; - padding: @list_item_padding; - border:0 none; - border-bottom: 1.5px solid transparent; - border-image: -webkit-linear-gradient(0deg, transparent, #245B85, transparent) 1; - color: @color_listview_text; - text-align: center; - line-height: @list_item_line_height; - - &.ui-listview-divider { - height: 33 * @unit_base; - min-height: 33 * @unit_base; - line-height: 31 * @unit_base; - background-color: transparent; - color: @color_list_divider_text; - display: -webkit-flex; - padding: 0; - &::before { - content:""; - height: 100%; - width: auto; - .mask-image("images/listview/tw_list_sub_line_left.png"); - .mask-repeat(no-repeat); - .mask-size(100% 2px); - .mask-position(-12 * @unit_base 50%); - background: @color_list_divider_bg; - -webkit-flex: 1 - } - &::after { - content:""; - height: 100%; - width: auto; - .mask-image("images/listview/tw_list_sub_line_right.png"); - .mask-repeat(no-repeat); - .mask-size(100% 2px); - .mask-position(12 * @unit_base 50%); - background: @color_list_divider_bg; - -webkit-flex: 1 - } - } - &.ui-li-btn { - padding: 0; - .ui-btn { - padding: @list_btn_padding; - margin: 0; - line-height: inherit; - } - - &.ui-grid-col-2 .ui-btn { - padding: @list_2btn_padding; - } - &.ui-grid-col-3 { - .ui-btn { - padding: @list_3btn_padding; - height: 100%; - text-indent: -9999px; - } - } - } - > * { - color: @color_listview_text; - } - - > a, button { - padding: @list_item_anchor_padding; - margin: @list_anchor_margin; - } - - &.ui-li-active { - background-color: transparent; - color: @color_listview_text_press; - &::before{ - content: ""; - position: absolute; - width: 100%; - height: 100%; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - -webkit-mask-image: url("images/List/b_list_focus_bg_108.png"); - -webkit-mask-size: 100% 100%; - background-color: @color_listview_focus_press; - pointer-events: none; - } - } - &:last-child { - border: 0; - } - } - - &.ui-snap-listview { - .ui-li-sub-text { - color: @color_listview_sub_text; - font-size: 24 * @unit_base; - } - - .ui-snap-listview-selected::before { - content: ""; - position: absolute; - width: 100%; - height: 100%; - left: 50%; - top: 50%; - .transform(translate(-50%, -50%)); - -webkit-mask-image: url("images/List/b_list_focus_bg_108.png"); - -webkit-mask-size: 100% 100%; - background-color: @color_listview_focus; - border-radius:20vw; - pointer-events: none; - } - - li { - border:none; - &.ui-li-active { - background-color: transparent; - color: @color_listview_text_press; - &::before { - background-color: @color_listview_focus_press; - } - } - } - } -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/marquee.less b/tau/src/css/profile/wearable/changeable/theme-circle/marquee.less deleted file mode 100644 index e6defe4a..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/marquee.less +++ /dev/null @@ -1,6 +0,0 @@ -/*************************************************************************** - marquee -***************************************************************************/ -.ui-marquee.ui-marquee-gradient::after { - background: -webkit-linear-gradient(left, transparent 0%, @color_listview_fadeout_bg 100%); -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/pageindicator.less b/tau/src/css/profile/wearable/changeable/theme-circle/pageindicator.less deleted file mode 100644 index 174cc773..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/pageindicator.less +++ /dev/null @@ -1,33 +0,0 @@ -/**************************************************** - Page Indicator -*****************************************************/ -.ui-page-indicator { - position: absolute; - - .ui-page-indicator-item { - width: 10 * @unit_base; - height: 10 * @unit_base; - -webkit-mask-image: -webkit-radial-gradient(black 2 * @unit_base, transparent 4 * @unit_base); - background-color: @color_page_indicator_normal; - .transition-property(transform); - .transition-duration(250ms); - .transition-timing-function(ease-out); - &.ui-page-indicator-active { - background-color: @color_page_indicator_selected; - } - } - - &.ui-page-indicator-linear { - .ui-page-indicator-item { - position: relative; - display: inline-block; - margin-right: 9 * @unit_base; - &:last-child { - margin-right: 0; - } - &.ui-page-indicator-active { - .transform(scale3d(1.5, 1.5, 1.5)); - } - } - } -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/popup.less b/tau/src/css/profile/wearable/changeable/theme-circle/popup.less deleted file mode 100644 index e623c6a1..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/popup.less +++ /dev/null @@ -1,241 +0,0 @@ -/*************************************************************************** - popup -***************************************************************************/ - -@font_size_popup_toast: 24 * @unit_base; -@font_size_popup_body: 34 * @unit_base; - -.ui-popup { - width:100%; - height: 100%; - overflow: hidden; - border: 0; - border-radius: 50% 50%; - background-image: -webkit-radial-gradient(transparent -100%, transparent -90%, @color_bg_cover 69%), -webkit-radial-gradient(@color_bg 71%, transparent 0px); - - & ::-webkit-scrollbar { - display: none; - } - - .ui-popup-header { - text-align: center; - min-height: @fixed_popup_header_height; - background-color: transparent; - color: @color_popup_title_text; - padding-top: @fixed_popup_header_padding_top; - padding-right: @fixed_popup_header_padding_right; - padding-bottom: @fixed_popup_header_padding_bottom; - padding-left: @fixed_popup_header_padding_left; - + .ui-popup-content { - padding-top: 26 * @px_base; - } - } - - .ui-popup-content { - color: @color_popup_content_text; - background-color: transparent; - padding: 16% 8% 4%; - text-align: center; - .ui-listview, - .ui-inline-listview { - margin: -25 * @unit_base -55 * @unit_base -16 * @unit_base -55 * @unit_base; - } - } - - &.ui-has-side-buttons .ui-popup-content{ - padding-left: 19%; - padding-right: 19%; - } - - .ui-popup-footer.ui-side-button{ - .ui-btn { - height: 100%; - width: 26%; - border: none; - position: absolute; - text-indent: -9999px; - &::before { - content: ""; - -webkit-mask-size: @fixed_popup_icon_width @fixed_popup_icon_height; - -webkit-mask-repeat: no-repeat; - width: @fixed_popup_icon_width; - height: @fixed_popup_icon_height; - position: absolute; - } - } - - .ui-btn:nth-child(n) { - top: 50%; - .transform(translate3d(68%, -50%, 0)); - background: -webkit-radial-gradient(center, circle cover, @color_popup_side_button_bg 50%, transparent 50%); - background-repeat: no-repeat; - background-size: 570% 150%; - &::before { - top: 50%; - -webkit-transform: translate3d(0, -50%, 0); - } - &:active { - background: -webkit-radial-gradient(center, circle cover, @color_popup_side_button_bg_press 50%, transparent 50%); - background-repeat: no-repeat; - background-size: 570% 150%; - } - } - .ui-btn:nth-child(1) { - .transform(translate3d(68%, -50%, 0)); - background-position: 83% 50%; - right: 100%; - &::before { - left: 38%; - } - &:active { - background-position: 83% 50%; - } - } - .ui-btn:nth-child(2) { - .transform(translate3d(-68%, -50%, 0)); - left: 100%; - background-position: 17% 50%; - &::before { - right: 38%; - } - &:active { - background-position: 17% 50%; - } - } - } - - .ui-popup-footer.ui-bottom-button{ - .ui-btn { - position: absolute; - top: 100%; - left: 50%; - height: 36%; - width: 100%; - border: none; - padding: 8% 22% 16%; - background: -webkit-radial-gradient(center, circle cover, @color_footer_button_bg 50%, transparent 50%); - background-position: 50% 17%; - background-repeat: no-repeat; - background-size: 300% 840%; - .transform(translate3d(-50%, -77%, 0)); - - &:active { - .transition(all 300ms ease-out); - background: -webkit-radial-gradient(center, circle cover, @color_footer_button_bg_press 50%, transparent 50%); - background-position: 50% 17%; - background-repeat: no-repeat; - background-size: 300% 840%; - } - - &.ui-btn-icon-only::before { - top: 26 * @unit_base; - .transform(translate3d(-50%, 0, 0)); - } - } - } -} - -.ui-popup.ui-popup-active { - .ui-popup-footer.ui-side-button { - &:active { - .ui-btn:not(:active) { - .transform(translate3d(0, -50%, 0)); - } - } - .ui-btn:nth-child(n) { - &:active { - .transition(all 150ms ease-out); - } - } - .ui-btn:nth-child(1) { - &:active { - .transform(translate3d(100%, -50%, 0)); - } - } - .ui-btn:nth-child(2) { - &:active { - .transform(translate3d(-100%, -50%, 0)); - } - } - } - .ui-popup-footer.ui-bottom-button { - .ui-btn { - &:active { - .transform(translate3d(-50%, -100%, 0)); - } - } - } -} -/*********************** -Popup Container Scroll -***********************/ -.ui-popup.ui-scroll-on:not(.ui-ctxpopup):not(.ui-popup-toast) { - .ui-popup-content { - margin-top: 122 * @unit_base; - margin-bottom: 98 * @unit_base; - padding-top: 0; - } - - .ui-popup-header + .ui-popup-content { - margin-top: 0; - padding-top: 26 * @px_base; - } - - .ui-popup-footer { - margin-top: -98 * @unit_base; - } -} - -/**************************************** -Popup Toast -****************************************/ -.ui-popup.ui-popup-toast { - min-height: 30%; - border-top: 3px solid @color_toast_popup_border; - border-bottom: 3px solid @color_toast_popup_border; - margin-bottom: 13%; - background-color: @color_toast_popup_bg; - background-image: none; - .ui-popup-content { - background-color: transparent; - font-size: 32 * @px_base; - text-align: center; - line-height: 42 * @px_base; - } -} - -.ui-popup.ui-popup-toast.ui-popup-toast-graphic { - border: none; - background-color: transparent; - margin-bottom: 24 * @unit_base; - pointer-events: none; - .ui-popup-content { - color: @color_toast_graphic_text; - } - .ui-popup-toast-icon { - width: 164 * @unit_base; - height: 164 * @unit_base; - - &::before { - content: ""; - width: 100%; - height: 100%; - position: absolute; - left: 0; - background-color: @color_toast_popup_image_bg; - .mask-image('images/Popup/tw_toast_popup_image_bg.png'); - .mask-repeat(no-repeat); - .mask-size(100% 100%); - } - - &::after { - .mask-size(50% 50%); - } - } -} -/*********************** -Option Popup -***********************/ -.ui-popup.ui-ctxpopup { - height: auto; -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/progress.less b/tau/src/css/profile/wearable/changeable/theme-circle/progress.less deleted file mode 100644 index 6f9fa23d..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/progress.less +++ /dev/null @@ -1,47 +0,0 @@ -/*************************************************************************** - progress -***************************************************************************/ - -@-webkit-keyframes indeterminate { - 0% { - -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate1_holo_dark.png); - -webkit-mask-repeat: no-repeat; - background-color: @color_progressbar_indeterminate; - } - 25% { - -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate2_holo_dark.png); - -webkit-mask-repeat: no-repeat; - background-color: @color_progressbar_indeterminate; - } - 50% { - -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate3_holo_dark.png); - -webkit-mask-repeat: no-repeat; - background-color: @color_progressbar_indeterminate; - } - 75% { - -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate4_holo_dark.png); - -webkit-mask-repeat: no-repeat; - background-color: @color_progressbar_indeterminate; - } - 100% { - -webkit-mask-image: url(./images/Progress/tw_progressbar_indeterminate5_holo_dark.png); - -webkit-mask-repeat: no-repeat; - background-color: @color_progressbar_indeterminate; - } -} - -progress { - color: @color_progressbar_text; -} - -progress::-webkit-progress-bar { - background-color: @color_progressbar_normal_bg; -} - -progress::-webkit-progress-value { - background-color: @color_progressbar_value_bg; -} - -progress.ui-progress-indeterminate::-webkit-progress-bar { - background-color: @color_progressbar_value_bg; -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/scroller.less b/tau/src/css/profile/wearable/changeable/theme-circle/scroller.less deleted file mode 100644 index a764f174..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/scroller.less +++ /dev/null @@ -1,49 +0,0 @@ -.ui-scrollbar-bouncing-effect { - &.ui-top { - display: none; - } - &.ui-bottom { - width: 100%; - height: 100 * @unit_base; - left: 0; - -webkit-mask-size: 100% 100 * @unit_base; - &::before { - width: 100%; - height: 100 * @unit_base; - -webkit-mask-size: 100% 100 * @unit_base; - } - } - &.ui-left, - &.ui-right { - width: 100 * @unit_base; - height: 100%; - top: 0; - -webkit-mask-size: 100 * @unit_base 100%; - &::before { - width: 100 * @unit_base; - height: 100%; - -webkit-mask-size: 100 * @unit_base 100%; - } - } - &.ui-bottom { - bottom: 0; - -webkit-mask-image: url(@bg_scroller_bouncing_effect_bottom_glow); - &::before { - -webkit-mask-image: url(@bg_scroller_bouncing_effect_bottom_edge); - } - } - &.ui-left { - left: 0; - -webkit-mask-image: url(@bg_scroller_bouncing_effect_left_glow); - &::before { - -webkit-mask-image: url(@bg_scroller_bouncing_effect_left_edge); - } - } - &.ui-right { - right: 0; - -webkit-mask-image: url(@bg_scroller_bouncing_effect_right_glow); - &::before { - -webkit-mask-image: url(@bg_scroller_bouncing_effect_right_edge); - } - } -}
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/test.less b/tau/src/css/profile/wearable/changeable/theme-circle/test.less deleted file mode 100644 index 6b0b05b7..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/test.less +++ /dev/null @@ -1,3 +0,0 @@ -.is-circle-test{ - width: 1px; -} diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/theme.changeable.less b/tau/src/css/profile/wearable/changeable/theme-circle/theme.changeable.less deleted file mode 100644 index 952f8639..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/theme.changeable.less +++ /dev/null @@ -1,214 +0,0 @@ -/*************************************************************************** - Body -***************************************************************************/ -@color_bg: B011; -@color_bg_cover: B013; -@color_text: T011; - -/*************************************************************************** - Action Bar -***************************************************************************/ -@color_actionbar_title_text: T012; -@color_actionbar_title_bg: B011; -@color_actionbar_title_bg_disable: B0511D; - -/**************************************************************************** - Circle Progress Bar -****************************************************************************/ -@color_circleprogressbar_bg: B065L3; -@color_circleprogressbar_value: B065L2; - -/**************************************************************************** - Progress Bar -****************************************************************************/ -@color_progressbar_text: @color_text; -@color_progressbar_normal_bg: B065L3; -@color_progressbar_value_bg: B065L2; -@color_progressbar_indeterminate: B065L6; - -/**************************************************************************** - Processing -****************************************************************************/ -@color_processing_text: T097; -@color_processing: B065L6; - -/*************************************************************************** - Buttons -***************************************************************************/ -@color_button_default_text: T041; -@color_button_default_text_pressed: T041P; -@color_button_default_text_disable: T041D; - -@color_button_default_normal_bg: W011; -@color_button_default_focus_bg: W011; -@color_button_default_press_bg: W011P; -@color_button_default_disable_bg: W011D; - -@color_button_red_text: T041; -@color_button_red_text_pressed: T041P; -@color_button_red_text_disable: T041D; -@color_button_red_normal_bg: W012; -@color_button_red_focus_bg: W012; -@color_button_red_press_bg: W012P; -@color_button_red_disable_bg: W012D; - -@color_button_orange_text: T041; -@color_button_orange_text_pressed: T041P; -@color_button_orange_text_disable: T041D; -@color_button_orange_normal_bg: W013; -@color_button_orange_focus_bg: W013; -@color_button_orange_press_bg: W013P; -@color_button_orange_disable_bg: W013D; - -@color_button_green_text: T041; -@color_button_green_text_pressed: T041P; -@color_button_green_text_disable: T041D; -@color_button_green_normal_bg: W014; -@color_button_green_focus_bg: W014; -@color_button_green_press_bg: W014P; -@color_button_green_disable_bg: W014D; - -/*************************************************************************** - Popup -***************************************************************************/ -@color_popup_title_text: T091; -@color_popup_content_text: T092; -@color_popup_bg: B061L1E; -@color_popup_edge_shadow: B061L1; -@color_popup_bg_cover: B061L1; -@color_popup_header_bg: B061L2; -@color_popup_toast_border: B061L7; -@color_popup_border: B061L8; -@color_popup_overlay: W1712; -@color_popup_button_bg_press: B065L4P; -@color_popup_side_button_bg: B065L4; -@color_popup_side_button_bg_press: B065L4P; -@color_popup_button_icon_bg: F022L1i; -@color_popup_button_icon_bg_press: F022L1iP; - -/*************************************************************************** - Footer -***************************************************************************/ -@color_footer_button_bg: B065L4; -@color_footer_button_bg_press: B065L4P; -@color_footer_button_bg_press: W011P; -@color_footer_button_icon_bg: F022L1i; -@color_footer_button_icon_bg_press: F022L1iP; -/*************************************************************************** - Toast Popup -***************************************************************************/ -@color_toast_popup_border: B061L7; -@color_toast_popup_bg: B068; -@color_toast_popup_image_bg: B067; -@color_toast_graphic_text: T099; - -/*************************************************************************** - Option Popup -***************************************************************************/ - -/*************************************************************************** - circular index scrollbar -***************************************************************************/ -@color_circularindexscrollbar_bg: B0722; -@color_circularindexscrollbar_text_normal: T0311; -@color_circularindexscrollbar_text_selected: T0311P; - -@color_circularindexscrollbar_indicator_bg: B0731; -@color_circularindexscrollbar_indicator_text: T0312P; - -/*************************************************************************** - Listview -***************************************************************************/ -@color_list_press_bg: B041P; -@color_listview_border: B0222; -@color_listview_text: T0211; -@color_listview_text_press: T0211P; -@color_listview_text_dim: T0211D; -@color_listview_text_highlight: T0212; -@color_list_actionicon_divider: B0221L1; -@color_list_actionicon_image_normal: F022L1i; -@color_list_actionicon_image_disable: F022L1iD; -@color_list_divider_bg: B023; -@color_list_divider_text: T0231; -@color_listview_sub_text: T022; -@color_listview_sub_text_press: T022P; -@color_listview_sub_text_dim: T022D; -@color_listview_focus: B0210; -@color_listview_focus_press: B0210P; -@color_listview_focus_ef: B027; -@color_listview_focus_ef_press: B027P; - -/**************************************************************************** - Listview with Marquee -****************************************************************************/ -@color_listview_fadeout_bg: B0211; -@color_listview_fadeout_pressed_bg: B041P; - -/*************************************************************************** - Checkbox/Radio -***************************************************************************/ -@color_checkboxradio_radio: W013L3; -@color_checkboxradio_radio_press: W013L3P; -@color_checkboxradio_radio_dim: W013L3D; -@color_checkboxradio_radio_off: W013L4; -@color_checkboxradio_radio_off_press: W013L4P; -@color_checkboxradio_radio_off_dim: W013L4D; -@color_checkboxradio_radiobox_line: W013L1; -@color_checkboxradio_radiobox_line_press: W013L1P; -@color_checkboxradio_radiobox_line_dim: W013L1D; - -@color_checkboxradio_check: W012L3; -@color_checkboxradio_check_press: W012L3P; -@color_checkboxradio_check_dim: W012L3D; -@color_checkboxradio_uncheck: W012L4; -@color_checkboxradio_uncheck_press: W012L4P; -@color_checkboxradio_uncheck_dim: W012L4D; -@color_checkboxradio_checkbox_bg: W012L1; -@color_checkboxradio_checkbox_bg_press: W012L1P; -@color_checkboxradio_checkbox_bg_dim: W012L1D; -@color_checkboxradio_checkbox_bg_uncheck: W012L2; -@color_checkboxradio_checkbox_bg_uncheck_press: W012L2P; -@color_checkboxradio_checkbox_bg_uncheck_dim: W012L2D; - -/*************************************************************************** - Page Indicator -***************************************************************************/ -@color_page_indicator_normal: T0211D; -@color_page_indicator_selected: W1911; - -/**************************************************************************** - Toggle Switch -****************************************************************************/ -@color_switch_text: T0811; -@color_switch_sub_text: T161; -@color_toggle_on_handler: W014L3; -@color_toggle_on_handler_press: W014L3P; -@color_toggle_on_handler_dim: W014L3D; -@color_toggle_off_handler: W014L4; -@color_toggle_off_handler_press: W014L4P; -@color_toggle_off_handler_dim: W014L4D; -@color_toggle_on_bg: W014L1; -@color_toggle_on_bg_press: W014L1P; -@color_toggle_on_bg_dim: W014L1D; -@color_toggle_off_bg: W014L2; -@color_toggle_off_bg_press: W014L2P; -@color_toggle_off_bg_dim: W014L2D; - -/*************************************************************************** - Scroller -***************************************************************************/ -@bg_scroller_bouncing_effect_right_glow: "./images/Scroller/bouncing_circle_right_glow.png"; -@bg_scroller_bouncing_effect_right_edge: "./images/Scroller/bouncing_circle_right_edge.png"; -@bg_scroller_bouncing_effect_bottom_glow: "./images/Scroller/bouncing_circle_bottom_glow.png"; -@bg_scroller_bouncing_effect_bottom_edge: "./images/Scroller/bouncing_circle_bottom_edge.png"; -@bg_scroller_bouncing_effect_left_glow: "./images/Scroller/bouncing_circle_left_glow.png"; -@bg_scroller_bouncing_effect_left_edge: "./images/Scroller/bouncing_circle_left_edge.png"; -@color_option_popup_bg: W011; -@color_option_popup_list_border: B212; -@color_option_popup_list_text: T181; -/*************************************************************************** - More options -***************************************************************************/ -@color_drawer_bg: B0511D; -@color_moreoptions_bg: #fafafa; -@color_moreoptions_handler: rgba(60, 60, 60, 0.8);
\ No newline at end of file diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/theme.layout.less b/tau/src/css/profile/wearable/changeable/theme-circle/theme.layout.less deleted file mode 100644 index 1ac0342e..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/theme.layout.less +++ /dev/null @@ -1,13 +0,0 @@ -/************************ -Listview -*************************/ -@list_item_min_height: 130 * @unit_base; -@list_item_max_height: 360 * @unit_base; -@list_item_line_height: 73 * @unit_base; -@list_item_padding: 28.5 * @unit_base 40 * @unit_base; -@list_item_anchor_padding: 29.5 * @unit_base 40 * @unit_base; -@font_size_list_item: 36 * @unit_base; -@list_anchor_margin: -29*@unit_base -40*@unit_base; -@list_btn_padding: 42 * @unit_base 40 * @unit_base; -@list_2btn_padding: 28 * @unit_base 20 * @unit_base; -@list_3btn_padding: 28 * @unit_base 30 * @unit_base; diff --git a/tau/src/css/profile/wearable/changeable/theme-circle/toggleswitch.less b/tau/src/css/profile/wearable/changeable/theme-circle/toggleswitch.less deleted file mode 100644 index c68c63b8..00000000 --- a/tau/src/css/profile/wearable/changeable/theme-circle/toggleswitch.less +++ /dev/null @@ -1,104 +0,0 @@ -/*************************************************************************** - toggle switch -***************************************************************************/ -.ui-switch-text { - margin-top: @fixed_toggleswitch_text_margin_top; - margin-bottom: @fixed_toggleswitch_text_margin_bottom; - font-size: @fixed_toggleswitch_text_font_size; - padding: 0; -} -.ui-switch-sub-text { - margin-top: @fixed_toggleswitch_sub_text_margin_top; - font-size: @fixed_toggleswitch_sub_text_font_size; - color: @color_switch_sub_text; -} - -.ui-toggleswitch { - width: @fixed_toggleswitch_width; - height: @fixed_toggleswitch_height; - - &.ui-toggleswitch-large { - width: @fixed_toggleswitch_width; - height: @fixed_toggleswitch_height; - } - - & .ui-switch-input { - background-color: @color_toggle_off_bg; - .mask-image('images/Controller_icon/On_Off/tw_btn_control_bg_holo_dark.png'); - .mask-size(100% 100%); - .transition(all 300ms); - &::before { - content: none; - } - &:active { - &~ .ui-switch-activation, - ~ .ui-switch-button{ - background-color: transparent; - &::before { - background-color: transparent; - } - } - } - } - - & .ui-switch-activation, - .ui-switch-button { - width: 100%; - height: 100%; - -webkit-mask-image: none; - background-color: transparent; - transform: none; - &::before { - .mask-image('images/Controller_icon/On_Off/tw_btn_control_on_holo_dark.png'); - .transform(scale(0)); - .transition(all 300ms); - background-color: @color_toggle_on_handler; - .mask-size(100% 100%); - .mask-position(0); - } - &::after { - content: ""; - width: 100%; - height: 100%; - .mask-image('images/Controller_icon/On_Off/tw_btn_control_off_holo_dark.png'); - .mask-size(100% 100%); - .mask-position(0); - .transform(scale(1.0)); - .transition(transform 300ms); - background-color: @color_toggle_off_handler; - position: absolute; - left: 0; - } - } - - & .ui-switch-input:checked { - background-color: @color_toggle_on_bg; - &~ .ui-switch-activation, - ~ .ui-switch-button { - width: 100%; - height: 100%; - -webkit-mask-image: none; - background-color: transparent; - transform: none; - &::before { - .transform(scale(1.0)); - background-color: @color_toggle_on_handler; - .mask-position(0); - } - &::after { - .transform(scale(0)); - } - } - &:active { - &::before { - background-color: @color_toggle_on_bg; - } - &~ .ui-switch-activation, ~ .ui-switch-button { - background-color: transparent; - &::before { - background-color: @color_toggle_on_handler; - } - } - } - } -} diff --git a/tau/src/css/profile/wearable/changeable/wearable.less b/tau/src/css/profile/wearable/changeable/wearable.less index de4e6f99..a1a8c9d5 100644 --- a/tau/src/css/profile/wearable/changeable/wearable.less +++ b/tau/src/css/profile/wearable/changeable/wearable.less @@ -1,32 +1,19 @@ -@import "../../prefixer.less"; -@import "../../prefixer.ext.less"; @import "common/reset.less"; @import "common/core.less"; @import "common/layout.less"; @import "common/progress.less"; -@import "common/circleprogressbar.less"; @import "common/toggleswitch.less"; @import "common/processing.less"; @import "common/button.less"; @import "common/popup.less"; @import "common/popup.transition.less"; @import "common/listview.less"; -@import "common/listview.extra.less"; @import "common/datetimepicker"; @import "common/transition.less"; @import "common/transition.fade.less"; @import "common/transition.slideup.less"; -@import "common/transition.pop.less"; @import "common/indexscrollbar.less"; -@import "common/circularindexscrollbar.less"; @import "common/scroller.less"; @import "common/swipelist.less"; @import "common/tabindicator.less"; @import "common/checkboxradio.less"; -@import "common/marquee.less"; -@import "common/pageindicator.less"; -@import "common/snaplistview.less"; -@import "common/drawer.less"; -@import "common/sectionchanger.less"; -@import "common/viewswitcher.less"; -@import "common/selector.less"; diff --git a/tau/src/css/profile/wearable/default/common/button.less b/tau/src/css/profile/wearable/default/common/button.less index 510e2949..2042a11c 100644 --- a/tau/src/css/profile/wearable/default/common/button.less +++ b/tau/src/css/profile/wearable/default/common/button.less @@ -120,7 +120,8 @@ a.ui-btn { button.ui-btn, input.ui-btn { box-sizing: border-box; - .appearance(none); + -webkit-appearance: none; + -moz-appearance: none; width: 100%; &.ui-inline { diff --git a/tau/src/css/profile/wearable/default/common/core.less b/tau/src/css/profile/wearable/default/common/core.less index 5555c451..9e42b93c 100644 --- a/tau/src/css/profile/wearable/default/common/core.less +++ b/tau/src/css/profile/wearable/default/common/core.less @@ -31,13 +31,6 @@ html font-size is set by WRT base font-size /*************************************************************************** Common Style ***************************************************************************/ - -.tau-info-theme { - position: absolute; - top: -999px; - left: -999px; -} - .screen-hidden { visibility: hidden; position: absolute; top: -10000em; left: -10000em;} /*************************************************************************** @@ -49,7 +42,9 @@ button, input { } * { - .border-box(); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } a { diff --git a/tau/src/css/profile/wearable/default/common/indexscrollbar.less b/tau/src/css/profile/wearable/default/common/indexscrollbar.less index e203d08c..34ecea3d 100644 --- a/tau/src/css/profile/wearable/default/common/indexscrollbar.less +++ b/tau/src/css/profile/wearable/default/common/indexscrollbar.less @@ -8,7 +8,7 @@ background-color: @color_indexscrollbar_bg; z-index: 10; overflow: visible; // To show 2nd indexbar - .user-select(none); + -webkit-user-select: none; // Needed for vmouse events cursor: pointer; ul { diff --git a/tau/src/css/profile/wearable/default/common/layout.less b/tau/src/css/profile/wearable/default/common/layout.less index 1539f8d7..d1778ccd 100644 --- a/tau/src/css/profile/wearable/default/common/layout.less +++ b/tau/src/css/profile/wearable/default/common/layout.less @@ -1,10 +1,6 @@ /*************************************************************************** Common Style ***************************************************************************/ -.w-layout-no-tap-color() { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - body { height: 100%; font-size: 34 * @unit_base; @@ -25,15 +21,22 @@ body { &.ui-page-active { display: block; } - .w-layout-no-tap-color(); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* overrides webkit link color */ } +.scrolling-mode-touch { + -webkit-overflow-scrolling: touch; + -moz-overflow-scrolling: touch; + -o-overflow-scrolling: touch; + -ms-overflow-scrolling: touch; + overflow-scrolling: touch; +} .ui-content { width:auto; height: 100%; overflow: auto; - .touch-scrolling(); + .scrolling-mode-touch; } .ui-header { @@ -62,10 +65,6 @@ body { .ui-title-text-fadeout { -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - -moz-mask-image: -moz-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - -ms-mask-image: -ms-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - -o-mask-image: -o-linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); - mask-image: linear-gradient(left, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 95%); } &.ui-has-more { @@ -74,10 +73,6 @@ body { } .ui-title-text-fadeout { -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); - -moz-mask-image: -moz-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); - -ms-mask-image: -ms-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); - -o-mask-image: -o-linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); - mask-image: linear-gradient(left, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 80%); } } diff --git a/tau/src/css/profile/wearable/default/common/listview.less b/tau/src/css/profile/wearable/default/common/listview.less index f65e36c6..d1de8039 100644 --- a/tau/src/css/profile/wearable/default/common/listview.less +++ b/tau/src/css/profile/wearable/default/common/listview.less @@ -18,7 +18,7 @@ Listview white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - .user-select(none); + -webkit-user-select: none; } } .ui-listview li > a { diff --git a/tau/src/css/profile/wearable/default/common/processing.less b/tau/src/css/profile/wearable/default/common/processing.less index 31eb522a..1828ad4a 100644 --- a/tau/src/css/profile/wearable/default/common/processing.less +++ b/tau/src/css/profile/wearable/default/common/processing.less @@ -1,33 +1,12 @@ -.w-processing-rotating() { - from { .rotate(0deg); } - to { .rotate(360deg); } -} - @-webkit-keyframes rotating { - .w-processing-rotating(); -} - -@-moz-keyframes rotating { - .w-processing-rotating(); -} - -@-ms-keyframes rotating { - .w-processing-rotating(); -} - -@-o-keyframes rotating { - .w-processing-rotating(); -} - -@keyframes rotating { - .w-processing-rotating(); + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } } - .ui-processing { background-image: url("./images/Progress/tw_widget_popup_activity.png"); background-repeat: no-repeat; background-size: 100% 100%; - .animation(rotating 1s linear infinite); + -webkit-animation: rotating 1s linear infinite; width:80 * @unit_base; height:80 * @unit_base; margin: 0 auto; diff --git a/tau/src/css/profile/wearable/default/common/progress.less b/tau/src/css/profile/wearable/default/common/progress.less index 953e3e15..721c08cd 100644 --- a/tau/src/css/profile/wearable/default/common/progress.less +++ b/tau/src/css/profile/wearable/default/common/progress.less @@ -2,52 +2,9 @@ * Progressbar */ -.w-progress-indeterminate() { - 0% { - .mask-image('./images/Progress/tw_progressbar_indeterminate1_holo_dark.png'); - .mask-repeat(no-repeat); - background-color: @color_progressbar_indeterminate; - } - 25% { - .mask-image('./images/Progress/tw_progressbar_indeterminate2_holo_dark.png'); - .mask-repeat(no-repeat); - background-color: @color_progressbar_indeterminate; - } - 50% { - .mask-image('./images/Progress/tw_progressbar_indeterminate3_holo_dark.png'); - .mask-repeat(no-repeat); - background-color: @color_progressbar_indeterminate; - } - 75% { - .mask-image('./images/Progress/tw_progressbar_indeterminate4_holo_dark.png'); - .mask-repeat(no-repeat); - background-color: @color_progressbar_indeterminate; - } - 100% { - .mask-image('./images/Progress/tw_progressbar_indeterminate5_holo_dark.png'); - .mask-repeat(no-repeat); - background-color: @color_progressbar_indeterminate; - } -} - @-webkit-keyframes indeterminate { - .w-progress-indeterminate(); -} - -@-moz-keyframes indeterminate { - .w-progress-indeterminate(); -} - -@-ms-keyframes indeterminate { - .w-progress-indeterminate(); -} - -@-o-keyframes indeterminate { - .w-progress-indeterminate(); -} - -@keyframes indeterminate { - .w-progress-indeterminate(); + from {background-image: url('./images/Progress/tw_progressbar_indeterminate1_holo_dark.png');} + to {background-image: url('./images/Progress/tw_progressbar_indeterminate2_holo_dark.png');} } progress { @@ -59,7 +16,7 @@ progress { color: @color_progressbar_text; width: 100%; height: 6 * @unit_base; - .appearance(none); + -webkit-appearance: none; border: none; } @@ -79,7 +36,7 @@ progress::-webkit-progress-value { progress.ui-progress-indeterminate::-webkit-progress-value { background-repeat: no-repeat; background-size: 100% 100%; - .animation(indeterminate 150ms infinite); + -webkit-animation: indeterminate 150ms infinite; } .ui-progress-proportion { diff --git a/tau/src/css/profile/wearable/default/common/reset.less b/tau/src/css/profile/wearable/default/common/reset.less index 3026915c..439b900e 100644 --- a/tau/src/css/profile/wearable/default/common/reset.less +++ b/tau/src/css/profile/wearable/default/common/reset.less @@ -1,8 +1,8 @@ -//! normalize.css v1.0.0 | MIT License | git.io/normalize - -// ========================================================================== -// HTML5 display definitions -// ========================================================================== +/*! normalize.css v1.0.0 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ /* * default outline set none */ @@ -73,7 +73,8 @@ audio:not([controls]) { html { font-size: 100%; /* 1 */ - .text-size-adjust(100%); /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ } /* @@ -427,8 +428,10 @@ input[type="date"] { */ input[type="search"] { - .appearance(textfield); - .content-box(); + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; } /* diff --git a/tau/src/css/profile/wearable/default/common/scroller.less b/tau/src/css/profile/wearable/default/common/scroller.less index ce7936a2..012632ea 100644 --- a/tau/src/css/profile/wearable/default/common/scroller.less +++ b/tau/src/css/profile/wearable/default/common/scroller.less @@ -40,9 +40,9 @@ display: none; position: absolute; background-repeat: no-repeat; - .animation-duration(470ms); - .animation-timing-function(step-start); - .animation-fill-mode(forwards); + -webkit-animation-duration: 0.47s; + -webkit-animation-timing-function: step-start; + -webkit-animation-fill-mode: forwards; } .ui-scrollbar-bouncing-effect.ui-top { @@ -77,7 +77,7 @@ background-image: url(@bg_scroller_bouncing_effect_right); } -.w-scroller-ui-vertical-show() { +@-webkit-keyframes ui-vertical-show { 0% { background-position: center -0px; } @@ -113,7 +113,7 @@ } } -.w-scroller-ui-vertical-hide() { +@-webkit-keyframes ui-vertical-hide { 0% { background-position: center -600px; } @@ -149,7 +149,7 @@ } } -.w-scroller-ui-horizontal-show() { +@-webkit-keyframes ui-horizontal-show { 0% { background-position: -0px center; } @@ -185,7 +185,7 @@ } } -.w-scroller-ui-horizontal-hide() { +@-webkit-keyframes ui-horizontal-hide { 0% { background-position: -600px center; } @@ -221,103 +221,23 @@ } } -@-webkit-keyframes ui-vertical-show { - .w-scroller-ui-vertical-show(); -} - -@-moz-keyframes ui-vertical-show { - .w-scroller-ui-vertical-show(); -} - -@-ms-keyframes ui-vertical-show { - .w-scroller-ui-vertical-show(); -} - -@-o-keyframes ui-vertical-show { - .w-scroller-ui-vertical-show(); -} - -@keyframes ui-vertical-show { - .w-scroller-ui-vertical-show(); -} - -@-webkit-keyframes ui-vertical-hide { - .w-scroller-ui-vertical-hide(); -} - -@-moz-keyframes ui-vertical-hide { - .w-scroller-ui-vertical-hide(); -} - -@-ms-keyframes ui-vertical-hide { - .w-scroller-ui-vertical-hide(); -} - -@-o-keyframes ui-vertical-hide { - .w-scroller-ui-vertical-hide(); -} - -@keyframes ui-vertical-hide { - .w-scroller-ui-vertical-hide(); -} - -@-webkit-keyframes ui-horizontal-show { - .w-scroller-ui-horizontal-show(); -} - -@-moz-keyframes ui-horizontal-show { - .w-scroller-ui-horizontal-show(); -} - -@-ms-keyframes ui-horizontal-show { - .w-scroller-ui-horizontal-show(); -} - -@-o-keyframes ui-horizontal-show { - .w-scroller-ui-horizontal-show(); -} - -@keyframes ui-horizontal-show { - .w-scroller-ui-horizontal-show(); -} - -@-webkit-keyframes ui-horizontal-hide { - .w-scroller-ui-horizontal-hide(); -} - -@-moz-keyframes ui-horizontal-hide { - .w-scroller-ui-horizontal-hide(); -} - -@-ms-keyframes ui-horizontal-hide { - .w-scroller-ui-horizontal-hide(); -} - -@-o-keyframes ui-horizontal-hide { - .w-scroller-ui-horizontal-hide(); -} - -@keyframes ui-horizontal-hide { - .w-scroller-ui-horizontal-hide(); -} - .ui-scrollbar-bouncing-effect.ui-top.ui-show, .ui-scrollbar-bouncing-effect.ui-bottom.ui-show { display: block; - .animation-name(ui-vertical-show); + -webkit-animation-name: ui-vertical-show; } .ui-scrollbar-bouncing-effect.ui-top.ui-hide, .ui-scrollbar-bouncing-effect.ui-bottom.ui-hide { display: block; - .animation-name(ui-vertical-hide); + -webkit-animation-name: ui-vertical-hide; } .ui-scrollbar-bouncing-effect.ui-left.ui-show, .ui-scrollbar-bouncing-effect.ui-right.ui-show { display: block; - .animation-name(ui-horizontal-show); + -webkit-animation-name: ui-horizontal-show; } .ui-scrollbar-bouncing-effect.ui-left.ui-hide, .ui-scrollbar-bouncing-effect.ui-right.ui-hide { display: block; - .animation-name(ui-horizontal-hide); + -webkit-animation-name: ui-horizontal-hide; } diff --git a/tau/src/css/profile/wearable/default/common/transition.fade.less b/tau/src/css/profile/wearable/default/common/transition.fade.less index 22a0a3f0..51111c01 100644 --- a/tau/src/css/profile/wearable/default/common/transition.fade.less +++ b/tau/src/css/profile/wearable/default/common/transition.fade.less @@ -1,55 +1,45 @@ -.w-transition-fadein { +@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } - -.w-transition-fadeout { - from { opacity: 1; } - to { opacity: 0; } -} - -@-webkit-keyframes fadein { - .w-transition-fadein(); -} - @-moz-keyframes fadein { - .w-transition-fadein(); -} - -@-ms-keyframes fadein { - .w-transition-fadein(); + from { opacity: 0; } + to { opacity: 1; } } - @keyframes fadein { - .w-transition-fadein(); + from { opacity: 0; } + to { opacity: 1; } } @-webkit-keyframes fadeout { - .w-transition-fadein(); + from { opacity: 1; } + to { opacity: 0; } } - @-moz-keyframes fadeout { - .w-transition-fadeout(); -} - -@-ms-keyframes fadeout { - .w-transition-fadeout(); -} - -@-o-keyframes fadeout { - .w-transition-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } - @keyframes fadeout { - .w-transition-fadeout(); + from { opacity: 1; } + to { opacity: 0; } } .fade.out { opacity: 0; - .animation(fadeout 125ms); + -webkit-animation-duration: 125ms; + -webkit-animation-name: fadeout; + -moz-animation-duration: 125ms; + -moz-animation-name: fadeout; + animation-duration: 125ms; + animation-name: fadeout; } .fade.in { opacity: 1; - animation(fadein 225ms); + -webkit-animation-duration: 225ms; + -webkit-animation-name: fadein; + -moz-animation-duration: 225ms; + -moz-animation-name: fadein; + animation-duration: 225ms; + animation-name: fadein; } diff --git a/tau/src/css/profile/wearable/default/common/transition.less b/tau/src/css/profile/wearable/default/common/transition.less index 1fbfb6c3..10f95b51 100644 --- a/tau/src/css/profile/wearable/default/common/transition.less +++ b/tau/src/css/profile/wearable/default/common/transition.less @@ -4,7 +4,9 @@ width: 100%; height: 100%; overflow: hidden; - .border-box(); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .ui-pre-in { @@ -15,10 +17,18 @@ left: 0px; } .in { - .animation-timing-function(ease-out); - .animation-duration(350ms); + -webkit-animation-timing-function: ease-out; + -webkit-animation-duration: 350ms; + -moz-animation-timing-function: ease-out; + -moz-animation-duration: 350ms; + animation-timing-function: ease-out; + animation-duration: 350ms; } .out { - .animation-timing-function(ease-in); - .animation-duration(225ms); + -webkit-animation-timing-function: ease-in; + -webkit-animation-duration: 225ms; + -moz-animation-timing-function: ease-in; + -moz-animation-duration: 225ms; + animation-timing-function: ease-in; + animation-duration: 225ms; } diff --git a/tau/src/css/profile/wearable/default/common/transition.slideup.less b/tau/src/css/profile/wearable/default/common/transition.slideup.less index 1aac4ad8..5583ac18 100644 --- a/tau/src/css/profile/wearable/default/common/transition.slideup.less +++ b/tau/src/css/profile/wearable/default/common/transition.slideup.less @@ -1,71 +1,69 @@ /* slide up */ .slideup.out { - .animation(fadeout 250ms); + -webkit-animation-name: fadeout; + -webkit-animation-duration: 250ms; + -moz-animation-name: fadeout; + -moz-animation-duration: 250ms; + animation-name: fadeout; + animation-duration: 250ms; } .slideup.in { - .transform(translateY(0)); - .animation(slideinfrombottom 250ms); + -webkit-transform: translateY(0); + -webkit-animation-name: slideinfrombottom; + -webkit-animation-duration: 250ms; + -moz-transform: translateY(0); + -moz-animation-name: slideinfrombottom; + -moz-animation-duration: 250ms; + transform: translateY(0); + animation-name: slideinfrombottom; + animation-duration: 250ms; } .slideup.in.reverse { - .animation(fadein 250ms); + -webkit-animation-name: fadein; + -webkit-animation-duration: 150ms; + -moz-animation-name: fadein; + -moz-animation-duration: 150ms; + animation-name: fadein; + animation-duration: 150ms; } .slideup.out.reverse { z-index: 101; - .transform(translateY(100%)); - .animation(slideouttobottom 250ms); + -webkit-transform: translateY(100%); + -webkit-animation-name: slideouttobottom; + -webkit-animation-duration: 200ms; + -moz-transform: translateY(100%); + -moz-animation-name: slideouttobottom; + -moz-animation-duration: 200ms; + transform: translateY(100%); + animation-name: slideouttobottom; + animation-duration: 200ms; } -.w-transition-slideinfrombottom() { +@-webkit-keyframes slideinfrombottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0); } } - -.w-transition-slideouttobottom() { - from { -webkit-transform: translateY(0); } - to { -webkit-transform: translateY(100%); } -} - - -@-webkit-keyframes slideinfrombottom { - .w-transition-slideinfrombottom(); -} - @-moz-keyframes slideinfrombottom { - .w-transition-slideinfrombottom(); -} - -@-ms-keyframes slideinfrombottom { - .w-transition-slideinfrombottom(); + from { -moz-transform: translateY(100%); } + to { -moz-transform: translateY(0); } } - -@-o-keyframes slideinfrombottom { - .w-transition-slideinfrombottom(); -} - @keyframes slideinfrombottom { - .w-transition-slideinfrombottom(); + from { transform: translateY(100%); } + to { transform: translateY(0); } } @-webkit-keyframes slideouttobottom { - .w-transition-slideouttobottom(); + from { -webkit-transform: translateY(0); } + to { -webkit-transform: translateY(100%); } } - @-moz-keyframes slideouttobottom { - .w-transition-slideouttobottom(); + from { -moz-transform: translateY(0); } + to { -moz-transform: translateY(100%); } } - -@-ms-keyframes slideouttobottom { - .w-transition-slideouttobottom(); -} - -@-o-keyframes slideouttobottom { - .w-transition-slideouttobottom(); -} - @keyframes slideouttobottom { - .w-transition-slideouttobottom(); + from { transform: translateY(0); } + to { transform: translateY(100%); } } - diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..58ece6d1 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..17cfbc4b --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..822a2c4a --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_holo_dark.png Binary files differnew file mode 100755 index 00000000..b62d463b --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_pressed_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..57a7dd4b --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_off_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..58cf05a6 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..190d5155 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..d4db421c --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_holo_dark.png Binary files differnew file mode 100755 index 00000000..c7af2831 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_pressed_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..30bb2bd7 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_check_on_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..23d166d8 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..0effb3aa --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..e6e6501c --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_holo_dark.png Binary files differnew file mode 100755 index 00000000..5b3394ba --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..880f013c --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_next_depth_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..fbe3ec35 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..2e7be697 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..820f99be --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_holo_dark.png Binary files differnew file mode 100755 index 00000000..1a40c574 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_pressed_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..c506c2b5 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_off_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..e756903f --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..a521e064 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..775ce3f0 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_holo_dark.png Binary files differnew file mode 100755 index 00000000..830b6455 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_pressed_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..04f8b1b1 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_btn_radio_on_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark.png Binary files differnew file mode 100755 index 00000000..266c73ff --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_dim.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_dim.png Binary files differnew file mode 100755 index 00000000..699eb3e0 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_dim.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png Binary files differnew file mode 100755 index 00000000..71e5b20c --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_activation_holo_dark_pressed.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..ebb05a6a --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png Binary files differnew file mode 100755 index 00000000..a53449ac --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_dim.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png Binary files differnew file mode 100755 index 00000000..53e8ee4a --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_disabled_holo_dark_pressed.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..ef5ae332 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png Binary files differnew file mode 100755 index 00000000..ba749816 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activated_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..acdf9c47 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_activation_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png Binary files differnew file mode 100755 index 00000000..6f99bc85 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_disabled_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_holo_dark.png Binary files differnew file mode 100755 index 00000000..28e54740 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png Binary files differnew file mode 100755 index 00000000..b74f64e5 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Controller_icon/tw_switch_thumb_pressed_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_divider.png b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_divider.png Binary files differnew file mode 100644 index 00000000..30605ce3 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_divider.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_focused.png b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_focused.png Binary files differnew file mode 100644 index 00000000..b26e87c4 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_focused.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_normal.png b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_normal.png Binary files differnew file mode 100644 index 00000000..59b9ae14 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_num_bg_normal.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_02.png b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_02.png Binary files differnew file mode 100644 index 00000000..f3ff1edc --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_02.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_03.png b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_03.png Binary files differnew file mode 100644 index 00000000..05ddd261 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_03.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_04.png b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_04.png Binary files differnew file mode 100644 index 00000000..879851c0 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_04.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_05.png b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_05.png Binary files differnew file mode 100644 index 00000000..b5233245 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_05.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_06.png b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_06.png Binary files differnew file mode 100644 index 00000000..d320e18c --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Datetimepicker/tw_timepicker_wheel_06.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_brightness_off.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_brightness_off.png Binary files differnew file mode 100755 index 00000000..c1d4bf44 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_brightness_off.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_brightness_on.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_brightness_on.png Binary files differnew file mode 100755 index 00000000..22e92bf8 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_brightness_on.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_mute.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_mute.png Binary files differnew file mode 100755 index 00000000..a68530ae --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_mute.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_outdoor_off.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_outdoor_off.png Binary files differnew file mode 100755 index 00000000..5b0c4146 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_outdoor_off.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_outdoor_on.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_outdoor_on.png Binary files differnew file mode 100755 index 00000000..98276530 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_outdoor_on.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_sound.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_sound.png Binary files differnew file mode 100755 index 00000000..f66d6bad --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_sound.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_sound_off.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_sound_off.png Binary files differnew file mode 100755 index 00000000..3038dff3 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_sound_off.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_vibrate.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_vibrate.png Binary files differnew file mode 100755 index 00000000..23330743 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_device_options_vibrate.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_ic_lock_power_off.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_ic_lock_power_off.png Binary files differnew file mode 100755 index 00000000..35ab7604 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_ic_lock_power_off.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_ic_lock_restart.png b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_ic_lock_restart.png Binary files differnew file mode 100755 index 00000000..b32aa3a8 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Popup/tw_ic_lock_restart.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Progress/tw_scrubber_control_focused_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Progress/tw_scrubber_control_focused_holo_dark.png Binary files differnew file mode 100755 index 00000000..0d807e2c --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Progress/tw_scrubber_control_focused_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/Progress/tw_scrubber_control_holo_dark.png b/tau/src/css/profile/wearable/default/theme-black/images/Progress/tw_scrubber_control_holo_dark.png Binary files differnew file mode 100755 index 00000000..b7c6fdbb --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/Progress/tw_scrubber_control_holo_dark.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_field_btn_clear.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_field_btn_clear.png Binary files differnew file mode 100644 index 00000000..eff4c22d --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_field_btn_clear.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_field_btn_clear_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_field_btn_clear_press.png Binary files differnew file mode 100644 index 00000000..778108ea --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_field_btn_clear_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_search_icon.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_search_icon.png Binary files differnew file mode 100644 index 00000000..c634b56a --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_search_icon.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_brightness_01.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_brightness_01.png Binary files differnew file mode 100644 index 00000000..8f9214fa --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_brightness_01.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_brightness_02.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_brightness_02.png Binary files differnew file mode 100644 index 00000000..0df85e03 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_brightness_02.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_volume_01.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_volume_01.png Binary files differnew file mode 100644 index 00000000..1f410236 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_volume_01.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_volume_02.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_volume_02.png Binary files differnew file mode 100644 index 00000000..0f6f7f4b --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_button_volume_02.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_handle.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_handle.png Binary files differnew file mode 100644 index 00000000..3a646866 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_handle.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_handle_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_handle_press.png Binary files differnew file mode 100644 index 00000000..ecb7e42f --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_handle_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_popup_bg.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_popup_bg.png Binary files differnew file mode 100644 index 00000000..ef0a56ec --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/00_slider_popup_bg.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_back.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_back.png Binary files differnew file mode 100644 index 00000000..76183717 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_back.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_back_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_back_press.png Binary files differnew file mode 100644 index 00000000..76183717 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_back_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_call.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_call.png Binary files differnew file mode 100644 index 00000000..5b837fd1 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_call.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_call_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_call_press.png Binary files differnew file mode 100644 index 00000000..5b837fd1 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_call_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_check.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_check.png Binary files differnew file mode 100644 index 00000000..8df9a9cf --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_check.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_check_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_check_press.png Binary files differnew file mode 100644 index 00000000..8df9a9cf --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_check_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_cancel.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_cancel.png Binary files differnew file mode 100644 index 00000000..a5b56394 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_cancel.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_cancel_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_cancel_press.png Binary files differnew file mode 100644 index 00000000..a5b56394 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_cancel_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_closed.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_closed.png Binary files differnew file mode 100644 index 00000000..452209df --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_closed.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_closed_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_closed_press.png Binary files differnew file mode 100644 index 00000000..452209df --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_closed_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_minus.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_minus.png Binary files differnew file mode 100644 index 00000000..0f0170f7 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_minus.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_minus_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_minus_press.png Binary files differnew file mode 100644 index 00000000..0f0170f7 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_minus_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_opened.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_opened.png Binary files differnew file mode 100644 index 00000000..5b5cbd04 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_opened.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_opened_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_opened_press.png Binary files differnew file mode 100644 index 00000000..5b5cbd04 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_opened_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_send.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_send.png Binary files differnew file mode 100644 index 00000000..521b4b22 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_send.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_send_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_send_press.png Binary files differnew file mode 100644 index 00000000..521b4b22 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_expand_send_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_gear.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_gear.png Binary files differnew file mode 100644 index 00000000..8e4b359e --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_gear.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_gear_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_gear_press.png Binary files differnew file mode 100644 index 00000000..8e4b359e --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_gear_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_grid.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_grid.png Binary files differnew file mode 100644 index 00000000..ca6b7690 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_grid.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_grid_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_grid_press.png Binary files differnew file mode 100644 index 00000000..ca6b7690 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_grid_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_home.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_home.png Binary files differnew file mode 100644 index 00000000..1ba38209 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_home.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_home_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_home_press.png Binary files differnew file mode 100644 index 00000000..1ba38209 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_home_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_info.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_info.png Binary files differnew file mode 100644 index 00000000..1e5d984f --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_info.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_info_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_info_press.png Binary files differnew file mode 100644 index 00000000..1e5d984f --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_info_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_left.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_left.png Binary files differnew file mode 100644 index 00000000..b4eca6db --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_left.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_left_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_left_press.png Binary files differnew file mode 100644 index 00000000..b4eca6db --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_left_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_plus.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_plus.png Binary files differnew file mode 100644 index 00000000..12cbe299 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_plus.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_plus_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_plus_press.png Binary files differnew file mode 100644 index 00000000..12cbe299 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_plus_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_refresh.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_refresh.png Binary files differnew file mode 100644 index 00000000..33ff934d --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_refresh.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_refresh_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_refresh_press.png Binary files differnew file mode 100644 index 00000000..33ff934d --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_refresh_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_rename.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_rename.png Binary files differnew file mode 100644 index 00000000..e3603b86 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_rename.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_rename_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_rename_press.png Binary files differnew file mode 100644 index 00000000..e3603b86 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_rename_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_right.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_right.png Binary files differnew file mode 100644 index 00000000..659ea765 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_right.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_right_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_right_press.png Binary files differnew file mode 100644 index 00000000..659ea765 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_right_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_search.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_search.png Binary files differnew file mode 100644 index 00000000..12f47148 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_search.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_search_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_search_press.png Binary files differnew file mode 100644 index 00000000..12f47148 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_search_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_star.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_star.png Binary files differnew file mode 100644 index 00000000..f6083945 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_star.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_star_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_star_press.png Binary files differnew file mode 100644 index 00000000..f6083945 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_star_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_warning.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_warning.png Binary files differnew file mode 100644 index 00000000..4a39960a --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_warning.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_warning_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_warning_press.png Binary files differnew file mode 100644 index 00000000..4a39960a --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_button_warning_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump.png Binary files differnew file mode 100644 index 00000000..3692cbdb --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_left.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_left.png Binary files differnew file mode 100644 index 00000000..9c299acf --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_left.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_left_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_left_press.png Binary files differnew file mode 100644 index 00000000..9c299acf --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_left_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_press.png b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_press.png Binary files differnew file mode 100644 index 00000000..3692cbdb --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/controls/button/00_icon_jump_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_Back.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_Back.png Binary files differnew file mode 100644 index 00000000..815a3438 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_Back.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_Back_press.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_Back_press.png Binary files differnew file mode 100644 index 00000000..fcbc3466 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_Back_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_SIP_close_press_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_SIP_close_press_web.png Binary files differnew file mode 100644 index 00000000..5d036a34 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_SIP_close_press_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_SIP_close_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_SIP_close_web.png Binary files differnew file mode 100644 index 00000000..76f10ec9 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_SIP_close_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_cancel_press_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_cancel_press_web.png Binary files differnew file mode 100644 index 00000000..872ad335 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_cancel_press_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_cancel_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_cancel_web.png Binary files differnew file mode 100644 index 00000000..3c37e96a --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_cancel_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_delete_press_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_delete_press_web.png Binary files differnew file mode 100644 index 00000000..829c8b05 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_delete_press_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_delete_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_delete_web.png Binary files differnew file mode 100644 index 00000000..d105c7b1 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_delete_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_done_press_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_done_press_web.png Binary files differnew file mode 100644 index 00000000..b56c0f19 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_done_press_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_done_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_done_web.png Binary files differnew file mode 100644 index 00000000..7b58fc45 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_done_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_edit_press_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_edit_press_web.png Binary files differnew file mode 100644 index 00000000..b52b2b6a --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_edit_press_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_edit_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_edit_web.png Binary files differnew file mode 100644 index 00000000..a56d1f69 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_edit_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_more.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_more.png Binary files differnew file mode 100644 index 00000000..95f17c75 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_more.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_more_press.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_more_press.png Binary files differnew file mode 100644 index 00000000..d4d6951e --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_more_press.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_plus_press_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_plus_press_web.png Binary files differnew file mode 100644 index 00000000..f15fb719 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_plus_press_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_plus_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_plus_web.png Binary files differnew file mode 100644 index 00000000..d49406f6 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_plus_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_search_press_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_search_press_web.png Binary files differnew file mode 100644 index 00000000..464c5c77 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_search_press_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_search_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_search_web.png Binary files differnew file mode 100644 index 00000000..7788bece --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_search_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_select_all_press_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_select_all_press_web.png Binary files differnew file mode 100644 index 00000000..32ae22e4 --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_select_all_press_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_select_all_web.png b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_select_all_web.png Binary files differnew file mode 100644 index 00000000..ce4af60f --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/images/page/00_icon_select_all_web.png diff --git a/tau/src/css/profile/wearable/default/theme-black/style.less b/tau/src/css/profile/wearable/default/theme-black/style.less new file mode 100644 index 00000000..9cc4e6bd --- /dev/null +++ b/tau/src/css/profile/wearable/default/theme-black/style.less @@ -0,0 +1,4 @@ +@import "theme.less"; +@import "fixedUIStyle.less"; +@import "9-patch.less"; +@import "../wearable.less"; diff --git a/tau/src/css/profile/wearable/default/theme-black/theme.color.less b/tau/src/css/profile/wearable/default/theme-black/theme.color.less deleted file mode 100644 index 9a38c84c..00000000 --- a/tau/src/css/profile/wearable/default/theme-black/theme.color.less +++ /dev/null @@ -1,121 +0,0 @@ -/*************************************************************************** - Body -***************************************************************************/ -@color_bg: rgb(0, 0, 0); /* B011 : Main Background color */ -@color_text: rgb(250, 250, 250); /* B012 : Main font color */ - -/*************************************************************************** - Action Bar -***************************************************************************/ -@color_actionbar_title_text: rgb(255, 255, 255); -@color_actionbar_title_bg: rgb(75, 66, 55); -@color_actionbar_border: rgb(107, 86, 61); -@color_actionbar_more_pressed_bg: @color_button_default_press_bg; -@icon_actionbar_more_detail_normal: "./images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png"; -@icon_actionbar_more_detail_disable: "./images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png"; -@icon_actionbar_more_overflow_normal: "./images/Actionbar/tw_ic_menu_moreoverflow_normal_holo_dark.png"; -@icon_actionbar_more_overflow_disable: "./images/Actionbar/tw_ic_menu_moreoverflow_disable_holo_dark.png"; -@icon_actionbar_more_selectall_normal: "./images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png"; -@icon_actionbar_more_selectall_disable: "./images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png"; -@color_actionbar_tab_nav_active_bg: rgb(255, 144, 0); -/**************************************************************************** - Progress Bar -****************************************************************************/ -@color_progressbar_text: rgb(255, 255, 255); -@color_progressbar_normal_bg: rgb(17, 17, 17); -@color_progressbar_value_bg: rgb(255, 134, 0); - -/**************************************************************************** - Processing -****************************************************************************/ -@color_processing_text: rgb(255, 255, 255); - -/**************************************************************************** - Toggle Switch -****************************************************************************/ -@color_switch_text: rgb(255, 255, 255); -@color_switch_bg: rgb(255, 144, 0); -@color_switch_handler_bg: rgb(255, 255, 255); -@color_switch_activation_bg: rgb(38, 38, 38); -@color_swtich_activation_active_bg: rgb(64, 64, 64); -@color_switch_activation_disable_bg: rgb(26, 26, 26); -@color_switch_activation_checked_bg: rgb(255, 144, 0); -@color_switch_activation_active_checked_bg: rgb(255, 166, 51); -@color_switch_activation_disable_checked_bg: rgb(76, 43, 0); - -/*************************************************************************** - Buttons -***************************************************************************/ -@color_button_default_text: rgb(255, 255, 255); -@color_button_default_text_disable: rgb(51, 51, 51); -@color_button_default_normal_bg: rgb(75, 66, 55); -@color_button_default_focus_bg: rgb(75, 66, 55); -@color_button_default_press_bg: rgb(99, 93, 89); -@color_button_default_disable_bg: rgb(29, 26, 24); - -@color_button_red_text: rgb(255, 255, 255); -@color_button_red_text_disable: rgba(255, 255, 255, 0.15); -@color_button_red_normal_bg: #ce2302; -@color_button_red_focus_bg: #ce2302; -@color_button_red_press_bg: #dd654e; -@color_button_red_disable_bg: #4e1910; - -@color_button_orange_text: rgb(255, 255, 255); -@color_button_orange_text_disable: rgba(255, 255, 255, 0.15); -@color_button_orange_normal_bg: #ed8600; -@color_button_orange_focus_bg: #ed8600; -@color_button_orange_press_bg: #f0aa56; -@color_button_orange_disable_bg: #462805; - -@color_button_green_text: rgb(255, 255, 255); -@color_button_green_text_disable: rgba(255, 255, 255, 0.15); -@color_button_green_normal_bg: #64a323; -@color_button_green_focus_bg: #64a323; -@color_button_green_press_bg: #92be5e; -@color_button_green_disable_bg: #26351e; - -/*************************************************************************** - Popup -***************************************************************************/ -@color_popup_title_text: rgb(255, 144, 0); -@color_popup_bg: rgb(34, 34, 34); -@color_popup_border: rgb(128, 72, 0); -@color_popup_header_border: rgb(67, 67, 67); -@color_popup_button_bg: rgb(72, 65, 60); -@color_popup_button_press_bg: rgb(99, 93, 89); - -/*************************************************************************** - Popup -***************************************************************************/ -@color_list_border: rgb(64, 64, 64); -@color_list_press_bg: rgb(88, 74, 58); - -/*************************************************************************** - index scrollbar (vertical) -***************************************************************************/ -@color_indexscrollbar_bg: rgb(34, 34, 34); -@color_indexscrollbar_bg_supplementary: rgb(44, 44, 44); -@color_indexscrollbar_text: rgb(89, 89, 89); -@color_indexscrollbar_selected_bg: #f99107; -@color_indexscrollbar_selected_text: rgb(255, 255, 255); -@color_indexscrollbar_selected_text_supplementary: rgb(255, 144, 0); - -@color_indexscrollbar_indicator_bg: rgb(88, 73, 58); -@color_indexscrollbar_indicator_text_normal: rgb(255, 255, 255); -@color_indexscrollbar_indicator_text_selected: rgb(255, 144, 0); - -/*************************************************************************** - Listview -***************************************************************************/ -@color_listview_border: rgb(64, 64, 64); - -/*************************************************************************** - Scroller -***************************************************************************/ -@color_tab_normal: rgb(53, 48, 44); -@color_tab_active: rgb(249, 145, 7); -@color_scroller_scrollbar_color: #666666; -@bg_scroller_bouncing_effect_top: "./images/Scroller/scrollbar-bouncing-effect-top.png"; -@bg_scroller_bouncing_effect_bottom: "./images/Scroller/scrollbar-bouncing-effect-bottom.png"; -@bg_scroller_bouncing_effect_left: "./images/Scroller/scrollbar-bouncing-effect-left.png"; -@bg_scroller_bouncing_effect_right: "./images/Scroller/scrollbar-bouncing-effect-right.png"; diff --git a/tau/src/css/profile/wearable/default/theme-black/theme.less b/tau/src/css/profile/wearable/default/theme-black/theme.less index 9f2e5baa..9a38c84c 100644 --- a/tau/src/css/profile/wearable/default/theme-black/theme.less +++ b/tau/src/css/profile/wearable/default/theme-black/theme.less @@ -1,8 +1,121 @@ -@import "theme.color.less"; -@import "fixedUIStyle.less"; -@import "9-patch.less"; -@import "../wearable.less"; - -.tau-info-theme:after { - content: "black"; -} +/*************************************************************************** + Body +***************************************************************************/ +@color_bg: rgb(0, 0, 0); /* B011 : Main Background color */ +@color_text: rgb(250, 250, 250); /* B012 : Main font color */ + +/*************************************************************************** + Action Bar +***************************************************************************/ +@color_actionbar_title_text: rgb(255, 255, 255); +@color_actionbar_title_bg: rgb(75, 66, 55); +@color_actionbar_border: rgb(107, 86, 61); +@color_actionbar_more_pressed_bg: @color_button_default_press_bg; +@icon_actionbar_more_detail_normal: "./images/Actionbar/tw_ic_menu_detail_normal_holo_dark.png"; +@icon_actionbar_more_detail_disable: "./images/Actionbar/tw_ic_menu_detail_disable_holo_dark.png"; +@icon_actionbar_more_overflow_normal: "./images/Actionbar/tw_ic_menu_moreoverflow_normal_holo_dark.png"; +@icon_actionbar_more_overflow_disable: "./images/Actionbar/tw_ic_menu_moreoverflow_disable_holo_dark.png"; +@icon_actionbar_more_selectall_normal: "./images/Actionbar/tw_ic_menu_selectall_normal_holo_dark.png"; +@icon_actionbar_more_selectall_disable: "./images/Actionbar/tw_ic_menu_selectall_disable_holo_dark.png"; +@color_actionbar_tab_nav_active_bg: rgb(255, 144, 0); +/**************************************************************************** + Progress Bar +****************************************************************************/ +@color_progressbar_text: rgb(255, 255, 255); +@color_progressbar_normal_bg: rgb(17, 17, 17); +@color_progressbar_value_bg: rgb(255, 134, 0); + +/**************************************************************************** + Processing +****************************************************************************/ +@color_processing_text: rgb(255, 255, 255); + +/**************************************************************************** + Toggle Switch +****************************************************************************/ +@color_switch_text: rgb(255, 255, 255); +@color_switch_bg: rgb(255, 144, 0); +@color_switch_handler_bg: rgb(255, 255, 255); +@color_switch_activation_bg: rgb(38, 38, 38); +@color_swtich_activation_active_bg: rgb(64, 64, 64); +@color_switch_activation_disable_bg: rgb(26, 26, 26); +@color_switch_activation_checked_bg: rgb(255, 144, 0); +@color_switch_activation_active_checked_bg: rgb(255, 166, 51); +@color_switch_activation_disable_checked_bg: rgb(76, 43, 0); + +/*************************************************************************** + Buttons +***************************************************************************/ +@color_button_default_text: rgb(255, 255, 255); +@color_button_default_text_disable: rgb(51, 51, 51); +@color_button_default_normal_bg: rgb(75, 66, 55); +@color_button_default_focus_bg: rgb(75, 66, 55); +@color_button_default_press_bg: rgb(99, 93, 89); +@color_button_default_disable_bg: rgb(29, 26, 24); + +@color_button_red_text: rgb(255, 255, 255); +@color_button_red_text_disable: rgba(255, 255, 255, 0.15); +@color_button_red_normal_bg: #ce2302; +@color_button_red_focus_bg: #ce2302; +@color_button_red_press_bg: #dd654e; +@color_button_red_disable_bg: #4e1910; + +@color_button_orange_text: rgb(255, 255, 255); +@color_button_orange_text_disable: rgba(255, 255, 255, 0.15); +@color_button_orange_normal_bg: #ed8600; +@color_button_orange_focus_bg: #ed8600; +@color_button_orange_press_bg: #f0aa56; +@color_button_orange_disable_bg: #462805; + +@color_button_green_text: rgb(255, 255, 255); +@color_button_green_text_disable: rgba(255, 255, 255, 0.15); +@color_button_green_normal_bg: #64a323; +@color_button_green_focus_bg: #64a323; +@color_button_green_press_bg: #92be5e; +@color_button_green_disable_bg: #26351e; + +/*************************************************************************** + Popup +***************************************************************************/ +@color_popup_title_text: rgb(255, 144, 0); +@color_popup_bg: rgb(34, 34, 34); +@color_popup_border: rgb(128, 72, 0); +@color_popup_header_border: rgb(67, 67, 67); +@color_popup_button_bg: rgb(72, 65, 60); +@color_popup_button_press_bg: rgb(99, 93, 89); + +/*************************************************************************** + Popup +***************************************************************************/ +@color_list_border: rgb(64, 64, 64); +@color_list_press_bg: rgb(88, 74, 58); + +/*************************************************************************** + index scrollbar (vertical) +***************************************************************************/ +@color_indexscrollbar_bg: rgb(34, 34, 34); +@color_indexscrollbar_bg_supplementary: rgb(44, 44, 44); +@color_indexscrollbar_text: rgb(89, 89, 89); +@color_indexscrollbar_selected_bg: #f99107; +@color_indexscrollbar_selected_text: rgb(255, 255, 255); +@color_indexscrollbar_selected_text_supplementary: rgb(255, 144, 0); + +@color_indexscrollbar_indicator_bg: rgb(88, 73, 58); +@color_indexscrollbar_indicator_text_normal: rgb(255, 255, 255); +@color_indexscrollbar_indicator_text_selected: rgb(255, 144, 0); + +/*************************************************************************** + Listview +***************************************************************************/ +@color_listview_border: rgb(64, 64, 64); + +/*************************************************************************** + Scroller +***************************************************************************/ +@color_tab_normal: rgb(53, 48, 44); +@color_tab_active: rgb(249, 145, 7); +@color_scroller_scrollbar_color: #666666; +@bg_scroller_bouncing_effect_top: "./images/Scroller/scrollbar-bouncing-effect-top.png"; +@bg_scroller_bouncing_effect_bottom: "./images/Scroller/scrollbar-bouncing-effect-bottom.png"; +@bg_scroller_bouncing_effect_left: "./images/Scroller/scrollbar-bouncing-effect-left.png"; +@bg_scroller_bouncing_effect_right: "./images/Scroller/scrollbar-bouncing-effect-right.png"; diff --git a/tau/src/css/profile/wearable/default/wearable.less b/tau/src/css/profile/wearable/default/wearable.less index 997a9cb7..eb005e3c 100644 --- a/tau/src/css/profile/wearable/default/wearable.less +++ b/tau/src/css/profile/wearable/default/wearable.less @@ -1,7 +1,5 @@ @import "fixedUIStyle.less"; -@import "../../prefixer.less"; -@import "../../prefixer.ext.less"; @import "common/reset.less"; @import "common/core.less"; @import "common/layout.less"; @@ -18,4 +16,4 @@ @import "common/indexscrollbar.less"; @import "common/scroller.less"; @import "common/swipelist.less"; -@import "common/tabindicator.less"; +@import "common/tabindicator.less";
\ No newline at end of file diff --git a/tau/src/js/core/config.js b/tau/src/js/core/config.js index 1caea7c8..1cb38569 100644 --- a/tau/src/js/core/config.js +++ b/tau/src/js/core/config.js @@ -1,19 +1,8 @@ /*global window, define*/ /*jslint bitwise: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /* * @author Maciej Urbanski <m.urbanski@samsung.com> @@ -24,8 +13,7 @@ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( [ - "./core", - "./defaults" + "./core" ], function () { //>>excludeEnd("tauBuildExclude"); diff --git a/tau/src/js/core/core.js b/tau/src/js/core/core.js index 9b3eded2..c73da378 100644 --- a/tau/src/js/core/core.js +++ b/tau/src/js/core/core.js @@ -1,19 +1,8 @@ /*global window, console, define, ns, nsConfig */ /*jslint plusplus:true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Core namespace diff --git a/tau/src/js/core/decorator.js b/tau/src/js/core/decorator.js deleted file mode 100644 index 58cf74b1..00000000 --- a/tau/src/js/core/decorator.js +++ /dev/null @@ -1,38 +0,0 @@ -/*global define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Decorator namespace - * - * @class ns.decorator - */ -(function (ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "./core" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - ns.decorator = ns.decorator || {}; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.decorator; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(ns)); - diff --git a/tau/src/js/core/decorator/focusAnimation.js b/tau/src/js/core/decorator/focusAnimation.js deleted file mode 100644 index 7bc22d4e..00000000 --- a/tau/src/js/core/decorator/focusAnimation.js +++ /dev/null @@ -1,133 +0,0 @@ -/*global define, window, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Dectorator for animation - * - * @class ns.decorator.focusAnimation - */ -(function (window, document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../decorator" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var animation, - classes = { - focusPrefix: "ui-focus-", - blurPrefix: "ui-blur-", - up: "up", - down: "down", - left: "left", - right: "right", - background: "ui-background" - }, - status, - ANIMATION_DELAY = 200; - - function removeAnimationClasses(element, prefix) { - var elementClasses = element.classList; - - elementClasses.remove(prefix + classes.left); - elementClasses.remove(prefix + classes.up); - elementClasses.remove(prefix + classes.right); - elementClasses.remove(prefix + classes.down); - } - - function setAnimation(element, delay) { - var backgrounds = element.querySelectorAll("." + classes.background), - length = backgrounds.length, - style, - transition, - i; - - for (i = 0; i < length; i++) { - style = backgrounds[i].style; - transition = (delay || ANIMATION_DELAY) + "ms"; - style.webkitTransitionDuration = transition; - style.mozTransitionDuration = transition; - style.oTransitionDuration = transition; - style.msTransitionDuration = transition; - style.transitionDuration = transition; - } - } - - function prepareFocusAnimation(event) { - var options = event.detail || {}, - element = options.element, - direction = options.direction; - - if (element) { - setAnimation(element, options.duration); - removeAnimationClasses(element, classes.blurPrefix); - removeAnimationClasses(element, classes.focusPrefix); - if (direction) { - element.classList.add(classes.focusPrefix + direction); - } - } - } - - function prepareBlurAnimation(event) { - var options = event.detail || {}, - element = options.element, - direction = options.direction; - - if (element) { - setAnimation(element, options.duration); - removeAnimationClasses(element, classes.focusPrefix); - removeAnimationClasses(element, classes.blurPrefix); - if (direction) { - element.classList.add(classes.blurPrefix + direction); - } - } - } - - function enable() { - status = true; - document.addEventListener("taufocus", prepareFocusAnimation, false); - document.addEventListener("taublur", prepareBlurAnimation, false); - } - - function disable() { - status = false; - document.removeEventListener("taufocus", prepareFocusAnimation, false); - document.removeEventListener("taublur", prepareBlurAnimation, false); - } - - animation = { - classes: classes, - - enable: enable, - disable: disable, - isEnabled: function () { - return status; - } - }; - - ns.decorator.focusAnimation = animation; - - enable(); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return animation; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); diff --git a/tau/src/js/core/decorator/marquee.js b/tau/src/js/core/decorator/marquee.js deleted file mode 100644 index 29f4b1a8..00000000 --- a/tau/src/js/core/decorator/marquee.js +++ /dev/null @@ -1,328 +0,0 @@ -/* global define, window, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Dectorator for marquee - * - * @class ns.decorator.focusAnimation - */ -(function (window, document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../decorator", - "../util/DOM/css" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var marquee, - domUtils = ns.util.DOM, - classes = { - marquee: "ui-marquee", - marqueeStart: "ui-marquee-start", - clone: "ui-marquee-clone" - }, - // number of pixels per s - SPEED = 80, - // space in pixels between repeat - SPACE = 50, - status; - - /** - * Prepare animation stylesheet and css style on element. - * @method prepareAnimation - * @param {HTMLElement} element - * @param {string} index index of element - * @member ns.decorator.marquee - * @private - * @static - */ - function prepareAnimation(element, index) { - var style = document.createElement("style"), - elementWidth = element.scrollWidth + SPACE, - animationNode, - animationName = "marquee" + index, - animation; - - // prepare definition of animation - // the id of stylesheet is the same as name of animation used on element - style.id = animationName; - // @-webkit-keyframes - animation = "@-webkit-keyframes " + animationName +" {" + - " 0% { text-indent: 0px; }" + - " 100% { text-indent: -" + elementWidth + "px } }"; - // @keyframes - animation += " @keyframes " + animationName +" {" + - " 0% { text-indent: 0px; }" + - " 100% { text-indent: -" + elementWidth + "px } }"; - // @-moz-keyframes - animation += " @-moz-keyframes " + animationName +" {" + - " 0% { text-indent: 0px; }" + - " 100% { text-indent: -" + elementWidth + "px } }"; - // create text node with definition of animation - animationNode = document.createTextNode(animation); - - // add stylesheet with animation to document - style.appendChild(animationNode); - document.head.appendChild(style); - - // set animation on element - domUtils.setPrefixedStyle(element, "animation", animationName + " " + elementWidth/SPEED + "s linear 1s infinite"); - } - - /** - * Create copy of element - * @method createCopy - * @param {HTMLElement} element - * @member ns.decorator.marquee - * @private - * @static - */ - function createCopy(element) { - var clone, - cloneStyle; - - clone = element.cloneNode(true); - clone.classList.add(classes.clone); - domUtils.setPrefixedStyle(clone, "animation", ""); - cloneStyle = clone.style; - // set margins for cloned element - // this is space between text and its repeat - cloneStyle.marginLeft = SPACE + "px"; - cloneStyle.marginRight = SPACE + "px"; - element.appendChild(clone); - } - - /** - * Set marquee on single element. - * @method setMarqueeOnElement - * @param {HTMLElement} element - * @param {string} index index of element - * @param {boolean} [withoutCopy] if true, element will not be copied and there will be only long space - * @return {boolean} - * @member ns.decorator.marquee - * @private - * @static - */ - function setMarqueeOnElement(element, index, withoutCopy) { - var elementClasses = element.classList; - - // if text is longer than space, the marquee will be set - if (element.clientWidth < element.scrollWidth) { - // set animation - prepareAnimation(element, index); - if (!withoutCopy) { - createCopy(element); - } - elementClasses.add(classes.marqueeStart); - return true; - } - return false; - } - - /** - * Enable marquee on children of element - * @method setChildren - * @param {HTMLElement} element - * @param {string} index - * @member ns.decorator.marquee - * @private - * @static - */ - function setChildren(element, index) { - var marqueeStartClass = classes.marqueeStart, - children = element.children, - length = children.length, - status = false, - child, - i; - - // if element has children, we try to set marquee on elements inside - for (i = 0; i < length; i++) { - child = children[i]; - // if element has already set marquee, we finish adding marquee effect - if (child.classList.contains(marqueeStartClass)) { - return true; - } - if (child.children.length) { - // status OR result of function setChildren - status |= setChildren(child, index + i); - } else { - status |= setMarqueeOnElement(child, index + i); - } - } - - return status; - } - - /** - * Enable marquee on given element. - * @method prepareFocusAnimation - * @param {Event} event - * @member ns.decorator.marquee - * @private - * @static - */ - function prepareFocusAnimation(event) { - var options = event.detail || {}, - baseElement = options.element, - element = baseElement && baseElement.querySelector("." + classes.marquee), - children, - length, - success = false; - - if (element) { - children = element.children; - length = children.length; - - // if element has children, we try to set marquee on elements inside - if (length) { - success = setChildren(element, "0"); - // if marquee was not set on any child, we set it on element, - // but without making copy of element - if (!success) { - success = setMarqueeOnElement(element, "0", true); - } - } else { - // if element hasn't got children, the marquee is set on it - success = setMarqueeOnElement(element, "0"); - } - } - return success; - } - - /** - * Remove animation connected with marquee. - * @method removeAnimation - * @param {HTMLElement} element - * @member ns.decorator.marquee - * @private - * @static - */ - function removeAnimation(element) { - var elementStyle = element.style, - style; - - // the id of created stylesheet is the same as name of elements' animation - style = document.getElementById(elementStyle.animationName) || - document.getElementById(elementStyle.webkitAnimationName) || - document.getElementById(elementStyle.mozAnimationName); - - // remove stylesheet - if (style) { - style.parentNode.removeChild(style); - } - // remove animation set on element - domUtils.setPrefixedStyle(element, "animation", ""); - } - - /** - * Remove created element. - * @method removeCopiedElement - * @param {HTMLElement} element - * @member ns.decorator.marquee - * @private - * @static - */ - function removeCopiedElement(element) { - var clone = element.querySelector("." + classes.clone); - - // remove cloned element - if (clone) { - element.removeChild(clone); - } - // remove set styles on element - element.classList.remove(classes.marqueeStart); - } - - /** - * Disable marquee on given element. - * @method prepareBlurAnimation - * @param {Event} event - * @member ns.decorator.marquee - * @private - * @static - */ - function prepareBlurAnimation(event) { - var options = event.detail || {}, - element = options.element, - marqueeStartElements = element && [].slice.call(element.querySelectorAll("." + classes.marqueeStart)), - length = marqueeStartElements && marqueeStartElements.length, - item, - i; - - // remove style and animation for marquee elements - for (i = 0; i < length; i++) { - item = marqueeStartElements[i]; - removeCopiedElement(item); - removeAnimation(item); - } - } - - /** - * Enable decorator - * @method enable - * @member ns.decorator.marquee - * @static - */ - function enable() { - if (!status) { - document.addEventListener("taufocus", prepareFocusAnimation, false); - document.addEventListener("taublur", prepareBlurAnimation, false); - } - status = true; - } - - /** - * Disable decorator - * @method enable - * @member ns.decorator.marquee - * @static - */ - function disable() { - status = false; - document.removeEventListener("taufocus", prepareFocusAnimation, false); - document.removeEventListener("taublur", prepareBlurAnimation, false); - } - - marquee = { - classes: classes, - - enable: enable, - disable: disable, - /** - * Return status of decorator - * @method isEnabled - * @member ns.decorator.marquee - * @static - */ - isEnabled: function () { - return status; - } - }; - - ns.decorator.marquee = marquee; - - enable(); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return marquee; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); diff --git a/tau/src/js/core/defaults.js b/tau/src/js/core/defaults.js deleted file mode 100644 index 16749fbf..00000000 --- a/tau/src/js/core/defaults.js +++ /dev/null @@ -1,111 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint plusplus: true, nomen: true */ -// * @TODO add support of $.mobile.buttonMarkup.hoverDelay -/* - * Defaults settings object - * @author Maciej Urbanski <m.urbanski@samsung.com> - * @class ns.defaults - */ -(function (ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "./core" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - ns.defaults = {}; - - Object.defineProperty(ns.defaults, "autoInitializePage", { - get: function(){ - return ns.getConfig("autoInitializePage", true); - }, - set: function(value){ - return ns.setConfig("autoInitializePage", value); - } - }); - - Object.defineProperty(ns.defaults, "dynamicBaseEnabled", { - get: function(){ - return ns.getConfig("dynamicBaseEnabled", true); - }, - set: function(value){ - return ns.setConfig("dynamicBaseEnabled", value); - } - }); - - Object.defineProperty(ns.defaults, "pageTransition", { - get: function(){ - return ns.getConfig("pageTransition", "none"); - }, - set: function(value){ - return ns.setConfig("pageTransition", value); - } - }); - - Object.defineProperty(ns.defaults, "popupTransition", { - get: function(){ - return ns.getConfig("popupTransition", "none"); - }, - set: function(value){ - return ns.setConfig("popupTransition", value); - } - }); - - Object.defineProperty(ns.defaults, "popupFullSize", { - get: function(){ - return ns.getConfig("popupFullSize", false); - }, - set: function(value){ - return ns.setConfig("popupFullSize", value); - } - }); - - Object.defineProperty(ns.defaults, "enablePageScroll", { - get: function(){ - return ns.getConfig("enablePageScroll", false); - }, - set: function(value){ - return ns.setConfig("enablePageScroll", value); - } - }); - - Object.defineProperty(ns.defaults, "scrollEndEffectArea", { - get: function(){ - return ns.getConfig("scrollEndEffectArea", "content"); - }, - set: function(value){ - return ns.setConfig("scrollEndEffectArea", value); - } - }); - - Object.defineProperty(ns.defaults, "enablePopupScroll", { - get: function(){ - return ns.getConfig("enablePopupScroll", false); - }, - set: function(value){ - return ns.setConfig("enablePopupScroll", value); - } - }); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - } - ); - //>>excludeEnd("tauBuildExclude"); -}(ns)); diff --git a/tau/src/js/core/engine.js b/tau/src/js/core/engine.js index 2bc75499..1bf3ec6c 100644 --- a/tau/src/js/core/engine.js +++ b/tau/src/js/core/engine.js @@ -1,19 +1,8 @@ /*global window, define, ns, Node, HTMLElement */ /*jslint nomen: true, plusplus: true, bitwise: false */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Engine @@ -242,7 +231,7 @@ * @method getBinding * @static * @param {HTMLElement|string} element - * @param {string} [type] widget name + * @param {string} type widget name * @return {?Object} * @member ns.engine */ @@ -364,7 +353,6 @@ element.removeAttribute(DATA_BOUND); element.removeAttribute(DATA_NAME); } - /** * Remove binding data attributes for element. * @method _removeBindingAttributes @@ -516,27 +504,6 @@ } /** - * If element not exist create base element for widget. - * @method ensureElement - * @param {HTMLElement} element - * @param {ns.widget.BaseWidget} Widget - * @return {HTMLElement} - * @static - * @private - * @member ns.engine - */ - function ensureElement(element, Widget) { - if (!element || !element instanceof HTMLElement) { - if (typeof Widget.createEmptyElement === TYPE_FUNCTION) { - element = Widget.createEmptyElement(); - } else { - element = document.createElement("div"); - } - } - return element; - } - - /** * Load widget * @method processWidget * @param {HTMLElement} element base element of widget @@ -555,16 +522,11 @@ /** * @type {ns.widget.BaseWidget} widgetInstance */ - widgetInstance, + widgetInstance = Widget ? new Widget(element) : false, buildAttribute, - parentEnhance, + parentEnhance = selectors.getParentsBySelectorNS(element, 'enhance=false'), existingBinding; - element = ensureElement(element, Widget); - widgetInstance = Widget ? new Widget(element) : false; - // if any parent has attribute data-enhance=false then stop building widgets - parentEnhance = selectors.getParentsBySelectorNS(element, 'enhance=false'); - // While processing widgets queue other widget may built this one before // it reaches it's turn existingBinding = getBinding(element, definition.name); @@ -683,10 +645,8 @@ widgetInstance = widgetGroup[widgetName]; //Destroy widget - if (widgetInstance) { - widgetInstance.destroy(); - widgetInstance.trigger("widgetdestroyed"); - } + widgetInstance.destroy(); + widgetInstance.trigger("widgetdestroyed"); } } } @@ -714,8 +674,7 @@ * @member ns.engine */ function processHollowWidget(element, definition, options) { - var name = (element && element.getAttribute(DATA_NAME)) || - (definition && definition.name); + var name = element.getAttribute(DATA_NAME) || (definition && definition.name); //>>excludeStart("tauDebug", pragmas.tauDebug); if (!name) { ns.error("Processing hollow widget without name on element:", element); @@ -738,10 +697,6 @@ function compareByDepth(nodeA, nodeB) { var mask = Node.DOCUMENT_POSITION_CONTAINS | Node.DOCUMENT_POSITION_PRECEDING; - if (nodeA.element === nodeB.element) { - return 0; - } - if (nodeA.element.compareDocumentPosition(nodeB.element) & mask) { return 1; } @@ -783,10 +738,6 @@ widgetName, definitionSelectors; - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - window.tauPerf.start("engine/createWidgets"); - //>>excludeEnd("tauPerformance"); - //>>excludeStart("tauDebug", pragmas.tauDebug); ns.log("Start creating widgets on:", (context.tagName || (context.documentElement && "document")) + "#" + (context.id || "--no-id--")); //>>excludeEnd("tauDebug"); @@ -820,17 +771,6 @@ // Build all widgets from queue buildQueue.forEach(processBuildQueueItem); - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - document.addEventListener(eventType.BOUND, function _boundPerfListener() { - document.removeEventListener(eventType.BOUND, _boundPerfListener); - window.tauPerf.get("engine/createWidgets", "event: " + eventType.BOUND); - }); - document.addEventListener("built", function _builtPerfListener() { - document.removeEventListener("built", _builtPerfListener); - window.tauPerf.get("engine/createWidgets", "event: built"); - }); - //>>excludeEnd("tauPerformance"); - eventUtils.trigger(document, "built"); eventUtils.trigger(document, eventType.BOUND); //>>excludeStart("tauDebug", pragmas.tauDebug); @@ -916,36 +856,6 @@ router.destroy(); } } - - /** - * Add to object value at index equal to type of arg. - * @method getType - * @param {Object} result - * @param {*} arg - * @return {Object} - * @static - * @private - * @member ns.engine - */ - function getType(result, arg) { - var type = arg instanceof HTMLElement ? "HTMLElement" : typeof arg; - result[type] = arg; - return result; - } - - /** - * Convert args array to object with keys being types and arguments mapped by values - * @method getArgumentsTypes - * @param {Arguments[]} args - * @return {Object} - * @static - * @private - * @member ns.engine - */ - function getArgumentsTypes(args) { - return tau.util.array.reduce(args, getType, {}); - } - /* document.addEventListener(eventType.BOUND, function () { //@TODO dump it to file for faster binding by ids @@ -1026,10 +936,6 @@ * @member ns.engine */ run: function () { - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - window.tauPerf.start("framework"); - window.tauPerf.get("framework", "run()"); - //>>excludeEnd("tauPerformance"); stop(); eventUtils.fastOn(document, "create", createEventHandler); @@ -1073,28 +979,22 @@ * Build instance of widget and binding events * Returns error when empty element is passed * @method instanceWidget - * @param {HTMLElement} [element] + * @param {HTMLElement} element * @param {string} name - * @param {Object} [options] + * @param {Object} options * @return {?Object} * @static * @member ns.engine */ instanceWidget: function (element, name, options) { - var binding, - definition, - argumentsTypes = getArgumentsTypes(arguments); - - // Map arguments with specific types to correct variables - // Only name is required argument - element = argumentsTypes.HTMLElement; - name = argumentsTypes.string; - options = argumentsTypes.object; - // If element exists try to find existing binding - if (element) { - binding = getBinding(element, name); + var binding = getBinding(element, name), + definition; + + if (!element) { + ns.error("'element' cannot be empty"); + return null; } - // If didn't found binding build new widget + if (!binding && widgetDefs[name]) { definition = widgetDefs[name]; element = processHollowWidget(element, definition, options); diff --git a/tau/src/js/core/event.js b/tau/src/js/core/event.js index e6995eb3..955f7d22 100644 --- a/tau/src/js/core/event.js +++ b/tau/src/js/core/event.js @@ -1,19 +1,8 @@ /*global window, ns, define, CustomEvent */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Events @@ -279,46 +268,6 @@ }, /** - * Add event listener to element with prefixes for all browsers - * @method fastPrefixedOn - * @param {HTMLElement} element - * @param {string} type - * @param {Function} listener - * @param {boolean} [useCapture=false] - * @member ns.event - * @static - */ - prefixedFastOn: function(element, type, listener, useCapture) { - var nameForPrefix = type.charAt(0).toLocaleUpperCase() + type.substring(1); - - element.addEventListener(type.toLowerCase(), listener, useCapture || false); - element.addEventListener("webkit" + nameForPrefix, listener, useCapture || false); - element.addEventListener("moz" + nameForPrefix, listener, useCapture || false); - element.addEventListener("ms" + nameForPrefix, listener, useCapture || false); - element.addEventListener("o" + nameForPrefix.toLowerCase(), listener, useCapture || false); - }, - - /** - * Remove event listener to element with prefixes for all browsers - * @method fastPrefixedOff - * @param {HTMLElement} element - * @param {string} type - * @param {Function} listener - * @param {boolean} [useCapture=false] - * @member ns.event - * @static - */ - prefixedFastOff: function(element, type, listener, useCapture) { - var nameForPrefix = type.charAt(0).toLocaleUpperCase() + type.substring(1); - - element.removeEventListener(type.toLowerCase(), listener, useCapture || false); - element.removeEventListener("webkit" + nameForPrefix, listener, useCapture || false); - element.removeEventListener("moz" + nameForPrefix, listener, useCapture || false); - element.removeEventListener("ms" + nameForPrefix, listener, useCapture || false); - element.removeEventListener("o" + nameForPrefix.toLowerCase(), listener, useCapture || false); - }, - - /** * Add event listener to element that can be added addEventListner * @method on * @param {HTMLElement|HTMLDocument|Window} element diff --git a/tau/src/js/core/event/gesture.js b/tau/src/js/core/event/gesture.js index 71248799..8fa6e76e 100644 --- a/tau/src/js/core/event/gesture.js +++ b/tau/src/js/core/event/gesture.js @@ -1,20 +1,8 @@ /*global window, define, CustomEvent */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /* * @class ns.event.gesture */ diff --git a/tau/src/js/core/event/gesture/core.js b/tau/src/js/core/event/gesture/core.js index 44ec72e5..11cfbd5d 100644 --- a/tau/src/js/core/event/gesture/core.js +++ b/tau/src/js/core/event/gesture/core.js @@ -1,20 +1,8 @@ /*global ns, window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Gesture Namespace * Core object enables multi gesture support. diff --git a/tau/src/js/core/event/gesture/detector.js b/tau/src/js/core/event/gesture/detector.js index d4ecadd9..589e07dc 100644 --- a/tau/src/js/core/event/gesture/detector.js +++ b/tau/src/js/core/event/gesture/detector.js @@ -1,20 +1,8 @@ /*global ns, window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Gesture.Detector class * Base class for create detectors in gestures. diff --git a/tau/src/js/core/event/gesture/instance.js b/tau/src/js/core/event/gesture/instance.js index f93a741b..b9f741a3 100644 --- a/tau/src/js/core/event/gesture/instance.js +++ b/tau/src/js/core/event/gesture/instance.js @@ -1,20 +1,8 @@ /*global ns, window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Gesture.Instance class * Creates instance of gesture manager on element. @@ -178,7 +166,7 @@ * @member ns.event.gesture.Instance */ trigger: function( gesture, eventInfo ) { - return events.trigger(this.element, gesture, eventInfo, false); + events.trigger(this.element, gesture, eventInfo); }, /** diff --git a/tau/src/js/core/event/gesture/manager.js b/tau/src/js/core/event/gesture/manager.js index 6e9161a8..473d0cb2 100644 --- a/tau/src/js/core/event/gesture/manager.js +++ b/tau/src/js/core/event/gesture/manager.js @@ -1,20 +1,8 @@ /*global ns, window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Gesture.Manager class * Main class controls all gestures. @@ -61,7 +49,6 @@ Gesture.Manager = (function() { var instance = null, - startEvent = null, isReadyDetecting = false, blockMouseEvent = false, @@ -193,8 +180,7 @@ */ _start: function( event ) { var elem = event.currentTarget, - startEvent = {}, - detectors = []; + startEvent, detectors = []; if ( !isReadyDetecting ) { this._resetDetecting(); @@ -212,11 +198,12 @@ x: 0, y: 0 }; - - startEvent = objectMerge(startEvent, this._createGestureEvent(Gesture.Event.START, event)); - isReadyDetecting = true; } + isReadyDetecting = true; + + startEvent = objectMerge(startEvent, this._createGestureEvent(Gesture.Event.START, event)); + this.instances.forEach(function( instance ) { if ( instance.getElement() === elem ) { detectors = detectors.concat( instance.getGestureDetectors() ); @@ -385,7 +372,6 @@ */ _resetDetecting: function() { isReadyDetecting = false; - startEvent = null this.gestureDetectors.length = 0; this.runningDetectors.length = 0; diff --git a/tau/src/js/core/event/gesture/plugins/drag.js b/tau/src/js/core/event/gesture/plugins/drag.js index 1e5e5d78..d7bf65c5 100644 --- a/tau/src/js/core/event/gesture/plugins/drag.js +++ b/tau/src/js/core/event/gesture/plugins/drag.js @@ -1,20 +1,8 @@ /*global ns, window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * # Gesture Plugin: drag * Plugin enables drag event. @@ -89,13 +77,15 @@ * @property {boolean} [defaults.blockHorizontal=false] * @property {boolean} [defaults.blockVertical=false] * @property {number} [defaults.threshold=10] + * @property {number} [defaults.angleThreshold=20] * @property {number} [defaults.delay=0] * @member ns.event.gesture.Drag */ defaults: { blockHorizontal: false, blockVertical: false, - threshold: 20, + threshold: 10, + angleThreshold: 20, delay: 0 }, @@ -118,6 +108,7 @@ handler: function( gestureEvent, sender, options ) { var ge = gestureEvent, threshold = options.threshold, + angleThreshold = options.angleThreshold, result = Gesture.Result.PENDING, event = { drag: this.types[0], @@ -125,7 +116,8 @@ end: this.types[2], cancel: this.types[3] }, - direction = ge.direction; + direction = ge.direction, + angle = Math.abs(ge.angle); if ( !this.triggerd && ge.eventType === Gesture.Event.MOVE ) { if ( Math.abs(ge.deltaX) < threshold && Math.abs(ge.deltaY) < threshold ) { @@ -141,10 +133,20 @@ } return Gesture.Result.PENDING; } + if ( options.blockHorizontal && Gesture.utils.isHorizontal( ge.direction ) || options.blockVertical && Gesture.utils.isVertical( ge.direction ) ) { return Gesture.Result.FINISHED; } + + if ( options.blockHorizontal && ( angle < 90 - angleThreshold || angle > 90 + angleThreshold ) ) { + return Gesture.Result.FINISHED; + } + + if ( options.blockVertical && ( angle > 0 + angleThreshold && angle < 180 - angleThreshold ) ) { + return Gesture.Result.FINISHED; + } + this.fixedStartPointX = 0; this.fixedStartPointY = 0; if ( Gesture.utils.isHorizontal( ge.direction ) ) { @@ -176,16 +178,19 @@ this.triggerd = false; break; case Gesture.Event.MOVE: + + result = Gesture.Result.RUNNING; if ( !this.triggerd ) { sender.sendEvent( event.start, ge ); } - result = sender.sendEvent( event.drag, ge ) ? Gesture.Result.RUNNING : Gesture.Result.FINISHED; + sender.sendEvent( event.drag, ge ); ge.preventDefault(); this.triggerd = true; break; case Gesture.Event.BLOCKED: case Gesture.Event.END: + result = Gesture.Result.FINISHED; if ( this.triggerd ) { sender.sendEvent( event.end, ge ); @@ -195,6 +200,7 @@ break; case Gesture.Event.CANCEL: + result = Gesture.Result.FINISHED; if ( this.triggerd ) { sender.sendEvent( event.cancel, ge ); diff --git a/tau/src/js/core/event/gesture/plugins/swipe.js b/tau/src/js/core/event/gesture/plugins/swipe.js index 37e64b53..d4939cde 100644 --- a/tau/src/js/core/event/gesture/plugins/swipe.js +++ b/tau/src/js/core/event/gesture/plugins/swipe.js @@ -1,20 +1,8 @@ /*global ns, window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Gesture Plugin: swipe * Plugin enables swipe event. diff --git a/tau/src/js/core/event/gesture/utils.js b/tau/src/js/core/event/gesture/utils.js index bd55c6bb..1acda953 100644 --- a/tau/src/js/core/event/gesture/utils.js +++ b/tau/src/js/core/event/gesture/utils.js @@ -1,20 +1,8 @@ /*global ns, window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Gesture Utilities * Contains helper function to gesture support. diff --git a/tau/src/js/core/event/hwkey.js b/tau/src/js/core/event/hwkey.js index c71aa235..78e3ef16 100644 --- a/tau/src/js/core/event/hwkey.js +++ b/tau/src/js/core/event/hwkey.js @@ -1,19 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Event hwkey * Namespace to support tizenhwkey event @@ -59,20 +47,6 @@ } } }, - selectMenuClose = function (event) { - var keyName = event.keyName, - elActiveSelectMenu, - activeSelectMenu; - if (ns.getConfig("enableHWKeyHandler", true) && (keyName === "menu" || keyName === "back")){ - elActiveSelectMenu = document.querySelector("div.ui-selectmenu-active select"); - if (elActiveSelectMenu) { - activeSelectMenu = ns.widget.SelectMenu(elActiveSelectMenu); - activeSelectMenu.close(); - event.preventDefault(); - event.stopPropagation(); - } - } - }, hwkey = { /** * Bind event tizenhwkey to support hardware keys. @@ -82,7 +56,6 @@ */ bind: function () { document.addEventListener("tizenhwkey", popupClose, true); - document.addEventListener("tizenhwkey", selectMenuClose, true); }, /** @@ -93,7 +66,6 @@ */ unbind: function () { document.removeEventListener("tizenhwkey", popupClose, true); - document.removeEventListener("tizenhwkey", selectMenuClose, true); } }; diff --git a/tau/src/js/core/event/orientationchange.js b/tau/src/js/core/event/orientationchange.js index ae7e57cb..cd4ecb0e 100644 --- a/tau/src/js/core/event/orientationchange.js +++ b/tau/src/js/core/event/orientationchange.js @@ -1,19 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Event orientationchange * Namespace to support orientationchange event diff --git a/tau/src/js/core/event/page.js b/tau/src/js/core/event/page.js index deddeb3c..427c0fa1 100644 --- a/tau/src/js/core/event/page.js +++ b/tau/src/js/core/event/page.js @@ -1,19 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ (function (window, document, ns) { "use strict"; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); diff --git a/tau/src/js/core/event/throttledresize.js b/tau/src/js/core/event/throttledresize.js index 2dff5d6e..0a87a72a 100644 --- a/tau/src/js/core/event/throttledresize.js +++ b/tau/src/js/core/event/throttledresize.js @@ -1,19 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Event throttledresize * Object supports throttledresize event. diff --git a/tau/src/js/core/event/touch.js b/tau/src/js/core/event/touch.js index 29101260..33028a95 100644 --- a/tau/src/js/core/event/touch.js +++ b/tau/src/js/core/event/touch.js @@ -1,19 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Touch events * Reimplementation of jQuery Mobile virtual mouse events. diff --git a/tau/src/js/core/event/vmouse.js b/tau/src/js/core/event/vmouse.js index 5c54b8aa..be1abb8f 100644 --- a/tau/src/js/core/event/vmouse.js +++ b/tau/src/js/core/event/vmouse.js @@ -1,20 +1,8 @@ /*global CustomEvent, define, window, ns */ /*jslint plusplus: true, nomen: true, bitwise: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Virtual Mouse Events * Reimplementation of jQuery Mobile virtual mouse events. @@ -68,13 +56,13 @@ ], function () { //>>excludeEnd("tauBuildExclude"); - /** - * Object with default options - * @property {Object} vmouse - * @member ns.event.vmouse - * @static - * @private - **/ + /** + * Object with default options + * @property {Object} vmouse + * @member ns.event.vmouse + * @static + * @private + **/ var vmouse, /** * @property {Object} eventProps Contains the properties which are copied from the original event to custom v-events @@ -97,11 +85,6 @@ * @private **/ didScroll, - /** @property {HTMLElement} lastOver holds reference to last element that touch was over - * @member ns.event.vmouse - * @private - */ - lastOver = null, /** * @property {Number} [startX=0] Initial data for touchstart event * @member ns.event.vmouse @@ -114,7 +97,7 @@ * @member ns.event.vmouse * @private * @static - **/ + **/ startY = 0, touchEventProps = ["clientX", "clientY", "pageX", "pageY", "screenX", "screenY"], KEY_CODES = { @@ -202,7 +185,7 @@ * @method fireEvent * @param {string} eventName event name * @param {Event} evt original event - * @param {Object} [properties] Sets the special properties for position + * @param {Object} properties Sets the special properties for position * @return {boolean} * @private * @static @@ -341,22 +324,14 @@ */ function handleTouchStart(evt) { var touches = evt.touches, - firstTouch, - over; + firstTouch; //if touches are registered and we have only one touch if (touches && touches.length === 1) { didScroll = false; firstTouch = touches[0]; startX = firstTouch.pageX; startY = firstTouch.pageY; - - // Check if we have touched something on our page - // @TODO refactor for multi touch - over = document.elementFromPoint(startX, startY); - if (over) { - lastOver = over; - fireEvent("vmouseover", evt); - } + fireEvent("vmouseover", evt); fireEvent("vmousedown", evt); } @@ -375,8 +350,6 @@ if (touches && touches.length === 0) { fireEvent("vmouseup", evt); fireEvent("vmouseout", evt); - // Reset flag for last over element - lastOver = null; } } @@ -392,7 +365,7 @@ var over, firstTouch = evt.touches && evt.touches[0], didCancel = didScroll, - //sets the threshold, based on which we consider if it was the touch-move event + //sets the threshold, based on which we consider if it was the touch-move event moveThreshold = vmouse.eventDistanceThreshold; /** @@ -409,23 +382,20 @@ } didScroll = didScroll || - //check in both axes X,Y if the touch-move event occur + //check in both axes X,Y if the touch-move event occur (Math.abs(firstTouch.pageX - startX) > moveThreshold || - Math.abs(firstTouch.pageY - startY) > moveThreshold); + Math.abs(firstTouch.pageY - startY) > moveThreshold); // detect over event // for compatibility with mouseover because "touchenter" fires only once - // @TODO Handle many touches - over = document.elementFromPoint(firstTouch.pageX, firstTouch.pageY); - if (over && lastOver !== over) { - lastOver = over; - fireEvent("vmouseover", evt); + over = document.elementFromPoint(evt.pageX, evt.pageY); + if (over) { + fireEvent("_touchover", evt); } //if didscroll occur and wasn't canceled then trigger touchend otherwise just touchmove if (didScroll && !didCancel) { fireEvent("vmousecancel", evt); - lastOver = null; } fireEvent("vmousemove", evt); } @@ -455,7 +425,18 @@ */ function handleTouchCancel(evt) { fireEvent("vmousecancel", evt); - lastOver = null; + } + + /** + * Handle touch cancel + * @method handleTouchOver + * @private + * @static + * @member ns.event.vmouse + */ + function handleTouchOver() { + return false; + // @TODO add callback with handleTouchOver, } /** @@ -511,19 +492,6 @@ } } - /** - * Binds events common to mouse and touch to support virtual mouse. - * @method bindCommonEvents - * @static - * @member ns.event.vmouse - */ - vmouse.bindCommonEvents = function () { - document.addEventListener("keyup", handleKeyUp, true); - document.addEventListener("keydown", handleKeyDown, true); - document.addEventListener("scroll", handleScroll, true); - document.addEventListener("click", handleClick, true); - }; - // @TODO delete touchSupport flag and attach touch and mouse listeners, // @TODO check if v-events are not duplicated if so then called only once @@ -537,13 +505,16 @@ document.addEventListener("touchstart", handleTouchStart, true); document.addEventListener("touchend", handleTouchEnd, true); document.addEventListener("touchmove", handleTouchMove, true); - document.addEventListener("touchcancel", handleTouchCancel, true); - // touchenter and touchleave are removed from W3C spec - // No need to listen to touchover as it has never exited - // document.addEventListener("touchenter", handleTouchOver, true); + // @TODO add callback with handleTouchOver, + document.addEventListener("touchenter", handleTouchOver, true); + // for compatibility with mouseover because "touchenter" fires only once + // @TODO add callback with handleTouchOver, + document.addEventListener("_touchover", handleTouchOver, true); // document.addEventListener("touchleave", callbacks.out, true); document.addEventListener("touchcancel", handleTouchCancel, true); + + document.addEventListener("click", handleClick, true); }; /** @@ -559,6 +530,11 @@ document.addEventListener("mousemove", handleMove, true); document.addEventListener("mouseover", handleOver, true); document.addEventListener("mouseout", handleOut, true); + + document.addEventListener("keyup", handleKeyUp, true); + document.addEventListener("keydown", handleKeyDown, true); + document.addEventListener("scroll", handleScroll, true); + document.addEventListener("click", handleClick, true); }; ns.event.vmouse = vmouse; @@ -568,11 +544,10 @@ } else { vmouse.bindMouse(); } - vmouse.bindCommonEvents(); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.event.vmouse; } ); //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns));
\ No newline at end of file +}(window, window.document, ns)); diff --git a/tau/src/js/core/frameworkData.js b/tau/src/js/core/frameworkData.js index 7faec613..e707ba37 100644 --- a/tau/src/js/core/frameworkData.js +++ b/tau/src/js/core/frameworkData.js @@ -1,19 +1,8 @@ /*global window, define, ns*/ /*jslint bitwise: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Framework Data Object @@ -277,9 +266,6 @@ cssElements.forEach(findThemeInLinks); scriptElements.forEach(findFrameworkDataInScripts); - - cssElements = null; - scriptElements = null; }; ns.frameworkData = frameworkData; diff --git a/tau/src/js/core/info.js b/tau/src/js/core/info.js deleted file mode 100644 index d8710059..00000000 --- a/tau/src/js/core/info.js +++ /dev/null @@ -1,92 +0,0 @@ -/*global window, ns, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Info - * - * Various TAU information - * @class ns.info - */ -(function (window, document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "./core", - "./event" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - /** - * @property {Object} info - * @property {string} [info.profile="default"] Current runtime profile - * @property {string} [info.theme="default"] Current runtime theme - * @property {string} info.version Current runtime version - * @member ns.info - * @static - */ - var eventUtils = ns.event, - info = { - profile: "default", - theme: "default", - version: ns.version, - - /** - * Refreshes information about runtime - * @method refreshTheme - * @param {Function} done Callback run when the theme is discovered - * @member ns.info - * @return {null|String} - * @static - */ - refreshTheme: function (done) { - var el = document.createElement("span"), - parent = document.body, - themeName = null; - - if (document.readyState !== "interactive" && document.readyState !== "complete") { - eventUtils.fastOn(document, "DOMContentLoaded", this.refreshTheme.bind(this, done)); - return null; - } - el.classList.add("tau-info-theme"); - - parent.appendChild(el); - themeName = window.getComputedStyle(el, ":after").content; - parent.removeChild(el); - - if (themeName && themeName.length > 0) { - this.theme = themeName; - } - - themeName = themeName || null; - - if (done) { - done(themeName); - } - - return themeName; - } - }; - - info.refreshTheme(); - - ns.info = info; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.info; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); diff --git a/tau/src/js/core/init.js b/tau/src/js/core/init.js index b7c2f860..48bc5582 100644 --- a/tau/src/js/core/init.js +++ b/tau/src/js/core/init.js @@ -1,18 +1,7 @@ /*global define, window */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /* * @author Maciej Urbanski <m.urbanski@samsung.com> diff --git a/tau/src/js/core/layout.js b/tau/src/js/core/layout.js deleted file mode 100644 index b28bb1bc..00000000 --- a/tau/src/js/core/layout.js +++ /dev/null @@ -1,81 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/* - * #Namespace for Layouts - * - * ## Creating new layout - * - * New layout has to have implemented methods: - * - configure - * - enable - * - disable - * - * All of these methods have to be static and take two arguments: - * - instance of Box widget - * - widget's element - * - * Moreover new layout has to have property "name" with the name of layout. - * - * Layout can be used only if it is registered in widget Box. Layout can register - * itself by calling method *Box.register* and giving two arguments: name and object, - * which describes all properties and static methods of layout. - * - * @example - * var layout = {}; - * - * layout.name = "layout_name"; - * - * layout.configure = function (self, element) { - * // configure layout - * // e.g. set options connected with this layout - * } - * - * layout.enable = function (self, element) { - * // enable layout - * // e.g. add proper CSS classes for element, - * // create CSS rules for layout - * } - * - * layout.disable = function (self, element) { - * // disable layout - * // (revert all changes, which are made in function "enable") - * // e.g. remove CSS classes - * } - * - * Box.register("layout_name", layout); - * - * - * - * @class ns.layout - */ -(function (ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "./core" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - ns.layout = ns.layout || {}; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.layout; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(ns)); - diff --git a/tau/src/js/core/layout/float.js b/tau/src/js/core/layout/float.js deleted file mode 100644 index de99f539..00000000 --- a/tau/src/js/core/layout/float.js +++ /dev/null @@ -1,177 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/* - * # Float layout - * - * @class ns.layout.float - * @extends ns.layout - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../layout", - "../util/object", - "../widget/core/Box" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var float = { - }, - objectUtil = ns.util.object, - Box = ns.widget.core.Box, - CLASSES_PREFIX = Box.classes.box, - LAYOUT_PREFIX = CLASSES_PREFIX + "-float", - classes = objectUtil.merge({}, Box.classes, { - float: LAYOUT_PREFIX, - floatLeft: LAYOUT_PREFIX + "-left", - floatRight: LAYOUT_PREFIX + "-right", - floatCenter: LAYOUT_PREFIX + "-center", - floatTop: LAYOUT_PREFIX + "-top", - floatMiddle: LAYOUT_PREFIX + "-middle", - floatBottom: LAYOUT_PREFIX + "-bottom" - }), - defaults = { - floatLayoutAlign: "left", - floatVerticalAlign: "top", - floatHorizontalSpacing: 0, - floatVerticalSpacing: 0 - }; - - /** - * Name of layout. - * @property {string} name - * @member ns.layout.float - */ - float.name = "float"; - /** - * CSS classes connected with layout. - * @property {Object} classes - * @member ns.layout.float - */ - float.classes = classes; - /** - * Default values of properties connected with layout. - * There are set during Box's configuration in method configure. - * @property {Object} defaults - * @member ns.layout.float - */ - float.defaults = defaults; - - - /** - * Configure layout. - * @method configure - * @param {ns.widget.core.Box} self - * @param {HTMLElement} element - * @member ns.layout.float - * @static - */ - float.configure = function(self, element) { - // set defaults - self.options = objectUtil.merge({}, defaults, self.options); - }; - - /** - * Set rule for spacing in Float Layout. - * @method setComponentsSpacing - * @param {ns.widget.core.Box} self - * @param {HTMLElement} element - * @member ns.layout.float - * @private - */ - function setComponentsSpacing(self, element) { - var options = self.options, - horizontal = options.floatHorizontalSpacing || defaults.floatHorizontalSpacing, - vertical = options.floatVerticalSpacing || defaults.floatVerticalSpacing, - propertyValue = "#" + element.id + ".ui-box-float > *:not(script)" + - "{margin: " + horizontal / 2 + "px " + vertical / 2 + "px" + ";}"; - - self.insertCSSRule(propertyValue); - } - - /** - * Enable layout. - * @method enable - * @param {ns.widget.core.Box} self - * @param {HTMLElement} element - * @member ns.layout.float - * @static - */ - float.enable = function (self, element) { - var options = self.options || {}, - classList = element.classList; - - // base class for float layout - classList.add(classes.float); - - // configuration - if (options.floatLayoutAlign === 'right') { - classList.add(classes.floatRight); - } else if (options.floatLayoutAlign === 'center') { - classList.add(classes.floatCenter); - } else { // default horizontal align; - classList.add(classes.floatLeft); - } - - switch (options.floatVerticalAlign) { - case "middle": - classList.add(classes.floatMiddle); - break; - case "bottom": - classList.add(classes.floatBottom); - break; - default: // top - classList.add(classes.floatTop); - } - - setComponentsSpacing(self, element); - }; - - /** - * Disable layout. - * @method enable - * @param {ns.widget.core.Box} self - * @param {HTMLElement} element - * @member ns.layout.float - * @static - */ - float.disable = function (self, element) { - var classList = self.element.classList; - - classList.remove(classes.floatRight); - classList.remove(classes.floatCenter); - classList.remove(classes.floatLeft); - classList.remove(classes.floatTop); - classList.remove(classes.floatMiddle); - classList.remove(classes.floatBottom); - }; - - ns.layout.float = float; - - // Register float layout in Box widget, which can use it. - Box.register("float", float); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.layout.float; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/layout/linear.js b/tau/src/js/core/layout/linear.js deleted file mode 100644 index ed1221fb..00000000 --- a/tau/src/js/core/layout/linear.js +++ /dev/null @@ -1,136 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/* - * ## JavaScript API - * - * linear Layout - * - * @class ns.layout.linear - * @extends ns.layout - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../layout", - "../util/object", - "../util/selectors", - "../widget/core/Box" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var linear = { - }, - objectUtil = ns.util.object, - selectors = ns.util.selectors, - Box = ns.widget.core.Box, - CLASSES_PREFIX = Box.classes.box, - LAYOUT_PREFIX = CLASSES_PREFIX + "-linear", - classes = objectUtil.merge({}, Box.classes, { - linear: LAYOUT_PREFIX, - linearHorizontal: LAYOUT_PREFIX + "-horizont", - linearVertical: LAYOUT_PREFIX + "-vertical", - linearWrap: LAYOUT_PREFIX + "-wrap" - }), - defaults = { - linearLayoutDirection: "horizontal", - linearDistance: 10, - linearFill: false, - linearWrap: false - }; - - linear.name = "linear"; - linear.classes = classes; - linear.defaults = defaults; - cssRules = [], - LAYOUTABLE_ELEMENTS_SELECTOR = "*:not(script)", - linear.configure = function (self, element) { - // set defaults - self.options = objectUtil.merge({}, defaults, self.options); - }; - - /** - * Method determines what elements can be laid - * @param element - */ - function getLayoutElements(element) { - return selectors.getChildrenBySelector(element, LAYOUTABLE_ELEMENTS_SELECTOR); - } - - /** - * Styles support - */ - function registerRule(rule) { - cssRules.push(rule); - }; - - /** - * Styles support - */ - function applyRules(self) { - for(var i = 0, length = cssRules.length; i < length; i++){ - self.insertCSSRule(cssRules[i]); - } - }; - - linear.enable = function (self, element) { - var elements = getLayoutElements(element), - options = self.options || {}, - classList = element.classList; - - if (options.linearLayoutDirection === "horizontal") { - element.classList.add(classes.linearHorizontal); - if(options.linearFill) { - registerRule("#" + element.id + " > * {height: auto}");//#linear-page - } - } else { - element.classList.add(classes.linearVertical); - if(options.linearFill) { - registerRule("#" + element.id + " > * {width: auto}");//#linear-page - } - } - - if (options.linearWrap) { - element.classList.add(classes.linearWrap); - } - - registerRule("#" + element.id + " > * {margin: "+ options.linearDistance + "px}"); - applyRules(self); - }; - - linear.disable = function (self, element) { - var classList = self.element.classList; - - classList.remove(classes.linearHorizontal); - classList.remove(classes.linearVertical); - classList.remove(classes.linearWrap); - }; - - ns.layout.linear = linear; - - // register linear layout - Box.register("linear", linear); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.layout.linear; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/layout/relative.js b/tau/src/js/core/layout/relative.js deleted file mode 100644 index 1528fd93..00000000 --- a/tau/src/js/core/layout/relative.js +++ /dev/null @@ -1,222 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/* - * ## JavaScript API - * - * Float Layout - * - * @class ns.layout.float - * @extends ns.layout - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../layout", - "../util/object", - "../util/selectors", - "../util/DOM/css", - "../util/array", - "../widget/core/Box" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var layout = {}, - objectUtil = ns.util.object, - selectorUtil = ns.util.selectors, - cssUtil = ns.util.DOM, - utilArrayMap = ns.util.array.map, - Box = ns.widget.core.Box, - CLASSES_PREFIX = Box.classes.box, - LAYOUTABLE_ELEMENTS_SELECTOR = "*:not(script)", - positionClassPrefix = "position-", - - classes = objectUtil.merge({}, Box.classes, { - relative: CLASSES_PREFIX + "-relative" - }), - defaults = { - position: null - }, - positionFlags = { - TOP: 1, - BOTTOM: 2, - LEFT: 4, - RIGHT: 8, - CENTER: 16 - }, - positionKeys = Object.keys(positionFlags), - // Calculate prefixed translate rules once, as they won't change afterwards - prefixedTranslate = (function () { - var transform = cssUtil.getPrefixedValue("transform"), - transformKeys = Object.keys(transform); - - return { - xy: utilArrayMap(transformKeys, function (propKey) { - return transform[propKey] + ":" + "translate(-50%,-50%);"; - }), - x: utilArrayMap(transformKeys, function (propKey) { - return transform[propKey] + ":" + "translateX(-50%);"; - }), - y: utilArrayMap(transformKeys, function (propKey) { - return transform[propKey] + ":" + "translateY(-50%);"; - }) - }; - - }()); - - layout.name = "relative"; - layout.classes = classes; - layout.defaults = defaults; - - layout.positions = positionFlags; - - /** - * - * @param {String} id - * @param {String} key Index of child or selector - * @returns {string} - */ - function positionSelector(id, key) { - var selector = "#" + id + " > " + LAYOUTABLE_ELEMENTS_SELECTOR, - nthChild = parseInt(key, 10); - - if (!isNaN(nthChild)){ - return selector + ":nth-child(" + nthChild +")"; - } - - return selector + key; - } - - function setPosition(self, element, positionSettings) { - var children, - i, - len, - rule = "", - positionSelectors; - - // If none global position was defined parse children - if (!positionSettings) { - children = selectorUtil.getChildrenBySelector(element, LAYOUTABLE_ELEMENTS_SELECTOR); - - for (i = 0, len = children.length; i < len; i++) { - setChildPosition(children[i]); - } - } else { - positionSelectors = Object.keys(positionSettings); - - for(i = 0, len = positionSelectors.length; i < len; i++) { - self.insertCSSRule(positionSelector(element.id, positionSelectors[i]) + " {" + createChildPosition(positionSettings[positionSelectors[i]]) + "}"); - } - } - } - - function parsePosition(position) { - return position.split("-"); - } - - function createChildPosition(position) { - var positionArray = parsePosition(position), - cssStyles = "", - xPos = positionArray[0], - yPos = positionArray[1]; - - if (xPos === yPos && xPos === "center") { - cssStyles += "top:50%;left:50%;" + prefixedTranslate.xy; - } else { - switch(xPos) { - case "center": - cssStyles += "left:50%;" + prefixedTranslate.x; - break; - case "left": - cssStyles += "left:0;"; - break; - case "right": - cssStyles += "right:0;"; - break; - default: - ns.warn("Layout invalid horizontal position '" + xPos + "'"); - } - - if (yPos) { - switch(yPos) { - case "center": - cssStyles += "top:50%;" + prefixedTranslate.y; - break; - case "top": - cssStyles += "top:0;"; - break; - case "bottom": - cssStyles += "bottom:0;"; - break; - default: - ns.warn("Layout invalid vertical position '" + yPos + "'"); - } - } - } - - return cssStyles; - } - - function setChildPosition(element, position) { - var positionArray; - - if (!position) { - position = element.getAttribute("data-position"); - } - - // If position was defined on child elements - if (position) { - positionArray = parsePosition(position); - while(positionArray.length) { - element.classList.add(positionClassPrefix + positionArray.pop()); - } - } - } - - layout.configure = function(self, element) { - // set defaults - self.options = objectUtil.merge({}, defaults, self.options); - }; - - layout.enable = function (self, element) { - element.classList.add(classes.relative); - - setPosition(self, element, self.options.position); - }; - - layout.disable = function (self) { - var element = self.element || null; - - if (element) { - element.classList.remove(classes.relative); - } - }; - - ns.layout.relative = layout; - - // register float layout - Box.register("relative", layout); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.layout.relative; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/router.js b/tau/src/js/core/router.js index 151b6d6f..b6049fbe 100644 --- a/tau/src/js/core/router.js +++ b/tau/src/js/core/router.js @@ -1,18 +1,7 @@ -/*global define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/*global window, define, ns */ +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Router diff --git a/tau/src/js/core/router/route.js b/tau/src/js/core/router/route.js deleted file mode 100644 index 526fb25b..00000000 --- a/tau/src/js/core/router/route.js +++ /dev/null @@ -1,40 +0,0 @@ -/*global define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Route Namespace - * Object contains rules for router. - * - * @class ns.router.route - */ -/* - * @author Maciej Urbanski <m.urbanski@samsung.com> - */ -(function (ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../router" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - ns.router.route = ns.router.route || {}; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - } - ); - //>>excludeEnd("tauBuildExclude"); -}(ns)); diff --git a/tau/src/js/core/router/route/drawer.js b/tau/src/js/core/router/route/drawer.js deleted file mode 100644 index 1b118d39..00000000 --- a/tau/src/js/core/router/route/drawer.js +++ /dev/null @@ -1,169 +0,0 @@ -/*global window, define */ -/*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Route Drawer - * Support class for router to control drawer widget in profile Wearable. - * @class ns.router.route.drawer - * @author Hyeoncheol Choi <hc7.choi@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../engine", - "../../util/DOM/attributes", - "../../util/path", - "../../util/selectors", - "../../util/object", - "../route", - "../history", - "../../widget/core/Drawer" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var CoreDrawer = ns.widget.core.Drawer, - path = ns.util.path, - history = ns.router.history, - engine = ns.engine, - routeDrawer = {}, - drawerHashKey = "drawer=true", - drawerHashKeyReg = /([&|\?]drawer=true)/; - - /** - * Property containing default properties - * @property {Object} defaults - * @property {string} defaults.transition="none" - * @static - * @member ns.router.route.drawer - */ - routeDrawer.defaults = { - transition: "none" - }; - - /** - * Property defining selector for filtering only drawer elements - * @property {string} filter - * @member ns.router.route.drawer - * @static - */ - routeDrawer.filter = "." + CoreDrawer.classes.drawer; - - - /** - * Returns default route options used inside Router. - * But, drawer router has not options. - * @method option - * @static - * @member ns.router.route.drawer - * @return null - */ - routeDrawer.option = function () { - return null; - }; - - /** - * This method opens the drawer. - * @method open - * @param {HTMLElement} drawerElement - * @member ns.router.route.drawer - */ - routeDrawer.open = function (drawerElement) { - var drawer = engine.instanceWidget(drawerElement, "Drawer"); - drawer.open(); - }; - - /** - * This method determines target drawer to open. - * @method find - * @param {string} absUrl Absolute path to opened drawer widget - * @member ns.router.route.drawer - * @return {?HTMLElement} drawerElement - */ - routeDrawer.find = function (absUrl) { - var dataUrl = path.convertUrlToDataUrl(absUrl), - activePage = engine.getRouter().getContainer().getActivePage(), - drawer; - - drawer = activePage.element.querySelector("#" + dataUrl); - - return drawer; - }; - - /** - * This method parses HTML and runs scripts from parsed code. - * But, drawer router doesn't need to that. - * @method parse - * @param {string} html HTML code to parse - * @param {string} absUrl Absolute url for parsed page - * @member ns.router.route.drawer - */ - routeDrawer.parse = function (html, absUrl) { - return null; - }; - - /** - * This method sets active drawer and manages history. - * @method setActive - * @param {Object} activeDrawer - * @member ns.router.route.drawer - * @static - */ - routeDrawer.setActive = function (activeDrawer) { - var url, - pathLocation = path.getLocation(), - documentUrl = pathLocation.replace(drawerHashKeyReg, ""); - - this._activeDrawer = activeDrawer; - - if(activeDrawer) { - url = path.addHashSearchParams(documentUrl, drawerHashKey); - history.replace({}, "", url); - } else if (pathLocation !== documentUrl) { - history.back(); - } - }; - - /** - * This method handles hash change. - * @method onHashChange - * @param {String} url - * @param {Object} options - * @param {String} prev Previous url string - * @static - * @member ns.router.route.drawer - * @return {null} - */ - routeDrawer.onHashChange = function (url, options, prev) { - var self = this, - activeDrawer = self._activeDrawer; - - if (activeDrawer && prev.search(drawerHashKey) > 0 && url.search(drawerHashKey) < 0) { - activeDrawer.close(options); - } - return null; - }; - - ns.router.route.drawer = routeDrawer; - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return routeDrawer; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/support.js b/tau/src/js/core/support.js index 5c765427..5a5650bc 100644 --- a/tau/src/js/core/support.js +++ b/tau/src/js/core/support.js @@ -1,19 +1,8 @@ /*global window, define*/ /*jslint bitwise: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Support diff --git a/tau/src/js/core/support/tizen.js b/tau/src/js/core/support/tizen.js index 67a2cb8c..6132e612 100644 --- a/tau/src/js/core/support/tizen.js +++ b/tau/src/js/core/support/tizen.js @@ -1,20 +1,8 @@ /*global window, define*/ /*jslint bitwise: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * @class ns.support * @author Maciej Urbanski <m.urbanski@samsung.com> @@ -28,23 +16,6 @@ ], function () { //>>excludeEnd("tauBuildExclude"); - var isTizen = !(typeof tizen === "undefined"); - - function isCircleShape() { - var testDiv = document.createElement("div"), - fakeBody = document.createElement("body"), - html = document.getElementsByTagName('html')[0], - style = getComputedStyle(testDiv), - isCircle; - - testDiv.classList.add("is-circle-test"); - fakeBody.appendChild(testDiv); - html.insertBefore(fakeBody, html.firstChild); - isCircle = style.width === "1px"; - html.removeChild(fakeBody); - - return isCircle; - } ns.support = { cssTransitions: true, @@ -58,11 +29,7 @@ cssPointerEvents: false, boundingRect: true, browser: { - ie: false, - tizen: isTizen - }, - shape: { - circle: isTizen ? window.matchMedia("(-tizen-geometric-shape: circle)").matches : isCircleShape(), + ie: false }, gradeA : function () { return true; diff --git a/tau/src/js/core/theme.js b/tau/src/js/core/theme.js index bf01f27b..aea1005a 100644 --- a/tau/src/js/core/theme.js +++ b/tau/src/js/core/theme.js @@ -1,19 +1,8 @@ /*global window, define, Math, ns*/ /*jslint bitwise: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Theme object @@ -84,18 +73,14 @@ var self = this, containerClassList = container.classList; - if (frameworkData) { - frameworkData.getParams(); - } + frameworkData.getParams(); - if (support && support.gradeA()) { + if (support.gradeA()) { documentElement.classList.add("ui-mobile"); containerClassList.add("ui-mobile-viewport"); } - if (frameworkData) { - self.loadTheme(frameworkData.theme); - } + self.loadTheme(frameworkData.theme); }, /** @@ -335,7 +320,7 @@ document.addEventListener("themeinit", function (evt) { var router = evt.detail; if (router && ns.getConfig("autoInitializePage", true)) { - ns.theme.init(router.getContainer().element); + ns.theme.init(router.getContainer()); } }, false); diff --git a/tau/src/js/core/theme/ThemeCommon.js b/tau/src/js/core/theme/ThemeCommon.js index ea085dd7..9c03a0d3 100644 --- a/tau/src/js/core/theme/ThemeCommon.js +++ b/tau/src/js/core/theme/ThemeCommon.js @@ -1,20 +1,8 @@ /*global define, ns */ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Class with functions which help changing themes. * diff --git a/tau/src/js/core/util.js b/tau/src/js/core/util.js index f7842f69..4f2bda2f 100644 --- a/tau/src/js/core/util.js +++ b/tau/src/js/core/util.js @@ -1,19 +1,8 @@ /*global window, define, XMLHttpRequest, console, Blob */ /*jslint nomen: true, browser: true, plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Utilities @@ -48,7 +37,6 @@ window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || - window.msRequestAnimationFrame || function (callback) { currentFrame = window.setTimeout(callback.bind(callback, +new Date()), 1000 / 60); }).bind(window), @@ -194,7 +182,6 @@ window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || - window.msCancelAnimationFrame || function () { // propably wont work if there is any more than 1 // active animationFrame but we are trying anyway diff --git a/tau/src/js/core/util/DOM.js b/tau/src/js/core/util/DOM.js index 7757e363..1597af5d 100644 --- a/tau/src/js/core/util/DOM.js +++ b/tau/src/js/core/util/DOM.js @@ -1,19 +1,8 @@ /*global window, define */ /*jslint plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Utility DOM diff --git a/tau/src/js/core/util/DOM/attributes.js b/tau/src/js/core/util/DOM/attributes.js index 4ee0162b..a29a414c 100644 --- a/tau/src/js/core/util/DOM/attributes.js +++ b/tau/src/js/core/util/DOM/attributes.js @@ -1,20 +1,8 @@ /*global window, define */ /*jslint plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /* * @author Jadwiga Sosnowska <j.sosnowska@partner.samsung.com> * @author Krzysztof Antoszek <k.antoszek@samsung.com> @@ -75,15 +63,15 @@ var value = element.getAttribute(attribute), result = defaultValue; - if (!isNaN(value)) { + if (value) { if (type === "float") { value = parseFloat(value); - if (!isNaN(value)) { + if (value) { result = value; } } else { value = parseInt(value, 10); - if (!isNaN(value)) { + if (value) { result = value; } } @@ -97,20 +85,6 @@ } /** - * Special function to set attribute and property in the same time - * @method setAttribute - * @param {HTMLElement} element - * @param {string} name - * @param {Mixed} value - * @member ns.util.DOM - * @static - */ - function setAttribute(element, name, value) { - element[name] = value; - element.setAttribute(name, value); - } - - /** * This function sets value of attribute data-{namespace}-{name} for element. * If the namespace is empty, the attribute data-{name} is used. * @method setNSData @@ -237,26 +211,18 @@ element[name] = false; }; - DOM.setAttribute = setAttribute; /** - * Special function to set attributes and propertie in the same time + * Special function to set attribute and property in the same time * @method setAttribute * @param {HTMLElement} element - * @param {Object} name + * @param {string} name * @param {Mixed} value * @member ns.util.DOM * @static */ - DOM.setAttributes = function (element, values) { - var i, - names = Object.keys(values), - name, - len; - - for (i = 0, len = names.length; i < len; i++) { - name = names[i]; - setAttribute(element, name, values[name]); - } + DOM.setAttribute = function (element, name, value) { + element[name] = value; + element.setAttribute(name, value); }; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.util.DOM; diff --git a/tau/src/js/core/util/DOM/css.js b/tau/src/js/core/util/DOM/css.js index 4e43f78f..b56a6891 100644 --- a/tau/src/js/core/util/DOM/css.js +++ b/tau/src/js/core/util/DOM/css.js @@ -1,21 +1,9 @@ /*global window, define */ /*jslint plusplus: true */ /*jshint -W069 */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /* * @author Jadwiga Sosnowska <j.sosnowska@partner.samsung.com> * @author Krzysztof Antoszek <k.antoszek@samsung.com> @@ -32,8 +20,7 @@ function () { //>>excludeEnd("tauBuildExclude"); - var DOM = ns.util.DOM, - DASH_TO_UPPER_CASE_REGEXP = /-([a-z])/gi; + var DOM = ns.util.DOM; /** * Returns css property for element @@ -183,11 +170,7 @@ } } - height += props["height"]; - - if (props["box-sizing"] !== 'border-box') { - height += props["padding-top"] + props["padding-bottom"]; - } + height += props["height"] + props["padding-top"] + props["padding-bottom"]; if (includeOffset) { height = offsetHeight; @@ -273,10 +256,7 @@ } } - width += props["width"]; - if (props["box-sizing"] !== 'border-box') { - width += props["padding-left"] + props["padding-right"]; - } + width += props["width"] + props["padding-left"] + props["padding-right"]; if (includeOffset) { width = offsetWidth; @@ -326,87 +306,6 @@ return !(element.offsetWidth <= 0 && element.offsetHeight <= 0); } - function toUpperCaseFn(match, value) { - return value.toLocaleUpperCase(); - } - - function dashesToCamelCase(str) { - return str.replace(DASH_TO_UPPER_CASE_REGEXP, toUpperCaseFn); - } - - function firstToUpperCase(str) { - return str.charAt(0).toLocaleUpperCase() + str.substring(1); - } - - /** - * Set values for element with prefixes for browsers - * @method setPrefixedStyle - * @param {HTMLElement} element - * @param {string} property - * @param {string|Object|null} value - * @member ns.util.DOM - * @static - */ - function setPrefixedStyle(element, property, value) { - var style = element.style, - propertyForPrefix = firstToUpperCase(dashesToCamelCase(property)), - values = (typeof value === "string") ? { - webkit: value, - moz: value, - o: value, - ms: value, - normal: value - } : value; - - style[property] = values.normal; - style["webkit" + propertyForPrefix] = values.webkit; - style["moz" + propertyForPrefix] = values.moz; - style["o" + propertyForPrefix] = values.o; - style["ms" + propertyForPrefix] = values.ms; - } - - /** - * Get value from element with prefixes for browsers - * @method getCSSProperty - * @param {string} value - * @return {Object} - * @member ns.util.DOM - * @static - */ - function getPrefixedValue(value) { - return { - webkit: "-webkit-" + value, - moz: "-moz-" + value, - o: "-ms-" + value, - ms: "-o-" + value, - normal: value - }; - } - - /** - * Returns style value for css property with browsers prefixes - * @method getPrefixedStyle - * @param {HTMLStyle} styles - * @param {string} property - * @return {Object} - * @member ns.util.DOM - * @static - */ - function getPrefixedStyleValue(styles, property) { - var prefixedProperties = getPrefixedValue(property), - value, - key; - - for (key in prefixedProperties) { - value = styles[prefixedProperties[key]]; - if (value && value !== "none") { - return value; - } - } - return value; - } - - // assign methods to namespace DOM.getCSSProperty = getCSSProperty; DOM.extractCSSProperties = extractCSSProperties; @@ -414,9 +313,6 @@ DOM.getElementWidth = getElementWidth; DOM.getElementOffset = getElementOffset; DOM.isOccupiedPlace = isOccupiedPlace; - DOM.setPrefixedStyle = setPrefixedStyle; - DOM.getPrefixedValue = getPrefixedValue; - DOM.getPrefixedStyleValue = getPrefixedStyleValue; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.util.DOM; diff --git a/tau/src/js/core/util/DOM/manipulation.js b/tau/src/js/core/util/DOM/manipulation.js index 183c3b49..1ac14620 100644 --- a/tau/src/js/core/util/DOM/manipulation.js +++ b/tau/src/js/core/util/DOM/manipulation.js @@ -1,20 +1,8 @@ /*global window, define, NodeList, HTMLCollection */ /*jslint plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /* * @author Jadwiga Sosnowska <j.sosnowska@partner.samsung.com> * @author Krzysztof Antoszek <k.antoszek@samsung.com> diff --git a/tau/src/js/core/util/anchorHighlight.js b/tau/src/js/core/util/anchorHighlight.js index 07673bcd..155f8a1c 100644 --- a/tau/src/js/core/util/anchorHighlight.js +++ b/tau/src/js/core/util/anchorHighlight.js @@ -1,19 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Anchor Highlight Utility * Utility enables highlight links. @@ -195,9 +183,7 @@ activeALength = activeA.length, i; for (i = 0; i < activeALength; i++) { - if (activeA[i]) { - activeA[i].classList.remove(activeClassLI); - } + activeA[i].classList.remove(activeClassLI); } } diff --git a/tau/src/js/core/util/anim.js b/tau/src/js/core/util/anim.js index 01e55923..e3804fd4 100644 --- a/tau/src/js/core/util/anim.js +++ b/tau/src/js/core/util/anim.js @@ -1,19 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Animation namespace * Namespace for animation utilities diff --git a/tau/src/js/core/util/anim/Animation.js b/tau/src/js/core/util/anim/Animation.js index 2bf14a9b..ee2b4a85 100644 --- a/tau/src/js/core/util/anim/Animation.js +++ b/tau/src/js/core/util/anim/Animation.js @@ -1,20 +1,8 @@ /*global window, define, ns */ /*jslint nomen: true, plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * # Animation * diff --git a/tau/src/js/core/util/anim/Chain.js b/tau/src/js/core/util/anim/Chain.js index cb2d5f00..96bb3bc8 100644 --- a/tau/src/js/core/util/anim/Chain.js +++ b/tau/src/js/core/util/anim/Chain.js @@ -1,20 +1,8 @@ /*global window, define, ns */ /*jslint plusplus: true, nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * # Chain * diff --git a/tau/src/js/core/util/anim/Keyframes.js b/tau/src/js/core/util/anim/Keyframes.js index 0e024e78..04efe5eb 100644 --- a/tau/src/js/core/util/anim/Keyframes.js +++ b/tau/src/js/core/util/anim/Keyframes.js @@ -1,20 +1,8 @@ /*global window, define, ns */ /*jslint nomen: true, plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * # Keyframes * diff --git a/tau/src/js/core/util/array.js b/tau/src/js/core/util/array.js index b5679688..5cc5e417 100644 --- a/tau/src/js/core/util/array.js +++ b/tau/src/js/core/util/array.js @@ -1,19 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +/* Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Array Utility * Utility helps work with arrays. @@ -114,117 +102,10 @@ return false; } - /** - * Faster version of standard forEach method in array - * Confirmed that this method is 20 times faster then native - * @method forEach - * @param {Array} array - * @param {Function} callback - * @member ns.util.array - * @static - */ - function forEach(array, callback) { - var i, - length; - if (!(array instanceof Array)) { - array = [].slice.call(array); - } - length = array.length; - for (i = 0; i < length; i++) { - callback(array[i], i, array); - } - } - - - /** - * Faster version of standard filter method in array - * @method filter - * @param {Array} array - * @param {Function} callback - * @member ns.util.array - * @static - */ - function filter(array, callback) { - var result = [], - i, - length, - value; - if (!(array instanceof Array)) { - array = [].slice.call(array); - } - length = array.length; - for (i = 0; i < length; i++) { - value = array[i]; - if (callback(value, i, array)) { - result.push(value); - } - } - return result; - } - - /** - * Faster version of standard map method in array - * Confirmed that this method is 60% faster then native - * @method map - * @param {Array} array - * @param {Function} callback - * @member ns.util.array - * @static - */ - function map(array, callback) { - var result = [], - i, - length; - if (!(array instanceof Array)) { - array = [].slice.call(array); - } - length = array.length; - for (i = 0; i < length; i++) { - result.push(callback(array[i], i, array)); - } - return result; - } - - /** - * Faster version of standard reduce method in array - * Confirmed that this method is 60% faster then native - * @method reduce - * @param {Array} array - * @param {Function} callback - * @param {*} [initialValue] - * @member ns.util.array - * @return {*} - * @static - */ - function reduce(array, callback, initialValue) { - var i, - length, - value, - result = initialValue; - if (!(array instanceof Array)) { - array = [].slice.call(array); - } - length = array.length; - for (i = 0; i < length; i++) { - value = array[i]; - if (result === undefined && i === 0) { - result = value; - } else { - result = callback(result, value, i, array); - } - } - return result; - } - ns.util.array = { range: range, - isArrayLike: isArrayLike, - forEach: forEach, - filter: filter, - map: map, - reduce: reduce + isArrayLike: isArrayLike }; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.util.array; } diff --git a/tau/src/js/core/util/bezierCurve.js b/tau/src/js/core/util/bezierCurve.js index 702cfc3c..84e74a4f 100644 --- a/tau/src/js/core/util/bezierCurve.js +++ b/tau/src/js/core/util/bezierCurve.js @@ -1,18 +1,7 @@ /*global window: false, define: false, Math: false */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Bezier Curves Utility diff --git a/tau/src/js/core/util/callbacks.js b/tau/src/js/core/util/callbacks.js index 14d4c4ac..021fdfe6 100644 --- a/tau/src/js/core/util/callbacks.js +++ b/tau/src/js/core/util/callbacks.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Callback Utility diff --git a/tau/src/js/core/util/colors.js b/tau/src/js/core/util/colors.js index d0e33759..dd6149e2 100644 --- a/tau/src/js/core/util/colors.js +++ b/tau/src/js/core/util/colors.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Colors Utility diff --git a/tau/src/js/core/util/data.js b/tau/src/js/core/util/data.js index c91140a9..bbcbf0aa 100644 --- a/tau/src/js/core/util/data.js +++ b/tau/src/js/core/util/data.js @@ -1,18 +1,7 @@ /*global window, define, Object, Element */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Data Attributes Utility diff --git a/tau/src/js/core/util/date.js b/tau/src/js/core/util/date.js index 6a93755f..a9ad2b8b 100644 --- a/tau/src/js/core/util/date.js +++ b/tau/src/js/core/util/date.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Date Utility diff --git a/tau/src/js/core/util/deferred.js b/tau/src/js/core/util/deferred.js index f43550d3..410909ae 100644 --- a/tau/src/js/core/util/deferred.js +++ b/tau/src/js/core/util/deferred.js @@ -1,18 +1,7 @@ /*global window, define, RegExp */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Deferred Utility diff --git a/tau/src/js/core/util/deferredWhen.js b/tau/src/js/core/util/deferredWhen.js index 05c03cdc..e87e1957 100644 --- a/tau/src/js/core/util/deferredWhen.js +++ b/tau/src/js/core/util/deferredWhen.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Deferred When Utility diff --git a/tau/src/js/core/util/easing.js b/tau/src/js/core/util/easing.js index 1916cb7e..4bded250 100644 --- a/tau/src/js/core/util/easing.js +++ b/tau/src/js/core/util/easing.js @@ -1,19 +1,8 @@ /*global window, define */ /*jslint nomen: true, plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Easing Utility diff --git a/tau/src/js/core/util/globalize.js b/tau/src/js/core/util/globalize.js index 3d030fc0..62bcaa5d 100644 --- a/tau/src/js/core/util/globalize.js +++ b/tau/src/js/core/util/globalize.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Globalize Utility diff --git a/tau/src/js/core/util/grid.js b/tau/src/js/core/util/grid.js index d0218991..6f180925 100644 --- a/tau/src/js/core/util/grid.js +++ b/tau/src/js/core/util/grid.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Grid Utility diff --git a/tau/src/js/core/util/load.js b/tau/src/js/core/util/load.js index 7053ace0..e3b16283 100644 --- a/tau/src/js/core/util/load.js +++ b/tau/src/js/core/util/load.js @@ -1,18 +1,7 @@ /*global window, define, XMLHttpRequest */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Load Utility diff --git a/tau/src/js/core/util/object.js b/tau/src/js/core/util/object.js index c8f89fb8..e22a7288 100644 --- a/tau/src/js/core/util/object.js +++ b/tau/src/js/core/util/object.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Object Utility @@ -168,27 +157,6 @@ } return true; - }, - - /** - * Remove properties from object. - * @method removeProperties - * @param {Object} object - * @param {Array} propertiesToRemove - * @return {Object} - */ - removeProperties: function (object, propertiesToRemove) { - var length = propertiesToRemove.length, - property, - i; - - for (i = 0; i < length; i++) { - property = propertiesToRemove[i]; - if (object.hasOwnProperty(property)) { - delete object[property]; - } - } - return object; } }; ns.util.object = object; diff --git a/tau/src/js/core/util/path.js b/tau/src/js/core/util/path.js index d94674ec..19c303b7 100644 --- a/tau/src/js/core/util/path.js +++ b/tau/src/js/core/util/path.js @@ -1,18 +1,7 @@ /*global window, define, RegExp */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Path Utility @@ -99,7 +88,7 @@ // URL as well as some other commonly used sub-parts. When used with RegExp.exec() // or String.match, it parses the URL into a results array that looks like this: // - // [0]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content?param1=true¶m2=123 + // [0]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread#msg-content // [1]: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&type=unread // [2]: http://jblas:password@mycompany.com:8080/mail/inbox // [3]: http://jblas:password@mycompany.com:8080 @@ -116,16 +105,14 @@ // [14]: /mail/ // [15]: inbox // [16]: ?msg=1234&type=unread - // [17]: #msg-content?param1=true¶m2=123 - // [18]: #msg-content - // [19]: ?param1=true¶m2=123 + // [17]: #msg-content // /** * @property {RegExp} urlParseRE Regular expression for parse URL * @member ns.util.path * @static */ - urlParseRE: /^(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)((#[^\?]*)(\?.*)?)?/, + urlParseRE: /^(((([^:\/#\?]+:)?(?:(\/\/)((?:(([^:@\/#\?]+)(?:\:([^:@\/#\?]+))?)@)?(([^:\/#\?\]\[]+|\[[^\/\]@#?]+\])(?:\:([0-9]+))?))?)?)?((\/?(?:[^\/\?#]+\/+)*)([^\?#]*)))?(\?[^#]+)?)(#.*)?/, /** * Abstraction to address xss (Issue #4787) by removing the authority in @@ -138,15 +125,14 @@ */ getLocation: function (url) { var uri = this.parseUrl(url || window.location.href), - hash = uri.hash, - search = uri.hashSearch; - // mimic the browser with an empty string when the hash and hashSearch are empty - hash = hash === "#" && !search ? "" : hash; + hash = uri.hash; + // mimic the browser with an empty string when the hash is empty + hash = hash === "#" ? "" : hash; location = uri; // Make sure to parse the url or the location object for the hash because using location.hash // is autodecoded in firefox, the rest of the url should be from the object (location unless // we're testing) to avoid the inclusion of the authority - return uri.protocol + "//" + uri.host + uri.pathname + uri.search + hash + search; + return uri.protocol + "//" + uri.host + uri.pathname + uri.search + hash; }, /** @@ -197,7 +183,6 @@ * @return {string} return.filename * @return {string} return.search * @return {string} return.hash - * @return {string} return.hashSearch * @static */ parseUrl: function (url) { @@ -205,6 +190,7 @@ if (typeof url === "object") { return url; } + matches = path.urlParseRE.exec(url || "") || []; // Create an object that allows the caller to access the sub-matches @@ -212,29 +198,28 @@ // like all other browsers do, so we normalize everything so its consistent // no matter what browser we're running on. return { - href: matches[0] || "", - hrefNoHash: matches[1] || "", + href: matches[0] || "", + hrefNoHash: matches[1] || "", hrefNoSearch: matches[2] || "", - domain: matches[3] || "", - protocol: matches[4] || "", - doubleSlash: matches[5] || "", - authority: matches[6] || "", - username: matches[8] || "", - password: matches[9] || "", - host: matches[10] || "", - hostname: matches[11] || "", - port: matches[12] || "", - pathname: matches[13] || "", - directory: matches[14] || "", - filename: matches[15] || "", - search: matches[16] || "", - hash: matches[18] || "", - hashSearch: matches[19] || "" + domain: matches[3] || "", + protocol: matches[4] || "", + doubleSlash: matches[5] || "", + authority: matches[6] || "", + username: matches[8] || "", + password: matches[9] || "", + host: matches[10] || "", + hostname: matches[11] || "", + port: matches[12] || "", + pathname: matches[13] || "", + directory: matches[14] || "", + filename: matches[15] || "", + search: matches[16] || "", + hash: matches[17] || "" }; }, /** - * Turn relPath into an absolute path. absPath is + * Turn relPath into an asbolute path. absPath is * an optional absolute path which describes what * relPath is relative to. * @method makePathAbsolute @@ -344,12 +329,6 @@ /** * Add search (aka query) params to the specified url. - * If page is embedded page, search query will be added after - * hash tag. It's allowed to add query content for both external - * pages and embedded pages. - * Examples: - * http://domain/path/index.html#embedded?search=test - * http://domain/path/external.html?s=query#embedded?s=test * @method addSearchParams * @member ns.util.path * @param {string|Object} url @@ -359,16 +338,8 @@ addSearchParams: function (url, params) { var urlObject = path.parseUrl(url), paramsString = (typeof params === "object") ? this.getAsURIParameters(params) : params, - searchChar = '', - urlObjectHash = urlObject.hash; - - if (path.isEmbedded(url) && paramsString.length > 0) { - searchChar = urlObject.hashSearch || "?"; - return urlObject.hrefNoHash + (urlObjectHash || "") + searchChar + (searchChar.charAt(searchChar.length - 1) === "?" ? "" : "&") + paramsString ; - } - - searchChar = urlObject.search || "?"; - return urlObject.hrefNoSearch + searchChar + (searchChar.charAt(searchChar.length - 1) === "?" ? "" : "&") + paramsString + (urlObjectHash || ""); + searchChar = urlObject.search || "?"; + return urlObject.hrefNoSearch + searchChar + (searchChar.charAt(searchChar.length - 1) === "?" ? "" : "&") + paramsString + (urlObject.hash || ""); }, /** @@ -389,7 +360,7 @@ /** * Convert absolute Url to data Url - * - for embedded pages strips parameters + * - for embedded pages strips hash and paramters * - for the same domain as document base remove domain * otherwise returns decoded absolute Url * @method convertUrlToDataUrl @@ -403,9 +374,10 @@ convertUrlToDataUrl: function (absUrl, dialogHashKey, documentBase) { var urlObject = path.parseUrl(absUrl); - if (path.isEmbeddedPage(urlObject, !!dialogHashKey)) { - // Keep hash and search data for embedded page - return path.getFilePath(urlObject.hash + urlObject.hashSearch, dialogHashKey); + if (path.isEmbeddedPage(urlObject, dialogHashKey)) { + // For embedded pages, remove the dialog hash key as in getFilePath(), + // otherwise the Data Url won't match the id of the embedded Page. + return urlObject.hash.replace(/^#|\?.*$/g, ""); } documentBase = documentBase || path.documentBase; if (path.isSameDomain(urlObject, documentBase)) { @@ -531,7 +503,7 @@ if (urlObject.protocol !== "") { return (!path.isPath(urlObject.hash) && !!urlObject.hash && (urlObject.hrefNoHash === path.parseLocation().hrefNoHash)); } - return (/\?.*#|^#/).test(urlObject.href); + return (/^#/).test(urlObject.href); }, /** @@ -741,7 +713,7 @@ }, /** - * Return the substring of a file path before the sub-page key, + * Return the substring of a filepath before the sub-page key, * for making a server request * @method getFilePath * @member ns.util.path diff --git a/tau/src/js/core/util/selectors.js b/tau/src/js/core/util/selectors.js index b77ee09f..e8de15e4 100644 --- a/tau/src/js/core/util/selectors.js +++ b/tau/src/js/core/util/selectors.js @@ -1,18 +1,7 @@ /*global define: true, window: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Selectors Utility @@ -65,10 +54,6 @@ return "matchesSelector"; } - if (typeof el.matches === "function") { - return "matches"; - } - return false; }()); @@ -366,32 +351,6 @@ */ getAllByDataNS: function (context, dataSelector) { return slice.call(context.querySelectorAll(getDataSelector(dataSelector))); - }, - - /** - * Get scrollable parent elmenent - * @method getScrollableParent - * @param {HTMLElement} element - * @return {HTMLElement} - * @static - * @member ns.util.selectors - */ - getScrollableParent: function (element) { - var overflow, - style; - - while (element && element != document.body) { - style = window.getComputedStyle(element); - - if (style) { - overflow = style.getPropertyValue("overflow-y"); - if (overflow === "scroll" || (overflow === "auto" && element.scrollHeight > element.clientHeight)) { - return element; - } - } - element = element.parentNode; - } - return null; } }; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); diff --git a/tau/src/js/core/util/zoom.js b/tau/src/js/core/util/zoom.js index 5f4cd924..9b23b61d 100644 --- a/tau/src/js/core/util/zoom.js +++ b/tau/src/js/core/util/zoom.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Zoom Utility diff --git a/tau/src/js/core/widget.js b/tau/src/js/core/widget.js index 533c95b8..a708392e 100644 --- a/tau/src/js/core/widget.js +++ b/tau/src/js/core/widget.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Namespace For Widgets @@ -53,15 +42,13 @@ getAllInstances: engine.getAllBindings }; - function widgetConstructor(name, element, options) { - return engine.instanceWidget(element, name, options); - } - document.addEventListener(engine.eventType.WIDGET_DEFINED, function (evt) { var definition = evt.detail, name = definition.name; - ns.widget[name] = widgetConstructor.bind(null, name); + ns.widget[name] = function (element, options) { + return engine.instanceWidget(element, name, options); + }; }, true); diff --git a/tau/src/js/core/widget/BaseWidget.js b/tau/src/js/core/widget/BaseWidget.js index 3ec2a3e9..fcf9c2b2 100644 --- a/tau/src/js/core/widget/BaseWidget.js +++ b/tau/src/js/core/widget/BaseWidget.js @@ -1,19 +1,8 @@ /*global window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /* @@ -189,6 +178,14 @@ return this; }, prototype = {}, + classes = { + focusPrefix: "ui-focus-", + blurPrefix: "ui-blur-", + up: "up", + down: "down", + left: "left", + right: "right" + }, /** * Property with string represent function type * (for better minification) @@ -197,13 +194,7 @@ * @static * @readonly */ - TYPE_FUNCTION = "function", - disableClass = "ui-state-disabled", - ariaDisabled = "aria-disabled"; - - BaseWidget.classes = { - disable: disableClass - }; + TYPE_FUNCTION = "function"; /** * Protected method configuring the widget @@ -420,20 +411,6 @@ }; /** - * Returns base element widget - * @member ns.widget.BaseWidget - * @return {HTMLElement|null} - * @instance - */ - prototype.getContainer = function () { - var self = this; - if (typeof self._getContainer === TYPE_FUNCTION) { - return self._getContainer(); - } - return self.element; - }; - - /** * Bind widget events attached in init mode * @method _bindEvents * @param {HTMLElement} element Base element of widget @@ -474,48 +451,48 @@ return self; }; + function removeAnimationClasses(element, prefix) { + var elementClasses = element.classList; + elementClasses.remove(prefix + classes.left); + elementClasses.remove(prefix + classes.up); + elementClasses.remove(prefix + classes.right); + elementClasses.remove(prefix + classes.down); + } + + prototype._prepareAnimation = function(eventType, direction) { + var element = this.element; + + switch(eventType) { + case "focus": + removeAnimationClasses(element, classes.blurPrefix); + removeAnimationClasses(element, classes.focusPrefix); + element.classList.add(classes.focusPrefix + direction); + break; + case "blur": + removeAnimationClasses(element, classes.focusPrefix); + removeAnimationClasses(element, classes.blurPrefix); + element.classList.add(classes.blurPrefix + direction); + break; + } + }; /** * Focus widget's element. * * This function calls function focus on element and if it is known * the direction of event, the proper css classes are added/removed. - * @method focus - * @param {object} options The options of event. - * @param {"up"|"down"|"left"|"right"} direction + * @method _focus + * @param {"up"|"down"|"left"|"right} positionFrom The direction of event. * For example, if this parameter has value "down", it means that the movement * comes from the top (eg. down arrow was pressed on keyboard). - * @param {HTMLElement} previousElement Element to blur * @member ns.widget.BaseWidget */ - prototype.focus = function (options) { - var self = this, - element = self.element, - blurElement, - blurWidget; - - options = options || {}; - - blurElement = options.previousElement; - // we try to blur element, which has focus previously - if (blurElement) { - blurWidget = engine.getBinding(blurElement); - // call blur function on widget - if (blurWidget) { - options = objectUtils.merge({}, options, {element: blurElement}); - blurWidget.blur(options); - } else { - // or on element, if widget does not exist - blurElement.blur(); - } - } - - options = objectUtils.merge({}, options, {element: element}); - - // set focus on element - eventUtils.trigger(document, "taufocus", options); - element.focus(); + prototype._focus = function (positionFrom) { + var element = this.element; - return true; + if (typeof this._prepareAnimation === TYPE_FUNCTION) { + this._prepareAnimation("focus", positionFrom); + } + this.element.focus(); }; /** @@ -523,21 +500,17 @@ * * This function calls function blur on element and if it is known * the direction of event, the proper css classes are added/removed. - * @method blur - * @param {object} options The options of event. - * @param {"up"|"down"|"left"|"right"} direction + * @method _blur + * @param {"up"|"down"|"left"|"right} positionFrom * @member ns.widget.BaseWidget */ - prototype.blur = function (options) { - var self = this, - element = self.element; - - options = objectUtils.merge({}, options, {element: element}); + prototype._blur = function (positionFrom) { + var element = this.element; - // blur element - eventUtils.trigger(document, "taublur", options); + if (typeof this._prepareAnimation === TYPE_FUNCTION) { + this._prepareAnimation("blur", positionFrom); + } element.blur(); - return true; }; /** @@ -590,11 +563,8 @@ */ prototype.disable = function () { var self = this, - args = slice.call(arguments), - element = self.element; - - element.classList.add(disableClass); - element.setAttribute(ariaDisabled, true); + element = self.element, + args = slice.call(arguments); if (typeof self._disable === TYPE_FUNCTION) { args.unshift(element); @@ -604,17 +574,6 @@ }; /** - * Check if widget is disabled. - * @method isDisabled - * @member ns.widget.BaseWidget - * @return {boolean} Returns true if widget is disabled - */ - prototype.isDisabled = function () { - var self = this; - return self.element.getAttribute("disabled") || self.options.disabled === true; - }; - - /** * Protected method enabling the widget * @method _enable * @protected @@ -631,11 +590,8 @@ */ prototype.enable = function () { var self = this, - args = slice.call(arguments), - element = self.element; - - element.classList.remove(disableClass); - element.setAttribute(ariaDisabled, false); + element = self.element, + args = slice.call(arguments); if (typeof self._enable === TYPE_FUNCTION) { args.unshift(element); diff --git a/tau/src/js/core/widget/core.js b/tau/src/js/core/widget/core.js index e4daf610..edff8312 100644 --- a/tau/src/js/core/widget/core.js +++ b/tau/src/js/core/widget/core.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /* * #Namespace For Widgets diff --git a/tau/src/js/core/widget/core/Box.js b/tau/src/js/core/widget/core/Box.js deleted file mode 100644 index e118f943..00000000 --- a/tau/src/js/core/widget/core/Box.js +++ /dev/null @@ -1,303 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/* - * # Box widget for layout - * - * @class ns.widget.core.Box - * @extends ns.widget.core.LayoutDOMWidget - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../core", - "../../engine", - "../../util/selectors", - "../../util/DOM/attributes", - "../../util/object", - "../../support", - "./LayoutDOMWidget" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var CoreLayoutWidget = ns.widget.core.LayoutDOMWidget, - engine = ns.engine, - objectUtil = ns.util.object, - domUtil = ns.util.DOM, - Box = function () { - var self = this; - - CoreLayoutWidget.call(self); - // set options - self.options = objectUtil.merge(self.options, defaults); - // set object for current layout - self._currentLayout = {}; - // set stylesheet - self._styleSheet = null; - }, - classes = objectUtil.merge({}, CoreLayoutWidget.classes, { - box: "ui-box" - }), - defaults = { - layout: "default" - }, - /** - * Dictionary for layouts. - * All registered layouts are saved in this object. - */ - layouts = {}, - prototype = new CoreLayoutWidget(), - TYPE_FUNCTION = "function"; - - Box.classes = classes; - Box.layouts = layouts; - - /** - * Configure widget - * @method _configure - * @param {HTMLElement} element - * @member ns.widget.core.Box - * @protected - */ - prototype._configure = function(element) { - var self = this, - options = self.options, - currentLayout; - - if (typeof CoreLayoutWidget._configure === TYPE_FUNCTION) { - CoreLayoutWidget._configure.call(self); - } - - // read which layout is used - options.layout = domUtil.getNSData(element, "layout"); - // try to set current layout - currentLayout = layouts[options.layout]; - // if such layout is registered, we configure it - if (currentLayout) { - // set and configure current layout - self._currentLayout = currentLayout; - currentLayout.configure(self, element); - } - }; - - /** - * Insert CSS rule for layout - * @method insertCSSRule - * @param {string} rule - * @member ns.widget.core.Box - * @protected - */ - prototype.insertCSSRule = function(rule) { - var self = this, - id = ns.getUniqueId(), - styleElement = self._styleSheet, - styleContainer = styleElement && styleElement.sheet; - - // create style - if (!styleContainer) { - styleElement = document.createElement("style"); - // a text node hack, it forces the browser - // to create a stylesheet object in the - // HTMLStyleElement object, which we can - // then use - styleElement.appendChild(document.createTextNode("")); - styleElement.id = id; - document.head.appendChild(styleElement); - styleContainer = styleElement.sheet; - } - // insert new rule - styleContainer.insertRule(rule, 0); - - // set stylesheet, which was added - self._styleSheet = styleElement; - }; - - /** - * Enable new layout. - * This function is called during building and on calling function "layout". - * @method enableNewLayout - * @param {ns.widget.core.Box} self - * @param {HTMLElement} element - * @param {string} name Name of layout - * @member ns.widget.core.Box - * @private - */ - function enableNewLayout(self, element, name) { - var newLayout; - - element = element || self.element; - name = name || self.options.layout; - newLayout = layouts[name]; - - if (newLayout) { - // if layout is registered, we set it - self.options.layout = name; - self._currentLayout = newLayout; - // configure and enable layout - newLayout.configure(self, element); - newLayout.enable(self, element); - } - } - - /** - * Set layout - * @method _setLayout - * @param {HTMLElement} element - * @param {string} value - * @member ns.widget.core.Box - * @protected - */ - prototype._setLayout = function (element, value) { - var self = this, - currentLayoutName = self._currentLayout.name; - - if (currentLayoutName) { - // if layout is changed, we try to reset the current one and enable the new one - if (currentLayoutName !== value) { - // if new options is different than the current one, we reset current layout - disableCurrentLayout(self); - // and set the new one - enableNewLayout(self, element, value); - } - } else { - // Enable layout for the first time - enableNewLayout(self, element, value); - } - }; - - /** - * Build Box - * @method _build - * @param {HTMLElement} element - * @return {HTMLElement} - * @member ns.widget.core.Box - * @protected - */ - prototype._build = function (element) { - var self = this; - - if (typeof CoreLayoutWidget._build === TYPE_FUNCTION) { - CoreLayoutWidget._build.call(self, element); - } - // set layout - enableNewLayout(self, element); - - return element; - }; - - /** - * Disable current layout. - * This function is called during destroying widget and changing layout. - * Function "layout" calls this function before setting new layout. - * @method disableCurrentLayout - * @param {ns.widget.core.Box} self - * @member ns.widget.core.Box - * @private - */ - function disableCurrentLayout(self) { - var layout = self._currentLayout, - styleSheet = self._styleSheet; - - if (typeof layout.disable === TYPE_FUNCTION) { - // disable layout - layout.disable(self, self.element); - - // set options - self.options.layout = defaults.layout; - self._currentLayout = {}; - - // remove stylesheet - if (styleSheet) { - document.head.removeChild(styleSheet); - self._styleSheet = null; - } - } - } - - /** - * Destroy widget. - * @method _destroy - * @member ns.widget.core.Box - * @protected - */ - prototype._destroy = function () { - var self = this; - - disableCurrentLayout(self); - if (typeof CoreLayoutWidget._destroy === TYPE_FUNCTION) { - CoreLayoutWidget._destroy.call(self); - } - }; - - /** - * Refresh Box - * @method _refresh - * @return {HTMLElement} - * @protected - * @member ns.widget.core.Box - */ - prototype._refresh = function () { - var self = this; - if (typeof CoreLayoutWidget._refresh === TYPE_FUNCTION) { - CoreLayoutWidget._refresh.call(self); - } - self._layout(self.element); - }; - - /** - * Register new layout. - * @method register - * @param {HTMLElement} name - * @param {Object} layout - * @static - * @member ns.widget.core.Box - */ - Box.register = function (name, layout) { - layouts[name] = layout; - }; - - /** - * Unregister layout. - * @method unregister - * @param {HTMLElement} name - * @static - * @member ns.widget.core.Box - */ - Box.unregister = function (name) { - delete layouts[name]; - }; - - Box.prototype = prototype; - ns.widget.core.Box = Box; - - engine.defineWidget( - "Box", - "[data-role='box']" + - ", ." + classes.box, - [], - Box - ); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.core.Box; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/widget/core/Button.js b/tau/src/js/core/widget/core/Button.js deleted file mode 100644 index 9af65a60..00000000 --- a/tau/src/js/core/widget/core/Button.js +++ /dev/null @@ -1,338 +0,0 @@ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../engine", - "../core", - "../BaseWidget" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = ns.widget.BaseWidget, - engine = ns.engine, - Button = function () { - var self = this; - self.options = {}; - }, - classes = { - BTN: "ui-btn", - DISABLED: "ui-state-disabled", - INLINE: "ui-inline", - BTN_ICON: "ui-btn-icon", - ICON_PREFIX: "ui-icon-", - BTN_CIRCLE: "ui-btn-circle", - BTN_NOBG: "ui-btn-nobg", - BTN_ICON_ONLY: "ui-btn-icon-only", - BTN_ICON_POSITION_PREFIX: "ui-btn-icon-", - MULTILINE: "ui-multiline" - }, - buttonStyle = { - CIRCLE: "circle", - NOBG: "nobg" - }, - - prototype = new BaseWidget(); - - Button.classes = classes; - Button.prototype = prototype; - - /** - * Configure button - * @method _configre - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Button - */ - prototype._configure = function (element) { - this.options = { - // common options - inline: false, - icon: null, - disabled: false, - // mobile options - style: null, - iconpos: "left", - // wearable options - multiline: false, - }; - }; - - /** - * Set style option - * @method _setStyle - * @param {HTMLElement} element - * @param {string} style - * @protected - * @member ns.widget.core.Button - */ - prototype._setStyle = function (element, style) { - var options = this.options, - buttonClassList = element.classList, - innerTextLength = element.textContent.length || (element.value ? element.value.length : 0); - - style = style || options.style; - - switch (style) { - case buttonStyle.CIRCLE: - if (innerTextLength == 0) { - buttonClassList.remove(classes.BTN_NOBG); - buttonClassList.add(classes.BTN_CIRCLE); - } - break; - case buttonStyle.NOBG: - if (innerTextLength == 0) { - buttonClassList.remove(classes.BTN_CIRCLE); - buttonClassList.add(classes.BTN_NOBG); - } - break; - default: - } - }; - - /** - * Set multiline option - * @method _setMultiline - * @param {HTMLElement} element - * @param {boolean} multiline - * @protected - * @member ns.widget.core.Button - */ - prototype._setMultiline = function (element, multiline) { - var options = this.options; - - multiline = multiline || options.multiline; - - if (multiline) { - element.classList.add(classes.MULTILINE); - } - }; - - /** - * Set inline option - * @method _setInline - * @param {HTMLElement} element - * @param {boolean} inline - * @protected - * @member ns.widget.core.Button - */ - prototype._setInline = function (element, inline) { - var options = this.options; - - inline = inline || options.inline; - - if (inline) { - element.classList.add(classes.INLINE); - } - }; - - /** - * Set icon option - * @method _setIcon - * @param {HTMLElement} element - * @param {string} icon - * @protected - * @member ns.widget.core.Button - */ - prototype._setIcon = function (element, icon) { - var self = this, - options = self.options; - - icon = icon || options.icon; - - if (icon) { - element.classList.add(classes.BTN_ICON); - element.classList.add(classes.ICON_PREFIX + icon); - self._setTitleForIcon(element); - } - }; - - /** - * Set iconpos option - * @method _setIconpos - * @param {HTMLElement} element - * @param {string} iconpos - * @protected - * @member ns.widget.core.Button - */ - prototype._setIconpos = function (element, iconpos) { - var options = this.options, - innerTextLength = element.textContent.length || (element.value ? element.value.length : 0); - - iconpos = iconpos || options.iconpos; - - if (options.icon) { - if (innerTextLength > 0) { - element.classList.add(classes.BTN_ICON_POSITION_PREFIX + iconpos); - } else { - element.classList.add(classes.BTN_ICON_ONLY); - } - } - }; - - /** - * Set title for button without showing text - * @method _setTitleForIcon - * @param {HTMLElement|HTMLInputElement|HTMLButtonElement} element - * @protected - * @member ns.widget.core.Button - */ - prototype._setTitleForIcon = function (element) { - var self = this, - elementTagName = element.tagName.toLowerCase(), - options = self.options, - buttonText = element.textContent; - - // Add title to element if button not has text. - if (options.iconpos === "notext" && !element.getAttribute("title")) { - element.setAttribute("title", buttonText); - } - if (!buttonText.length && elementTagName !== "label") { - element.textContent = options.icon.replace("naviframe-", ""); - } - }; - - prototype._setDisabled = function (element) { - var self = this, - options = self.options, - buttonClassList = element.classList; - - if (options.disabled === true || element.disabled || buttonClassList.contains(classes.DISABLED)) { - self._disable(element); - } - }; - - /** - * Build Button - * @method _build - * @protected - * @param {HTMLElement} element - * @return {HTMLElement} - * @member ns.widget.core.Button - */ - prototype._build = function (element) { - var self = this, - buttonClassList = element.classList; - - if (!buttonClassList.contains(classes.BTN)) { - buttonClassList.add(classes.BTN); - } - - self._setStyle(element); - self._setMultiline(element); - self._setInline(element); - self._setIconpos(element); - self._setIcon(element); - self._setDisabled(element); - - return element; - }; - - /** - * Refresh structure - * @method _refresh - * @protected - * @member ns.widget.core.Button - */ - prototype._refresh = function () { - var self = this, - element = this.element; - - self._setStyle(element); - self._setMultiline(element); - self._setInline(element); - self._setIconpos(element); - self._setIcon(element); - self._setDisabled(element); - - return null; - }; - - /* Get value of button - * @method _getValue - * @protected - * @member ns.widget.core.Button - */ - prototype._getValue = function () { - return this.element.textContent; - }; - - /* Set value of button - * @method _setValue - * @param {string} value - * @protected - * @member ns.widget.core.Button - */ - prototype._setValue = function (value) { - this.element.textContent = value; - }; - - /** - * Enable button - * @method _enable - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Button - */ - prototype._enable = function (element) { - var options = this.options, - tagName = element.tagName.toLowerCase(); - - if (element) { - if (element.tagName.toLowerCase() === "button") { - element.removeAttribute("disabled"); - } - element.classList.remove(classes.DISABLED); - options.disabled = false; - } - }; - - /** - * Disable button - * @method _disable - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Button - */ - prototype._disable = function (element) { - var options = this.options; - - if (element) { - if (element.tagName.toLowerCase() === "button") { - element.disabled = true; - } - element.classList.add(classes.DISABLED); - options.disabled = true; - } - }; - - ns.widget.core.Button = Button; - - engine.defineWidget( - "Button", - "button, [data-role='button'], .ui-btn, input[type='button']", - [], - Button, - "core" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.Button; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/widget/core/Checkboxradio.js b/tau/src/js/core/widget/core/Checkboxradio.js deleted file mode 100644 index c0e34fd3..00000000 --- a/tau/src/js/core/widget/core/Checkboxradio.js +++ /dev/null @@ -1,244 +0,0 @@ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../core", - "../../engine", - "../../util/selectors", - "../BaseWidget" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = ns.widget.BaseWidget, - engine = ns.engine, - selectors = ns.util.selectors, - slice = [].slice, - Checkboxradio = function () { - var self = this; - - self._label = null; - self._inputtype = null; - }, - classes = { - DISABLED: "ui-state-disabled", - UI_PREFIX: "ui-" - }, - prototype = new BaseWidget(); - - Checkboxradio.prototype = prototype; - - prototype._build = function (element) { - var inputtype = element.getAttribute("type"), - elementClassList = element.classList; - - if (inputtype !== "checkbox" && inputtype !== "radio") { - //_build should always return element - return element; - } - - elementClassList.add(classes.UI_PREFIX + inputtype); - - return element; - }; - - /** - * Inits widget - * @method _init - * @param {HTMLElement} element - * @protected - * @member ns.widget.Checkboxradio - * @instance - */ - prototype._init = function (element) { - var self = this; - - self._label = element.labels ? element.labels[0] : null; - self._inputtype = element.getAttribute("type"); - }; - - /** - * Returns either a set of radios with the same name attribute or a single checkbox - * @method getInputSet - * @return {Array} - * @protected - * @member ns.widget.Checkboxradio - * @instance - */ - prototype._getInputSet = function () { - var self = this, - element = self.element, - parent; - - if (self._inputtype === "checkbox") { - return [element]; - } - - parent = selectors.getClosestBySelector(element, "form, fieldset, .ui-page, [data-role='page'], [data-role='dialog']"); - - if (parent) { - return slice.call(parent.querySelectorAll("input[name='" + element.name + "'][type='" + self._inputtype + "']")); - } - - return []; - }; - - /** - * Refreshes widget - * @method _refresh - * @member ns.widget.Checkboxradio - * @instance - */ - prototype._refresh = function () { - var self = this, - element = this.element; - - if (element.getAttribute("disabled")) { - self._disable(); - } else { - self._enable(); - } - }; - - /** - * Enables widget - * @method _enable - * @member ns.widget.Checkboxradio - * @protected - * @instance - */ - prototype._enable = function (element) { - if (element) { - element.classList.remove(classes.DISABLED); - element.removeAttribute("disabled"); - } - }; - - /** - * Disables widget - * @method _disable - * @protected - * @member ns.widget.Checkboxradio - * @instance - */ - prototype._disable = function (element) { - if (element) { - element.classList.add(classes.DISABLED); - element.setAttribute("disabled", true); - } - }; - - /** - * Return checked checkboxradio element - * @method getCheckedElement - * @return {?HTMLElement} - * @member ns.widget.Checkboxradio - * @new - */ - prototype.getCheckedElement = function () { - var radios = this._getInputSet(), - i, - max = radios.length; - for (i = 0; i < max; i++) { - if (radios[i].checked) { - return radios[i]; - } - } - return null; - }; - - /** - * Returns value of checkbox if it is checked or value of radios with the same name - * @method _getValue - * @member ns.widget.Checkboxradio - * @return {?string} - * @protected - * @instance - * @new - */ - prototype._getValue = function () { - var checkedElement = this.getCheckedElement(); - - if (checkedElement) { - return checkedElement.value; - } - return null; - }; - - /** - * Check element with value - * @method _setValue - * @param {string} value - * @member ns.widget.Checkboxradio - * @chainable - * @instance - * @protected - * @new - */ - prototype._setValue = function (value) { - var self = this, - radios = self._getInputSet(), - checkedElement, - i, - max = radios.length; - - for (i = 0; i < max; i++) { - if (radios[i].value === value) { - checkedElement = self.getCheckedElement(); - if (checkedElement) { - checkedElement.checked = false; - } - radios[i].checked = true; - return self; - } - } - return self; - }; - - /** - * Cleans widget's resources - * @method _destroy - * @protected - * @member ns.widget.Checkboxradio - * @instance - */ - prototype._destroy = function () { - var self = this; - - self._label = null; - self._inputtype = null; - }; - - // definition - ns.widget.core.Checkboxradio = Checkboxradio; - engine.defineWidget( - "Checkboxradio", - "input[type='checkbox']:not(.ui-slider-switch-input):not([data-role='toggleswitch']):not(.ui-toggleswitch), " + - "input[type='radio'], " + - "input.ui-checkbox, " + - "input.ui-radio", - [], - Checkboxradio, - "" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.core.Checkboxradio; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/widget/core/ContextPopup.js b/tau/src/js/core/widget/core/ContextPopup.js index 303fc1a1..99460347 100644 --- a/tau/src/js/core/widget/core/ContextPopup.js +++ b/tau/src/js/core/widget/core/ContextPopup.js @@ -1,6 +1,6 @@ /*global window, define */ /* -* Copyright (c) 2015 Samsung Electronics Co., Ltd +* Copyright (c) 2013 - 2014 Samsung Electronics Co., Ltd * * Licensed under the Flora License, Version 1.1 (the "License"); * you may not use this file except in compliance with the License. @@ -315,19 +315,15 @@ * then arrow will be placed at the top of popup container and the whole popup will be placed under cliced element. * @property {string} [options.positionTo="window"] Sets the element relative to which the popup will be centered. * @property {number} [options.distance=0] Sets the extra distance in px from clicked element. - * @property {HTMLElement|string} [options.link=null] Set the element or its id, under which popup should be placed. - * It only works with option positionTo="origin". * @member ns.widget.core.ContextPopup * @static * @private */ - defaults = { + defaults = objectUtils.merge({}, Popup.defaults, { arrow: "l,b,r,t", positionTo: "window", - positionOriginCenter: false, - distance: 0, - link: null - }, + distance: 0 + }), ContextPopup = function () { var self = this, @@ -340,6 +336,7 @@ // set ui ui = self._ui || {}; + ui.wrapper = null; ui.arrow = null; self._ui = ui; }, @@ -351,9 +348,11 @@ */ CLASSES_PREFIX = "ui-popup", classes = objectUtils.merge({}, Popup.classes, { + wrapper: CLASSES_PREFIX + "-wrapper", context: "ui-ctxpopup", arrow: "ui-arrow", - arrowDir: CLASSES_PREFIX + "-arrow-" + arrowDir: CLASSES_PREFIX + "-arrow-", + build: "ui-build" }), /** @@ -365,18 +364,16 @@ before_position: "beforeposition" }), - positionTypes = { + positionType = { WINDOW: "window", - ORIGIN: "origin", - ABSOLUTE: "absolute" + ORIGIN: "origin" }, prototype = new Popup(); - ContextPopup.defaults = objectUtils.merge({}, Popup.defaults, defaults); + ContextPopup.defaults = defaults; ContextPopup.classes = classes; ContextPopup.events = events; - ContextPopup.positionTypes = positionTypes; /** * Build structure of Popup widget @@ -389,23 +386,38 @@ prototype._build = function (element) { var self = this, ui = self._ui, - arrow; - - // build elements of popup - PopupPrototype._build.call(self, element); + wrapper, + arrow, + child = element.firstChild; // set class for element element.classList.add(classes.popup); + // create wrapper + wrapper = document.createElement("div"); + wrapper.classList.add(classes.wrapper); + ui.wrapper = wrapper; + ui.container = wrapper; + + // move all children to wrapper + while (child) { + wrapper.appendChild(child); + child = element.firstChild; + } + // create arrow arrow = document.createElement("div"); arrow.appendChild(document.createElement("span")); arrow.classList.add(classes.arrow); ui.arrow = arrow; - // add arrow to popup element + // add wrapper and arrow to popup element + element.appendChild(wrapper); element.appendChild(arrow); + // build elements of popup + PopupPrototype._build.call(self, element); + return element; }; @@ -422,18 +434,11 @@ PopupPrototype._init.call(this, element); + ui.wrapper = ui.wrapper || element.querySelector("." + classes.wrapper); ui.arrow = ui.arrow || element.querySelector("." + classes.arrow); - }; - /** - * Layouting popup structure - * @method layout - * @member ns.widget.core.ContextPopup - */ - prototype._layout = function (element) { - var self = this; - this._reposition(); - PopupPrototype._layout.call(self, element); + // set container of popup elements + ui.container = ui.wrapper; }; /** @@ -456,7 +461,6 @@ // set height of content self._setContentHeight(); - // set position of popup self._placementCoords(options); @@ -478,8 +482,8 @@ element = self.element, windowWidth = window.innerWidth, windowHeight = window.innerHeight, - popupWidth = domUtils.getElementWidth(element, "outer"), - popupHeight = domUtils.getElementHeight(element, "outer"), + popupWidth = element.offsetWidth, + popupHeight = element.offsetHeight, // offset coordinates of clicked element clickElementRect = clickedElement.getBoundingClientRect(), clickElementOffsetX = clickElementRect.left, @@ -551,10 +555,6 @@ (popupHeight + clickElementOffsetHeight) * direction.fixedPositionFactor) / 2 + options.distance * direction.fixedPositionFactor; - // fix min/max position - bestOffsetInfo.x = bestOffsetInfo.x < 0 ? 0 : bestOffsetInfo.x + bestOffsetInfo.w > windowWidth ? windowWidth - bestOffsetInfo.w : bestOffsetInfo.x; - bestOffsetInfo.y = bestOffsetInfo.y < 0 ? 0 : bestOffsetInfo.y + bestOffsetInfo.h > windowHeight ? windowHeight - bestOffsetInfo.h : bestOffsetInfo.y; - return bestOffsetInfo; } @@ -582,10 +582,7 @@ "padding-top": 0, "padding-bottom": 0, "padding-left": 0, - "padding-right": 0, - "border-top-width": 0, - "border-left-width": 0, - "box-sizing": null + "padding-right": 0 }, wrapperProperties = { "margin-top": 0, @@ -605,12 +602,10 @@ "r": {pos: y, min: "top", max: "bottom", posField: "y", valField: "h", styleField: "top"} }, param = params[bestRectangle.dir], - surplus, - addPadding; + surplus; domUtils.extractCSSProperties(popupElement, popupProperties); domUtils.extractCSSProperties(wrapper, wrapperProperties); - addPadding = popupProperties["box-sizing"] === "border-box"; margins = { "t": popupProperties["padding-top"] + wrapperProperties["margin-top"] + wrapperProperties["padding-top"], "b": popupProperties["padding-bottom"] + wrapperProperties["margin-bottom"] + wrapperProperties["padding-bottom"], @@ -649,7 +644,7 @@ } } - arrowStyle[param.styleField] = (param.pos - arrowHalfWidth - bestRectangle[param.posField] - (addPadding ? popupProperties["border-" + param.styleField + "-width"] : 0)) + "px"; + arrowStyle[param.styleField] = (param.pos - arrowHalfWidth - bestRectangle[param.posField]) + "px"; return bestRectangle; } @@ -672,26 +667,6 @@ }; /** - * Set top, left and margin for popup's container. - * @method _placementCoordsAbsolute - * @param {HTMLElement} element - * @param {number} x - * @param {number} y - * @protected - * @member ns.widget.core.ContextPopup - */ - prototype._placementCoordsAbsolute = function(element, x, y) { - var elementStyle = element.style, - elementWidth = element.offsetWidth, - elementHeight = element.offsetHeight; - - elementStyle.top = y + "px"; - elementStyle.left = x + "px"; - elementStyle.marginTop = -(elementHeight / 2) + "px"; - elementStyle.marginLeft = -(elementWidth / 2) + "px"; - }; - - /** * Find clicked element. * @method _findClickedElement * @param {number} x @@ -743,64 +718,6 @@ return position; } - prototype._placementCoordsOrigin = function (clickedElement, options) { - var self = this, - element = self.element, - elementStyle = element.style, - elementClassList = element.classList, - x = options.x, - y = options.y, - bestRectangle, - emulatedPosition, - arrowType, - elementHeight; - - elementClassList.add(classes.context); - - elementHeight = element.offsetHeight; - bestRectangle = findBestPosition(self, clickedElement); - - arrowType = bestRectangle.dir; - elementClassList.add(classes.arrowDir + arrowType); - self._ui.arrow.setAttribute("type", arrowType); - - if ((typeof x !== "number" && typeof y !== "number") || self.options.positionOriginCenter) { - // if we found element, which was clicked, but the coordinates of event - // was not available, we have to count these coordinates to the center of proper edge of element. - emulatedPosition = emulatePositionOfClick(arrowType, clickedElement); - x = emulatedPosition.x; - y = emulatedPosition.y; - } - bestRectangle = adjustedPositionAndPlacementArrow(self, bestRectangle, x, y); - - if (elementHeight > bestRectangle.h) { - self._setContentHeight(bestRectangle.h); - } - - elementStyle.left = bestRectangle.x + "px"; - elementStyle.top = bestRectangle.y + "px"; - }; - - prototype._placementCoordsElement = function (clickedElement, options) { - var self = this, - element = self.element, - elementStyle = element.style, - bestRectangle, - elementHeight; - - element.classList.add(classes.context); - - elementHeight = element.offsetHeight; - bestRectangle = findBestPosition(self, clickedElement); - - if (elementHeight > bestRectangle.h) { - self._setContentHeight(bestRectangle.h); - } - - elementStyle.left = bestRectangle.x + "px"; - elementStyle.top = bestRectangle.y + "px"; - }; - /** * Find and set the best position for popup. * @method _placementCoords @@ -814,56 +731,54 @@ x = options.x, y = options.y, element = self.element, + elementStyle = element.style, + elementClassList = element.classList, + emulatedPosition, elementHeight, clickedElement, - link; - - switch (positionTo) { - case positionTypes.ORIGIN: - // if we know x-coord and y-coord, we open the popup with arrow - link = options.link; - if (link) { - if (typeof link === "string") { - clickedElement = document.getElementById(link); - } else if (typeof link === "object") { - clickedElement = link; - } - } else if (typeof x === "number" && typeof y === "number") { - clickedElement = self._findClickedElement(x, y); - } - if (clickedElement) { - self._placementCoordsOrigin(clickedElement, options); - return; - } - break; - case positionTypes.WINDOW: - self._placementCoordsWindow(element); - return; - break; - case positionTypes.ABSOLUTE: - if (typeof x === "number" && typeof y === "number") { - self._placementCoordsAbsolute(element, x, y); - return; - } - break; - default: - // there is posible, that element or its id was given - if (typeof positionTo === "string") { - try { - clickedElement = document.querySelector(options.positionTo); - } catch(e) {} - } else if (typeof positionTo === "object") { - clickedElement = positionTo; - } - if (clickedElement) { - self._placementCoordsElement(clickedElement, options); - return; - } - break; + bestRectangle; + + if (typeof positionTo === "string") { + if (positionTo === positionType.ORIGIN && typeof x === "number" && typeof y === "number") { + clickedElement = self._findClickedElement(x, y); + } else if (positionTo !== positionType.WINDOW) { + try { + clickedElement = document.querySelector(options.positionTo); + } catch(e) {} + } + } else { + clickedElement = positionTo; + } + + if (clickedElement) { + + elementClassList.add(classes.context); + + elementHeight = element.offsetHeight; + bestRectangle = findBestPosition(self, clickedElement); + + elementClassList.add(classes.arrowDir + bestRectangle.dir); + + if (typeof x !== "number" && typeof y !== "number") { + // if we found element, which was clicked, but the coordinates of event + // was not available, we have to count these coordinates to the center of proper edge of element. + emulatedPosition = emulatePositionOfClick(bestRectangle.dir, clickedElement); + x = emulatedPosition.x; + y = emulatedPosition.y; + } + bestRectangle = adjustedPositionAndPlacementArrow(self, bestRectangle, x, y); + + if (elementHeight > bestRectangle.h) { + self._setContentHeight(bestRectangle.h); + } + + elementStyle.left = bestRectangle.x + "px"; + elementStyle.top = bestRectangle.y + "px"; + + } else { + self._placementCoordsWindow(element); } - // if there was problem with setting position of popup, we set its position to window - self._placementCoordsWindow(element); }; /** @@ -900,6 +815,7 @@ contentStyle.minHeight = contentHeight + "px"; } } + }; /** @@ -939,18 +855,33 @@ var self = this, element = self.element, ui = self._ui, - arrow = ui.arrow; + wrapper = ui.wrapper; PopupPrototype._destroy.call(self); - if (arrow && arrow.parentNode) { - arrow.parentNode.removeChild(arrow); - } + [].forEach.call(wrapper.children, function(child) { + element.appendChild(child); + }); + wrapper.parentNode.removeChild(wrapper); + ui.arrow.parentNode.removeChild(ui.arrow); + + ui.wrapper = null; ui.arrow = null; }; /** + * Show popup. + * @method _destroy + * @protected + * @member ns.widget.core.ContextPopup + */ + prototype._show = function(options) { + this._reposition(options); + PopupPrototype._show.call(this, options); + }; + + /** * Set new position for popup. * @method reposition * @param options @@ -965,19 +896,6 @@ } }; - /** - * Refresh structure - * @method _refresh - * @protected - * @member ns.widget.core.ContextPopup - */ - prototype._refresh = function() { - if (this._isActive()) { - PopupPrototype._refresh.call(this); - this.reposition(this.options); - } - }; - ContextPopup.prototype = prototype; ns.widget.core.ContextPopup = ContextPopup; diff --git a/tau/src/js/core/widget/core/Drawer.js b/tau/src/js/core/widget/core/Drawer.js index 98a249df..49bcfb47 100644 --- a/tau/src/js/core/widget/core/Drawer.js +++ b/tau/src/js/core/widget/core/Drawer.js @@ -1,19 +1,7 @@ /*global window, define */ -/*jslint nomen: true */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Drawer Widget @@ -48,12 +36,7 @@ [ "../../theme", "../../util/selectors", - "../../util/DOM/css", - "../../event", - "../../event/gesture", - "../../router/history", "../core", // fetch namespace - "./Page", "../BaseWidget" ], @@ -66,7 +49,6 @@ * @static */ var BaseWidget = ns.widget.BaseWidget, - engine = ns.engine, /** * @property {Object} selectors Alias for class ns.util.selectors * @member ns.widget.core.Drawer @@ -75,29 +57,6 @@ * @readonly */ selectors = ns.util.selectors, - utilDOM = ns.util.DOM, - events = ns.event, - history = ns.router.history, - Gesture = ns.event.gesture, - Page = ns.widget.core.Page, - STATE = { - CLOSED: "closed", - OPENED: "opened", - SLIDING: "sliding", - SETTLING: "settling" - }, - CUSTOM_EVENTS = { - OPEN: "draweropen", - CLOSE: "drawerclose" - }, - /** - * Default values - */ - DEFAULT = { - WIDTH: 240, - DURATION: 300, - POSITION: "left" - }, /** * Drawer constructor * @method Drawer @@ -106,36 +65,31 @@ var self = this; /** * Drawer field containing options - * @property options.position {string} Position of Drawer ("left" or "right") - * @property options.width {number} Width of Drawer - * @property options.duration {number} Duration of Drawer entrance animation - * @property options.closeOnClick {boolean} If true Drawer will be closed on overlay - * @property options.overlay {boolean} Sets whether to show an overlay when Drawer is open. - * @property options.drawerTarget {string} Set drawer target element as the css selector - * @property options.enable {boolean} Enable drawer component - * @property options.dragEdge {number} Set the area that can open the drawer as drag gesture in drawer target element + * @property {number} Position of Drawer ("left" or "right") + * @property {number} Width of Drawer + * @property {number} Duration of Drawer entrance animation + * @property {boolean} If true Drawer will be closed on arrow click + * @property {boolean} Sets whether to show an overlay when Drawer is open. */ self.options = { - position : DEFAULT.POSITION, - width : DEFAULT.WIDTH, - duration : DEFAULT.DURATION, + position : "left", + width : 240, + duration : 100, closeOnClick: true, - overlay: true, - drawerTarget: "." + Page.classes.uiPage, - enable: true, - dragEdge: 1 + overlay: true }; + self._onOverlayClickBound = null; + self._onTransitionEndBound = null; + self._onResizeBound = null; + self._onPageshowBound = null; + self._pageSelector = null; - self._isDrag = false; - self._state = STATE.CLOSED; - self._settlingType = STATE.CLOSED; - self._traslatedX = 0; + self._isOpen = false; self._ui = {}; - self._eventBoundElement = null; self._drawerOverlay = null; }, /** @@ -147,8 +101,8 @@ * @readonly */ classes = { - page : Page.classes.uiPage, drawer : "ui-drawer", + header : "ui-drawer-header", left : "ui-drawer-left", right : "ui-drawer-right", overlay : "ui-drawer-overlay", @@ -167,280 +121,69 @@ Drawer.classes = classes; /** - * Unbind drag events - * @method unbindDragEvents - * @param {Object} self - * @param {HTMLElement} element + * Click event handler + * @method onClick + * @param {ns.widget.core.Drawer} self * @member ns.widget.core.Drawer * @private * @static */ - function unbindDragEvents(self, element) { - var overlayElement = self._ui.drawerOverlay; - - events.disableGesture(element); - events.off(element, "drag dragstart dragend dragcancel swipe swipeleft swiperight vmouseup", self, false); - events.prefixedFastOff(self.element, "transitionEnd", self, false); - events.off(window, "resize", self, false); - if (overlayElement) { - events.off(overlayElement, "vclick", self, false); + function onClick(self) { + // vclick event handler + if (self._isOpen) { + self.close(); } } /** - * Bind drag events - * @method bindDragEvents - * @param {Object} self - * @param {HTMLElement} element + * webkitTransitionEnd event handler + * @method onTransitionEnd + * @param {ns.widget.core.Drawer} self * @member ns.widget.core.Drawer * @private * @static */ - function bindDragEvents(self, element) { - var overlayElement = self._ui.drawerOverlay; - self._eventBoundElement = element; - - events.enableGesture( - element, - - new Gesture.Drag(), - new Gesture.Swipe({ - orientation: Gesture.Orientation.HORIZONTAL - }) - ); - - events.on(element, "drag dragstart dragend dragcancel swipe swipeleft swiperight vmouseup", self, false); - events.prefixedFastOn(self.element, "transitionEnd", self, false); - events.on(window, "resize", self, false); - if (overlayElement) { - events.on(overlayElement, "vclick", self, false); + function onTransitionEnd(self) { + var drawerOverlay = self._drawerOverlay; + // webkitTransitionEnd event handler + if (!self._isOpen) { + // not open -> transition -> open + self._isOpen = true; + } else { + // open -> transition -> close + self._isOpen = false; + if (drawerOverlay) { + drawerOverlay.style.visibility = "hidden"; + } } } - /** - * Handle events - * @method handleEvent - * @param {Event} event - * @member ns.widget.core.Drawer - */ - prototype.handleEvent = function (event) { - var self = this; - switch (event.type) { - case "drag": - self._onDrag(event); - break; - case "dragstart": - self._onDragStart(event); - break; - case "dragend": - self._onDragEnd(event); - break; - case "dragcancel": - self._onDragCancel(event); - break; - case "vmouseup": - self._onMouseup(event); - break; - case "swipe": - case "swipeleft": - case "swiperight": - self._onSwipe(event); - break; - case "vclick": - self._onClick(event); - break; - case "transitionend": - case "webkitTransitionEnd": - case "mozTransitionEnd": - case "oTransitionEnd": - case "msTransitionEnd": - self._onTransitionEnd(event); - break; - case "resize": - self._onResize(event); - break; - } - }; - - /** - * MouseUp event handler - * @method _onMouseup - * @param {Event} event - * @member ns.widget.core.Drawer - * @protected - */ - prototype._onMouseup = function (event) { - var self = this; - if (self._state === STATE.SLIDING) { - self.close(); - } - }; - /** - * Click event handler - * @method _onClick - * @param {Event} event - * @member ns.widget.core.Drawer - * @protected - */ - prototype._onClick = function (event) { - var self = this; - if (self._state === STATE.OPENED) { - self.close(); - } - }; /** * Resize event handler - * @method _onResize - * @param {Event} event + * @method onResize + * @param {ns.widget.core.Drawer} self * @member ns.widget.core.Drawer - * @protected + * @private + * @static */ - prototype._onResize = function (event) { - var self = this; + function onResize(self) { // resize event handler self._refresh(); - }; - - /** - * webkitTransitionEnd event handler - * @method _onTransitionEnd - * @param {Event} event - * @member ns.widget.core.Drawer - * @protected - */ - prototype._onTransitionEnd = function (event) { - var self = this, - position = self.options.position, - drawerOverlay = self._drawerOverlay; - - if (self._state === STATE.SETTLING) { - if (self._settlingType === STATE.OPENED) { - self.trigger(CUSTOM_EVENTS.OPEN, { - position: position - }); - self._setActive(true); - self._state = STATE.OPENED; - } else { - self.close(); - self.trigger(CUSTOM_EVENTS.CLOSE, { - position: position - }); - self._setActive(false); - self._state = STATE.CLOSED; - if (drawerOverlay) { - drawerOverlay.style.visibility = "hidden"; - } - } - } - }; + } /** - * Swipe event handler - * @method _onSwipe - * @protected - * @param {Event} event - * @member ns.widget.core.Drawer - */ - prototype._onSwipe = function (event) { - var self = this, - direction, - options = self.options; - - // Now mobile has two swipe event - if (event.detail) { - direction = event.detail.direction === "left" ? "right" : "left"; - } else if (event.type === "swiperight") { - direction = "left"; - } else if (event.type === "swipeleft") { - direction = "right"; - } - if (options.enable && self._isDrag && options.position === direction) { - self.open(); - self._isDrag = false; - } - }; - /** - * Dragstart event handler - * @method _onDragStart - * @protected - * @param {Event} event - * @member ns.widget.core.Drawer - */ - prototype._onDragStart = function (event) { - var self = this; - if (self._state === STATE.OPENED) { - return; - } - if (self.options.enable && !self._isDrag && self._state !== STATE.SETTLING && self._checkSideEdge(event)) { - self._isDrag = true; - } else { - self.close(); - } - }; - /** - * Drag event handler - * @method _onDrag - * @protected - * @param {Event} event - * @member ns.widget.core.Drawer - */ - prototype._onDrag = function (event) { - var self = this, - deltaX = event.detail.deltaX, - options = self.options, - translatedX = self._traslatedX, - movedX; - - if (options.enable && self._isDrag && self._state !== STATE.SETTLING) { - if (options.position === "left") { - movedX = -options.width + deltaX + translatedX; - if (movedX < 0) { - self._translate(movedX, 0); - } - } else { - movedX = window.innerWidth + deltaX - translatedX; - if (movedX > 0 && movedX > window.innerWidth - options.width) { - self._translate(movedX, 0); - } - } - } - }; - /** - * DragEnd event handler - * @method _onDragEnd - * @protected - * @param {Event} event + * Pageshow event handler + * @method onPageshow + * @param {ns.widget.core.Drawer} self * @member ns.widget.core.Drawer + * @private + * @static */ - prototype._onDragEnd = function (event) { - var self = this, - options = self.options, - detail = event.detail; - if (options.enable && self._isDrag) { - if (Math.abs(detail.deltaX) > options.width / 2) { - self.open(); - } else if (self._state !== STATE.SETTLING) { - self.close(); - } - } - self._isDrag = false; - }; + function onPageshow(self) { + self._refresh(); + } /** - * DragCancel event handler - * @method _onDragCancel - * @protected - * @param {Event} event - * @member ns.widget.core.Drawer - */ - prototype._onDragCancel = function (event) { - var self = this; - if (self.options.enable && self._isDrag) { - self.close(); - } - self._isDrag = false; - }; - /** * Drawer translate function * @method _translate * @param {number} x @@ -449,67 +192,16 @@ * @protected */ prototype._translate = function (x, duration) { - var self = this, - element = self.element; - - if (self._state !== STATE.SETTLING) { - self._state = STATE.SLIDING; - } + var element = this.element, + elementStyle = element.style, + transition = "none"; if (duration) { - utilDOM.setPrefixedStyle(element, "transition", utilDOM.getPrefixedValue("transform " + duration / 1000 + "s ease-out")); - } - - // there should be a helper for this :( - utilDOM.setPrefixedStyle(element, "transform", "translate3d(" + x + "px, 0px, 0px)"); - if (self.options.overlay) { - self._setOverlay(x); - } - if (!duration) { - self._onTransitionEnd(); + transition = "-webkit-transform " + duration / 1000 + "s ease-out"; } - }; - - /** - * Set overlay opacity and visibility - * @method _setOverlay - * @param {number} x - * @member ns.widget.core.Drawer - * @protected - */ - prototype._setOverlay = function (x) { - var self = this, - options = self.options, - overlay = self._ui.drawerOverlay, - overlayStyle = overlay.style, - absX = Math.abs(x), - ratio = options.position === "right" ? absX / window.innerWidth : absX / options.width; - - if (ratio < 1) { - overlayStyle.visibility = "visible"; - } else { - overlayStyle.visibility = "hidden"; - } - overlayStyle.opacity = 1 - ratio; - }; - - /** - * Set active status in drawer router - * @method _setActive - * @param {boolean} active - * @member ns.widget.core.Drawer - * @protected - */ - prototype._setActive = function (active) { - var self = this, - route = engine.getRouter().getRoute("drawer"); - - if (active) { - route.setActive(self); - } else { - route.setActive(null); - } + elementStyle.webkitTransform = "translate3d(" + x + "px, 0px, 0px)"; + elementStyle.webkitTransition = transition; }; /** @@ -522,28 +214,30 @@ */ prototype._build = function (element) { var self = this, - ui = self._ui, - options = self.options, - targetElement; + headerElement; element.classList.add(classes.drawer); - element.style.top = 0; - targetElement = selectors.getClosestBySelector(element, options.drawerTarget); + self._drawerPage = selectors.getClosestByClass(element, this._pageSelector); + self._drawerPage.style.overflow = "hidden"; - if (targetElement) { - targetElement.appendChild(element); - targetElement.style.overflowX = "hidden"; + headerElement = element.nextElementSibling; + while (headerElement) { + if (headerElement.classList.contains("ui-header")) { + break; + } + headerElement = headerElement.nextElementSibling; } - if (self.options.overlay) { - ui.drawerOverlay = self._createOverlay(element); - ui.drawerOverlay.style.visibility = "hidden"; + if (headerElement) { + headerElement.classList.add(classes.header); } - if (!ui.placeholder) { - ui.placeholder = document.createComment(element.id + "-placeholder"); - element.parentNode.insertBefore(ui.placeholder, element); + self._headerElement = headerElement; + + if (self.options.overlay) { + self._createOverlay(element); + self._drawerOverlay.style.visibility = "hidden"; } - ui.targetElement = targetElement; + return element; }; @@ -556,37 +250,8 @@ */ prototype._init = function (element) { var self = this, - ui = self._ui; - ui.drawerPage = selectors.getClosestByClass(element, classes.page); - ui.drawerPage.style.overflowX = "hidden"; - self._initLayout(); - return element; - }; - - /** - * init Drawer widget layout - * @method _initLayout - * @protected - * @member ns.widget.core.Drawer - */ - prototype._initLayout = function () { - var self = this, - options = self.options, - element = self.element, - elementStyle = element.style, - ui = self._ui, - overlayStyle = ui.drawerOverlay ? ui.drawerOverlay.style : false; - - options.width = options.width || ui.targetElement.offsetWidth; - - elementStyle.width = options.width + "px"; - elementStyle.height = ui.targetElement.offsetHeight + "px"; + options = self.options; - if (overlayStyle) { - overlayStyle.width = window.innerWidth + "px"; - overlayStyle.height = window.innerHeight + "px"; - overlayStyle.top = 0; - } if (options.position === "right") { element.classList.add(classes.right); self._translate(window.innerWidth, 0); @@ -595,7 +260,6 @@ element.classList.add(classes.left); self._translate(-options.width, 0); } - self._state = STATE.CLOSED; }; /** @@ -604,12 +268,12 @@ * @member ns.widget.core.Drawer * @protected */ - prototype._translateRight = function () { + prototype._translateRight = function() { var self = this, options = self.options; if (options.position === "right") { // If drawer position is right, drawer should be moved right side - if (self._state === STATE.OPENED) { + if (self._isOpen) { // drawer opened self._translate(window.innerWidth - options.width, 0); } else { @@ -620,40 +284,32 @@ }; /** - * Check dragstart event whether triggerred on side edge area or not - * @method _checkSideEdge - * @protected - * @param {Event} event - * @member ns.widget.core.Drawer - */ - prototype._checkSideEdge = function (event) { - var self = this, - detail = event.detail, - eventClientX = detail.pointer.clientX - detail.estimatedDeltaX, - options = self.options, - position = options.position, - boundElement = self._eventBoundElement, - boundElementOffsetWidth = boundElement.offsetWidth, - boundElementRightEdge = boundElement.offsetLeft + boundElementOffsetWidth, - dragStartArea = boundElementOffsetWidth * options.dragEdge; - - return ((position === "left" && eventClientX > 0 && eventClientX < dragStartArea) || - (position === "right" && eventClientX > boundElementRightEdge - dragStartArea && - eventClientX < boundElementRightEdge)); - }; - /** * Refreshes Drawer widget * @method _refresh * @member ns.widget.core.Drawer * @protected */ - prototype._refresh = function () { + prototype._refresh = function() { // Drawer layout has been set by parent element layout - var self = this; + var self = this, + options = self.options, + drawerElementParent = self.element.parentNode, + drawerHeight = drawerElementParent.clientHeight, + drawerStyle = self.element.style, + drawerOverlay = self._drawerOverlay, + overlayStyle = drawerOverlay && drawerOverlay.style; + + drawerStyle.width = options.width + "px"; + drawerStyle.height = drawerHeight + "px"; + + if (overlayStyle) { + overlayStyle.width = window.innerWidth + "px"; + overlayStyle.height = drawerHeight + "px"; + } self._translateRight(); - self._initLayout(); }; + /** * Creates Drawer overlay element * @method _createOverlay @@ -661,13 +317,13 @@ * @member ns.widget.core.Drawer * @protected */ - prototype._createOverlay = function (element) { - var overlayElement = document.createElement("div"); + prototype._createOverlay = function(element) { + var self = this, + overlayElement = document.createElement("div"); overlayElement.classList.add(classes.overlay); element.parentNode.insertBefore(overlayElement, element); - - return overlayElement; + self._drawerOverlay = overlayElement; }; /** @@ -676,31 +332,22 @@ * @member ns.widget.core.Drawer * @protected */ - prototype._bindEvents = function () { + prototype._bindEvents = function() { var self = this, - targetElement = self._ui.targetElement; - - bindDragEvents(self, targetElement); - }; - - /** - * Enable Drawer widget - * @method _enable - * @protected - * @member ns.widget.core.Drawer - */ - prototype._enable = function () { - this._oneOption("enable", true); - }; + options = self.options, + drawerOverlay = self._drawerOverlay; + self._onClickBound = onClick.bind(null, self); + self._onTransitionEndBound = onTransitionEnd.bind(null, self); + self._onResizeBound = onResize.bind(null, self); + self._onPageshowBound = onPageshow.bind(null, self); - /** - * Disable Drawer widget - * @method _disable - * @protected - * @member ns.widget.core.Drawer - */ - prototype._disable = function () { - this._oneOption("enable", false); + if (options.overlay && options.closeOnClick && drawerOverlay) { + drawerOverlay.addEventListener("vclick", self._onClickBound, false); + } + self.element.addEventListener("webkitTransitionEnd", self._onTransitionEndBound, false); + self.element.addEventListener("transitionEnd", self._onTransitionEndBound, false); + window.addEventListener("resize", self._onResizeBound, false); + self._drawerPage.addEventListener("pageshow", self._onPageshowBound, false); }; /** @@ -709,133 +356,70 @@ * @member ns.widget.core.Drawer * @return {boolean} Returns true if Drawer is open */ - prototype.isOpen = function () { - return (this._state === STATE.OPENED); + prototype.isOpen = function() { + return this._isOpen; }; /** * Opens Drawer widget * @method open - * @param {number} [duration] Duration for opening, if is not set then method take value from options * @member ns.widget.core.Drawer */ - prototype.open = function (duration) { + prototype.open = function() { var self = this, options = self.options, drawerClassList = self.element.classList, - drawerOverlay = self._ui.drawerOverlay; - if (self._state !== STATE.OPENED) { - self._state = STATE.SETTLING; - self._settlingType = STATE.OPENED; - duration = duration !== undefined ? duration : options.duration; - if (drawerOverlay) { - drawerOverlay.style.visibility = "visible"; - } - drawerClassList.remove(classes.close); - drawerClassList.add(classes.open); - if (options.position === "left") { - self._translate(0, duration); - } else { - self._translate(window.innerWidth - options.width, duration); - } + drawerOverlay = self._drawerOverlay; + if (drawerOverlay) { + drawerOverlay.style.visibility = "visible"; + } + drawerClassList.remove(classes.close); + drawerClassList.add(classes.open); + if (options.position === "left") { + self._translate(0, options.duration); + } else { + self._translate(window.innerWidth - options.width, options.duration); } }; /** * Closes Drawer widget * @method close - * @param {object} options This value is router options whether reverse or not. - * @param {number} [duration] Duration for closing, if is not set then method take value from options * @member ns.widget.core.Drawer */ - prototype.close = function (options, duration) { + prototype.close = function() { var self = this, - reverse = options ? options.reverse : false, - selfOptions = self.options, + options = self.options, drawerClassList = self.element.classList; - if (self._state !== STATE.CLOSED) { - if (!reverse && self._state === STATE.OPENED) { - // This method was fired by JS code or this widget. - history.back(); - return; - } - self._state = STATE.SETTLING; - self._settlingType = STATE.CLOSED; - duration = duration !== undefined ? duration : selfOptions.duration; - drawerClassList.remove(classes.open); - drawerClassList.add(classes.close); - if (selfOptions.position === "left") { - self._translate(-selfOptions.width, duration); - } else { - self._translate(window.innerWidth, duration); - } - } - }; - - /** - * Set Drawer drag handler. - * If developer use handler, drag event is bound at handler only. - * @method setDragHandler - * @param {HTMLElement} element - * @member ns.widget.core.Drawer - */ - prototype.setDragHandler = function (element) { - var self = this; - self.options.dragEdge = 1; - unbindDragEvents(self, self._eventBoundElement); - bindDragEvents(self, element); - }; - - /** - * Transition Drawer widget. - * This method use only positive integer number. - * @method transition - * @param {number} position - * @member ns.widget.core.Drawer - */ - prototype.transition = function (position) { - var self = this, - options = self.options; - if (options.position === "left"){ - self._translate(-options.width + position, options.duration); + drawerClassList.remove(classes.open); + drawerClassList.add(classes.close); + if (options.position === "left") { + self._translate(-options.width, options.duration); } else { - self._translate(options.width - position , options.duration); + self._translate(window.innerWidth, options.duration); } - self._traslatedX = position; }; /** - * Get state of Drawer widget. - */ - prototype.getState = function () { - return this._state; - }; - /** * Destroys Drawer widget * @method _destroy * @member ns.widget.core.Drawer * @protected */ - prototype._destroy = function () { + prototype._destroy = function() { var self = this, - ui = self._ui, - drawerOverlay = ui.drawerOverlay, - placeholder = ui.placeholder, - placeholderParent = placeholder.parentNode, - element = self.element; - - placeholderParent.insertBefore(element, placeholder); - placeholderParent.removeChild(placeholder); - + drawerOverlay = self._drawerOverlay; if (drawerOverlay) { drawerOverlay.removeEventListener("vclick", self._onClickBound, false); } - unbindDragEvents(self, self._eventBoundElement); - ui = null; + self.element.removeEventListener("webkitTransitionEnd", self._onTransitionEndBound, false); + window.removeEventListener("resize", self._onResizeBound, false); + self._drawerPage.removeEventListener("pageshow", self._onPageshowBound, false); }; ns.widget.core.Drawer = Drawer; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.widget.core.Drawer; } diff --git a/tau/src/js/core/widget/core/LayoutDOMWidget.js b/tau/src/js/core/widget/core/LayoutDOMWidget.js deleted file mode 100644 index 95d504bc..00000000 --- a/tau/src/js/core/widget/core/LayoutDOMWidget.js +++ /dev/null @@ -1,183 +0,0 @@ -/*global window:false, HTMLElement:false, define:false */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/* - * ## JavaScript API - * - * Layout widget based on DOM elements. - * - * @class ns.widget.core.LayoutDOMWidget - * @extends ns.widget.core.LayoutWidget - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../engine", - "../../util", - "./LayoutWidget" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var LayoutWidget = ns.widget.core.LayoutWidget, - CLASSES_PREFIX = "ui-layout", - classes = { - layout: CLASSES_PREFIX - }, - prototype = new LayoutWidget(), - - LayoutDOMWidget = function () { - LayoutWidget.call(this); - }; - - LayoutDOMWidget.classes = classes; - - /** - * Appends DOM based container - * @param {HTMLElement} container - */ - prototype._appendUIContainer = function (container) { - if (this.element && - container instanceof HTMLElement) { - this.element.appendChild(container); - } - }; - - // removes DOM based widgets for DOM tree - prototype._removeUIContainer = function (child) { - if (this.element) { - this.element.removeChild(child.element); - } - }; - - /** - * Return widget width - * @returns {number} - */ - prototype._getWidth = function () { - var container = this.getContainer(); - if (container) { - return container.offsetWidth; - } - return 0; - }; - - /** - * Return widget height - * @returns {number} - */ - prototype._getHeight = function () { - var container = this.getContainer(); - if (container) { - return container.offsetHeight; - } - return 0; - }; - - function setStyle(element, property, value) { - if (ns.util.isNumber(value)) { - value = value + "px"; - } - if (typeof value === "string") { - element.style[property] = value; - } else { - ns.warn("not supported value"); - } - } - - /** - * Sets widget height - * @returns {number} - */ - prototype._setHeight = function (height) { - var container = this.getContainer(); - if (container) { - setStyle(container, "height", height); - } - }; - - /** - * Sets widget width - * @returns {number} - */ - prototype._setWidth = function (width) { - var container = this.getContainer(); - if (container) { - setStyle(container, "width", width); - } - }; - - /** - * Sets widget position - * @param {number|string} left - * @param {number|string} top - * @returns {number} - */ - prototype._setPosition = function (left, top) { - var container = this.getContainer(); - if (container) { - setStyle(container, "left", left); - setStyle(container, "top", top); - } - }; - - /** - * Gets widget position - * @returns {Object} - */ - prototype._getPosition = function () { - var container = this.getContainer(); - if (container) { - return container.getBoundingClientRect(); - } - }; - - /** - * Return widget client width - * @returns {number} - */ - prototype._getClientWidth = function () { - var container = this.getContainer(); - if (container) { - return container.getBoundingClientRect().width; - } - return 0; - }; - - /** - * Return widget client height - * @returns {number} - */ - prototype._getClientHeight = function () { - var container = this.getContainer(); - if (container) { - return container.getBoundingClientRect().height; - } - return 0; - }; - - LayoutDOMWidget.prototype = prototype; - ns.widget.core.LayoutDOMWidget = LayoutDOMWidget; - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.core.LayoutDOMWidget; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns));
\ No newline at end of file diff --git a/tau/src/js/core/widget/core/LayoutWidget.js b/tau/src/js/core/widget/core/LayoutWidget.js deleted file mode 100644 index 3f1a0464..00000000 --- a/tau/src/js/core/widget/core/LayoutWidget.js +++ /dev/null @@ -1,236 +0,0 @@ -/*global define, ns, window:false, HTMLElement:false, Object:false*/ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/* - * ## JavaScript API - * - * Layout widget. - * - * @class ns.widget.core.Layout - * @extends ns.widget.core.BaseWidget - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../engine", - "../BaseWidget" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var BaseWidget = ns.widget.BaseWidget, - engine = ns.engine, - prototype = new BaseWidget(), - slice = [].slice, - /** - * Property with string represent function type - * (for better minification) - * @property {string} [TYPE_FUNCTION="function"] - * @private - * @static - * @readonly - */ - TYPE_FUNCTION = "function", - - LayoutWidget = function () { - this.options = {}; - }; - - prototype.layout = function () { - var self = this, - child, - len, - i; - - if (typeof self._layout === TYPE_FUNCTION) { - self._layout(self.element); - } - // call layout method on children - if (Array.isArray(self._children)) { - for (i = 0, len = self._children.length; i < len; i++) { - child = self._children[i]; - if (typeof child.layout === TYPE_FUNCTION) { - child.layout(); - } - } - } - }; - - function createWidget(component) { - if (!component.parentNode) { - document.createDocumentFragment() - .appendChild(component); - } - engine.createWidgets(component.parentNode); - return engine.getBinding(component); - } - - /** - * Appends a widget to layout widget - * @param {type} widget - */ - prototype._appendWidget = function (widget) { - var self = this; - if (!self.hasOwnProperty('_children')) { - self._children = {}; - } - - if (widget instanceof BaseWidget && - self._children[widget.id] === undefined) { - self._children[widget.id] = widget; - return true; - } - return false; - }; - - /** - * Appends component to layout widget - * @param {BaseWidget|HTMLElement} component - */ - prototype._appendComponent = function (component) { - var self = this, - widget = (component instanceof HTMLElement) ? - createWidget(component) : - component; - - if (self._appendWidget(widget)) { - if (typeof self._appendUIContainer === TYPE_FUNCTION) { - self._appendUIContainer(widget.getContainer()); - } - } - }; - - /** - * Append component as child - * (widget or widgets or HTML element which will be widget) - * @method append - * @param {BaseWidget|[BaseWidget]|HTMLElement|[HTMLElement]} widget - * @member ns.widget.core.LayoutWidget - */ - prototype.append = function (widget) { - var i, len, self = this; - - if (!Array.isArray(widget)) { - widget = [widget]; - } - for (i = 0, len = widget.length; i < len; i++) { - self._appendComponent(widget[i]); - } - - // @TODO do we need to call .layout method after every .append - self.layout(); - }; - - prototype.remove = function (widget) { - var self = this, - children; - - if (typeof self._children === "object") { - children = {}; - slice.call(self._children).forEach(function (child) { - if (widget === child) { - if (typeof self._removeUIContainer === TYPE_FUNCTION) { - self._removeUIContainer(child); - } - } else { - children[widget.id] = widget; - } - }); - self._children = children; - } - }; - - prototype.getClientWidth = function () { - var self = this; - if (typeof self._getClientWidth === TYPE_FUNCTION) { - return self._getClientWidth(); - } - return 0; - }; - - prototype.getClientHeight = function () { - var self = this; - if (typeof self._getClientHeight === TYPE_FUNCTION) { - return self._getClientHeight(); - } - return 0; - }; - - prototype.getWidth = function () { - var self = this; - if (typeof self._getWidth === TYPE_FUNCTION) { - return self._getWidth(); - } - return 0; - }; - - prototype.getHeight = function () { - var self = this; - if (typeof self._getHeight === TYPE_FUNCTION) { - return self._getHeight(); - } - return 0; - }; - - prototype.getChildrenCount = function () { - var self = this; - - if (typeof self._children === "object") { - return Object.keys(self._children).length; - } - return 0; - }; - - prototype.setWidth = function (width) { - var self = this; - if (typeof self._setWidth === TYPE_FUNCTION) { - return self._setWidth(width); - } - }; - - prototype.setHeight = function (height) { - var self = this; - if (typeof self._setHeight === TYPE_FUNCTION) { - return self._setHeight(height); - } - }; - - prototype.setPosition = function (left, top) { - var self = this; - if (typeof self._setPosition === TYPE_FUNCTION) { - return self._setPosition(left, top); - } - }; - - prototype.getPosition = function () { - var self = this; - if (typeof self._getPosition === TYPE_FUNCTION) { - return self._getPosition(); - } - }; - - LayoutWidget.prototype = prototype; - ns.widget.core.LayoutWidget = LayoutWidget; - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.core.LayoutWidget; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns));
\ No newline at end of file diff --git a/tau/src/js/core/widget/core/Listview.js b/tau/src/js/core/widget/core/Listview.js index c7b5f2e7..258ef7d3 100644 --- a/tau/src/js/core/widget/core/Listview.js +++ b/tau/src/js/core/widget/core/Listview.js @@ -1,20 +1,9 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/*global window, define */ +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ -/*jslint nomen: true, plusplus: true */ +/*jslint nomen: true */ /** * # Listview Widget * Shows a list view. @@ -76,28 +65,21 @@ define( [ "../core", - "../../util/selectors", "../BaseWidget" ], function () { //>>excludeEnd("tauBuildExclude"); var BaseWidget = ns.widget.BaseWidget, engine = ns.engine, - selectorUtils = tau.util.selectors, Listview = function () { return this; }, classes = { - LISTVIEW: "ui-listview", - LISTITEM_HAS_RADIO: "li-has-radio", - LISTITEM_HAS_CHECKBOX: "li-has-checkbox" + LISTVIEW: "ui-listview" }, prototype = new BaseWidget(); Listview.events = {}; - Listview.classes = classes; - - Listview.classes = classes; prototype._changeLinksToButton = function(item) { engine.instanceWidget( @@ -169,14 +151,11 @@ var items = element.children, itemsLength = items.length, item, - i, - background = document.createElement("div"); - - background.className = classes.LISTITEM_BACKGROUND; + i; element.classList.add(classes.LISTVIEW); - for (i = 0; i < itemsLength; i++) { + for (i=0; i<itemsLength; i++) { item = items[i]; if (item.firstElementChild && item.firstElementChild.tagName === "A") { self._changeLinksToButton(item.firstElementChild); @@ -190,21 +169,7 @@ * @member ns.widget.core.Listview */ prototype._destroy = function () { - var items = this.element.children, - itemsLength = items.length, - item, - i, - widget; - - for (i = 0; i < itemsLength; i++) { - item = items[i]; - if (item.firstElementChild && item.firstElementChild.tagName === "A") { - widget = engine.getBinding(item.firstElementChild, "Button"); - if (widget !== null) { - widget.destroy(); - } - } - } + return null; }; Listview.prototype = prototype; diff --git a/tau/src/js/core/widget/core/Marquee.js b/tau/src/js/core/widget/core/Marquee.js deleted file mode 100644 index bb42d0b4..00000000 --- a/tau/src/js/core/widget/core/Marquee.js +++ /dev/null @@ -1,573 +0,0 @@ -/*global window, define, console */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/** - * # Marquee Text - * It makes <div> element with text move horizontally like legacy <marquee> tag - * - * ## Make Marquee Element - * If you want to use Marquee widget, you have to declare below attributes in <div> element and make Marquee widget in JS code. - * To use a Marquee widget in your application, use the following code: - * - * @example - * <div class="ui-content"> - * <ul class="ui-listview"> - * <li><div class="ui-marquee" id="marquee">Marquee widget code sample</div></li> - * </ul> - * </div> - * <script> - * var marqueeEl = document.getElementById("marquee"), - * marqueeWidget = new tau.widget.Marquee(marqueeEl, {marqueeStyle: "scroll", delay: "3000"}); - * </script> - * - * @author Heeju Joo <heeju.joo@samsung.com> - * @class ns.widget.core.Marquee - * @extends ns.widget.BaseWidget - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../engine", - "../../event", - "../../util/object", - "../../util/DOM", - "../BaseWidget" - ], - function() { - //>>excludeEnd("tauBuildExclude"); - - var BaseWidget = ns.widget.BaseWidget, - /** - * Alias for class ns.engine - * @property {ns.engine} engine - * @member ns.widget.core.Marquee - * @private - */ - engine = ns.engine, - /** - * Alias for class ns.event - * @property {ns.event} event - * @member ns.widget.core.Marquee - * @private - */ - utilEvent = ns.event, - /** - * Alias for class ns.util.object - * @property {Object} objectUtils - * @member ns.widget.core.Marquee - * @private - */ - objectUtils = ns.util.object, - /** - * Alias for class ns.util.DOM - * @property {Object} domUtil - * @member ns.widget.core.Marquee - * @private - */ - domUtil = ns.util.DOM, - - Marquee = function() { - this._ui = {}; - this._ui.marqueeInnerElement = null; - this._ui.styleSheelElement = null; - - this._state = states.STOPPED; - this._hasEllipsisText = false; - - this.options = objectUtils.merge({}, Marquee.defaults); - - // event callbacks - this._callbacks = {}; - }, - - prototype = new BaseWidget(), - - CLASSES_PREFIX = "ui-marquee", - - states = { - RUNNING: "running", - STOPPED: "stopped", - IDLE: "idle" - }, - - eventType = { - /** - * Triggered when the marquee animation end. - * @event marqueeend - * @memeber ns.widget.core.Marquee - */ - MARQUEE_START: "marqueestart", - MARQUEE_END: "marqueeend", - MARQUEE_STOPPED: "marqueestopped" - }, - /** - * Dictionary for CSS class of marquee play state - * @property {Object} classes - * @member ns.widget.core.Marquee - * @static - */ - classes = { - MARQUEE_CONTENT: CLASSES_PREFIX + "-content", - MARQUEE_GRADIENT: CLASSES_PREFIX + "-gradient", - MARQUEE_ELLIPSIS: CLASSES_PREFIX + "-ellipsis", - ANIMATION_RUNNING: CLASSES_PREFIX + "-anim-running", - ANIMATION_STOPPED: CLASSES_PREFIX + "-anim-stopped", - ANIMATION_IDLE: CLASSES_PREFIX + "-anim-idle" - }, - - selector = { - MARQUEE_CONTENT: "." + CLASSES_PREFIX + "-content" - }, - - /** - * Dictionary for marquee style - */ - style = { - SCROLL: "scroll", - SLIDE: "slide", - ALTERNATE: "alternate" - }, - - ellipsisEffect = { - GRADIENT: "gradient", - ELLIPSIS: "ellipsis", - NONE: "none" - }, - - /** - * Options for widget - * @property {Object} options - * @property {string|"slide"|"scroll"|"alternate"} [options.marqueeStyle="slide"] Sets the default style for the marquee - * @property {number} [options.speed=60] Sets the speed(px/sec) for the marquee - * @property {number|"infinite"} [options.iteration=1] Sets the iteration count number for marquee - * @property {number} [options.delay=2000] Sets the delay(ms) for marquee - * @property {"linear"|"ease"|"ease-in"|"ease-out"|"cubic-bezier(n,n,n,n)"} [options.timingFunction="linear"] Sets the timing function for marquee - * @property {"gradient"|"ellipsis"|"none"} [options.ellipsisEffect="gradient"] Sets the end-effect(gradient) of marquee - * @property {boolean} [options.autoRun=true] Sets the status of autoRun - * @member ns.widget.core.Marquee - * @static - */ - defaults = { - marqueeStyle: style.SLIDE, - speed: 60, - iteration: 1, - delay: 0, - timingFunction: "linear", - ellipsisEffect: "gradient", - runOnlyOnEllipsisText: true, - autoRun: true - }; - - Marquee.classes = classes; - Marquee.defaults = defaults; - - /* Marquee AnimationEnd callback */ - function marqueeEndHandler(self) { - self.reset(); - } - - function getAnimationDuration(self, speed) { - var marqueeInnerElement = self._ui.marqueeInnerElement, - textWidth = marqueeInnerElement.scrollWidth, - duration = textWidth / speed; - - return duration; - } - - function setMarqueeKeyFrame(self, marqueeStyle) { - var marqueeInnerElement = self._ui.marqueeInnerElement, - marqueeContainer = self.element, - containerWidth = marqueeContainer.offsetWidth, - textWidth = marqueeInnerElement.scrollWidth, - styleElement = document.createElement("style"), - keyFrameName = marqueeStyle + "-" + self.id, - customKeyFrame; - - switch (marqueeStyle) { - case style.SLIDE: - customKeyFrame = "@-webkit-keyframes " + keyFrameName + " {" - + "0% { -webkit-transform: translate3d(0, 0, 0);}" - + "95%, 100% { -webkit-transform: translate3d(-" + (textWidth - containerWidth) + "px, 0, 0);} }"; - break; - case style.SCROLL: - customKeyFrame = "@-webkit-keyframes " + keyFrameName + " {" - + "0% { -webkit-transform: translate3d(0, 0, 0);}" - + "95%, 100% { -webkit-transform: translate3d(-100%, 0, 0);} }"; - break; - case style.ALTERNATE: - customKeyFrame = "@-webkit-keyframes " + keyFrameName + " {" - + "0% { -webkit-transform: translate3d(0, 0, 0);}" - + "50% { -webkit-transform: translate3d(-" + (textWidth - containerWidth) + "px, 0, 0);}" - + "100% { -webkit-transform: translate3d(0, 0, 0);} }"; - break; - default: - customKeyFrame = null; - break; - } - - if (customKeyFrame) { - self.element.appendChild(styleElement); - styleElement.sheet.insertRule(customKeyFrame, 0); - - self._ui.styleSheelElement = styleElement; - } - - return keyFrameName; - } - - function setAnimationStyle(self, options) { - var marqueeInnerElement = self._ui.marqueeInnerElement, - marqueeInnerElementStyle = marqueeInnerElement.style, - duration = getAnimationDuration(self, isNaN(parseInt(options.speed))? defaults.speed : options.speed ), - marqueeKeyFrame = setMarqueeKeyFrame(self, options.marqueeStyle), - iteration; - - // warning when option value is not correct. - if (isNaN(parseInt(options.speed))) { - ns.warn("speed value must be number(px/sec)"); - } - if ((options.iteration !== "infinite") && isNaN(options.iteration)) { - ns.warn("iteration count must be number or 'infinite'"); - } - if (isNaN(options.delay)) { - ns.warn("delay value must be number"); - } - - marqueeInnerElementStyle.webkitAnimationName = marqueeKeyFrame; - marqueeInnerElementStyle.webkitAnimationDuration = duration + "s"; - marqueeInnerElementStyle.webkitAnimationIterationCount = options.iteration; - marqueeInnerElementStyle.webkitAnimationTimingFunction = options.timingFunction; - marqueeInnerElementStyle.webkitAnimationDelay = options.delay + "ms"; - } - - function setEllipsisEffectStyle(self, ellipsisEffectOption, hasEllipsisText) { - var marqueeElement = self.element; - - switch (ellipsisEffectOption) { - case ellipsisEffect.GRADIENT: - if (hasEllipsisText) { - marqueeElement.classList.add(classes.MARQUEE_GRADIENT); - } - break; - case ellipsisEffect.ELLIPSIS: - marqueeElement.classList.add(classes.MARQUEE_ELLIPSIS); - break; - default : - break; - } - - } - - function setAutoRunState(self, autoRunOption) { - if (autoRunOption) { - self.start(); - } else { - self.stop(); - } - } - - /** - * Build Marquee DOM - * @method _build - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.core.Marquee - */ - prototype._build = function(element) { - var marqueeInnerElement = document.createElement("div"); - - while (element.hasChildNodes()) { - marqueeInnerElement.appendChild(element.removeChild(element.firstChild)); - } - marqueeInnerElement.classList.add(classes.MARQUEE_CONTENT); - element.appendChild(marqueeInnerElement); - - this._ui.marqueeInnerElement = marqueeInnerElement; - - return element; - }; - - /** - * Init Marquee Style - * @method _init - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.core.Marquee - */ - prototype._init = function(element) { - var self = this; - - self._ui.marqueeInnerElement = self._ui.marqueeInnerElement || element.querySelector(selector.MARQUEE_CONTENT); - self._hasEllipsisText = element.offsetWidth - domUtil.getCSSProperty(element, "padding-right", null, "float") < self._ui.marqueeInnerElement.scrollWidth; - - if (!(self.options.runOnlyOnEllipsisText && !self._hasEllipsisText)) { - setEllipsisEffectStyle(self, self.options.ellipsisEffect, self._hasEllipsisText); - setAnimationStyle(self, self.options); - setAutoRunState(self, self.options.autoRun); - } - - return element; - }; - - /** - * Bind events - * @method _bindEvents - * @protected - * @member ns.widget.core.Marquee - */ - prototype._bindEvents = function() { - var self = this, - marqueeInnerElement = self._ui.marqueeInnerElement, - animationEndCallback = marqueeEndHandler.bind(null, self); - - self._callbacks.animationEnd = animationEndCallback; - - utilEvent.one(marqueeInnerElement, "webkitAnimationEnd", animationEndCallback) - }; - - /** - * Refresh styles - * @method _refresh - * @protected - * @memeber ns.widget.core.Marquee - */ - prototype._refresh = function() { - var self = this; - - self._resetStyle(); - self._hasEllipsisText = self.element.offsetWidth < self._ui.marqueeInnerElement.scrollWidth; - - if (self.options.runOnlyOnEllipsisText && !self._hasEllipsisText) { - return; - } - - setEllipsisEffectStyle(self, self.options.ellipsisEffect, self._hasEllipsisText); - setAnimationStyle(self, self.options); - setAutoRunState(self, self.options.autoRun); - }; - - /** - * Reset style of Marquee elements - * @method _resetStyle - * @protected - * @memeber ns.widget.core.Marquee - */ - prototype._resetStyle = function() { - var self = this, - marqueeContainer = self.element, - marqueeKeyframeStyleSheet = self._ui.styleSheelElement, - marqueeInnerElementStyle = self._ui.marqueeInnerElement.style; - - if (marqueeContainer.contains(marqueeKeyframeStyleSheet)) { - marqueeContainer.removeChild(marqueeKeyframeStyleSheet); - } - - marqueeInnerElementStyle.webkitAnimationName = ""; - marqueeInnerElementStyle.webkitAnimationDuration = ""; - marqueeInnerElementStyle.webkitAnimationDelay = ""; - marqueeInnerElementStyle.webkitAnimationIterationCount = ""; - marqueeInnerElementStyle.webkitAnimationTimingFunction = ""; - }; - - /** - * Remove marquee object and Reset DOM structure - * @method _resetDOM - * @protected - * @memeber ns.widget.core.Marquee - */ - prototype._resetDOM = function() { - var ui = this._ui; - - while (ui.marqueeInnerElement.hasChildNodes()) { - this.element.appendChild(ui.marqueeInnerElement.removeChild(ui.marqueeInnerElement.firstChild)); - } - this.element.removeChild(ui.marqueeInnerElement); - return null; - }; - - /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.core.Marquee - */ - prototype._destroy = function() { - var self = this; - - self._resetStyle(); - self._resetDOM(); - self._callbacks = null; - self._ui = null; - - return null; - }; - - /** - * Set Marquee animation status Running - * @method _animationStart - * @memeber ns.widget.core.Marquee - */ - prototype._animationStart = function() { - var self = this, - marqueeElementClassList = self.element.classList, - marqueeInnerElementClassList = self._ui.marqueeInnerElement.classList; - - self._state = states.RUNNING; - - if (marqueeElementClassList.contains(classes.MARQUEE_ELLIPSIS)) { - marqueeElementClassList.remove(classes.MARQUEE_ELLIPSIS); - } - - marqueeInnerElementClassList.remove(classes.ANIMATION_IDLE, classes.ANIMATION_STOPPED); - marqueeInnerElementClassList.add(classes.ANIMATION_RUNNING); - self.trigger(eventType.MARQUEE_START); - }; - - /** - * Start Marquee animation - * - * #####Running example in pure JavaScript: - * - * @example - * <div class="ui-marquee" id="marquee"> - * <p>MarqueeTEST TEST message TEST for marquee</p> - * </div> - * <script> - * var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee")); - * marqueeWidget.start(); - * </script> - * - * @method start - * @memeber ns.widget.core.Marquee - */ - prototype.start = function() { - var self = this; - - if (self.options.runOnlyOnEllipsisText && !self._hasEllipsisText) { - return; - } - - switch (self._state) { - case states.IDLE: - setAnimationStyle(self, self.options); - self._bindEvents(); - self._animationStart(); - break; - case states.STOPPED: - self._state = states.RUNNING; - self._animationStart(); - break; - case states.RUNNING: - break; - } - }; - - /** - * Pause Marquee animation - * - * #####Running example in pure JavaScript: - * @example - * <div class="ui-marquee" id="marquee"> - * <p>MarqueeTEST TEST message TEST for marquee</p> - * </div> - * <script> - * var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee")); - * marqueeWidget.stop(); - * </script> - * - * @method stop - * @member ns.widget.core.Marquee - */ - prototype.stop = function() { - var self = this, - marqueeInnerElementClassList = self._ui.marqueeInnerElement.classList; - - if (self.options.runOnlyOnEllipsisText && !self._hasEllipsisText) { - return; - } - - if (self._state == states.IDLE) { - return; - } - - self._state = states.STOPPED; - marqueeInnerElementClassList.remove(classes.ANIMATION_RUNNING); - marqueeInnerElementClassList.add(classes.ANIMATION_STOPPED); - self.trigger(eventType.MARQUEE_STOPPED); - }; - - /** - * Reset Marquee animation - * - * #####Running example in pure JavaScript: - * @example - * <div class="ui-marquee" id="marquee"> - * <p>MarqueeTEST TEST message TEST for marquee</p> - * </div> - * <script> - * var marqueeWidget = tau.widget.Marquee(document.getElementById("marquee")); - * marqueeWidget.reset(); - * </script> - * - * @method reset - * @member ns.widget.core.Marquee - */ - prototype.reset = function() { - var self = this, - marqueeElementClassList = self.element.classList, - marqueeInnerElementClassList = self._ui.marqueeInnerElement.classList; - - if (self.options.runOnlyOnEllipsisText && !self._hasEllipsisText) { - return; - } - - if (self._state == states.IDLE) { - return; - } - - self._state = states.IDLE; - marqueeInnerElementClassList.remove(classes.ANIMATION_RUNNING, classes.ANIMATION_STOPPED); - marqueeInnerElementClassList.add(classes.ANIMATION_IDLE); - if (self.options.ellipsisEffect == ellipsisEffect.ELLIPSIS) { - marqueeElementClassList.add(classes.MARQUEE_ELLIPSIS); - } - - self._resetStyle(); - self.trigger(eventType.MARQUEE_END); - }; - - Marquee.prototype = prototype; - ns.widget.core.Marquee = Marquee; - - engine.defineWidget( - "Marquee", - ".ui-marquee", - ["start", "stop", "reset"], - Marquee, - "core" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - - return ns.widget.core.Marquee; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/widget/core/Page.js b/tau/src/js/core/widget/core/Page.js deleted file mode 100644 index 60ddbbb7..00000000 --- a/tau/src/js/core/widget/core/Page.js +++ /dev/null @@ -1,821 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/** - * # Page Widget - * Page is main element of application's structure. - * - * ## Default selectors - * In the Tizen Web UI framework the application page structure is based on a header, content and footer elements: - * - * - **The header** is placed at the top, and displays the page title and optionally buttons. - * - **The content** is the section below the header, showing the main content of the page. - * - **The footer** is a bottom part of page which can display for example buttons - * - * The following table describes the specific information for each section. - * - * <table> - * <tr> - * <th>Section</th> - * <th>Class</th> - * <th>Mandatory</th> - * <th>Description</th> - * </tr> - * <tr> - * <td rowspan="2">Page</td> - * <td>ui-page</td> - * <td>Yes</td> - * <td>Defines the element as a page. - * - * The page widget is used to manage a single item in a page-based architecture. - * - * A page is composed of header (optional), content (mandatory), and footer (optional) elements.</td> - * </tr> - * <tr> - * <td>ui-page-active</td> - * <td>No</td> - * <td>If an application has a static start page, insert the ui-page-active class in the page element to speed up the application launch. The start page with the ui-page-active class can be displayed before the framework is fully loaded. - * - *If this class is not used, the framework inserts the class automatically to the first page of the application. However, this has a slowing effect on the application launch, because the page is displayed only after the framework is fully loaded.</td> - * </tr> - * <tr> - * <td>Header</td> - * <td>ui-header</td> - * <td>No</td> - * <td>Defines the element as a header.</td> - * </tr> - * <tr> - * <td>Content</td> - * <td>ui-content</td> - * <td>Yes</td> - * <td>Defines the element as content.</td> - * </tr> - * <tr> - * <td>Footer</td> - * <td>ui-footer</td> - * <td>No</td> - * <td>Defines the element as a footer. - * - * The footer section is mostly used to include option buttons.</td> - * </tr> - * </table> - * - * All elements with class=ui-page will be become page widgets - * - * @example - * <!--Page layout--> - * <div class="ui-page ui-page-active"> - * <header class="ui-header"></header> - * <div class="ui-content"></div> - * <footer class="ui-footer"></footer> - * </div> - * - * <!--Page layout with more button in header--> - * <div class="ui-page ui-page-active"> - * <header class="ui-header ui-has-more"> - * <h2 class="ui-title">Call menu</h2> - * <button type="button" class="ui-more ui-icon-overflow">More Options</button> - * </header> - * <div class="ui-content">Content message</div> - * <footer class="ui-footer"> - * <button type="button" class="ui-btn">Footer Button</button> - * </footer> - * </div> - * - * ## Manual constructor - * For manual creation of page widget you can use constructor of widget from **tau** namespace: - * - * @example - * var pageElement = document.getElementById("page"), - * page = tau.widget.page(buttonElement); - * - * Constructor has one require parameter **element** which are base **HTMLElement** to create widget. We recommend get this element by method *document.getElementById*. - * - * ## Multi-page Layout - * - * You can implement a template containing multiple page containers in the application index.html file. - * - * In the multi-page layout, the main page is defined with the ui-page-active class. If no page has the ui-page-active class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded. - * - * You can link to internal pages by referring to the ID of the page. For example, to link to the page with an ID of two, the link element needs the href="#two" attribute in the code, as in the following example. - * - * @example - * <!--Main page--> - * <div id="one" class="ui-page ui-page-active"> - * <header class="ui-header"></header> - * <div class="ui-content"></div> - * <footer class="ui-footer"></footer> - * </div> - * - * <!--Secondary page--> - * <div id="two" class="ui-page"> - * <header class="ui-header"></header> - * <div class="ui-content"></div> - * <footer class="ui-footer"></footer> - * </div> - * - * To find the currently active page, use the ui-page-active class. - * - * ## Changing Pages - * ### Go to page in JavaScript - * To change page use method *tau.changePage* - * - * @example - * tau.changePage("page-two"); - * - * ### Back in JavaScript - * To back to previous page use method *tau.back* - * - * @example - * tau.back(); - * - * ## Transitions - * - * When changing the active page, you can use a page transition. - * - * Tizen Web UI Framework does not apply transitions by default. To set a custom transition effect, you must add the data-transition attribute to a link: - * - * @example - * <a href="index.html" data-transition="slideup">I'll slide up</a> - * - * To set a default custom transition effect for all pages, use the pageTransition property: - * - * @example - * tau.defaults.pageTransition = "slideup"; - * - * ### Transitions list - * - * - **none** no transition. - * - **slideup** Makes the content of the next page slide up, appearing to conceal the content of the previous page. - * - * ## Handling Page Events - * - * With page widget we have connected many of events. - * - * To handle page events, use the following code: - * - * @example - * <div id="page" class="ui-page"> - * <header class="ui-header"></header> - * <div class="ui-content"></div> - * </div> - * - * <script> - * var page = document.getElementById("page"); - * page.addEventListener("Event", function(event) { - * // Your code - * }); - * </script> - * - * To bind an event callback on the Back key, use the following code: - * - * Full list of available events is in [events list section](#events-list). - * - * To bind an event callback on the Back key, use the following code: - * - * @example - * <script> - * window.addEventListener("tizenhwkey", function (event) { - * if (event.keyName == "back") { - * // Call window.history.back() to go to previous browser window - * // Call tizen.application.getCurrentApplication().exit() to exit application - * // Add script to add another behavior - * } - * }); - * </script> - * - * ## Options for Page Widget - * - * Page widget hasn't any options. - * - * ## Methods - * - * To call method on widget you can use tau API: - * - * @example - * var pageElement = document.getElementById("page"), - * page = tau.widget.page(buttonElement); - * - * page.methodName(methodArgument1, methodArgument2, ...); - * - * @class ns.widget.core.Page - * @extends ns.widget.BaseWidget - * @author Maciej Urbanski <m.urbanski@samsung.com> - * @author Piotr Karny <p.karny@samsung.com> - * @author Damian Osipiuk <d.osipiuk@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../engine", - "../../util/DOM/css", - "../../util/DOM/attributes", - "../../util/selectors", - "../BaseWidget", - "../core" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - /** - * Alias for {@link ns.widget.BaseWidget} - * @property {Object} BaseWidget - * @member ns.widget.core.Page - * @private - * @static - */ - var BaseWidget = ns.widget.BaseWidget, - /** - * Alias for {@link ns.util} - * @property {Object} util - * @member ns.widget.core.Page - * @private - * @static - */ - util = ns.util, - /** - * Alias for {@link ns.util.DOM} - * @property {Object} doms - * @member ns.widget.core.Page - * @private - * @static - */ - doms = util.DOM, - /** - * Alias for {@link ns.util.selectors} - * @property {Object} utilSelectors - * @member ns.widget.core.Page - * @private - * @static - */ - utilSelectors = util.selectors, - /** - * Alias for {@link ns.engine} - * @property {Object} engine - * @member ns.widget.core.Page - * @private - * @static - */ - engine = ns.engine, - - Page = function () { - var self = this; - /** - * Callback on resize - * @property {?Function} contentFillAfterResizeCallback - * @private - * @member ns.widget.core.Page - */ - self.contentFillAfterResizeCallback = null; - self._initialContentStyle = {}; - /** - * Options for widget. - * It is empty object, because widget Page does not have any options. - * @property {Object} options - * @member ns.widget.core.Page - */ - self.options = {}; - - self._contentStyleAttributes = ["height", "width", "minHeight", "marginTop", "marginBottom"]; - - self._ui = {}; - }, - /** - * Dictionary for page related event types - * @property {Object} EventType - * @member ns.widget.core.Page - * @static - */ - EventType = { - /** - * Triggered on the page we are transitioning to, - * after the transition animation has completed. - * @event pageshow - * @member ns.widget.core.Page - */ - SHOW: "pageshow", - /** - * Triggered on the page we are transitioning away from, - * after the transition animation has completed. - * @event pagehide - * @member ns.widget.core.Page - */ - HIDE: "pagehide", - /** - * Triggered when the page has been created in the DOM - * (for example, through Ajax) but before all widgets - * have had an opportunity to enhance the contained markup. - * @event pagecreate - * @member ns.widget.core.Page - */ - CREATE: "pagecreate", - /** - * Triggered when the page is being initialized, - * before most plugin auto-initialization occurs. - * @event pagebeforecreate - * @member ns.widget.core.Page - */ - BEFORE_CREATE: "pagebeforecreate", - /** - * Triggered on the page we are transitioning to, - * before the actual transition animation is kicked off. - * @event pagebeforeshow - * @member ns.widget.core.Page - */ - BEFORE_SHOW: "pagebeforeshow", - /** - * Triggered on the page we are transitioning away from, - * before the actual transition animation is kicked off. - * @event pagebeforehide - * @member ns.widget.core.Page - */ - BEFORE_HIDE: "pagebeforehide" - }, - /** - * Dictionary for page related css class names - * @property {Object} classes - * @member ns.widget.core.Page - * @static - * @readonly - */ - classes = { - uiPage: "ui-page", - uiPageActive: "ui-page-active", - uiSection: "ui-section", - uiHeader: "ui-header", - uiFooter: "ui-footer", - uiContent: "ui-content" - }, - - prototype = new BaseWidget(); - - Page.classes = classes; - Page.events = EventType; - - /** - * Configure default options for widget - * @method _configure - * @protected - * @member ns.widget.core.Page - */ - prototype._configure = function() { - var options = this.options || {}; - /** - * Object with default options - * @property {Object} options - * @property {boolean|string|null} [options.header=false] Sets content of header. - * @property {boolean|string|null} [options.footer=false] Sets content of footer. - * @property {string} [options.content=null] Sets content of popup. - * @member ns.widget.core.Page - * @static - */ - options.header = null; - options.footer = null; - options.content = null; - this.options = options; - }; - - /** - * Sets top-bottom css attributes for content element - * to allow it to fill the page dynamically - * @method _contentFill - * @member ns.widget.core.Page - */ - prototype._contentFill = function () { - var self = this, - element = self.element, - screenWidth = window.innerWidth, - screenHeight = window.innerHeight, - contentSelector = classes.uiContent, - headerSelector = classes.uiHeader, - footerSelector = classes.uiFooter, - extraHeight = 0, - children = [].slice.call(element.children), - childrenLength = children.length, - elementStyle = element.style, - i, - node, - contentStyle, - marginTop, - marginBottom, - nodeStyle; - - elementStyle.width = screenWidth + "px"; - elementStyle.height = screenHeight + "px"; - - for (i = 0; i < childrenLength; i++) { - node = children[i]; - if (node.classList.contains(headerSelector) || - node.classList.contains(footerSelector)) { - extraHeight += doms.getElementHeight(node); - } - } - for (i = 0; i < childrenLength; i++) { - node = children[i]; - nodeStyle = node.style; - if (node.classList.contains(contentSelector)) { - contentStyle = window.getComputedStyle(node); - marginTop = parseFloat(contentStyle.marginTop); - marginBottom = parseFloat(contentStyle.marginBottom); - nodeStyle.height = (screenHeight - extraHeight - marginTop - marginBottom) + "px"; - nodeStyle.width = screenWidth + "px"; - } - } - }; - - prototype._storeContentStyle = function () { - var initialContentStyle = this._initialContentStyle, - contentStyleAttributes = this._contentStyleAttributes, - content = this.element.querySelector("." + classes.uiContent), - contentStyle = content ? content.style : {}; - - contentStyleAttributes.forEach(function(name) { - initialContentStyle[name] = contentStyle[name]; - }); - }; - - prototype._restoreContentStyle = function () { - var initialContentStyle = this._initialContentStyle, - contentStyleAttributes = this._contentStyleAttributes, - content = this.element.querySelector("." + classes.uiContent), - contentStyle = content ? content.style : {}; - - contentStyleAttributes.forEach(function(name) { - contentStyle[name] = initialContentStyle[name]; - }); - }; - - /** - * Setter for footer option - * @method _setFooter - * @param {HTMLElement} element - * @param {string} value - * @protected - * @member ns.widget.core.Page - */ - prototype._setFooter = function(element, value) { - var self = this, - ui = self._ui, - footer = ui.footer; - - // footer element if footer does not exist and value is true or string - if (!footer && value) { - footer = document.createElement("footer"); - element.appendChild(footer); - ui.footer = footer; - } - if (footer) { - // remove child if footer does not exist and value is set to false - if (value === false) { - element.removeChild(footer); - } else { - // if options is set to true, to string or not is set - // add class - footer.classList.add(classes.uiFooter); - // if is string fill content by string value - if (typeof value === "string") { - ui.footer.textContent = value; - } - } - // and remember options - self.options.footer = value; - } - }; - - /** - * Setter for header option - * @method _setHeader - * @param {HTMLElement} element - * @param {string} value - * @protected - * @member ns.widget.core.Page - */ - prototype._setHeader = function(element, value) { - var self = this, - ui = self._ui, - header = ui.header; - - // header element if header does not exist and value is true or string - if (!header && value) { - header = document.createElement("header"); - element.appendChild(header); - ui.header = header; - } - if (header) { - // remove child if header does not exist and value is set to false - if (value === false) { - element.removeChild(header); - } else { - // if options is set to true, to string or not is set - // add class - header.classList.add(classes.uiHeader); - // if is string fill content by string value - if (typeof value === "string") { - ui.header.textContent = value; - } - } - // and remember options - self.options.header = value; - } - }; - - /** - * Setter for content option - * @method _setContent - * @param {HTMLElement} element - * @param {string} value - * @protected - * @member ns.widget.core.Page - */ - prototype._setContent = function(element, value) { - if (typeof value === "string") { - this.options.content = - this._ui.content.textContent = value; - } - }; - - /** - * Method creates empty page header. It also checks for additional - * content to be added in header. - * @method _buildHeader - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Page - */ - prototype._buildHeader = function(element) { - var self = this; - self._ui.header = utilSelectors.getChildrenBySelector(element, "header,[data-role='header'],." + classes.uiHeader)[0]; - self._setHeader(element, self.options.header); - }; - - /** - * Method creates empty page footer. - * @method _buildFooter - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Page - */ - prototype._buildFooter = function(element) { - var self = this; - - self._ui.footer = utilSelectors.getChildrenBySelector(element, "footer,[data-role='footer'],." + classes.uiFooter)[0]; - self._setFooter(element, self.options.footer); - }; - - /** - * Method creates empty page content. - * @method _buildContent - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Page - */ - prototype._buildContent = function(element) { - var self = this, - content = utilSelectors.getChildrenBySelector(element, "[data-role='content'],." + classes.uiContent)[0], - next, - child = element.firstChild, - ui = self._ui; - // content must always exists - if (!content) { - content = document.createElement("div"); - while (child) { - next = child.nextSibling; - if (child !== ui.footer && child !== ui.header) { - content.appendChild(child); - } - child = next; - } - } - - // we put it before footer or if footer not exists as last child of element - element.insertBefore(content, ui.footer); - content.classList.add(classes.uiContent); - ui.content = content; - // we set content text if is set in options.content - self._setContent(element, self.options.content); - }; - - /** - * Build page - * @method _build - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.core.Page - */ - prototype._build = function (element) { - var self = this; - element.classList.add(classes.uiPage); - self._buildHeader(element); - self._buildFooter(element); - self._buildContent(element); - return element; - }; - - /** - * This method sets page active or inactive. - * @method setActive - * @param {boolean} value If true, then page will be active. Otherwise, page will be inactive. - * @member ns.widget.core.Page - */ - prototype.setActive = function (value) { - var elementClassList = this.element.classList; - if (value) { - this.focus(); - elementClassList.add(classes.uiPageActive); - } else { - this.blur(); - elementClassList.remove(classes.uiPageActive); - } - }; - - /** - * Return current status of page. - * @method isActive - * @member ns.widget.core.Page - * @instance - */ - prototype.isActive = function () { - return this.element.classList.contains(classes.uiPageActive); - }; - - /** - * Sets the focus to page - * @method focus - * @member ns.widget.core.Page - */ - prototype.focus = function () { - var element = this.element, - focusable = element.querySelector("[autofocus]") || element; - focusable.focus(); - }; - - /** - * Removes focus from page and all descendants - * @method blur - * @member ns.widget.core.Page - */ - prototype.blur = function () { - var element = this.element, - focusable = element.querySelector(":focus") || element; - focusable.blur(); - }; - - /** - * Bind events to widget - * @method _bindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Page - */ - prototype._bindEvents = function (element) { - var self = this; - self.contentFillAfterResizeCallback = self._contentFill.bind(self); - window.addEventListener("resize", self.contentFillAfterResizeCallback, false); - }; - - /** - * Refresh widget structure - * @method _refresh - * @protected - * @member ns.widget.core.Page - */ - prototype._refresh = function () { - this._restoreContentStyle(); - this._contentFill(); - }; - - /** - * Layouting page structure - * @method layout - * @member ns.widget.core.Page - */ - prototype.layout = function () { - this._storeContentStyle(); - this._contentFill(); - }; - - /** - * This method triggers BEFORE_SHOW event. - * @method onBeforeShow - * @member ns.widget.core.Page - */ - prototype.onBeforeShow = function () { - this.trigger(EventType.BEFORE_SHOW); - }; - - /** - * This method triggers SHOW event. - * @method onShow - * @member ns.widget.core.Page - */ - prototype.onShow = function () { - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - window.tauPerf.get("framework", "Trigger: pageshow"); - //>>excludeEnd("tauPerformance"); - this.trigger(EventType.SHOW); - }; - - /** - * This method triggers BEFORE_HIDE event. - * @method onBeforeHide - * @member ns.widget.core.Page - */ - prototype.onBeforeHide = function () { - this.trigger(EventType.BEFORE_HIDE); - }; - - /** - * This method triggers HIDE event. - * @method onHide - * @member ns.widget.core.Page - */ - prototype.onHide = function () { - this._restoreContentStyle(); - this.trigger(EventType.HIDE); - }; - - /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.core.Page - */ - prototype._destroy = function () { - var self = this, - element = self.element; - - element = element || self.element; - //>>excludeStart("tauDebug", pragmas.tauDebug); - ns.log("Called _destroy in ns.widget.core.Page"); - //>>excludeEnd("tauDebug"); - - window.removeEventListener("resize", self.contentFillAfterResizeCallback, false); - // destroy widgets on children - engine.destroyAllWidgets(element, true); - }; - - Page.prototype = prototype; - - Page.createEmptyElement = function() { - var div = document.createElement("div"); - div.classList.add(classes.uiPage); - doms.setNSData(div, "role", "page"); - return div; - }; - - // definition - ns.widget.core.Page = Page; - engine.defineWidget( - "Page", - "[data-role=page],.ui-page", - [ - "layout", - "focus", - "blur", - "setActive", - "isActive" - ], - Page, - "core" - ); - - engine.defineWidget( - "page", - "", - [ - "layout", - "focus", - "blur", - "setActive", - "isActive" - ], - Page, - "core" - ); - - // @remove - // THIS IS ONLY FOR COMPATIBILITY - ns.widget.page = ns.widget.Page; - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return Page; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/widget/core/Popup.js b/tau/src/js/core/widget/core/Popup.js index 2b6604f8..f210d9aa 100644 --- a/tau/src/js/core/widget/core/Popup.js +++ b/tau/src/js/core/widget/core/Popup.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -28,7 +17,6 @@ define( [ "../../engine", - "../../event", "../../util/object", "../../util/deferred", "../../util/selectors", @@ -72,13 +60,6 @@ * @private */ utilSelector = ns.util.selectors, - /** - * Alias for class ns.event - * @property {Object} eventUtils - * @member ns.widget.core.Popup - * @private - */ - eventUtils = ns.event, Popup = function () { var self = this, @@ -86,7 +67,6 @@ self.selectors = selectors; self.options = objectUtils.merge({}, Popup.defaults); - self.storedOptions = null; /** * Popup state flag * @property {0|1|2|3} [state=null] @@ -100,7 +80,6 @@ ui.footer = null; ui.content = null; ui.container = null; - ui.wrapper = null; self._ui = ui; // event callbacks @@ -115,9 +94,7 @@ * @property {boolean} [options.overlay=true] Sets whether to show overlay when a popup is open. * @property {boolean|string} [options.header=false] Sets content of header. * @property {boolean|string} [options.footer=false] Sets content of footer. - * @property {string} [options.content=null] Sets content of popup. - * @property {string} [options.overlayClass=""] Sets the custom class for the popup background, which covers the entire window. - * @property {string} [options.closeLinkSelector="a[data-rel='back']"] Sets selector for close buttons in popup. + * @property {string} [overlayClass=""] Sets the custom class for the popup background, which covers the entire window. * @property {boolean} [options.history=true] Sets whether to alter the url when a popup is open to support the back button. * @member ns.widget.core.Popup * @static @@ -128,9 +105,7 @@ overlay: true, header: false, footer: false, - content: null, overlayClass: "", - closeLinkSelector: "[data-rel='back']", history: true }, states = { @@ -152,10 +127,14 @@ overlay: CLASSES_PREFIX + "-overlay", header: CLASSES_PREFIX + "-header", footer: CLASSES_PREFIX + "-footer", - content: CLASSES_PREFIX + "-content", - wrapper: CLASSES_PREFIX + "-wrapper", - build: "ui-build" + content: CLASSES_PREFIX + "-content" + }, + selectors = { + header: "." + classes.header, + content: "." + classes.content, + footer: "." + classes.footer }, + EVENTS_PREFIX = "popup", /** * Dictionary for popup related selectors * @property {Object} selectors @@ -167,7 +146,6 @@ content: "." + classes.content, footer: "." + classes.footer }, - EVENTS_PREFIX = "popup", /** * Dictionary for popup related events * @property {Object} events @@ -218,7 +196,6 @@ var self = this, ui = self._ui, selectors = self.selectors, - options = self.options, content = ui.content || element.querySelector(selectors.content), footer = ui.footer || element.querySelector(selectors.footer), elementChildren = [].slice.call(element.childNodes), @@ -235,9 +212,6 @@ content.appendChild(node); } } - if (typeof options.content === "string") { - content.innerHTML = options.content; - } element.insertBefore(content, footer); } content.classList.add(classes.content); @@ -350,30 +324,12 @@ */ prototype._build = function (element) { var self = this, - ui = self._ui, - wrapper, - child = element.firstChild; - - // set class for element - element.classList.add(classes.popup); - - // create wrapper - wrapper = document.createElement("div"); - wrapper.classList.add(classes.wrapper); - ui.wrapper = wrapper; - ui.container = wrapper; - // move all children to wrapper - while (child) { - wrapper.appendChild(child); - child = element.firstChild; - } - // add wrapper and arrow to popup element - element.appendChild(wrapper); + container = self._ui.container || element; // build header, footer and content - this._buildHeader(ui.container); - this._buildFooter(ui.container); - this._buildContent(ui.container); + this._buildHeader(container); + this._buildFooter(container); + this._buildContent(container); // set overlay this._setOverlay(element, this.options.overlay); @@ -395,24 +351,17 @@ ui = self._ui, overlay = ui.overlay; - // if this popup is not connected with slider, - // we create overlay, which is invisible when - // the value of option overlay is false - /// @TODO: get class from widget - if (!element.classList.contains("ui-slider-popup")) { - // create overlay + // create overlay + if (enable) { if (!overlay) { overlay = document.createElement("div"); element.parentNode.insertBefore(overlay, element); ui.overlay = overlay; } overlay.className = classes.overlay + (overlayClass ? " " + overlayClass : ""); - if (enable) { - overlay.style.opacity = ""; - } else { - // if option is set on "false", the overlay is not visible - overlay.style.opacity = 0; - } + } else if (overlay) { + overlay.parentNode.removeChild(overlay); + ui.overlay = null; } }; @@ -452,9 +401,7 @@ ui.header = ui.header || element.querySelector(selectors.header); ui.footer = ui.footer || element.querySelector(selectors.footer); ui.content = ui.content || element.querySelector(selectors.content); - ui.wrapper = ui.wrapper || element.querySelector("." + classes.wrapper); - ui.container = ui.wrapper || element; - + ui.container = element; // @todo - use selector from page's definition in engine ui.page = utilSelector.getClosestByClass(element, "ui-page") || window; }; @@ -471,11 +418,13 @@ activeClass = classes.active, elementClassList = self.element.classList, route = engine.getRouter().getRoute("popup"), - options; + options = self.options; // NOTE: popup's options object is stored in window.history at the router module, // and this window.history can't store DOM element object. - options = objectUtils.merge({}, self.options, {positionTo: null, link: null}); + if (typeof options.positionTo !== "string") { + options.positionTo = null; + } // set state of popup and add proper class if (active) { @@ -502,13 +451,11 @@ * @protected * @member ns.widget.core.Popup */ - prototype._bindEvents = function () { - var self = this, - closeButtons = self.element.querySelectorAll(self.options.closeLinkSelector); + prototype._bindEvents = function (element) { + var self = this; self._ui.page.addEventListener("pagebeforehide", self, false); window.addEventListener("resize", self, false); - eventUtils.on(closeButtons, "click", self, false); self._bindOverlayEvents(); }; @@ -545,23 +492,14 @@ * @protected * @member ns.widget.core.Popup */ - prototype._unbindEvents = function () { + prototype._unbindEvents = function (element) { var self = this; - self._ui.page.removeEventListener("pagebeforehide", self, false); window.removeEventListener("resize", self, false); self._unbindOverlayEvents(); }; /** - * Layouting popup structure - * @method layout - * @member ns.widget.core.Popup - */ - prototype._layout = function (element) { - }; - - /** * Open the popup * @method open * @param {Object=} [options] @@ -570,18 +508,8 @@ */ prototype.open = function (options) { var self = this, - newOptions; - - if (!self._isActive()) { - /* - * Some passed options on open need to be kept until popup closing. - * For example, trasition parameter should be kept for closing animation. - * On the other hand, fromHashChange or x, y parameter should be removed. - * We store options and restore them on popup closing. - */ - self._storeOpenOptions(options); - newOptions = objectUtils.merge(self.options, options); + if (!self._isActive()) { if (!newOptions.dismissible) { engine.getRouter().lock(); } @@ -609,45 +537,6 @@ }; /** - * Store Open options. - * @method _storeOpenOptions - * @param {object} options - * @protected - * @member ns.widget.core.Popup - */ - prototype._storeOpenOptions = function (options) { - var self = this, - oldOptions = self.options, - storedOptions = {}, - key; - - for (key in options) { - if (options.hasOwnProperty(key)) { - storedOptions[key] = oldOptions[key]; - } - } - - self.storedOptions = storedOptions; - }; - - /** - * Restore Open options and remove some unnecessary ones. - * @method _storeOpenOptions - * @protected - * @member ns.widget.core.Popup - */ - prototype._restoreOpenOptions = function () { - var self = this, - options = self.options, - propertiesToRemove = ["x", "y", "fromHashChange"]; - - // we restore opening values of all options - options = objectUtils.merge(options, self.storedOptions); - // and remove all values which should not be stored - objectUtils.removeProperties(options, propertiesToRemove); - }; - - /** * Show popup. * @method _show * @param {object} options @@ -657,22 +546,14 @@ prototype._show = function (options) { var self = this, transitionOptions = objectUtils.merge({}, options), - overlay = self._ui.overlay, deferred; - // layouting - self._layout(self.element); - // change state of popup self.state = states.DURING_OPENING; // set transiton transitionOptions.ext = " in "; self.trigger(events.before_show); - // show overlay - if (overlay) { - overlay.style.display = "block"; - } // start opening animation self._transition(transitionOptions, self._onShow.bind(self)); }; @@ -684,7 +565,11 @@ * @member ns.widget.core.Popup */ prototype._onShow = function() { - var self = this; + var self = this, + overlay = self._ui.overlay; + if (overlay) { + overlay.style.display = "block"; + } self._setActive(true); self.trigger(events.show); }; @@ -698,8 +583,7 @@ */ prototype._hide = function (options) { var self = this, - isOpened = self._isOpened(), - callbacks = self._callbacks; + isOpened = self._isOpened(); // change state of popup self.state = states.DURING_CLOSING; @@ -713,12 +597,8 @@ } else { // popup is active, but not opened yet (DURING_OPENING), so // we stop opening animation - if (callbacks.transitionDeferred) { - callbacks.transitionDeferred.reject(); - } - if (callbacks.animationEnd) { - callbacks.animationEnd(); - } + self._callbacks.transitionDeferred.reject(); + self._callbacks.animationEnd(); // and set popup as inactive self._onHide(); } @@ -733,12 +613,10 @@ prototype._onHide = function() { var self = this, overlay = self._ui.overlay; - if (overlay) { overlay.style.display = ""; } self._setActive(false); - self._restoreOpenOptions(); self.trigger(events.hide); }; @@ -752,8 +630,7 @@ var self = this; switch(event.type) { case "pagebeforehide": - // we need close active popup if exists - engine.getRouter().close(null, {transition: "none", rel: "popup"}); + self.close({transition: "none"}); break; case "resize": self._onResize(event); @@ -793,7 +670,7 @@ event.stopPropagation(); if (options.dismissible) { - engine.getRouter().close(); + this.close(); } }; @@ -818,9 +695,6 @@ // remove callbacks on animation events element.removeEventListener("animationend", animationEndCallback, false); element.removeEventListener("webkitAnimationEnd", animationEndCallback, false); - element.removeEventListener("mozAnimationEnd", animationEndCallback, false); - element.removeEventListener("oAnimationEnd", animationEndCallback, false); - element.removeEventListener("msAnimationEnd", animationEndCallback, false); // clear classes transitionClass.split(" ").forEach(function (currentClass) { @@ -865,6 +739,7 @@ transition = options.transition || self.options.transition || "none", transitionClass = transition + options.ext, element = self.element, + overlay = self._ui.overlay, elementClassList = element.classList, deferred, animationEndCallback; @@ -879,14 +754,14 @@ // add animation callbacks element.addEventListener("animationend", animationEndCallback, false); element.addEventListener("webkitAnimationEnd", animationEndCallback, false); - element.addEventListener("mozAnimationEnd", animationEndCallback, false); - element.addEventListener("oAnimationEnd", animationEndCallback, false); - element.addEventListener("msAnimationEnd", animationEndCallback, false); // add transition classes transitionClass.split(" ").forEach(function (currentClass) { currentClass = currentClass.trim(); if (currentClass.length > 0) { elementClassList.add(currentClass); + if (overlay) { + overlay.classList.add(currentClass); + } } }); } else { @@ -903,28 +778,10 @@ */ prototype._destroy = function() { var self = this, - element = self.element, - ui = self._ui, - wrapper = ui.wrapper, - child; - - if (wrapper) { - // restore all children from wrapper - child = wrapper.firstChild; - while (child) { - element.appendChild(child); - child = wrapper.firstChild; - } - - if (wrapper.parentNode) { - wrapper.parentNode.removeChild(wrapper); - } - } + element = self.element; self._unbindEvents(element); self._setOverlay(element, false); - - ui.wrapper = null; }; Popup.prototype = prototype; diff --git a/tau/src/js/core/widget/core/Progress.js b/tau/src/js/core/widget/core/Progress.js index ee646ea9..edd6134c 100644 --- a/tau/src/js/core/widget/core/Progress.js +++ b/tau/src/js/core/widget/core/Progress.js @@ -1,18 +1,7 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** diff --git a/tau/src/js/core/widget/core/Scrollview.js b/tau/src/js/core/widget/core/Scrollview.js deleted file mode 100644 index 1ce723ca..00000000 --- a/tau/src/js/core/widget/core/Scrollview.js +++ /dev/null @@ -1,1105 +0,0 @@ -/*global window, define, ns*/ -/*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * # ScrollView Widget - * Widgets allows for creating scrollable panes, lists, etc. - * - * ## Default selectors - * All elements with _data-role=content attribute or _.ui-scrollview - * css class will be changed to ScrollView widgets, unless they specify - * _data-scroll=none attribute. - * - * ### HTML Examples - * - * #### Data attribute - * - * @example - * <div data-role="page"> - * <div data-role="content"><!-- this will become scrollview //--> - * content data - * </div> - * </div> - * - * #### CSS Class - * - * @example - * <div data-role="page"> - * <div class="ui-content"><!-- this will become scrollview //--> - * content data - * </div> - * </div> - * - * ## Manual constructor - * - * To create the widget manually you can use 2 different APIs, the TAU - * API or jQuery API. - * - * ### Create scrollview by TAU API - * - * @example - * <div data-role="page" id="myPage"> - * <div data-role="content"> - * page content - * </div> - * </div> - * <script> - * var page = tau.widget.Page(document.getElementById("myPage")), - * scrollview = tau.widget.Scrollview(page.ui.content); - * </script> - * - * ### Create scrollview using jQuery API - * - * @example - * <div data-role="page" id="myPage"> - * <div data-role="content"> - * page content - * </div> - * </div> - * <script> - * $("#myPage > div[data-role='content']").scrollview(); - * </script> - * - * ## Options for Scrollview widget - * - * Options can be set using data-* attributes or by passing them to - * the constructor. - * - * There is also a method **option** for changing them after widget - * creation. - * - * jQuery mobile format is also supported. - * - * ## Scroll - * - * This options specifies of a content element should become Scrollview - * widget. - * - * You can change this by all available methods for changing options. - * - * ### By data-scroll attribute - * - * @example - * <div data-role="page"> - * <div data-role="content" data-scroll="none"> - * content - * </div> - * </div> - * - * ### By config passed to constructor - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content"> - * content - * </div> - * </div> - * <script> - * var contentElement = document.querySelector(".myPageClass > div[data-role=content]"); - * tau.widget.Scrollview(contentElement, { - * "scroll": false - * }); - * </script> - * - * ### By using jQuery API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content"> - * content - * </div> - * </div> - * <script> - * $(".myPageClass > div[data-role='content']").scrollview({ - * "scroll": false - * }); - * </script> - * - * ## ScrollJumps - * - * Scroll jumps are small buttons which allow the user to quickly - * scroll to top or left - * - * You can change this by all available methods for changing options. - * - * ### By data-scroll-jump - * - * @example - * <div data-role="page"> - * <div data-role="content" data-scroll-jump="true"> - * content - * </div> - * </div> - * - * ### By config passed to constructor - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content"> - * content - * </div> - * </div> - * <script> - * var contentElement = document.querySelector(".myPageClass > div[data-role=content]"); - * tau.widget.Scrollview(contentElement, { - * "scrollJump": true - * }); - * </script> - * - * ### By using jQuery API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content"> - * content - * </div> - * </div> - * <script> - * $(".myPageClass > div[data-role='content']").scrollview({ - * "scrollJump": true - * }); - * </script> - * - * ## Methods - * - * Page methods can be called trough 2 APIs: TAU API and jQuery API - * (jQuery mobile-like API) - * - * @class ns.widget.core.Scrollview - * @extends ns.widget.BaseWidget - * - * @author Krzysztof Antoszek <k.antoszek@samsung.com> - * @author Maciej Urbanski <m.urbanski@samsung.com> - * @author Grzegorz Osimowicz <g.osimowicz@samsung.com> - * @author Jadwiga Sosnowska <j.sosnowska@samsung.com> - * @author Maciej Moczulski <m.moczulski@samsung.com> - * @author Hyunkook Cho <hk0713.cho@samsung.com> - * @author Junhyeon Lee <juneh.lee@samsung.com> - */ -/** - * Triggered when scrolling operation starts - * @event scrollstart - * @member ns.widget.core.Scrollview - */ -/** - * Triggered when scroll is being updated - * @event scrollupdate - * @member ns.widget.core.Scrollview - */ -/** - * Triggered when scrolling stops - * @event scrollstop - * @member ns.widget.core.Scrollview - */ -(function (window, document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../engine", - "../../event", - "../../util", - "../../util/easing", - "../../util/DOM/css", - "../../util/DOM/attributes", - "../../util/selectors", - "../../event/orientationchange", - "../../event/vmouse", - "../../widget/core/Page", - "../core", // fetch namespace - "../BaseWidget", - "./Page" - // @todo coreButton - //"./Button" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = ns.widget.BaseWidget, - engine = ns.engine, - util = ns.util, - easingUtils = ns.util.easing, - eventUtils = ns.event, - DOMUtils = ns.util.DOM, - selectors = ns.util.selectors, - currentTransition = null, - Page = ns.widget.core.Page, - pageClass = Page.classes.uiPage, - pageActiveClass = Page.classes.uiPageActive, - Scrollview = function () { - var self = this, - ui; - /** - * @property {Object} state Scrollview internal state object - * @property {Function} state.currentTransition Instance transition function - * @readonly - */ - self.state = { - currentTransition: null - }; - /** - * @property {number} scrollDuration The time length of the scroll animation - * @member ns.widget.core.Scrollview - */ - self.scrollDuration = 300; - self.scrollviewSetHeight = false; - /** - * Scrollview options - * @property {Object} options - * @property {string} [options.scroll='y'] Scroll direction - * @property {boolean} [options.scrollJump=false] Scroll jump buttons flag - * @member ns.widget.core.Scrollview - */ - self.options = { - scroll: "y", - scrollJump: false, - scrollIndicator: false - }; - /** - * Dictionary for holding internal DOM elements - * @property {Object} ui - * @property {HTMLElement} ui.view The main view element - * @property {HTMLElement} ui.page The main page element - * @property {HTMLElement} ui.jumpHorizontalButton Jump left button - * @property {HTMLElement} ui.jumpVerticalButton Jump top button - * @member ns.widget.core.Scrollview - * @readonly - */ - ui = self._ui || {}; - ui.view = null; - ui.page = null; - ui.jumpHorizontalButton = null; - ui.jumpVerticalButton = null; - self._ui = ui; - /** - * Dictionary for holding internal listeners - * @property {Object} _callbacks - * @property {Function} _callbacks.repositionJumps Refresh jumps listener - * @property {Function} _callbacks.jumpTop Top jump button click callback - * @property {Function} _callbacks.jumpLeft Left jump button click callback - * @member ns.widget.core.Scrollview - * @protected - * @readonly - */ - self._callbacks = { - repositionJumps: null, - jumpTop: null, - jumpBottom: null - }; - - self._timers = { - scrollIndicatorHide: null - }; - }, - /** - * Dictionary for scrollview css classes - * @property {Object} classes - * @property {string} [classes.view='ui-scrollview-view'] View main class - * @property {string} [classes.clip='ui-scrollview-clip'] Clip main class - * @property {string} [classes.jumpTop='ui-scroll-jump-top-bg'] Jump top button background - * @property {string} [classes.jumpLeft='ui-scroll-jump-left-bg'] Jump bottom button background - * @member ns.widget.core.Scrollview - * @static - * @readonly - */ - classes = { - view: "ui-scrollview-view", - clip: "ui-scrollview-clip", - jumpTop: "ui-scroll-jump-top-bg", - jumpLeft: "ui-scroll-jump-left-bg", - indicatorTop: "ui-overflow-indicator-top", - indicatorBottom: "ui-overflow-indicator-bottom", - indicatorTopShown: "ui-scrollindicator-top", - indicatorBottomShown: "ui-scrollindicator-bottom", - indicatorLeftShown: "ui-scrollindicator-left", - indicatorRightShown: "ui-scrollindicator-right" - }; - - // Changes static position to relative - // @param {HTMLElement} view - function makePositioned(view) { - if (DOMUtils.getCSSProperty(view, "position") === "static") { - view.style.position = "relative"; - } else { - view.style.position = "absolute"; - } - } - - // Translation animation loop - // @param {Object} state Scrollview instance state - // @param {HTMLElement} element - // @param {number} startTime - // @param {number} startX - // @param {number} startY - // @param {number} translateX - // @param {number} translateY - // @param {number} endX - // @param {number} endY - // @param {number} duration - function translateTransition(state, element, startTime, startX, startY, translateX, translateY, endX, endY, duration) { - var timestamp = (new Date()).getTime() - startTime, - newX = parseInt(easingUtils.cubicOut(timestamp, startX, translateX, duration), 10), - newY = parseInt(easingUtils.cubicOut(timestamp, startY, translateY, duration), 10); - if (element.scrollLeft !== endX) { - element.scrollLeft = newX; - } - if (element.scrollTop !== endY) { - element.scrollTop = newY; - } - - if ((newX !== endX || newY !== endY) && - (newX >= 0 && newY >= 0) && - state.currentTransition) { - util.requestAnimationFrame(state.currentTransition); - } else { - state.currentTransition = null; - } - } - - // Translates scroll posotion directly or with an animation - // if duration is specified - // @param {Object} state Scrollview instance state - // @param {HTMLElement} element - // @param {number} x - // @param {number} y - // @param {number=} [duration] - function translate(state, element, x, y, duration) { - if (duration) { - state.currentTransition = translateTransition.bind( - null, - state, - element, - (new Date()).getTime(), - element.scrollLeft, - element.scrollTop, - x, - y, - element.scrollLeft + x, - element.scrollTop + y, - duration - ); - util.requestAnimationFrame(state.currentTransition); - } else { - if (x) { - element.scrollLeft = element.scrollLeft + x; - } - if (y) { - element.scrollTop = element.scrollTop + y; - } - } - } - - // Refresh jumpTop jumpLeft buttons - // @param {ns.widget.core.Scrollview} self - function repositionJumps(self) { - var ui = self._ui, - horizontalJumpButton = ui.jumpHorizontalButton, - verticalJumpButton = ui.jumpVerticalButton, - offsets = horizontalJumpButton || verticalJumpButton ? DOMUtils.getElementOffset(self.element) : null; // dont calc when not used - - if (horizontalJumpButton) { - horizontalJumpButton.style.left = offsets.left + "px"; - } - - if (verticalJumpButton) { - verticalJumpButton.style.top = offsets.top + "px"; - } - } - - Scrollview.classes = classes; - - Scrollview.prototype = new BaseWidget(); - - /** - * Builds the widget - * @param {HTMLElement} element - * @return {HTMLElement} - * @method _build - * @protected - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype._build = function (element) { - //@TODO wrap element's content with external function - var self = this, - ui = self._ui, - view = selectors.getChildrenByClass(element, classes.view)[0] || document.createElement("div"), - clipStyle = element.style, - node = null, - child = element.firstChild, - options = self.options, - direction = options.scroll, - jumpButton, - jumpBackground; - view.className = classes.view; - - while (child) { - node = child; - child = child.nextSibling; - if (view !== node) { - view.appendChild(node); - } - } - - if (view.parentNode !== element) { - element.appendChild(view); - } - - // setting view style - makePositioned(view); - - element.classList.add(classes.clip); - - switch (direction) { - case "x": - clipStyle.overflowX = "scroll"; - break; - case "xy": - clipStyle.overflow = "scroll"; - break; - default: - clipStyle.overflowY = "scroll"; - break; - } - - if (options.scrollJump) { - if (direction.indexOf("x") > -1) { - jumpBackground = document.createElement("div"); - jumpBackground.className = classes.jumpLeft; - jumpButton = document.createElement("div"); - - jumpBackground.appendChild(jumpButton); - element.appendChild(jumpBackground); - engine.instanceWidget( - jumpButton, - "Button", - { - "icon": "scrollleft", - "style": "box" - } - ); - ui.jumpHorizontalButton = jumpBackground; - } - - if (direction.indexOf("y") > -1) { - jumpBackground = document.createElement("div"); - jumpBackground.className = classes.jumpTop; - jumpButton = document.createElement("div"); - - jumpBackground.appendChild(jumpButton); - element.appendChild(jumpBackground); - engine.instanceWidget( - jumpButton, - "Button", - { - "icon": "scrolltop", - "style": "box" - } - ); - ui.jumpVerticalButton = jumpBackground; - } - } - - ui.view = view; - - // add scroll indicators - if (options.scrollIndicator) { - self._addOverflowIndicator(element); - } - - return element; - }; - - /** - * Inits widget - * @method _init - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype._init = function (element) { - var ui = this._ui, - page = ui.page; - - if (!ui.view) { - ui.view = selectors.getChildrenByClass(element, classes.view)[0]; - } - - if (!page) { - page = selectors.getClosestByClass(element, pageClass); - if (page) { - ui.page = page; - if (page.classList.contains(pageActiveClass) && this.options.scrollJump) { - repositionJumps(this); - } - } - } - }; - - /** - * Adds overflow indicators - * @param {HTMLElement} clip - * @method _addOverflowIndicator - * @protected - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype._addOverflowIndicator = function (clip) { - clip.insertAdjacentHTML("beforeend", - "<div class='" + classes.indicatorTop + "'></div><div class='" + classes.indicatorBottom + "'></div>"); - }; - - /** - * Clear classes and styles of indicators - * @param {HTMLElement} element - * @method clearIndicator - * @private - * @member ns.widget.core.Scrollview - */ - function clearIndicator (element) { - var clipClasses = element.classList, - topIndicator = selectors.getChildrenByClass(element, classes.indicatorTop)[0], - bottomIndicator = selectors.getChildrenByClass(element, classes.indicatorBottom)[0]; - - clipClasses.remove(classes.indicatorTopShown); - clipClasses.remove(classes.indicatorBottomShown); - clipClasses.remove(classes.indicatorRightShown); - clipClasses.remove(classes.indicatorLeftShown); - topIndicator.style = ""; - bottomIndicator.style = ""; - } - - /** - * Set top and bottom indicators - * @param {HTMLElement} clip - * @param {object} options - * @method setTopAndBottomIndicators - * @private - * @member ns.widget.core.Scrollview - */ - function setTopAndBottomIndicators (clip, options) { - var topIndicator = selectors.getChildrenByClass(clip, classes.indicatorTop)[0], - bottomIndicator = selectors.getChildrenByClass(clip, classes.indicatorBottom)[0], - style; - - // set top indicator - if (topIndicator) { - style = topIndicator.style; - style.width = options.width + "px"; - style.top = options.clipTop + "px"; - style.backgroundColor = options.color; - } - if (bottomIndicator) { - // set bottom indicator - style = bottomIndicator.style; - style.width = options.width + "px"; - style.top = options.clipTop + options.clipHeight - DOMUtils.getElementHeight(bottomIndicator) + "px"; - style.backgroundColor = options.color; - } - } - - /** - * Show scroll indicators. - * @method _showScrollIndicator - * @protected - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype._showScrollIndicator = function () { - var self = this, - clip = self.element, - view = self._ui.view, - scrollTop = clip.scrollTop, - clipHeight = DOMUtils.getElementHeight(clip), - clipOffset = DOMUtils.getElementOffset(clip), - viewHeight = DOMUtils.getElementHeight(view), - viewWidth = DOMUtils.getElementWidth(view), - viewOffset = DOMUtils.getElementOffset(view); - - clearIndicator(clip); - - switch (self.options.scroll) { - case "x": - // @todo - break; - case "xy": - // @todo - break; - default: - setTopAndBottomIndicators(clip, { - clipTop: clipOffset.top, - clipHeight: clipHeight, - width: viewWidth, - color: window.getComputedStyle(clip).backgroundColor - }); - if (viewOffset.top - scrollTop < clipOffset.top) { - // the top is not visible - clip.classList.add(classes.indicatorTopShown); - } - if (viewOffset.top - scrollTop + viewHeight > clipOffset.top + clipHeight) { - // the bottom is not visible - clip.classList.add(classes.indicatorBottomShown); - } - } - }; - - /** - * Hide scroll indicators. - * @method _hideScrollIndicator - * @protected - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype._hideScrollIndicator = function () { - var self = this, - timers = self._timers, - timer = timers.scrollIndicatorHide; - - if (timer) { - window.clearTimeout(timer); - } - timers.scrollIndicatorHide = window.setTimeout(function () { - clearIndicator(self.element); - }, 1500); - }; - - /** - * Scrolls to specified position - * - * ### Example usage with TAU API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * </div> - * </div> - * <script> - * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")); - * scrollview.scrollTo(0, 200, 1000); // scroll to 200px vertical with 1s animation - * </script> - * - * ### Example usage with jQuery API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * </div> - * </div> - * <script> - * var element = $(".myPageClass > div[data-role=content]")); - * element.scrollview(); - * element.scrollview("scrollTo", 0, 200, 1000); // scroll to 200px vertical with 1s animation - * </script> - * - * @param {number} x - * @param {number} y - * @param {number=} [duration] - * @method scrollTo - * @protected - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype.scrollTo = function (x, y, duration) { - var element = this.element; - this.translateTo(x - element.scrollLeft, y - element.scrollTop, duration); - }; - - /** - * Translates the scroll to specified position - * - * ### Example usage with TAU API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * </div> - * </div> - * <script> - * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")); - * scrollview.translateTo(0, 200, 1000); // scroll forward 200px in vertical direction with 1s animation - * </script> - * - * ### Example usage with jQuery API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * </div> - * </div> - * <script> - * var element = $(".myPageClass > div[data-role=content]")); - * element.scrollview(); - * element.scrollview("translateTo", 0, 200, 1000); // scroll forward 200px in vertical direction with 1s animation - * </script> - * - * @param {number} x - * @param {number} y - * @param {number=} [duration] - * @method translateTo - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype.translateTo = function (x, y, duration) { - translate(this.state, this.element, x, y, duration); - }; - - /** - * Ensures that specified element is visible in the - * clip area - * - * ### Example usage with TAU API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * <div class="testElementClass">somedata</div> - * </div> - * </div> - * <script> - * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")), - * testElement = document.querySelector(".testElementClass"); - * scrollview.ensureElementIsVisible(testelement); - * </script> - * - * ### Example usage with jQuery API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * <div class="testElementClass">somedata</div> - * </div> - * </div> - * <script> - * var element = $(".myPageClass > div[data-role=content]")), - * testElement = $(".testElementClass"); - * element.scrollview(); - * element.scrollview("ensureElementIsVisible", testElement); - * </script> - * - * @param {HTMLElement} element - * @method ensureElementIsVisible - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype.ensureElementIsVisible = function (element) { - var clip = this.element, - clipHeight = DOMUtils.getElementHeight(clip), - clipWidth = DOMUtils.getElementWidth(clip), - clipTop = 0, - clipBottom = clipHeight, - elementHeight = DOMUtils.getElementHeight(element), - elementWidth = DOMUtils.getElementWidth(element), - elementTop = 0, - elementBottom, - elementFits = clipHeight >= elementHeight && clipWidth >= elementWidth, - anchor, - anchorPositionX, - anchorPositionY, - parent, - findPositionAnchor = function (input) { - var id = input.getAttribute("id"), - tagName = input.tagName.toLowerCase(); - if (id && ["input", "textarea", "button"].indexOf(tagName) > -1) { - return input.parentNode.querySelector("label[for=" + id + "]"); - } - }, - _true = true; - - parent = element.parentNode; - while (parent && parent !== clip) { - elementTop += parent.offsetTop; - //elementLeft += parent.offsetLeft; - parent = parent.parentNode; - } - elementBottom = elementTop + elementHeight; - //elementRight = elementLeft + elementWidth; - - switch (_true) { - case elementFits && clipTop < elementTop && clipBottom > elementBottom: // element fits in view is inside clip area - // pass, element position is ok - break; - case elementFits && clipTop < elementTop && clipBottom < elementBottom: // element fits in view but its visible only at top - case elementFits && clipTop > elementTop && clipBottom > elementBottom: // element fits in view but its visible only at bottom - case elementFits: // element fits in view but is not visible - this.centerToElement(element); - break; - case clipTop < elementTop && elementTop < clipBottom && clipBottom < elementBottom: // element visible only at top; eg. partly visible textarea - case clipTop > elementTop && clipBottom > elementBottom: // element visible only at bottom - // pass, we cant do anything, if we move the scroll - // the user could lost view of something he scrolled to - break; - default: // element is not visible - anchor = findPositionAnchor(element); - if (!anchor) { - anchor = element; - } - anchorPositionX = anchor.offsetLeft + DOMUtils.getCSSProperty(anchor, "margin-left", 0, "integer"); - anchorPositionY = anchor.offsetTop + DOMUtils.getCSSProperty(anchor, "margin-top", 0, "integer"); - parent = anchor.parentNode; - while (parent && parent !== clip) { - anchorPositionX += parent.offsetLeft; - anchorPositionY += parent.offsetTop; - parent = parent.parentNode; - } - this.scrollTo(anchorPositionX, anchorPositionY, this.scrollDuration); - break; - } - }; - - /** - * Centers specified element in the clip area - * - * ### Example usage with TAU API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * <div class="testElementClass">somedata</div> - * </div> - * </div> - * <script> - * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")), - * testElement = document.querySelector(".testElementClass"); - * scrollview.centerToElement(testelement); - * </script> - * - * ### Example usage with jQuery API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * <div class="testElementClass">somedata</div> - * </div> - * </div> - * <script> - * var element = $(".myPageClass > div[data-role=content]")), - * testElement = $(".testElementClass"); - * element.scrollview(); - * element.scrollview("centerToElement", testElement); - * </script> - * - * @param {HTMLElement} element - * @method centerToElement - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype.centerToElement = function (element) { - var clip = this.element, - deltaX = parseInt(DOMUtils.getElementWidth(clip) / 2 - DOMUtils.getElementWidth(element) / 2, 10), - deltaY = parseInt(DOMUtils.getElementHeight(clip) / 2 - DOMUtils.getElementHeight(element) / 2, 10), - elementPositionX = element.offsetLeft, - elementPositionY = element.offsetTop, - parent = element.parentNode; - - while (parent && parent !== clip) { - elementPositionX += parent.offsetLeft + DOMUtils.getCSSProperty(parent, "margin-left", 0, "integer"); - elementPositionY += parent.offsetTop + DOMUtils.getCSSProperty(parent, "margin-top", 0, "integer"); - parent = parent.parentNode; - } - this.scrollTo(elementPositionX - deltaX, elementPositionY - deltaY, this.scrollDuration); - }; - - /** - * This is just for compatibility - * @method skipDragging - * @member ns.widget.core.Scrollview - * @deprecated 2.3 - */ - Scrollview.prototype.skipDragging = function () { - if (ns.warn) { - ns.warn("ns.widget.core.Scrollview: skipDragging is deprecated"); - } - }; // just for TWEBUIFW compat - - /** - * Returns scroll current position - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * </div> - * </div> - * <script> - * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")), - * currentPosition = scrollview.getScrollPosition(); - * </script> - * - * ### Example usage with jQuery API - * - * @example - * <div class="myPageClass" data-role="page"> - * <div data-role="content" data-scroll="y"> - * content - * </div> - * </div> - * <script> - * var element = $(".myPageClass > div[data-role=content]")), - * position; - * element.scrollview(); - * position = element.scrollview("getScrollPosition"); - * </script> - * - * @return {Object} - * @method getScrollPosition - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype.getScrollPosition = function () { - var element = this.element; - return { - "x": element.scrollLeft, - "y": element.scrollTop - }; - }; - - /** - * Binds scrollview events - * @method _bindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.core.Scrollview - */ - Scrollview.prototype._bindEvents = function (element) { - var scrollTimer = null, - view = element.children[0], - lastClipHeight = DOMUtils.getElementHeight(element), - lastClipWidth = DOMUtils.getElementWidth(element), - notifyScrolled = function () { - eventUtils.trigger(element, "scrollstop"); - window.clearTimeout(scrollTimer); - scrollTimer = null; - }, - self = this, - //FIXME there should be some other way to get parent container - ui = self._ui, - page = ui.page, - jumpTop = ui.jumpVerticalButton, - jumpLeft = ui.jumpHorizontalButton, - repositionJumpsCallback, - jumpTopCallback, - jumpLeftCallback, - callbacks = self._callbacks; - - if (page) { - if (this.options.scrollJump) { - repositionJumpsCallback = repositionJumps.bind(null, this); - jumpTopCallback = function () { - self.scrollTo(element.scrollLeft, 0, 250); - }; - jumpLeftCallback = function () { - self.scrollTo(0, element.scrollTop, 250); - }; - page.addEventListener("pageshow", repositionJumpsCallback, false); - if (jumpTop) { - jumpTop.firstChild.addEventListener("vclick", jumpTopCallback, false); - } - if (jumpLeft) { - jumpLeft.firstChild.addEventListener("vclick", jumpLeftCallback, false); - } - - callbacks.repositionJumps = repositionJumpsCallback; - callbacks.jumpTop = jumpTopCallback; - callbacks.jumpLeft = jumpLeftCallback; - } - - element.addEventListener("scroll", function () { - if (scrollTimer) { - window.clearTimeout(scrollTimer); - } else { - eventUtils.trigger(element, "scrollstart"); - } - scrollTimer = window.setTimeout(notifyScrolled, 100); - eventUtils.trigger(element, "scrollupdate"); - }, false); - - - window.addEventListener("throttledresize", function () { - var focusedElement = view.querySelector(".ui-focus"), - clipWidth, - clipHeight; - if (focusedElement) { - self.ensureElementIsVisible(focusedElement); - } else if (DOMUtils.isOccupiedPlace(element)) { - clipHeight = DOMUtils.getElementHeight(element); - clipWidth = DOMUtils.getElementWidth(element); - self.translateTo( - lastClipWidth - clipWidth, - lastClipHeight - clipHeight, - self.scrollDuration - ); - lastClipHeight = clipHeight; - lastClipWidth = clipWidth; - } - }, false); - - document.addEventListener("vmousedown", function () { - if (currentTransition) { - currentTransition = null; - } - }, false); - - if (self.options.scrollIndicator) { - callbacks.scrollUpdate = self._showScrollIndicator.bind(self); - element.addEventListener("scrollupdate", callbacks.scrollUpdate , false); - callbacks.scrollStop = self._hideScrollIndicator.bind(self); - element.addEventListener("scrollstop", callbacks.scrollStop , false); - } - - } - }; - - Scrollview.prototype._destroy = function () { - var self = this, - element = self.element, - ui = self._ui, - page = ui.page, - scrollJump = this.options.scrollJump, - jumpTop = ui.jumpVerticalButton, - jumpLeft = ui.jumpHorizontalButton, - callbacks = self._callbacks, - repositionJumpsCallback = callbacks.repositionJumps, - jumpTopCallback = callbacks.jumpTop, - jumpLeftCallback = callbacks.jumpLeft; - - if (scrollJump) { - if (page && repositionJumpsCallback) { - page.removeEventListener("pageshow", repositionJumpsCallback, false); - } - if (jumpTop && jumpTopCallback) { - jumpTop.firstChild.removeEventListener("vclick", jumpTopCallback, false); - } - if (jumpLeft && jumpLeftCallback) { - jumpLeft.firstChild.removeEventListener("vclick", jumpLeftCallback, false); - } - } - - if (self.options.scrollIndicator) { - element.removeEventListener("scrollupdate", callbacks.scrollUpdate , false); - } - - if (self._timers.scrollIndicatorHide) { - window.clearTimeout(self._timers.scrollIndicatorHide); - } - - }; - - ns.widget.core.Scrollview = Scrollview; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return Scrollview; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); diff --git a/tau/src/js/core/widget/core/VirtualListview.js b/tau/src/js/core/widget/core/VirtualListview.js deleted file mode 100644 index 3e128df2..00000000 --- a/tau/src/js/core/widget/core/VirtualListview.js +++ /dev/null @@ -1,1014 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, white: true, plusplus: true*/ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../engine", - "../../util/selectors", - "../../event", - "../../event/vmouse", - "../BaseWidget", - "../core" // fetch namespace - ], - - function () { - //>>excludeEnd("tauBuildExclude"); - /** - * @property {Object} Widget Alias for {@link ns.widget.BaseWidget} - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - var BaseWidget = ns.widget.BaseWidget, - // Constants definition - /** - * Defines index of scroll `{@link ns.widget.core.VirtualListview#_scroll}.direction` - * @property {number} SCROLL_UP - * to retrive if user is scrolling up - * @private - * @static - * @member ns.widget.core.VirtualListview - */ - SCROLL_UP = 0, - /** - * Defines index of scroll `{@link ns.widget.core.VirtualListview#_scroll}.direction` - * @property {number} SCROLL_RIGHT - * to retrive if user is scrolling right - * @private - * @static - * @member ns.widget.core.VirtualListview - */ - SCROLL_RIGHT = 1, - /** - * Defines index of scroll {@link ns.widget.core.VirtualListview#_scroll} - * @property {number} SCROLL_DOWN - * to retrive if user is scrolling down - * @private - * @static - * @member ns.widget.core.VirtualListview - */ - SCROLL_DOWN = 2, - /** - * Defines index of scroll {@link ns.widget.core.VirtualListview#_scroll} - * @property {number} SCROLL_LEFT - * to retrive if user is scrolling left - * @private - * @static - * @member ns.widget.core.VirtualListview - */ - SCROLL_LEFT = 3, - /** - * Defines vertical scrolling orientation. It's default orientation. - * @property {string} VERTICAL - * @private - * @static - */ - VERTICAL = "y", - /** - * Defines horizontal scrolling orientation. - * @property {string} HORIZONTAL - * @private - * @static - */ - HORIZONTAL = "x", - /** - * Determines that scroll event should not be taken into account if scroll event accurs. - * @property {boolean} blockEvent - * @private - * @static - */ - blockEvent = false, - /** - * Handle window timeout ID. - * @property {number} timeoutHandler - * @private - * @static - */ - timeoutHandler, - /** - * Reference to original target object from touch event. - * @property {Object} origTarget - * @private - * @static - */ - origTarget, - /** - * Number of miliseconds to determine if tap event occured. - * @property {number} tapholdThreshold - * @private - * @static - */ - tapholdThreshold = 250, - /** - * Handler for touch event listener to examine tap occurance. - * @property {Object} tapHandlerBound - * @private - * @static - */ - tapHandlerBound = null, - /** - * Stores last touch position to examine tap occurance. - * @property {Object} lastTouchPos - * @private - * @static - */ - lastTouchPos = {}, - - selectors = ns.util.selectors, - - utilEvent = ns.event, - - /** - * Local constructor function - * @method VirtualListview - * @private - * @member ns.widget.core.VirtualListview - */ - VirtualListview = function() { - var self = this; - /** - * VirtualListview widget's properties associated with - * @property {Object} ui - * User Interface - * @property {?HTMLElement} [ui.scrollview=null] Scroll element - * @property {?HTMLElement} [ui.spacer=null] HTML element which makes scrollbar proper size - * @property {number} [ui.itemSize=0] Size of list element in pixels. If scrolling is - * vertically it's item width in other case it"s height of item element - * @member ns.widget.core.VirtualListview - */ - self._ui = { - scrollview: null, - spacer: null, - itemSize: 0 - }; - - /** - * Holds information about scrolling state - * @property {Object} _scroll - * @property {Array} [_scroll.direction=[0,0,0,0]] Holds current direction of scrolling. - * Indexes suit to following order: [up, left, down, right] - * @property {number} [_scroll.lastPositionX=0] Last scroll position from top in pixels. - * @property {number} [_scroll.lastPositionY=0] Last scroll position from left in pixels. - * @property {number} [_scroll.lastJumpX=0] Difference between last and current - * position of horizontal scroll. - * @property {number} [_scroll.lastJumpY=0] Difference between last and current - * position of vertical scroll. - * @property {number} [_scroll.clipWidth=0] Width of clip - visible area for user. - * @property {number} [_scroll.clipHeight=0] Height of clip - visible area for user. - * @member ns.widget.core.VirtualListview - */ - self._scroll = { - direction: [0, 0, 0, 0], - lastPositionX: 0, - lastPositionY: 0, - lastJumpX: 0, - lastJumpY: 0, - clipWidth: 0, - clipHeight: 0 - }; - - /** - * Name of widget - * @property {string} name - * @member ns.widget.core.VirtualListview - * @static - */ - self.name = "VirtualListview"; - - /** - * Current zero-based index of data set. - * @property {number} _currentIndex - * @member ns.widget.core.VirtualListview - * @protected - */ - self._currentIndex = 0; - - /** - * VirtualListview widget options. - * @property {Object} options - * @property {number} [options.bufferSize=100] Number of items of result set. The default value is 100. - * As the value gets higher, the loading time increases while the system performance - * improves. So you need to pick a value that provides the best performance - * without excessive loading time. It's recomended to set bufferSize at least 3 times bigger than number - * of visible elements. - * @property {number} [options.dataLength=0] Total number of items. - * @property {string} [options.orientation="y"] Scrolling orientation. Default vertical scrolling enabled. - * @property {Object} options.listItemUpdater Holds reference to method which modifies list item, depended - * at specified index from database. **Method should be overridden by developer using - * {@link ns.widget.core.VirtualListview#setListItemUpdater} method.** or defined as a config - * object. Method takes two parameters: - * - element {HTMLElement} List item to be modified - * - index {number} Index of data set - * @member ns.widget.core.VirtualListview - */ - self.options = { - bufferSize: 100, - dataLength: 0, - orientation: VERTICAL, - listItemUpdater: null, - scrollElement: null - }; - - /** - * Binding for scroll event listener. - * @method _scrollEventBound - * @member ns.widget.core.VirtualListview - * @protected - */ - self._scrollEventBound = null; - /** - * Binding for touch start event listener. - * @method _touchStartEventBound - * @member ns.widget.core.VirtualListview - * @protected - */ - self._touchStartEventBound = null; - - return self; - }, - POINTER_START = 'vmousedown', - POINTER_MOVE = 'vmousemove', - POINTER_END = 'vmouseup', - - // Cached prototype for better minification - prototype = new BaseWidget(); - - /** - * Dictionary object containing commonly used wiget classes - * @property {Object} classes - * @static - * @readonly - * @member ns.widget.core.VirtualListview - */ - VirtualListview.classes = { - uiVirtualListContainer: "ui-virtual-list-container", - uiListviewActive: "ui-listview-active" - }; - - /** - * Remove highlight from items. - * @method _removeHighlight - * @param {ns.widget.core.VirtualListview} self Reference to VirtualListview object. - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - function _removeHighlight (self) { - var children = self.element.children, - i = children.length; - while (--i >= 0) { - children[i].classList.remove(VirtualListview.classes.uiListviewActive); - } - } - - /** - * Checks if tap meet the condition. - * @method _tapHandler - * @param {ns.widget.core.VirtualListview} self Reference to VirtualListview object. - * @param {Event} event Received Touch event - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - function _tapHandler (self, event) { - var changedTouches = event.changedTouches || - (event._originalEvent && - event._originalEvent.changedTouches), - eventTouch = (changedTouches && changedTouches.length) ? - changedTouches[0] : - event; - - if (event.type === POINTER_MOVE) { - if (Math.abs(lastTouchPos.clientX - eventTouch.clientX) > 10 && Math.abs(lastTouchPos.clientY - eventTouch.clientY) > 10) { - _removeHighlight(self); - window.clearTimeout(timeoutHandler); - } - } else { - _removeHighlight(self); - window.clearTimeout(timeoutHandler); - } - - } - - /** - * Adds highlight - * @method tapholdListener - * @param {ns.widget.core.VirtualListview} self Reference to VirtualListview object. - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - function tapholdListener(self) { - var liElement; - - liElement = origTarget.tagName === "LI" ? origTarget : origTarget.parentNode; - - origTarget.removeEventListener(POINTER_MOVE, tapHandlerBound, false); - origTarget.removeEventListener(POINTER_END, tapHandlerBound, false); - tapHandlerBound = null; - - _removeHighlight(self); - liElement.classList.add(VirtualListview.classes.uiListviewActive); - lastTouchPos = {}; - } - - /** - * Binds touching events to examine tap event. - * @method _touchStartHandler - * @param {ns.widget.core.VirtualListview} self Reference to VirtualListview object. - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - function _touchStartHandler (self, event) { - var eventData; - - origTarget = event.target; - - // Clean up - window.clearTimeout(timeoutHandler); - origTarget.removeEventListener(POINTER_MOVE, tapHandlerBound, false); - origTarget.removeEventListener(POINTER_END, tapHandlerBound, false); - - timeoutHandler = window.setTimeout(tapholdListener.bind(null, self), tapholdThreshold); - eventData = (event.touches && event.touches.length) ? event.touches[0] : event; - lastTouchPos.clientX = eventData.clientX; - lastTouchPos.clientY = eventData.clientY; - - //Add touch listeners - tapHandlerBound = _tapHandler.bind(null, self); - origTarget.addEventListener(POINTER_MOVE, tapHandlerBound, false); - origTarget.addEventListener(POINTER_END, tapHandlerBound, false); - - } - - - /** - * Updates scroll information about position, direction and jump size. - * @method _updateScrollInfo - * @param {ns.widget.core.VirtualListview} self VirtualListview widget reference - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - function _updateScrollInfo(self) { - var scrollInfo = self._scroll, - scrollDirection = scrollInfo.direction, - scrollViewElement = self._ui.scrollview, - scrollLastPositionX = scrollInfo.lastPositionX, - scrollLastPositionY = scrollInfo.lastPositionY, - scrollviewPosX = scrollViewElement.scrollLeft, - scrollviewPosY = scrollViewElement.scrollTop; - - self._refreshScrollbar(); - //Reset scroll matrix - scrollDirection = [0, 0, 0, 0]; - - //Scrolling UP - if (scrollviewPosY < scrollLastPositionY) { - scrollDirection[SCROLL_UP] = 1; - } - - //Scrolling RIGHT - if (scrollviewPosX < scrollLastPositionX) { - scrollDirection[SCROLL_RIGHT] = 1; - } - - //Scrolling DOWN - if (scrollviewPosY > scrollLastPositionY) { - scrollDirection[SCROLL_DOWN] = 1; - } - - //Scrolling LEFT - if (scrollviewPosX > scrollLastPositionX) { - scrollDirection[SCROLL_LEFT] = 1; - } - - scrollInfo.lastJumpY = Math.abs(scrollviewPosY - scrollLastPositionY); - scrollInfo.lastJumpX = Math.abs(scrollviewPosX - scrollLastPositionX); - scrollInfo.lastPositionX = scrollviewPosX; - scrollInfo.lastPositionY = scrollviewPosY; - scrollInfo.direction = scrollDirection; - scrollInfo.clipHeight = scrollViewElement.clientHeight; - scrollInfo.clipWidth = scrollViewElement.clientWidth; - } - - /** - * Computes list element size according to scrolling orientation - * @method _computeElementSize - * @param {HTMLElement} element Element whose size should be computed - * @param {string} orientation Scrolling orientation - * @return {number} Size of element in pixels - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - function _computeElementSize(element, orientation) { - // @TODO change to util method if it will work perfectly - return parseInt(orientation === VERTICAL ? element.clientHeight : element.clientWidth, 10) + 1; - } - - /** - * Scrolls and manipulates DOM element to destination index. Element at destination - * index is the first visible element on the screen. Destination index can - * be different from Virtual List's current index, because current index points - * to first element in the buffer. - * @member ns.widget.core.VirtualListview - * @param {ns.widget.core.VirtualListview} self VirtualListview widget reference - * @param {number} toIndex Destination index. - * @method _orderElementsByIndex - * @private - * @static - */ - function _orderElementsByIndex(self, toIndex) { - var element = self.element, - options = self.options, - scrollInfo = self._scroll, - scrollClipSize = 0, - dataLength = options.dataLength, - indexCorrection = 0, - bufferedElements = 0, - avgListItemSize = 0, - bufferSize = options.bufferSize, - i, - offset = 0, - index, - isLastBuffer = false; - - //Get size of scroll clip depended on scroll direction - scrollClipSize = options.orientation === VERTICAL ? scrollInfo.clipHeight : scrollInfo.clipWidth; - - //Compute average list item size - avgListItemSize = _computeElementSize(element, options.orientation) / bufferSize; - - //Compute average number of elements in each buffer (before and after clip) - bufferedElements = Math.floor((bufferSize - Math.floor(scrollClipSize / avgListItemSize)) / 2); - - if (toIndex - bufferedElements <= 0) { - index = 0; - indexCorrection = 0; - } else { - index = toIndex - bufferedElements; - } - - if (index + bufferSize >= dataLength) { - index = dataLength - bufferSize; - if (index < 0) { - index = 0; - } - isLastBuffer = true; - } - indexCorrection = toIndex - index; - - self._loadData(index); - blockEvent = true; - offset = index * avgListItemSize; - if (options.orientation === VERTICAL) { - if (isLastBuffer) { - offset = self._ui.spacer.clientHeight; - } - element.style.top = offset + "px"; - } else { - if (isLastBuffer) { - offset = self._ui.spacer.clientWidth; - } - element.style.left = offset + "px"; - } - - for (i = 0; i < indexCorrection; i += 1) { - offset += _computeElementSize(element.children[i], options.orientation); - } - - if (options.orientation === VERTICAL) { - //MOBILE: self._ui.scrollview.element.scrollTop = offset; - self._ui.scrollview.scrollTop = offset; - } else { - //MOBILE: self._ui.scrollview.element.scrollLeft = offset; - self._ui.scrollview.scrollLeft = offset; - } - blockEvent = false; - self._currentIndex = index; - } - - /** - * Orders elements. Controls resultset visibility and does DOM manipulation. This - * method is used during normal scrolling. - * @method _orderElements - * @param {ns.widget.core.VirtualListview} self VirtualListview widget reference - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - function _orderElements(self) { - var element = self.element, - scrollInfo = self._scroll, - options = self.options, - elementStyle = element.style, - //Current index of data, first element of resultset - currentIndex = self._currentIndex, - //Number of items in resultset - bufferSize = parseInt(options.bufferSize, 10), - //Total number of items - dataLength = options.dataLength, - //Array of scroll direction - scrollDirection = scrollInfo.direction, - scrolledVertically = (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_DOWN]), - scrolledHorizontally = (scrollDirection[SCROLL_LEFT] || scrollDirection[SCROLL_RIGHT]), - scrollClipWidth = scrollInfo.clipWidth, - scrollClipHeight = scrollInfo.clipHeight, - scrollLastPositionY = scrollInfo.lastPositionY, - scrollLastPositionX = scrollInfo.lastPositionX, - elementPositionTop = parseInt(elementStyle.top, 10) || 0, - elementPositionLeft = parseInt(elementStyle.left, 10) || 0, - elementsToLoad = 0, - bufferToLoad = 0, - elementsLeftToLoad = 0, - temporaryElement = null, - avgListItemSize = 0, - resultsetSize = 0, - childrenNodes, - i = 0, - jump = 0, - hiddenPart = 0, - direction, - newPosition; - - - childrenNodes = element.children; - for (i = childrenNodes.length - 1; i > 0; i -= 1) { - if (options.orientation === VERTICAL) { - resultsetSize += childrenNodes[i].clientHeight; - } else { - resultsetSize += childrenNodes[i].clientWidth; - } - } - - //Compute average list item size - avgListItemSize = _computeElementSize(element, options.orientation) / bufferSize; - - //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling DOWN - if (scrollDirection[SCROLL_DOWN]) { - hiddenPart = scrollLastPositionY - elementPositionTop; - elementsLeftToLoad = dataLength - currentIndex - bufferSize; - } - - //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling UP - if (scrollDirection[SCROLL_UP]) { - hiddenPart = (elementPositionTop + resultsetSize) - (scrollLastPositionY + scrollClipHeight); - elementsLeftToLoad = currentIndex; - } - - //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling RIGHT - if (scrollDirection[SCROLL_RIGHT]) { - hiddenPart = scrollLastPositionX - elementPositionLeft; - elementsLeftToLoad = dataLength - currentIndex - bufferSize; - } - - //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling LEFT - if (scrollDirection[SCROLL_LEFT]) { - hiddenPart = (elementPositionLeft + resultsetSize) - (scrollLastPositionX - scrollClipWidth); - elementsLeftToLoad = currentIndex; - } - - //manipulate DOM only, when at least 2/3 of result set is hidden - //NOTE: Result Set should be at least 3x bigger then clip size - if (hiddenPart > 0 && (resultsetSize / hiddenPart) <= 1.5) { - - //Left half of hidden elements still hidden/cached - elementsToLoad = Math.floor(hiddenPart / avgListItemSize) - Math.floor((bufferSize - scrollClipHeight / avgListItemSize) / 2); - elementsToLoad = elementsLeftToLoad < elementsToLoad ? elementsLeftToLoad : elementsToLoad; - bufferToLoad = Math.floor(elementsToLoad / bufferSize); - elementsToLoad = elementsToLoad % bufferSize; - - // Scrolling more then buffer - if (bufferToLoad > 0) { - if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { - direction = 1; - } - - if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_LEFT]) { - direction = -1; - } - - // Load data to buffer according to jumped index - self._loadData(currentIndex + direction * bufferToLoad * bufferSize); - - // Refresh current index after buffer jump - currentIndex = self._currentIndex; - - jump += direction * bufferToLoad * bufferSize * avgListItemSize; - } - - if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { - //Switch currentIndex to last - currentIndex = currentIndex + bufferSize - 1; - } - for (i = elementsToLoad; i > 0; i -= 1) { - if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { - temporaryElement = element.appendChild(element.firstElementChild); - ++currentIndex; - - //Updates list item using template - self._updateListItem(temporaryElement, currentIndex); - jump += temporaryElement.clientHeight; - } - - if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_LEFT]) { - temporaryElement = element.insertBefore(element.lastElementChild, element.firstElementChild); - --currentIndex; - - //Updates list item using template - self._updateListItem(temporaryElement, currentIndex); - jump -= temporaryElement.clientHeight; - } - } - if (scrolledVertically) { - newPosition = elementPositionTop + jump; - - if (newPosition < 0 || currentIndex <= 0) { - newPosition = 0; - currentIndex = 0; - } - - if (currentIndex >= (dataLength - 1)) { - newPosition = self._ui.spacer.clientHeight; - } - - elementStyle.top = newPosition + "px"; - } - - if (scrolledHorizontally) { - newPosition = elementPositionLeft + jump; - - if (newPosition < 0 || currentIndex <= 0) { - newPosition = 0; - } - - if (currentIndex >= (dataLength - 1)) { - newPosition = self._ui.spacer.clientWidth; - } - - elementStyle.left = newPosition + "px"; - } - - if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { - //Switch currentIndex to first - currentIndex = currentIndex - bufferSize + 1; - } - //Save current index - self._currentIndex = currentIndex; - } - } - - /** - * Check if scrolling position is changed and updates list if it needed. - * @method _updateList - * @param {ns.widget.core.VirtualListview} self VirtualListview widget reference - * @member ns.widget.core.VirtualListview - * @private - * @static - */ - function _updateList(self) { - var _scroll = self._scroll; - _updateScrollInfo.call(null, self); - if (_scroll.lastJumpY > 0 || _scroll.lastJumpX > 0) { - if (!blockEvent) { - _orderElements(self); - utilEvent.trigger(self.element, "vlistupdate"); - } - } - } - - /** - * Updates list item using user defined listItemUpdater function. - * @method _updateListItem - * @param {HTMLElement} element List element to update - * @param {number} index Data row index - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._updateListItem = function (element, index) { - this.options.listItemUpdater(element, index); - }; - - /** - * Build widget structure - * @method _build - * @param {HTMLElement} element Widget's element - * @return {HTMLElement} Element on which built is widget - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._build = function(element) { - var classes = VirtualListview.classes; - - element.classList.add(classes.uiVirtualListContainer); - return element; - }; - - prototype._setupScrollview = function (element, orientation) { - var scrollview, - scrollviewStyle; - //Get scrollview instance - scrollview = element.parentElement; - scrollviewStyle = scrollview.style; - - if (orientation === HORIZONTAL) { - // @TODO check if whiteSpace: nowrap is better for vertical listes - scrollviewStyle.overflowX = "scroll"; - scrollviewStyle.overflowY = "hidden"; - } else { - scrollviewStyle.overflowX = "hidden"; - scrollviewStyle.overflowY = "scroll"; - } - - return scrollview; - }; - - /** - * Initialize widget on an element. - * @method _init - * @param {HTMLElement} element Widget's element - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._init = function(element) { - var self = this, - ui = self._ui, - options = self.options, - orientation, - scrollview, - scrollviewStyle, - spacer, - spacerStyle; - - //Prepare element - element.style.position = "relative"; - - //Set orientation, default vertical scrolling is allowed - orientation = options.orientation.toLowerCase() === HORIZONTAL ? HORIZONTAL : VERTICAL; - if (options.scrollElement) { - if (typeof options.scrollElement === "string") { - scrollview = selectors.getClosestBySelector(element, "." + options.scrollElement); - } else { - scrollview = options.scrollElement; - } - } - if(!scrollview) { - scrollview = self._setupScrollview(element, orientation); - } - - // Prepare spacer (element which makes scrollbar proper size) - spacer = document.createElement("div"); - spacerStyle = spacer.style; - spacerStyle.display = "block"; - spacerStyle.position = "static"; - if (orientation === HORIZONTAL) { - spacerStyle.float = "left"; - } - element.parentNode.appendChild(spacer); - - if (options.dataLength < options.bufferSize) { - options.bufferSize = options.dataLength; - } - - if (options.bufferSize < 1) { - options.bufferSize = 1; - } - - // Assign variables to members - ui.spacer = spacer; - ui.scrollview = scrollview; - self.element = element; - options.orientation = orientation; - }; - - /** - * Builds Virtual List structure - * @method _buildList - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._buildList = function() { - var self = this, - listItem, - list = self.element, - options = self.options, - childElementType = (list.tagName === "UL" || list.tagName === "OL") ? "li" : "div", - numberOfItems = options.bufferSize, - documentFragment = document.createDocumentFragment(), - touchStartEventBound = _touchStartHandler.bind(null, self), - orientation = options.orientation, - i; - - for (i = 0; i < numberOfItems; ++i) { - listItem = document.createElement(childElementType); - - if (orientation === HORIZONTAL) { - // TODO: check if whiteSpace: nowrap is better for vertical listes - // NOTE: after rebuild this condition check possible duplication from _init method - listItem.style.float = "left"; - } - - self._updateListItem(listItem, i); - documentFragment.appendChild(listItem); - listItem.addEventListener(POINTER_START, touchStartEventBound, false); - } - - list.appendChild(documentFragment); - this._touchStartEventBound = touchStartEventBound; - this._refresh(); - }; - - /** - * Refresh list - * @method _refresh - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._refresh = function() { - //Set default value of variable create - this._refreshScrollbar(); - }; - - /** - * Loads data from specified index to result set. - * @method _loadData - * @param {number} index Index of first row - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._loadData = function(index) { - var self = this, - children = self.element.firstElementChild; - - if (self._currentIndex !== index) { - self._currentIndex = index; - do { - self._updateListItem(children, index); - ++index; - children = children.nextElementSibling; - } while (children); - } - }; - - /** - * Sets proper scrollbar size: height (vertical), width (horizontal) - * @method _refreshScrollbar - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._refreshScrollbar = function() { - var self = this, - element = self.element, - options = self.options, - ui = self._ui, - spacerStyle = ui.spacer.style, - bufferSizePx; - - if (options.orientation === VERTICAL) { - //Note: element.clientHeight is variable - bufferSizePx = parseFloat(element.clientHeight) || 0; - spacerStyle.height = (bufferSizePx / options.bufferSize * options.dataLength - bufferSizePx) + "px"; - } else { - //Note: element.clientWidth is variable - bufferSizePx = parseFloat(element.clientWidth) || 0; - spacerStyle.width = (bufferSizePx / options.bufferSize * (options.dataLength - 1) - 4 / 3 * bufferSizePx) + "px"; - } - }; - - /** - * Binds VirtualListview events - * @method _bindEvents - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._bindEvents = function() { - var scrollEventBound = _updateList.bind(null, this), - //MOBILE: scrollviewClip = self._ui.scrollview && self._ui.scrollview.element; - scrollviewClip = this._ui.scrollview; - - if (scrollviewClip) { - scrollviewClip.addEventListener("scroll", scrollEventBound, false); - this._scrollEventBound = scrollEventBound; - } - - //MOBILE: parent_bindEvents.call(self, self.element); - }; - - /** - * Cleans widget's resources - * @method _destroy - * @member ns.widget.core.VirtualListview - * @protected - */ - prototype._destroy = function() { - var self = this, - scrollviewClip = self._ui.scrollview, - uiSpacer = self._ui.spacer, - element = self.element, - elementStyle = element.style, - listItem; - - // Restore start position - elementStyle.position = "static"; - if (self.options.orientation === VERTICAL) { - elementStyle.top = "auto"; - } else { - elementStyle.left = "auto"; - } - - if (scrollviewClip) { - scrollviewClip.removeEventListener("scroll", self._scrollEventBound, false); - } - - //Remove spacer element - if (uiSpacer.parentNode) { - uiSpacer.parentNode.removeChild(uiSpacer); - } - - //Remove li elements. - while (element.firstElementChild) { - listItem = element.firstElementChild; - listItem.removeEventListener(POINTER_START, self._touchStartEventBound, false); - element.removeChild(listItem); - } - - }; - - /** - * This method scrolls list to defined position in pixels. - * @method scrollTo - * @param {number} position Scroll position expressed in pixels. - * @member ns.widget.core.VirtualListview - */ - prototype.scrollTo = function(position) { - this._ui.scrollview.scrollTop = position; - }; - - /** - * This method scrolls list to defined index. - * @method scrollToIndex - * @param {number} index Scroll Destination index. - * @member ns.widget.core.VirtualListview - */ - prototype.scrollToIndex = function(index) { - if (index < 0) { - index = 0; - } - if (index >= this.options.dataLength) { - index = this.options.dataLength - 1; - } - _updateScrollInfo(this); - _orderElementsByIndex(this, index); - }; - - /** - * This method builds widget and trigger event "draw". - * @method draw - * @member ns.widget.core.VirtualListview - */ - prototype.draw = function() { - this._buildList(); - this.trigger("draw"); - }; - - /** - * This method sets list item updater function. - * To learn how to create list item updater function please - * visit Virtual List User Guide. - * @method setListItemUpdater - * @param {Object} updateFunction Function reference. - * @member ns.widget.core.VirtualListview - */ - prototype.setListItemUpdater = function(updateFunction) { - this.options.listItemUpdater = updateFunction; - }; - - // Assign prototype - VirtualListview.prototype = prototype; - ns.widget.core.VirtualListview = VirtualListview; - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return VirtualListview; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/widget/core/indexscrollbar.js b/tau/src/js/core/widget/core/indexscrollbar.js deleted file mode 100644 index 73a3e601..00000000 --- a/tau/src/js/core/widget/core/indexscrollbar.js +++ /dev/null @@ -1,36 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/* - * @author Maciej Urbanski <m.urbanski@samsung.com> - */ -(function (ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../core" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - /** @namespace ns.widget.wearable */ - ns.widget.core.indexscrollbar = ns.widget.core.indexscrollbar || {}; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.core.indexscrollbar; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(ns)); diff --git a/tau/src/js/core/widget/core/viewswitcher.js b/tau/src/js/core/widget/core/viewswitcher.js deleted file mode 100644 index 1c51d338..00000000 --- a/tau/src/js/core/widget/core/viewswitcher.js +++ /dev/null @@ -1,35 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/* - * @author Hyeoncheol Choi <hc7.choi@samsung.com> - */ -(function (ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../core" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - ns.widget.core.viewswitcher = ns.widget.core.viewswitcher || {}; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.core.viewswitcher; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(ns)); diff --git a/tau/src/js/core/widget/core/viewswitcher/ViewSwitcher.js b/tau/src/js/core/widget/core/viewswitcher/ViewSwitcher.js deleted file mode 100644 index 7d256c24..00000000 --- a/tau/src/js/core/widget/core/viewswitcher/ViewSwitcher.js +++ /dev/null @@ -1,471 +0,0 @@ -/*global window, define */ -/*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #ViewSwitcher Component - * ViewSwitcher component is controller for each view elements is changing position. - * This component managed to animation, views position, events and get/set active view index. - * If you want to change the view as various animating, you should wrap views as the ViewSwitcher element then - * ViewSwitcher would set views position and start to manage to gesture event. - * - * ##Set and Get the active index - * You can set or get the active index as the setActiveIndex() and getActiveIndex() - * - * @class ns.widget.core.viewswitcher.ViewSwitcher - * @extends ns.widget.BaseWidget - * @author Hyeoncheol Choi <hc7.choi@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../theme", - "../../../util/selectors", - "../../../util/DOM/css", - "../../../util/object", - "../../../event/gesture", - "../../../event", - "../../core", // fetch namespace - "../../BaseWidget", - "../viewswitcher", - "./animation/carousel" - ], - - function () { - //>>excludeEnd("tauBuildExclude"); - /** - * @property {Object} Widget Alias for {@link ns.widget.BaseWidget} - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @private - * @static - */ - var BaseWidget = ns.widget.BaseWidget, - events = ns.event, - engine = ns.engine, - utilsObject = ns.util.object, - Gesture = ns.event.gesture, - /** - * Default values - */ - DEFAULT = { - ACTIVE_INDEX: 0, - ANIMATION_TYPE: "carousel", - ANIMATION_SPEED: 30, - ANIMATION_TIMING_FUNCTION: "ease-out" - }, - /** - * ViewSwitcher triggered some customEvents - * viewchangestart : This event has been triggerred when view changing started. - * viewchangeend : This event has been triggerred when view changing ended. - * viewchange: This event has been triggerred when view changing complete to user. - */ - EVENT_TYPE = { - CHANGE_START: "viewchangestart", - CHANGE_END: "viewchangeend", - CHANGE: "viewchange" - }, - /** - * ViewSwitcher constructor - * @method ViewSwitcher - */ - ViewSwitcher = function () { - var self = this; - - self.options = {}; - self._ui = {}; - }, - /** - * Dictionary object containing commonly used widget classes - * @property {Object} classes - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @private - * @static - * @readonly - */ - classes = { - VIEW: "ui-view", - VIEW_ACTIVE: "ui-view-active", - ANIMATION_TYPE: "ui-animation-" - }, - /** - * {Object} ViewSwitcher widget prototype - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @private - * @static - */ - prototype = new BaseWidget(); - - ViewSwitcher.prototype = prototype; - ViewSwitcher.classes = classes; - - /** - * Configure of ViewSwitcher component - * @method _configure - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._configure = function () { - var self = this; - - /** - * ViewSwitcher containing some options - * @property {number} ViewSwitcher default active index (Default is 0) - * @property {string} ViewSwitcher animation type (Default is "carousel") - * @property {number} ViewSwitcher animation speed (Default is 18) - */ - self.options = utilsObject.merge(self.options, { - active: DEFAULT.ACTIVE_INDEX, - animationType: DEFAULT.ANIMATION_TYPE, - animationSpeed: DEFAULT.ANIMATION_SPEED - }); - }; - /** - * Build structure of ViewSwitcher component - * @method _build - * @param {HTMLElement} element - * @return {HTMLElement} Returns built element - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._build = function (element) { - var self = this, - ui = self._ui; - - ui._views = element.querySelectorAll("." + classes.VIEW); - return element; - }; - - /** - * Initialization of ViewSwitcher component - * @method _init - * @param {HTMLElement} element - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._init = function (element) { - var self = this; - - self._elementOffsetWidth = element.offsetWidth; - self._initPosition(); - - return element; - }; - - /** - * Init position of Views inner ViewSwitcher - * @method _initPosition - * @param {HTMLElement} element - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._initPosition = function () { - var self = this, - views = self._ui._views, - options = self.options, - activeIndex = self._getActiveIndex(); - - self._type = ns.widget.core.viewswitcher.animation[options.animationType]; - self._type.initPosition(views, activeIndex); - self._activeIndex = activeIndex; - }; - - /** - * Get the active index as view has the "ui-view-active" or not - * @method _getActiveIndex - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._getActiveIndex = function() { - var self = this, - ui = self._ui, - views = ui._views, - i, len; - - len = views.length; - for (i = 0; i < len; i++) { - if (views[i].classList.contains(classes.VIEW_ACTIVE)) { - return i; - } - } - return self.options.active; - }; - - /** - * Binds events to a ViewSwitcher component - * @method _bindEvents - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._bindEvents = function() { - var self = this, - element = self.element; - - events.enableGesture( - element, - new events.gesture.Drag({ - blockVertical: true, - threshold: 0 - }), - new events.gesture.Swipe({ - orientation: Gesture.Orientation.HORIZONTAL - }) - ); - events.on(element, "drag dragstart dragend swipe", self, false); - - }; - - /** - * Handle events - * @method handleEvent - * @param {Event} event - * @member ns.widget.core.viewswitcher.ViewSwitcher - */ - prototype.handleEvent = function(event) { - var self = this; - switch (event.type) { - case "drag": - self._onDrag(event); - break; - case "dragstart": - self._onDragStart(event); - break; - case "dragend": - case "swipe": - self._onDragEnd(event); - break; - } - }; - - /** - * Drag event handler - * @method _onDrag - * @param {Event} event - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._onDrag = function(event) { - var self = this, - direction = event.detail.direction, - ex = event.detail.estimatedDeltaX, - deltaX = ex / self._elementOffsetWidth * 100, - ui = self._ui, - active = ui._views[self._activeIndex]; - - if ((direction === "left" && !active.nextElementSibling) || (direction === "right" && !active.previousElementSibling)) { - return; - } - if (self._dragging && !self._isAnimating && Math.abs(deltaX) < 100) { - self._type.animate(ui._views, self._activeIndex, deltaX); - self._triggerChange(deltaX); - } - }; - - /** - * DragStart event handler - * @method _onDragStart - * @param {Event} event - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._onDragStart = function(event) { - var self = this, - direction = event.detail.direction, - ui = self._ui, - active = ui._views[self._activeIndex]; - - if ((direction === "left" && !active.nextElementSibling) || (direction === "right" && !active.previousElementSibling) || self._dragging) { - return; - } - self._dragging = true; - }; - - /** - * DragEnd event handler - * @method _onDragEnd - * @param {Event} event - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._onDragEnd = function(event) { - var self = this, - ui = self._ui, - active = ui._views[self._activeIndex], - direction = event.detail.direction, - estimatedDeltaX = event.detail.estimatedDeltaX; - - if (!self._dragging || self._isAnimating - || (direction === "left" && !active.nextElementSibling) || (direction === "right" && !active.previousElementSibling)) { - return; - } - self._lastDirection = direction; - if (event.type === "dragend" && Math.abs(estimatedDeltaX) < self._elementOffsetWidth / 2) { - direction = "backward"; - } - self.trigger(EVENT_TYPE.CHANGE_START); - self._requestFrame(estimatedDeltaX, direction); - }; - - prototype._triggerChange = function(estimatedDeltaX) { - var self = this, - absEx = Math.abs(estimatedDeltaX); - if (absEx > 50 && !self._changed) { - self.trigger(EVENT_TYPE.CHANGE, { - index: self._activeIndex + (estimatedDeltaX < 0 ? 1 : -1) - }); - self._changed = true; - } else if (absEx < 50 && self._changed){ - self.trigger(EVENT_TYPE.CHANGE, { - index: self._activeIndex - }); - self._changed = false; - } - }; - /** - * Animate views as the requestAnimationFrame. - * @method _requestFrame - * @param {string} animation direction - * @param {string} animation timing type (ease-out|linear) - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._requestFrame = function(estimatedDeltaX, direction, animationTiming) { - var self = this, - elementOffsetWidth = self._elementOffsetWidth, - animationTimingFunction = animationTiming ? animationTiming : DEFAULT.ANIMATION_TIMING_FUNCTION, - isStop = false, - lastDirection = self._lastDirection, - ui = self._ui, - ex = estimatedDeltaX, - deltaX = ex / elementOffsetWidth * 100, - animationFrame, - validDirection, - stopPosition, - mark; - - if (direction === "backward") { - validDirection = lastDirection === "left" ? "right" : "left"; - if (lastDirection === "left" && ex > 0 - || lastDirection === "right" && ex < 0) { - isStop = true; - stopPosition = 0; - } - } else { - validDirection = direction; - if (Math.abs(ex) > elementOffsetWidth) { - isStop = true; - stopPosition = 100; - } - } - mark = validDirection === "left" ? -1 : 1; - if (isStop) { - self._type.animate(ui._views, self._activeIndex, stopPosition * mark); - webkitCancelRequestAnimationFrame(animationFrame); - if (direction !== "backward") { - ui._views[self._activeIndex].classList.remove(classes.VIEW_ACTIVE); - self._activeIndex = self._activeIndex - mark; - self._type.resetPosition(ui._views, self._activeIndex); - ui._views[self._activeIndex].classList.add(classes.VIEW_ACTIVE); - } - self._dragging = false; - self._isAnimating = false; - self._changed = false; - self.trigger(EVENT_TYPE.CHANGE_END); - return; - } - self._type.animate(ui._views, self._activeIndex, deltaX); - self._triggerChange(deltaX); - self._isAnimating = true; - - if (animationTimingFunction === "ease-out") { - if (Math.abs(ex) > elementOffsetWidth * 0.95) { - ex = ex + mark; - } else { - ex = ex + self.options.animationSpeed * mark; - } - } else if (animationTimingFunction === "linear") { - ex = ex + self.options.animationSpeed * mark; - } - animationFrame = webkitRequestAnimationFrame(self._requestFrame.bind(self, ex, direction, animationTiming)); - }; - /** - * Set the active view - * @method setActiveIndex - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @public - */ - prototype.setActiveIndex = function(index) { - var self = this, - latestActiveIndex = self._activeIndex, - interval = latestActiveIndex - index, - direction, i, len; - - if (!self._isAnimating && index < self._ui._views.length && index >= 0) { - self._lastDeltaX = 0; - if (interval < 0) { - direction = "left"; - } else { - direction = "right"; - } - len = Math.abs(interval); - self._lastDirection = direction; - for (i = 0; i < len; i++) { - self.trigger(EVENT_TYPE.CHANGE_START); - self._requestFrame(0, direction, "linear"); - } - } - }; - - /** - * Get the active view index - * @method getActiveIndex - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @public - */ - prototype.getActiveIndex = function() { - return this._activeIndex; - }; - /** - * Destroys ViewSwitcher widget - * @method _destroy - * @member ns.widget.core.viewswitcher.ViewSwitcher - * @protected - */ - prototype._destroy = function() { - var element = this.element; - events.disableGesture(element); - events.off(element, "drag dragstart dragend", this, false); - this.options = null; - this._ui = null; - }; - - ns.widget.core.viewswitcher.ViewSwitcher = ViewSwitcher; - - engine.defineWidget( - "ViewSwitcher", - "[data-role='viewSwitcher'], .ui-view-switcher", - [ - "setActiveIndex", - "getActiveIndex" - ], - ViewSwitcher - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/widget/core/viewswitcher/animation.js b/tau/src/js/core/widget/core/viewswitcher/animation.js deleted file mode 100644 index af543aca..00000000 --- a/tau/src/js/core/widget/core/viewswitcher/animation.js +++ /dev/null @@ -1,40 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/* - * #type namespace - * ViewSwitcher animation - * @author Hyeoncheol Choi <hc7.choi@samsung.com> - * @class ns.widget.core.ViewSwitcher.animation - */ -(function (window, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../viewswitcher", - "./ViewSwitcher" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - /** @namespace ns.widget.wearable */ - ns.widget.core.viewswitcher.animation = ns.widget.core.viewswitcher.animation || {}; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.core.viewswitcher.animation; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, ns)); diff --git a/tau/src/js/core/widget/core/viewswitcher/animation/carousel.js b/tau/src/js/core/widget/core/viewswitcher/animation/carousel.js deleted file mode 100644 index 7c70f1e3..00000000 --- a/tau/src/js/core/widget/core/viewswitcher/animation/carousel.js +++ /dev/null @@ -1,230 +0,0 @@ -/*global window, define, Event, console, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/** - * #Animation carousel - * - * carousel is animation type of ViewSwitcher - * - * @class ns.widet.core.ViewSwitcher.animation.carousel - * @extends ns.widget.core.ViewSwitcher.animation.interface - * @author Hyeoncheol Choi <hc7.choi@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../animation", - "./interface", - "../../viewswitcher", - "../../../../util/object", - "../../../../util/DOM/css" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var object = ns.util.object, - utilDOM = ns.util.DOM, - animation = ns.widget.core.viewswitcher.animation, - animationInterface = animation.interface, - DEFAULT = { - PERSPECTIVE: 280, - ZINDEX_TOP: 3, - ZINDEX_MIDDLE: 2, - ZINDEX_BOTTOM: 1, - DIM_LEVEL: 6 - }, - options = { - useDim: true, - dimLevel: DEFAULT.DIM_LEVEL - }, - classes = { - CAROUSEL: "ui-view-carousel", - CAROUSEL_ACTIVE: "ui-view-carousel-active", - CAROUSEL_LEFT: "ui-view-carousel-left", - CAROUSEL_RIGHT: "ui-view-carousel-right", - CAROUSEL_DIM: "ui-view-carousel-dim" - }; - - function translate(element, x, y, z, duration) { - if (duration) { - utilDOM.setPrefixedStyle(element, "transition", utilDOM.getPrefixedValue("transform " + duration / 1000 + "s ease-out")); - } - - utilDOM.setPrefixedStyle(element, "transform", "translate3d(" + x + "px, " + y + "px, " + z + "px)"); - } - - function resetStyle(element) { - element.style.left = ""; - element.style.right = ""; - element.style.zIndex = DEFAULT.ZINDEX_MIDDLE; - element.style.transform = "translateZ(" + -element.parentNode.offsetWidth / 2 + "px)"; - element.style.webkitTransform = "translateZ(" + -element.parentNode.offsetWidth / 2 + "px)"; - } - - animation.carousel = object.merge({}, animationInterface, { - /** - * Init views position - * @method initPosition - * @param views array - * @param active index - * @static - * @member ns.widget.core.ViewSwitcher.animation.interface - */ - initPosition: function (views, index) { - var viewSwitcher = views[0].parentNode, - vsOffsetWidth = viewSwitcher.offsetWidth, - dimElement, - i, len; - - viewSwitcher.classList.add(classes.CAROUSEL); - viewSwitcher.style.webkitPerspective = DEFAULT.PERSPECTIVE; - if (options.useDim) { - len = views.length; - for (i = 0; i < len; i++) { - dimElement = document.createElement("DIV"); - dimElement.classList.add(classes.CAROUSEL_DIM); - views[i].appendChild(dimElement); - } - } - views[index].classList.add(classes.CAROUSEL_ACTIVE); - if (index > 0) { - views[index - 1].classList.add(classes.CAROUSEL_LEFT); - views[index - 1].style.transform = "translateZ(" + -vsOffsetWidth / 2 + "px)"; - } - if (index < views.length - 1) { - views[index + 1].classList.add(classes.CAROUSEL_RIGHT); - views[index + 1].style.transform = "translateZ(" + -vsOffsetWidth / 2 + "px)"; - } - }, - /** - * Animate views - * @method animate - * @param views array - * @param active index - * @param position [0 - 100 or -100 - 0] - * @static - * @member ns.widget.core.ViewSwitcher.animation.interface - */ - animate: function (views, index, position) { - var viewSwitcher = views[0].parentNode, - vsWidth = viewSwitcher.offsetWidth, - vsHalfWidth = vsWidth / 2, - left = index > 0 ? views[index - 1] : undefined, - right = index < views.length - 1 ? views[index + 1] : undefined, - active = views[index], - ex = position / 100 * vsWidth, - halfEx = ex / 2, - centerPosition = (vsHalfWidth - active.offsetWidth / 2), - adjPosition = (centerPosition/ (vsHalfWidth * 0.6)), - absEx = Math.abs(ex), - absPosition = Math.abs(position), - mark = position < 0 ? 1 : -1, - edge = vsHalfWidth * 0.2 * mark, - // edgeDeltaX -> -mark * (2 * (0.8 * vsHalfWidth)) - halfEx - edgeDeltaX = -mark * 1.6 * vsHalfWidth - halfEx, - minusDeltaX = -vsHalfWidth - halfEx, - plusDeltaX = -vsHalfWidth + halfEx, - hidingDeltaX = -halfEx * 0.2, - prev, next, beforePrev, afterNext; - - active.style.left = (vsWidth - active.offsetWidth) / 2 + "px"; - active.style.zIndex = DEFAULT.ZINDEX_TOP; - - next = ex < 0 ? right : left; - afterNext = ex < 0 ? (next && next.nextElementSibling) : (next && next.previousElementSibling); - prev = ex < 0 ? left : right; - beforePrev = ex < 0 ? (prev && prev.previousElementSibling) : (prev && prev.nextElementSibling); - - if (next) { - if (absEx < vsWidth * 0.2) { - next.style.zIndex = DEFAULT.ZINDEX_MIDDLE; - translate(next, -halfEx * adjPosition, 0, ex < 0 ? minusDeltaX : plusDeltaX); - } else { - active.style.zIndex = DEFAULT.ZINDEX_MIDDLE; - next.style.zIndex = DEFAULT.ZINDEX_TOP; - translate(next, (2 * edge + halfEx) * adjPosition, 0, ex < 0 ? minusDeltaX : plusDeltaX); - } - if (afterNext) { - afterNext.classList.add(ex < 0 ? classes.CAROUSEL_RIGHT : classes.CAROUSEL_LEFT); - translate(afterNext, (ex < 0 ? minusDeltaX : -plusDeltaX) * 0.6, 0, -vsWidth - halfEx * mark); - } - } - if (prev) { - if (beforePrev) { - beforePrev.classList.remove(ex < 0 ? classes.CAROUSEL_LEFT : classes.CAROUSEL_RIGHT); - } - prev.style.zIndex = DEFAULT.ZINDEX_BOTTOM; - translate(prev, hidingDeltaX, 0, ex < 0 ? plusDeltaX : minusDeltaX); - } - if (absEx < vsWidth * 0.8) { - translate(active, halfEx * adjPosition, 0, halfEx * mark); - } else { - translate(active, edgeDeltaX * adjPosition, 0, halfEx * mark); - } - if (options.useDim) { - active.querySelector("." + classes.CAROUSEL_DIM).style.opacity = absPosition * options.dimLevel / 1000; - if (next) { - next.querySelector("." + classes.CAROUSEL_DIM).style.opacity = options.dimLevel / 10 * (1 - absPosition / 100); - } - } - }, - /** - * Reset views position - * @method resetPosition - * @param views array - * @param active index - * @static - * @member ns.widget.core.ViewSwitcher.animation.interface - */ - resetPosition: function (views, index) { - var viewSwitcher = views[0].parentNode, - active = views[index], - rightElements = viewSwitcher.querySelectorAll("." + classes.CAROUSEL_RIGHT), - leftElements = viewSwitcher.querySelectorAll("." + classes.CAROUSEL_LEFT), - i, len; - - viewSwitcher.querySelector("." + classes.CAROUSEL_ACTIVE).classList.remove(classes.CAROUSEL_ACTIVE); - active.classList.add(classes.CAROUSEL_ACTIVE); - active.style.transform = ""; - active.style.webkitTransform = ""; - len = rightElements.length; - for (i = 0; i < len; i++) { - rightElements[i].classList.remove(classes.CAROUSEL_RIGHT); - } - if (index < views.length - 1) { - views[index + 1].classList.add(classes.CAROUSEL_RIGHT); - resetStyle(views[index + 1]); - } - len = leftElements.length; - for (i = 0; i < len; i++) { - leftElements[i].classList.remove(classes.CAROUSEL_LEFT); - } - if (index > 0) { - views[index - 1].classList.add(classes.CAROUSEL_LEFT); - resetStyle(views[index - 1]); - } - } - }); - - animation.carousel.options = options; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/widget/core/viewswitcher/animation/interface.js b/tau/src/js/core/widget/core/viewswitcher/animation/interface.js deleted file mode 100644 index d591f4c6..00000000 --- a/tau/src/js/core/widget/core/viewswitcher/animation/interface.js +++ /dev/null @@ -1,70 +0,0 @@ -/*global window, define, Event, console, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/** - * #Animation Interface - * Interface for animation for used viewswitcher - * @class ns.widget.core.viewswitcher.animation.interface - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../animation" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - ns.widget.core.viewswitcher.animation.interface = { - /** - * Init views position - * @method initPosition - * @param views array - * @param active index - * @static - * @member ns.widget.core.viewswitcher.animation.interface - */ - initPosition: function (/* views array, active index */) { - }, - /** - * Animate views - * @method animate - * @param views array - * @param active index - * @param position - * @static - * @member ns.widget.core.viewswitcher.animation.interface - */ - animate: function (/* views array, active index, position */) { - }, - /** - * Reset views position - * @method resetPosition - * @param views array - * @param active index - * @static - * @member ns.widget.core.viewswitcher.animation.interface - */ - resetPosition: function (/* views array, active index */) { - } - }; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/jqm/all.js b/tau/src/js/jqm/all.js index 80ff68a6..da55f87b 100644 --- a/tau/src/js/jqm/all.js +++ b/tau/src/js/jqm/all.js @@ -1,5 +1,5 @@ /*global define */ -/* +/* * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. * License : MIT License V2 */ diff --git a/tau/src/js/jqm/engine.js b/tau/src/js/jqm/engine.js index 3b212bd1..6c152f87 100644 --- a/tau/src/js/jqm/engine.js +++ b/tau/src/js/jqm/engine.js @@ -1,6 +1,6 @@ /*global window, define, console */ /*jslint plusplus: true, nomen: true */ -/* +/* * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. * License : MIT License V2 */ @@ -21,8 +21,7 @@ "../core/util/object", "../core/event", "../core/util/zoom", - "../core/util/load", - "../core/frameworkData" + "../core/util/load" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -115,9 +114,9 @@ nsNormalizeDict[prop] = nsNormalizeDict[prop] || $.camelCase($.mobile.ns + prop); return nsNormalizeDict[prop]; }, - activeBtnClass : ns.widget.core.Button.classes.uiBtnActive, + activeBtnClass : ns.widget.mobile.Button.classes.uiBtnActive, activePageClass : ns.widget.mobile.Page.classes.uiPageActive, - focusClass : ns.widget.core.Button.classes.uiFocus, + focusClass : ns.widget.mobile.Button.classes.uiFocus, version: "1.2.0", getAttrFixed: function (element, key) { var value = element.getAttribute(key); @@ -382,18 +381,17 @@ */ document.addEventListener(ns.engine.eventType.WIDGET_BOUND, function (event) { var originalEvent = event.originalEvent || event, - widget = originalEvent.detail, - widgetName = widget && widget.widgetName; - widgetName = widgetName && widgetName.toLowerCase(); - if (widgetName && widget.element) { + widget = originalEvent.detail; + if (widget && widget.element && widget.widgetName) { try { //>>excludeStart("tauDebug", pragmas.tauDebug); - ns.log("Running jqm constructor for " + widgetName); + ns.log("Running jqm constructor for " + widget.wigdetName); //>>excludeEnd("tauDebug"); + $(widget.element)[widget.widgetName](); } catch(e) { // suppress errors in not debug mode //>>excludeStart("tauDebug", pragmas.tauDebug); - ns.warning("could not call jqm constructor for " + widgetName, widget, e); + ns.warning("could not call jqm constructor for " + widget.widgetName, widget, e); //>>excludeEnd("tauDebug"); } diff --git a/tau/src/js/jqm/router.js b/tau/src/js/jqm/router.js index 250f80d3..26d31733 100644 --- a/tau/src/js/jqm/router.js +++ b/tau/src/js/jqm/router.js @@ -1,6 +1,6 @@ /*global window, define, HTMLElement */ /*jslint plusplus: true, nomen: true */ -/* +/* * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. * License : MIT License V2 */ @@ -16,6 +16,7 @@ [ "../core/engine", "../core/util/path", + "../profile/mobile/router/urlHistory", "./namespace" ], function () { @@ -41,8 +42,9 @@ if (!container instanceof HTMLElement) { container = document.body; } - ns.setConfig('pageContainer', container); + ns.setConfig('container', container); $.mobile.pageContainer = $(container); + router.setContainer(container); } if ($.mobile.autoInitializePage !== undefined) { ns.setConfig('autoInitializePage', $.mobile.autoInitializePage); @@ -58,15 +60,11 @@ } return router.open(toPage, options); }; - document.addEventListener('pagechange', function () { - var route = router.getRoute("page"), - activePage = route && route.getActive(), - target = activePage && activePage.element; - $.mobile.activePage = $(target); + document.addEventListener('pageshow', function (ev) { + $.mobile.activePage = $(ev.target); }, true); - $.mobile.activePage = $(); $.mobile.firstPage = $(router.getFirstPage()); - $.mobile.pageContainer = $(); + $.mobile.pageContainer = $(router.getContainer()); $.mobile.subPageUrlKey = ns.widget.mobile.Page.classes.uiPage; $.mobile.ajaxEnabled = true; $.mobile.hashListeningEnabled = true; @@ -88,7 +86,7 @@ $.mobile.transitionFallbacks = {}; $.mobile._maybeDegradeTransition = null; $.mobile.focusPage = null; - //$.mobile.urlHistory = ns.router.urlHistory; + $.mobile.urlHistory = ns.router.urlHistory; $.mobile.dialogHashKey = "&ui-state=dialog"; $.mobile.allowCrossDomainPages = false; $.mobile.getDocumentUrl = ns.util.path.getDocumentUrl; @@ -112,8 +110,7 @@ var transitions, name, container, - router = engine.getRouter(), - containerWidget; + router = engine.getRouter(); if ($) { $.mobile.defaultPageTransition = "none"; @@ -140,12 +137,10 @@ pageWidget.focus(); }; + $.mobile._bindPageRemove = $.mobile._bindPageRemove || router._bindPageRemove.bind(router); $.mobile.initializePage = router.init.bind(router); container = router.getContainer(); - containerWidget = router.getContainer(); - if (containerWidget) { - $.mobile.pageContainer = $(containerWidget.element); - } + $.mobile.pageContainer = $(container); } } }; diff --git a/tau/src/js/jqm/widget.js b/tau/src/js/jqm/widget.js index fd7cdb97..4b1dd496 100644 --- a/tau/src/js/jqm/widget.js +++ b/tau/src/js/jqm/widget.js @@ -1,6 +1,6 @@ /*global window, define */ /*jslint plusplus: true, nomen: true */ -/* +/* * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. * License : MIT License V2 */ @@ -99,132 +99,118 @@ */ methods = definition.methods; - $.fn[name] = widgetConstructor(engine, name, methods, definition.name); - if (definition.namespace) { - $[definition.namespace] = $[definition.namespace] || {}; - $[definition.namespace][definition.name.toLowerCase()] = definition.widgetClass; - } - definition = null; - } - }; - - - function widgetConstructor(engine, name, methods, instanceWidgetName) { - /* - * widget instance - * type Object - */ - var instance = null; - return function () { - /* - * function arguments - * type Array - */ - var args = slice.call(arguments), - /* - * element of jQuery collection - * type HTMLElement - */ - element, - /* - * is built? - * type Boolean - */ - built, - /* - * name of method - * type string - */ - method, - /* - * result value - * type mixed - */ - resultValue, - /* - * first argument of function - * type mixed - */ - firstarg, - i, - options = {}, - argsLength, - argument; + $.fn[name] = (function ($, engine, name, bindingNamespace, methods) { + /* + * widget instance + * type Object + */ + var instance = null; + return function () { + /* + * function arguments + * type Array + */ + var args = slice.call(arguments), + /* + * element of jQuery collection + * type HTMLElement + */ + element, + /* + * is built? + * type Boolean + */ + built, + /* + * name of method + * type string + */ + method, + /* + * result value + * type mixed + */ + resultValue, + /* + * first argument of function + * type mixed + */ + firstarg, + i, + options = {}, + instanceWidgetName = definition.name; - /* - * NOTE: - * The loop below contains some fixes/hacks for TizenSlider, Listview with FastScroll and AutoDividers - * and also Popup, please be aware while refactoring. - */ - for (i = 0; i < this.length; i++) { - element = this.get(i); - switch(name){ - case "slider": - instance = engine.getBinding(element, "Slider") || engine.getBinding(element, "TizenSlider"); - break; - default: - instance = engine.getBinding(element, instanceWidgetName); - } + /* + * NOTE: + * The loop below contains some fixes/hacks for TizenSlider, Listview with FastScroll and AutoDividers + * and also Popup, please be aware while refactoring. + */ + for (i = 0; i < this.length; i++) { + element = this.get(i); + switch(name){ + // FastScroll has not real instance defined because it's build as an extension + case "fastscroll": + instance = engine.getBinding(element, "Listview"); + break; + case "slider": + instance = engine.getBinding(element, "Slider") || engine.getBinding(element, "TizenSlider"); + break; + default: + instance = engine.getBinding(element, instanceWidgetName); + } - built = instance && instance.isBuilt(); - firstarg = args.shift(); - if (firstarg === undefined || typeof firstarg === 'object') { - if (typeof firstarg === 'object') { - options = firstarg; - } - if (!instance || !built) { - engine.instanceWidget(element, instanceWidgetName, options); - } else { - instance.configure(null, element, options); - } - } else { - if (instance === null) { - return this; - } - method = firstarg; - if (method === "destroy") { - instance.destroy(); - return this; - } - if (methods.indexOf(method) < 0) { - throw "Method " + method + " does not exist!"; - } - if (name === 'listview' && - method === 'option' && - args[0] === "autodividersSelector" && - typeof args[1] === 'function') { - // wrap first argument of callback method in JQuery object - args[1] = wrapFn(args[1]); - } - if (name === "popup" && method === "open") { - // window.event is used because in Winset we open context popup by - // $("#pop_text_only").popup("open") after clicking on input - args[1] = window.event; - } - // transform jQuery arguments to HTMLElement - argsLength = args.length; - for (i = 0; i < argsLength; i++) { - argument = args[i]; - if (argument instanceof jQuery) { - // convert jQuery object to array of HTMLElement - argument = argument.makeArray(); - // if we have only one element we take only first element - if (argument.length === 1) { - argument = argument[0]; + built = instance && instance.isBuilt(); + firstarg = args.shift(); + if (firstarg === undefined || typeof firstarg === 'object') { + if (typeof firstarg === 'object') { + options = firstarg; + } + if (!instance || !built) { + engine.instanceWidget(element, definition.name, options); + } else { + instance.configure(null, element, options); + } + } else { + if (instance === null) { + return this; + } + method = firstarg; + if (method === "destroy") { + instance.destroy(); + return this; + } + if (methods.indexOf(method) < 0) { + throw "Method " + method + " does not exist!"; + } + if (name === 'listview' && + method === 'option' && + args[0] === "autodividersSelector" && + typeof args[1] === 'function') { + // wrap first argument of callback method in JQuery object + args[1] = wrapFn(args[1]); + } + if (name === "popup" && method === "open") { + // window.event is used because in Winset we open context popup by + // $("#pop_text_only").popup("open") after clicking on input + args[1] = window.event; + } + resultValue = instance[method].apply(instance, args); + if (resultValue !== undefined) { + if (resultValue !== instance) { + return resultValue; + } + } } } - } - resultValue = instance[method].apply(instance, args); - if (resultValue !== undefined) { - if (resultValue !== instance) { - return resultValue; - } - } + return this; + }; + }($, engine, name, definition.binding, methods)); + if (definition.namespace) { + $[definition.namespace] = $[definition.namespace] || {}; + $[definition.namespace][definition.name.toLowerCase()] = definition.widgetClass; } } - return this; }; - } document.addEventListener(engine.eventType.WIDGET_DEFINED, function (evt) { jqmWidget.init(engine, evt.detail); diff --git a/tau/src/js/mobile.js b/tau/src/js/mobile.js index 9bce1f79..bed6391d 100644 --- a/tau/src/js/mobile.js +++ b/tau/src/js/mobile.js @@ -1,4 +1,4 @@ -/*global define, ns */ +/*global define */ /** * #Tizen Advanced UI Framework * @@ -30,25 +30,20 @@ * @title Tizen Advanced UI Framework */ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); -(function (ns) { +(function () { "use strict"; define( [ "require", - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - "./tools/performance", - //>>excludeEnd("tauPerformance") "./core/core", "./core/config", "./profile/mobile/config", "./core/support", - "./core/info", "./jqm/all", "./core/engine", "./core/frameworkData", "./core/theme", "./core/theme/ThemeCommon", - "./core/util/anchorHighlight", "./core/util/grid", "./core/util/data", "./core/util/array", @@ -72,16 +67,14 @@ "./core/event/orientationchange", "./core/event/touch", // widget list - "./core/widget/core/Checkboxradio", - "./core/widget/core/Button", "./profile/mobile/widget/mobile/Page", - "./profile/mobile/widget/mobile/PageContainer", - "./profile/mobile/widget/mobile/Popup", "./profile/mobile/widget/mobile/Scrollview", "./profile/mobile/widget/mobile/Circularview", "./profile/mobile/widget/mobile/Collapsibleset", "./profile/mobile/widget/mobile/Collapsible", + "./profile/mobile/widget/mobile/Button", "./profile/mobile/widget/mobile/Dialog", + "./profile/mobile/widget/mobile/Checkboxradio", "./profile/mobile/widget/mobile/Listview", "./profile/mobile/widget/mobile/Listdivider", "./profile/mobile/widget/mobile/ListviewAutodivider", @@ -92,12 +85,14 @@ "./profile/mobile/widget/mobile/Fieldcontain", "./profile/mobile/widget/mobile/Controlgroup", "./profile/mobile/widget/mobile/Textinput", + "./profile/mobile/widget/mobile/Popup", "./profile/mobile/widget/mobile/Datetimepicker", "./profile/mobile/widget/mobile/Slider", "./profile/mobile/widget/mobile/Swipe", "./profile/mobile/widget/mobile/SelectMenu", "./profile/mobile/widget/mobile/SearchBar", "./profile/mobile/widget/mobile/Progress", + "./profile/mobile/widget/mobile/Navbar", "./profile/mobile/widget/mobile/MultimediaView", "./profile/mobile/widget/mobile/Progressbar", "./profile/mobile/widget/mobile/Tokentextarea", @@ -107,26 +102,14 @@ "./profile/mobile/widget/mobile/VirtualGrid", "./profile/mobile/widget/mobile/Loader", "./profile/mobile/widget/mobile/TizenSlider", + "./profile/mobile/widget/mobile/SplitView", "./profile/mobile/widget/mobile/ScrollHandler", "./profile/mobile/widget/mobile/Drawer", "./profile/mobile/widget/mobile/ToggleSwitch", "./profile/mobile/widget/mobile/Navigation", - "./profile/mobile/widget/mobile/IndexScrollbar", "./profile/mobile/expose", // default theme "../css/profile/mobile/changeable/theme-changeable/theme", - // router modules - "./core/router/Router", - "./core/router/route/page", - "./core/router/route/popup", - "./core/router/route/drawer", - "./profile/mobile/router/route/dialog", - "./core/router/history", - "./profile/wearable/expose", - "./core/widget/core/Box", - "./core/layout/float", - "./core/layout/linear", - "./core/layout/relative", // Modules to be loaded after "./core/init", //documentation pages @@ -136,10 +119,8 @@ "./profile/mobile/page/pageevents" ], function () { - //>>excludeEnd("tauBuildExclude"); - ns.info.profile = "mobile"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + return; } ); -}(ns)); +}()); //>>excludeEnd("tauBuildExclude"); diff --git a/tau/src/js/profile/mobile/config.js b/tau/src/js/profile/mobile/config.js index 165b9ec9..c07465bc 100644 --- a/tau/src/js/profile/mobile/config.js +++ b/tau/src/js/profile/mobile/config.js @@ -1,19 +1,8 @@ /*global window, define*/ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /* * @author Piotr Karny <p.karny@samsung.com> */ @@ -29,9 +18,7 @@ // Default configuration properties for mobile ns.setConfig('autoBuildOnPageChange', true, true); - ns.setConfig('loader', true, true); - ns.setConfig('pageContainerBody', true, true); - ns.setConfig('popupTransition', 'slideup'); + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); } ); diff --git a/tau/src/js/profile/mobile/expose.js b/tau/src/js/profile/mobile/expose.js index dd50a681..62f36ed0 100644 --- a/tau/src/js/profile/mobile/expose.js +++ b/tau/src/js/profile/mobile/expose.js @@ -9,7 +9,9 @@ "../../core/engine", "../../core/util/object", "./widget/mobile/Loader", - "../../core/router/Router" + "./router/Page", + "./router/PageExternal", + "./router/PageTransition" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -62,24 +64,11 @@ */ ns.closePopup = function () { var activePopup = ns.activePopup; - if (activePopup) { + if(activePopup) { activePopup.close(); } }; - /** - * Returns active page element - * @inheritdoc ns.router.Router#getActivePageElement - * @method getActivePage - * @member tau - */ - ns.getActivePage = function() { - if (router) { - return router.getActivePageElement(); - } - return null; - }; - document.addEventListener("routerinit", function () { router = engine.getRouter(); }, true); diff --git a/tau/src/js/profile/mobile/page/change.js b/tau/src/js/profile/mobile/page/change.js index 85b05967..e97af164 100644 --- a/tau/src/js/profile/mobile/page/change.js +++ b/tau/src/js/profile/mobile/page/change.js @@ -1,18 +1,7 @@ /*global window, define*/ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Changing Pages diff --git a/tau/src/js/profile/mobile/page/layout.js b/tau/src/js/profile/mobile/page/layout.js index 051fa2c4..7a9917e7 100644 --- a/tau/src/js/profile/mobile/page/layout.js +++ b/tau/src/js/profile/mobile/page/layout.js @@ -1,18 +1,7 @@ /*global window, define*/ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Application Page Layout diff --git a/tau/src/js/profile/mobile/page/multipage.js b/tau/src/js/profile/mobile/page/multipage.js index 24b11a11..1458e4f7 100644 --- a/tau/src/js/profile/mobile/page/multipage.js +++ b/tau/src/js/profile/mobile/page/multipage.js @@ -1,18 +1,7 @@ /*global window, define*/ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Multi-page Layout diff --git a/tau/src/js/profile/mobile/page/pageevents.js b/tau/src/js/profile/mobile/page/pageevents.js index 5c4829cc..8480671e 100644 --- a/tau/src/js/profile/mobile/page/pageevents.js +++ b/tau/src/js/profile/mobile/page/pageevents.js @@ -1,18 +1,7 @@ /*global window, define*/ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Handling Page Events and Methods diff --git a/tau/src/js/profile/mobile/router/Page.js b/tau/src/js/profile/mobile/router/Page.js new file mode 100644 index 00000000..5544e4ad --- /dev/null +++ b/tau/src/js/profile/mobile/router/Page.js @@ -0,0 +1,708 @@ +/*jslint plusplus: true, nomen: true */ +/*global window, define, ns, HTMLElement */ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ +/** + * #Mobile Router + * Class is responsible for change pages in applications. + * @class ns.router.Page + * @author Maciej Urbanski <m.urbanski@samsung.com> + * @author Grzegorz Osimowicz <g.osimowicz@samsung.com> + * @author Piotr Karny <p.karny@samsung.com> + * @author Krzysztof Antoszek <k.antoszek@samsung.com> + * @author Jadwiga Sosnowska <j.sosnowska@samsung.com> + * @author Damian Osipiuk <d.osipiuk@samsung.com> + * @author Krzysztof Glodowski <k.glodowski@samsung.com> + */ +(function (window, document, ns) { + "use strict"; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + define( + [ + "../../../core/engine", + "../../../core/router", // fetch namespace + "../../../core/event", + "../../../core/util/DOM/attributes", + "../../../core/util/DOM/manipulation", + "../../../core/util/selectors", + "../../../core/util/path", + "../../../core/util/object", + "../../../core/util/deferred", + "../widget/mobile/Page", + "./urlHistory" + ], + function () { + //>>excludeEnd("tauBuildExclude"); + var eventUtils = ns.event, + DOM = ns.util.DOM, + selectors = ns.util.selectors, + object = ns.util.object, + path = ns.util.path, + Deferred = ns.util.deferred, + engine = ns.engine, + body = document.body, + pageDefinition = engine.getWidgetDefinition("Page"), + RouterPage = function () { + var self = this; + self.activePage = null; + self.firstPage = null; + self.container = null; + self.lastClickedLink = null; + self.settings = {}; + self.navreadyDeferred = new Deferred(); + self.navreadyDeferred.done(function () { + self.bindEvents(); + }); + }; + + /** + * Default router settings + * @property {object} + * @property {undefined} [transition=undefined] + * @property {boolean} [reverse=false] + * @property {boolean} [changeHash=true] + * @property {boolean} [fromHashChange=false] + * @property {undefined} [role=undefined] + * @property {undefined} [duplicateCachedPage=undefined] + * @property {boolean} [showLoadMsg=true] + * @property {undefined} [dataUrl=undefined] + * @property {undefined} [fromPage=undefined] + * @property {boolean} [allowSamePageTransition=false] + * @member ns.router.Page + * @static + * @readonly + */ + RouterPage.defaults = { + transition: undefined, //@TODO all the "undefined" declarations should be + //removed + reverse: false, + changeHash: true, + fromHashChange: false, + role: undefined, // By default we rely on the role defined by the @data-role + //attribute. + duplicateCachedPage: undefined, + container: ns.getConfig("container") || body, + showLoadMsg: true, //loading message shows by default when pages are being + // fetched during changePage + dataUrl: undefined, + fromPage: undefined, + allowSamePageTransition: false + }; + + /** + * Event definitions + * @property {Object} + * @property {string} [PAGE_CREATE="pagecreate"] Fired when page is created + * @property {string} [PAGE_INIT="pageinit"] Fired when page is initialized + * @property {string} [PAGE_BEFORE_LOAD="pagebeforeload"] Fired before page is + * loaded + * @property {string} [PAGE_LOAD="pageload"] Fired after page is loaded + * @property {string} [PAGE_LOAD_FAILED="pageloadfailed"] Fired on page load + * error + * @property {string} [PAGE_BEFORE_HIDE="pagebeforehide"] Fired before page is + * hidden + * @property {string} [PAGE_HIDE="pagehide"] Fired after page is hidden + * @property {string} [PAGE_BEFORE_SHOW="pagebeforeshow"] Fired before page is + * shown + * @property {string} [PAGE_SHOW="pageshow"] Fired after page is shown + * @property {string} [PAGE_BEFORE_CHANGE="pagebeforechange"] Fired before page + * change operation + * @property {string} [PAGE_CHANGE="pagachange"] Fired after page is changed + * @property {string} [PAGE_CHANGE_FAILED="pagechangefailed"] Fired on error + * when changing pages + * @property {string} [PAGE_REMOVE="pageremove"] Fired on page removal + * @property {string} [WIDGET_BOUND="widgetbound"] Fired when a DOM element has + * been bound to widget instance + * @property {string} [POP_STATE="popstate"] Fired on history change + * @property {string} [CLICK="click"] Fired on document click + * @property {string} [SUBMIT="submit"] Fired on form submit + * @member ns.router.Page + * @static + * @readonly + */ + RouterPage.events = { + PAGE_CREATE : "pagecreate", + PAGE_INIT : "pageinit", + PAGE_BEFORE_LOAD : "pagebeforeload", + PAGE_LOAD : "pageload", + PAGE_LOAD_FAILED : "pageloadfailed", + PAGE_BEFORE_HIDE : "pagebeforehide", + PAGE_HIDE : "pagehide", + PAGE_BEFORE_SHOW : "pagebeforeshow", + PAGE_SHOW : "pageshow", + PAGE_BEFORE_CHANGE : "pagebeforechange", + PAGE_CHANGE : "pagechange", + PAGE_CHANGE_FAILED : "pagechangefailed", + PAGE_REMOVE : "pageremove", + HASH_CHANGE : "hashchange", + WIDGET_BOUND : "widgetbound", + POP_STATE : "popstate", + CLICK : "click", + SUBMIT : "submit" + }; + + /** + * Before page change event handler + * @param {ns.router.Page} router + * @param {Event} event + * @member ns.router.Page + * @method pagebeforechangeHandler + * @private + * @static + */ + function pagebeforechangeHandler(router, event) { + var linkId, + linkElement, + popup = event.detail.toPage, + popupWidget; + + if (popup && selectors.matchesSelector(popup, '[data-role="popup"],.ui-popup')) { + linkElement = router.lastClickedLink; + linkId = linkElement.id; + if (ns.activePopup) { + ns.activePopup.close(); + } + popupWidget = engine.getBinding(popup); + popupWidget.open({ + link: linkId, + positionTo: linkElement ? DOM.getNSData(linkElement, "position-to") : + null, + transition: linkElement ? DOM.getNSData(linkElement, "transition") : + null + }, event); + event.preventDefault(); + } + } + + /** + * Handler for link clicks + * @param {ns.router.Page} router + * @param {Event} event + * @member ns.router.Page + * @method linkClickHandler + * @private + * @static + */ + function linkClickHandler(router, event) { + var link = selectors.getClosestByTag(event.target, "a"), + linkHref = link ? link.getAttribute("href") : null, + element, + isHash = linkHref && (linkHref.charAt(0) === "#"), + options = {}, + useDefaultUrlHandling = false, + inputInsideLink, + inputInsideLinkLength, + i; + + router.lastClickedLink = null; + if (link) { + useDefaultUrlHandling = (link.getAttribute("rel") === "external") + || link.hasAttribute("target") + || (linkHref ? linkHref.search(/^https?\:\/\//g) !== -1 : false); + if (!useDefaultUrlHandling) { + event.preventDefault(); + options.transition = DOM.getNSData(link, "transition"); + options.reverse = (DOM.getNSData(link, "direction") === "reverse"); + // Only swiching pages + if (isHash) { + element = document.getElementById(linkHref.substr(1)); + if (element) { + router.lastClickedLink = link; + router.open(element); + } + } else if (linkHref) { + // Open link only if it exists + router.open(linkHref, options); + } + + //IMPORTANT / DEPRECIATED This following if statement + //should be removed as soon + //as we will stop to support controls tags like inputs + //inside anchors, which is against W3C standards + inputInsideLink = link.getElementsByClassName("ui-slider-switch-input"); + if (inputInsideLink) { + inputInsideLinkLength = inputInsideLink.length; + for (i = 0; i < inputInsideLinkLength; i++) { + inputInsideLink[i].checked = !inputInsideLink[i].checked; + eventUtils.trigger(inputInsideLink[i], "change"); + } + } + } + } + } + + /** + * Handler for form submitions + * @param {ns.router.Page} router + * @param {Event} event + * @member ns.router.Page + * @method submitHandler + * @private + * @static + */ + function submitHandler(router, event) { + var form = selectors.getClosestByTag(event.target, "form"), + elements = form.elements, + length = elements.length, + options = { + data: {}, + type: form.method, + transition: DOM.getNSData(form, "transition"), + reverse: DOM.getNSData(form, "direction") === "reverse" + //TODO Handle other options? + }, + url = form.action || form.baseURI, + i; + + eventUtils.preventDefault(event); + + for (i = 0; i < length; i++) { + options.data[elements[i].name] = elements[i].value; + } + + router.open(url, options); + return false; + } + + /** + * History change handler + * @param {ns.router.Page} router + * @param {Event} event + * @member ns.router.Page + * @method popStateHandler + * @private + * @static + */ + function popStateHandler(router, event) { + var eventState = event.state, + toPageId = (eventState && eventState.pageId) || window.location.hash + .substr(1), + toPage = document.getElementById(toPageId), + settings = router.settings; + + if (toPage) { + settings.reverse = true; + settings.fromPage = settings.fromPage || router.activePage; + settings.toPage = toPage; + if (toPage && DOM.getNSData(toPage, "role") === "page" + && settings.fromPage !== toPage) { + router.setActivePage(toPage); + } + settings.fromPage = null; + settings.toPage = null; + } else { + if (eventState && eventState.url) { + router.open(eventState.url.trim(), {}); + } + } + } + + /** + * URI Hash change handler + * @param {string} hash + * @member ns.router.Page + * @method _hashChangeHandler + * @protected + */ + RouterPage.prototype._hashChangeHandler = function (hash) { + var router = this, + toPageId = path.stripHash(hash), + toPage = document.getElementById(toPageId), + settings = router.settings; + + if (toPage) { + settings.fromPage = settings.fromPage || router.activePage; + settings.toPage = toPage; + if (DOM.getNSData(toPage, "role") === "page" + && settings.fromPage !== toPage) { + router.setActivePage(toPage); + } + settings.fromPage = null; + settings.toPage = null; + } + }; + + /** + * Returns loader widget + * @return {ns.widget.mobile.Loader} + * @member ns.router.Page + * @method getLoader + */ + RouterPage.prototype.getLoader = function () { + var loaderElement = document.querySelector("[data-role=loader],.ui-loader"); + + if (!loaderElement) { + loaderElement = document.createElement("div"); + DOM.setNSData(loaderElement, "role", "loader"); + } + + return engine.instanceWidget(loaderElement, "Loader"); + }; + + /** + * Sets focus on given page + * @param {ns.widget.mobile.Page} page + * @member ns.router.Page + * @method focusPage + */ + RouterPage.prototype.focusPage = function (page) { + var autofocus = page.querySelector("[autofocus]"); + if (autofocus) { + autofocus.focus(); + return; + } + page.focus(); + }; + + /** + * Handles change page finish process + * @param {HTMLElement} fromPage + * @param {HTMLElement} toPage + * @param {boolean} noEvents + * @method changePageFinish + * @member ns.router.Page + */ + RouterPage.prototype.changePageFinish = function (fromPage, toPage, noEvents) { + var events = RouterPage.events, + self = this; + self.activePage = toPage; + if (!noEvents) { + if (fromPage) { + eventUtils.trigger(fromPage, events.PAGE_HIDE); + } + eventUtils.trigger(toPage, events.PAGE_SHOW); + eventUtils.trigger(self.container, events.PAGE_CHANGE, toPage); + } + }; + + /** + * Handles change page process + * @param {Object} settings + * @param {HTMLElement} [settings.fromPage] + * @param {HTMLElement} [settings.toPage] + * @param {boolan} noEvents + * @method changePage + * @member ns.router.Page + */ + RouterPage.prototype.changePage = function (settings, noEvents) { + var fromPage = settings.fromPage, + toPage = settings.toPage, + fromPageWidget, + toPageWidget, + self = this; + //>>excludeStart("tauDebug", pragmas.tauDebug); + ns.log("Change page from", fromPage && fromPage.id, " to ", + toPage && toPage.id); + //>>excludeEnd("tauDebug"); + if (fromPage) { + fromPageWidget = engine.getBinding(fromPage); + if (fromPageWidget) { + fromPageWidget.setActive(false, self.container); + } + } + if (toPage) { + toPageWidget = engine.getBinding(toPage); + if (toPageWidget) { + toPageWidget.setActive(true, self.container); + } + } + self.changePageFinish(fromPage, toPage, noEvents); + }; + + /** + * Set active page + * @method setActivePage + * @param {HTMLElement} page HTMLElement from Page or Dialog widget + * @param {boolean} [noEvents=false] + * @static + * @member ns.router.Page + */ + RouterPage.prototype.setActivePage = function (page, noEvents) { + var self = this, + events = RouterPage.events, + // @TODO Add type for .getBinding, but NOTICE that it may be a Page or + // Dialog widget + toPageWidget = engine.getBinding(page), + callInit = true, + pageRole, + eventBound = function () { + var fromPage = self.activePage; + page.removeEventListener(events.WIDGET_BOUND, eventBound, false); + + // If autoBuild is turned off do not build widgets on newly activated + // page + if (ns.getConfig("autoBuildOnPageChange", true)) { + engine.createWidgets(page); + } + + if (!noEvents) { + if (callInit) { + eventUtils.trigger(page, events.PAGE_INIT); + } + if (fromPage) { + eventUtils.trigger(fromPage, events.PAGE_BEFORE_HIDE); + } + } + if (!noEvents) { + eventUtils.trigger(page, events.PAGE_BEFORE_SHOW); + } + self.changePage(self.settings, noEvents); + }; + + eventUtils.trigger(window, events.HASH_CHANGE, true); + //>>excludeStart("tauDebug", pragmas.tauDebug); + ns.log("Set active page ", page.id, " no events: ", noEvents); + //>>excludeEnd("tauDebug"); + if (toPageWidget && toPageWidget.isBuilt()) { + //page is ready to show, just make sure it is active + callInit = false; + eventBound(); + } else { + //add event which will make page active when enhancing is done + page.addEventListener(events.WIDGET_BOUND, eventBound, false); + //create page widget + pageRole = DOM.getNSData(page, "role"); + if (pageRole === "page") { + engine.instanceWidget(page, "Page"); + } else if (pageRole === "dialog") { + engine.instanceWidget(page, "Dialog"); + } + //engine.instanceWidget(page, "Page"); + } + }; + + /** + * Open page + * @method open + * @param {HTMLElement} toPage + * @param {Object} options + * @param {string} [options.transition] transition for opening page + * @param {boolean} [options.reverse=false] true, if transition should + * be reversed + * @static + * @member ns.router.Page + */ + RouterPage.prototype.open = function (toPage, options) { + var newHash = toPage.id ? "#" + toPage.id : "", + settings = {}, + continuation, + triggerData = { + toPage: toPage, + options: options + }, + historyState = window.history.state || {}, + historyStateUrl = historyState.url, + pageRole, + parentElement, + pageUrl, + url, + self = this; + + settings = object.merge({}, RouterPage.defaults, options); + settings.pageContainer = self.container; + + settings.toPage = toPage; + parentElement = toPage.parentNode; + while (parentElement && parentElement !== settings.pageContainer) { + parentElement = parentElement.parentNode; + } + + if (parentElement) { + self.settings = settings; + continuation = eventUtils.trigger(settings.pageContainer, + RouterPage.events.PAGE_BEFORE_CHANGE, triggerData); + + if (continuation) { + pageUrl = DOM.getNSData(toPage, "url"); + if (!pageUrl) { + DOM.setNSData(toPage, "url", "#"+toPage.id); + } + + pageUrl = DOM.getNSData(toPage, "url"); + if (toPage) { + pageRole = DOM.getNSData(toPage, "role"); + if (!pageRole) { + pageRole = toPage.classList.contains("ui-page") ? "page" : null; + if (pageRole) { // set just in case ^_^ + DOM.setNSData(toPage, "role", pageRole); + } + } + } + + if (historyStateUrl !== pageUrl) { + if (pageRole === "dialog") { + url = "#&ui-state=dialog"; + } else if ((!settings.fromSubmit) && ((historyStateUrl === undefined) + || (historyStateUrl.split("#")[0] === pageUrl.split("#")[0]))) { + url = (newHash.length > 1) ? newHash : ""; + } else if (toPage === this.firstPage) { + url = pageUrl.split("#")[0]; + } else { + url = pageUrl; + settings.fromSubmit = false; + } + window.history.pushState({pageId: toPage.id, url: pageUrl}, "", url); + } + + if (pageRole === "dialog") { + ns.router.urlHistory.addNew("#&ui-state=dialog", + DOM.getNSData(toPage, "transition"), "", pageUrl, pageRole); + } else { + ns.router.urlHistory.addNew(newHash, + DOM.getNSData(toPage, "transition"), "", pageUrl, pageRole); + } + + settings.reverse = false; + settings.fromPage = settings.fromPage || self.activePage; + settings.toPage = toPage; + + if ((pageRole === "page" || pageRole === "dialog") + && settings.fromPage !== toPage) { + self.setActivePage(toPage); + } + self.settings.fromPage = null; + self.settings.toPage = null; + } + } + }; + + /** + * Initializes router + * @param {boolean} justBuild + * @method init + * @member ns.router.Page + */ + RouterPage.prototype.init = function (justBuild) { + var page, + self = this, + container = ns.getConfig("container") || RouterPage.defaults.container || + document.body; + + RouterPage.defaults.container = container; + self.container = container; + + eventUtils.trigger(document, "themeinit", this); + + //>>excludeStart("tauDebug", pragmas.tauDebug); + ns.log("just build: " + justBuild); + //>>excludeEnd("tauDebug"); + if (justBuild) { + self.justBuild = justBuild; + engine.createWidgets(container); + } + + if (ns.getConfig("autoInitializePage", true)) { + self.firstPage = container.querySelector(pageDefinition.selector); + if (!self.firstPage) { + DOM.wrapInHTML(container.childNodes, + '<div data-role="page" id="' + ns.getUniqueId() + '"></div>'); + self.firstPage = container.children[0]; + } + + if (justBuild) { + self.settings = self.settings || {}; + self.settings.toPage = self.firstPage; + self.setActivePage(self.firstPage, true); + return; + } + + if (window.location.hash) { + //simple check to determine if we should show firstPage or other + page = document.getElementById(window.location.hash.replace("#", "")); + if (page && selectors.matchesSelector(page, pageDefinition.selector)) { + self.firstPage = page; + } + } + + container.appendChild(self.getLoader().element); + + //@todo add loader only if html is not built + //find a way to determine if html is built + //show body with loader + //htmlClassList.remove("ui-mobile-rendering"); + + self.open(self.firstPage); + self.navreadyDeferred.resolve(); + + } + }; + + /** + * Binds events to document and window + * @method bindEvents + * @member ns.router.Page + */ + RouterPage.prototype.bindEvents = function () { + var self = this, + events = RouterPage.events; + self.pagebeforechangeHandler = pagebeforechangeHandler.bind(null, self); + self.linkClickHandler = linkClickHandler.bind(null, self); + self.popStateHandler = popStateHandler.bind(null, self); + self.submitHandler = submitHandler.bind(null, self); + window.addEventListener(events.POP_STATE, self.popStateHandler, false); + document.addEventListener(events.PAGE_BEFORE_CHANGE, + self.pagebeforechangeHandler, false); + document.addEventListener(events.HASH_CHANGE, self._hashChangeHandler, + false); + document.addEventListener(events.CLICK, self.linkClickHandler, false); + document.addEventListener(events.SUBMIT, self.submitHandler, false); + }; + + /** + * Destroys router + * @method destroy + * @member ns.router.Page + */ + RouterPage.prototype.destroy = function () { + var self = this, + events = RouterPage.events; + window.removeEventListener(events.POP_STATE, self.popStateHandler, false); + document.removeEventListener(events.PAGE_BEFORE_CHANGE, + self.pagebeforechangeHandler, false); + document.removeEventListener(events.HASH_CHANGE, + self._hashChangeHandler, false); + document.removeEventListener(events.CLICK, self.linkClickHandler, false); + document.removeEventListener(events.SUBMIT, self.submitHandler, false); + }; + + /** + * Sets container for page elements + * @param {HTMLElement} element + * @method setContainer + * @member ns.router.Page + */ + RouterPage.prototype.setContainer = function (element) { + this.container = element; + }; + + /** + * Returns container for pages + * @return {HTMLElement} + * @method getContainer + * @member ns.router.Page + */ + RouterPage.prototype.getContainer = function () { + return this.container; + }; + + /** + * Returns first page + * @return {HTMLElement} + * @method getFirstPage + * @member ns.router.Page + */ + RouterPage.prototype.getFirstPage = function () { + return this.firstPage; + }; + + ns.router.Page = RouterPage; + + engine.initRouter(RouterPage); + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + return ns.router.Page; + } + ); + //>>excludeEnd("tauBuildExclude"); +}(window, window.document, ns)); diff --git a/tau/src/js/profile/mobile/router/PageExternal.js b/tau/src/js/profile/mobile/router/PageExternal.js new file mode 100644 index 00000000..4200280c --- /dev/null +++ b/tau/src/js/profile/mobile/router/PageExternal.js @@ -0,0 +1,569 @@ +/*global window, define, setTimeout, ns, clearTimeout, XMLHttpRequest, location */ +/*jslint nomen: true */ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ +/** + * #Mobile Router for External + * Class is responsible for change pages in applications when pages + * are in external files. + * @class ns.router.PageExternal + * @override ns.router.Page + * @author Maciej Urbanski <m.urbanski@samsung.com> + * @author Piotr Karny <p.karny@samsung.com>> + * @author Piotr Kusztal <p.kusztal@samsung.com> + * @author Hyunkook Cho <hk0713.cho@samsung.com> + * @author Junhyeon Lee <juneh.lee@samsung.com> + */ +(function (document, ns) { + "use strict"; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + define( + [ + "../../../core/engine", + "../../../core/router", // fetch namespace + "./Page", + "../widget/mobile/Page", + "../widget/mobile/Loader", + "../../../core/util", + "../../../core/event", + "../../../core/util/DOM/attributes", + "../../../core/util/selectors", + "../../../core/util/deferred", + "../../../core/util/path", + "../../../core/util/object" + ], + function () { + //>>excludeEnd("tauBuildExclude"); + var HIDE_PAGE_LOADING_TIMEOUT = 1500, + DOM = ns.util.DOM, + engine = ns.engine, + util = ns.util, + object = util.object, + selectors = util.selectors, + Page = ns.widget.mobile.Page, + pageDefinition = engine.getWidgetDefinition("Page"), + dialogDefinition = engine.getWidgetDefinition("Dialog"), + pageSelectorWithData = pageDefinition + .selector + .split(",") + .map( + function (value) { + return value + "[data-url]"; + } + ) + .join(","), + body = document.body, + firstPage = null, + container = ns.getConfig("container") || body, + loadPageDefaults = { + type: "get", + data: undefined, + reloadPage: false, + role: undefined, // By default we rely on the role defined by the @data-role attribute. + showLoadMsg: false, + pageContainer: container, + loadMsgDelay: 50 // This delay allows loads that pull from browser cache to occur without showing the loading message. + }, + path = util.path, + UtilsDeferred = ns.util.deferred, + events = ns.event, + //existing base tag? + base = document.getElementsByTagName("base")[0], + //tuck away the original document URL minus any fragment. + documentUrl = path.parseLocation(), + //if the document has an embedded base tag, documentBase is set to its + //initial value. If a base tag does not exist, then we default to the documentUrl. + documentBase = base ? path.parseUrl(path.makeUrlAbsolute(base.getAttribute("href"), documentUrl.href)) : documentUrl, + documentBaseDiffers = (documentUrl.hrefNoHash !== documentBase.hrefNoHash), + activeClickedLink, + slice = [].slice, + RouterPage = ns.router.Page, + pageEvents = RouterPage.events, + prototype = RouterPage.prototype, + parentOpen = prototype.open, + dialogHashKey = "&ui-state=dialog"; + + /** + * @method removeActiveLinkClass + * @param {boolean} forceRemoval + * @member ns.router.PageExternal + * @private + * @static + */ + function removeActiveLinkClass(forceRemoval) { + if (!!activeClickedLink && (!selectors.getClosestByClass(activeClickedLink, ns.getConfig("activePageClass")).length || forceRemoval)) { + activeClickedLink.classList.remove(ns.getConfig("activeBtnClass")); + } + activeClickedLink = null; + } + + /** + * @method findBaseWithDefault + * @param {ns.router.PageExternal} router + * @member ns.router.PageExternal + * @private + * @static + * @return {boolean} + */ + function findBaseWithDefault(router) { + var closestBase = (router.activePage && path.getClosestBaseUrl(router.activePage, "." + Page.classes.uiPage)); + return closestBase || documentBase.hrefNoHash; + } + + /** + * @method remove + * @param {Event} event + * @member ns.router.PageExternal + * @private + * @static + */ + function remove(event) { + var target = event.target; + target.removeEventListener(pageEvents.PAGE_HIDE, remove, false); + if (document.location.hash !== "#&ui-state=dialog") { + if (events.trigger(target, pageEvents.PAGE_REMOVE) && target.parentNode) { + target.parentNode.removeChild(target); + } + } + } + + /** + * When dom caching is not enabled or the page is embedded bind to remove the page on hide + * @method _bindPageRemove + * @param {HTMLElement} page + * @member ns.router.PageExternal + * @protected + */ + prototype._bindPageRemove = function (page) { + var pageWidget = engine.getBinding(page); + + if (!pageWidget.options.domCache && DOM.getNSData(page, "external-page")) { + page.addEventListener(pageEvents.PAGE_HIDE, remove, false); + } + }; + + /** + * Load the page from a url + * @method loadPage + * @param {string} url + * @param {Object} options + * @param {string} [options.type] connection type + * @param {Object} [options.data] additional url query parameters + * @param {boolean} [options.showLoadMsg=false] whether to show loading message + * @param {number} [options.loadMsgDelay] loading message delay in milliseconds + * @param {boolean} [options.prefetch] if true, this loading will be only a prefetch + * @member ns.router.PageExternal + */ + prototype.loadPage = function (url, options) { + var settings = {}, + + // The DOM element for the page after it has been loaded. + page = null, + + // If the reloadPage option is true, and the page is already + // in the DOM, dupCachedPage will be set to the page element + // so that it can be removed after the new version of the + // page is loaded off the network. + dupCachedPage = null, + + // The absolute version of the URL passed into the function. This + // version of the URL may contain dialog/subpage params in it. + absUrl = path.makeUrlAbsolute(url, findBaseWithDefault(this)), + triggerData, + deferred = new UtilsDeferred(), + fileUrl, + dataUrl, + loadMsgDelay, + hideMsg, + request, + connectionType, + self = this, + loader = self.getLoader(), + loaderProperties = ns.widget.mobile.Loader.properties, + firstPage = engine.getRouter().firstPage; + + settings = object.merge(loadPageDefaults, options || {}); + settings.pageContainer = this.container; + connectionType = settings.type; + // If the caller provided data, and we're using "get" request, + // append the data to the URL. + if (settings.data) { + if (connectionType === "get") { + absUrl = path.addSearchParams(absUrl, settings.data); + fileUrl = absUrl; + settings.data = undefined; + settings.fromSubmit = true; + } + + // If the caller is using a "post" request, reloadPage must be true + if (connectionType === "post") { + settings.reloadPage = true; + } + } + + // The absolute version of the URL minus any dialog/subpage params. + // In otherwords the real URL of the page to be loaded. + fileUrl = fileUrl || path.getFilePath(absUrl); + + // The version of the Url actually stored in the data-url attribute of + // the page. For embedded pages, it is just the id of the page. For pages + // within the same domain as the document base, it is the site relative + // path. For cross-domain pages (Phone Gap only) the entire absolute Url + // used to load the page. + dataUrl = path.convertUrlToDataUrl(absUrl, dialogHashKey, documentBase, documentUrl); + + // Make sure we have a pageContainer to work with. + settings.pageContainer = settings.pageContainer || ns.getConfig("pageContainer", document.body); + + // Check to see if the page already exists in the DOM. + // NOTE do _not_ use the :jqmData psuedo selector because parenthesis + // are a valid url char and it breaks on the first occurence + page = selectors.getChildrenByDataNS(settings.pageContainer, "url='" + dataUrl + "'")[0]; + + // If we failed to find the page, check to see if the url is a + // reference to an embedded page. If so, it may have been dynamically + // injected by a developer, in which case it would be lacking a data-url + // attribute and in need of enhancement. + if (!page && (dataUrl && !path.isPath(dataUrl))) { + page = document.getElementById(dataUrl); + if (page) { + // The page can be in our DOM, but its current url can be different than + // target page, so we are checking if the page uri matches desired location. + // Added for JQM Router/Page tests. + if (page.baseURI !== absUrl.split("#")[0]) { + DOM.setNSData(page, "url", absUrl); + } else { + DOM.setNSData(page, "url", dataUrl); + } + } + } + + // If we failed to find a page in the DOM, check the URL to see if it + // refers to the first page in the application. If it isn't a reference + // to the first page and refers to non-existent embedded page, error out. + if (!page) { + if (firstPage && path.isFirstPageUrl(fileUrl, documentBase, documentBaseDiffers, documentUrl)) { + // Check to make sure our cached-first-page is actually + // in the DOM. Some user deployed apps are pruning the first + // page from the DOM for various reasons, we check for this + // case here because we don't want a first-page with an id + // falling through to the non-existent embedded page error + // case. If the first-page is not in the DOM, then we let + // things fall through to the ajax loading code below so + // that it gets reloaded. + if (firstPage.parentNode) { + page = firstPage; + } + } else if (path.isEmbeddedPage(fileUrl)) { + deferred.reject(absUrl, settings); + return deferred.promise(); + } + } + + // If the page we are interested in is already in the DOM, + // and the caller did not indicate that we should force a + // reload of the file, we are done. Otherwise, track the + // existing page as a duplicated. + if (page) { + if (!settings.reloadPage) { + DOM.setNSData(page, "url", dataUrl); + parentOpen.call(this, page, settings); + deferred.resolve(absUrl, settings, page); + //if we are reloading the page make sure we update the base if its not a prefetch + + if (!settings || !settings.prefetch) { + this.setBase(absUrl.split("#")[0]); + } + return deferred.promise(); + } + engine.removeBinding(page); + dupCachedPage = page; + } + + triggerData = { url: url, absUrl: absUrl, dataUrl: dataUrl, deferred: deferred, settings: settings }; + + // Let listeners know we're about to load a page. + // If the default behavior is prevented, stop here! + if (!events.trigger(settings.pageContainer, pageEvents.PAGE_BEFORE_LOAD, triggerData)) { + return deferred.promise(); + } + + if (settings.showLoadMsg) { + // This configurable timeout allows cached pages a brief delay to load without showing a message + loadMsgDelay = setTimeout(function () { + loader.show(); + return false; + }, settings.loadMsgDelay); + + // Shared logic for clearing timeout and removing message. + hideMsg = function () { + // Stop message show timer + clearTimeout(loadMsgDelay); + // Hide loading message + loader.hide(); + }; + } + + // Reset base to the default document base. + // only reset if we are not prefetching + if ((settings === undefined || settings.prefetch === undefined)) { + this.resetBase(); + } + + if ((ns.getConfig("allowCrossDomainPages") || path.isSameDomain(documentUrl, absUrl))) { + // Load the new page. + request = new XMLHttpRequest(); + request.responseType = "document"; + request.onreadystatechange = function () { + var status, + requestedDocument = null, + title, + page, + url, + body, + scripts, + scriptRunner, + onPageCreate, + eventData = {}, + tempDoc, + newPath, + elements; + if (request.readyState === 4) { + status = request.status; + requestedDocument = request.responseXML; + if ((status === 200 || status === 0) && requestedDocument) { + + title = requestedDocument.querySelector("title"); + if (title) { + title = title.textContent; + } + + //@TODO add support for selecting a specific page with #hashtag + //in external page as the following algorithm does not support + // external/document.html#page url syntax + + page = requestedDocument.querySelector(pageSelectorWithData); + if (page) { + url = path.getFilePath(DOM.getNSData(page, "url")); + } else { + url = absUrl; + } + + if ((settings === undefined || settings.prefetch === undefined)) { + self.setBase(absUrl); + } + + // if no page with a proper data-url was found, find any other page + if (!page) { + page = requestedDocument.querySelector(pageDefinition.selector); + } + + // if page not found check if a dialog was requested + if (!page) { + page = requestedDocument.querySelector(dialogDefinition.selector); + } + + // if still there is no page element, create one + if (!page) { + tempDoc = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", null); + page = tempDoc.createElement("div"); + DOM.setNSData(page, "role", "page"); + body = tempDoc.importNode(requestedDocument.body, true); + while (body.firstChild) { + page.appendChild(body.firstChild); + } + } + + // page specific title has the highest priority + if (DOM.hasNSData(page, "title")) { + title = DOM.getNSData(page, "title"); + } + + //rewrite src and href attrs to use a base url + if (!ns.getConfig("supportDynamicBaseTag")) { + newPath = path.get(url); + elements = selectors.getChildrenByDataNS(page, "ajax='false'"); + elements.concat(selectors.getChildrenBySelector(page, "[src], link[href], a[rel='external'], a[target]")); + elements.forEach(function (element) { + var thisAttr = element.href === undefined ? "href" : (element.src === undefined ? "action" : "src"), + thisUrl = element.getAttribute(thisAttr); + thisUrl = thisUrl.replace(location.protocol + "//" + location.host + location.pathname, ""); + if (!/^(\w+:|#|\/)/.test(thisUrl)) { + element.setAttribute(thisAttr, newPath + thisUrl); + } + }); + } + + page = util.importEvaluateAndAppendElement(page, settings.pageContainer); + + // append to page and enhance + // TODO taging a page with external to make sure that embedded pages aren't removed + // by the various page handling code is bad. Having page handling code in many + // places is bad. Solutions post 1.0 + dataUrl = path.convertUrlToDataUrl(url, dialogHashKey, documentBase); + DOM.setNSData(page, "url", dataUrl); + DOM.setNSData(page, "external-page", true); + + // wait for page creation to leverage options defined on widget + onPageCreate = function () { + page.removeEventListener(pageEvents.PAGE_CREATE, onPageCreate, false); + // in jqm interface function _bindPageRemove have in this current page, in new interface page is call as first argument + ns.getConfig("_bindPageRemove", self._bindPageRemove).call(page, page); + }; + + page.addEventListener(pageEvents.PAGE_CREATE, onPageCreate, false); + + // Enhancing the page may result in new dialogs/sub pages being inserted + // into the DOM. If the original absUrl refers to a sub-page, that is the + // real page we are interested in. + if (absUrl.indexOf("&" + ns.getConfig("subPageUrlKey")) > -1) { + page = selectors.getChildrenByDataNS("url='" + dataUrl)[0]; + } + + //bind pageHide to removePage after it's hidden, if the page options specify to do so + + // Remove loading message. + if (settings.showLoadMsg) { + hideMsg(); + } + + // Add the page reference and xhr to our eventData. + eventData.xhr = request; + eventData.textStatus = status; + eventData.page = page; + + // Let listeners know the page loaded successfully. + events.trigger(settings.pageContainer, pageEvents.PAGE_LOAD, eventData); + + deferred.resolve(absUrl, settings, page, dupCachedPage); + } else { + //set base back to current path + if (base) { + self.setBase(path.getDocumentUrl()); + } + + // Add error info to our eventData. + eventData.xhr = request; + eventData.textStatus = status; + eventData.errorThrown = null;//errorThrown; + + // Let listeners know the page load failed. + // If the default behavior is prevented, stop here! + // Note that it is the responsibility of the listener/handler + // that called preventDefault(), to resolve/reject the + // deferred object within the eventData. + if (!events.trigger(settings.pageContainer, pageEvents.PAGE_LOAD_FAILED, eventData)) { + return; + } + + // Remove loading message. + if (settings.showLoadMsg) { + // Remove loading message. + hideMsg(); + // show error message + loader.show(loaderProperties.pageLoadErrorMessageTheme, loaderProperties.pageLoadErrorMessage, true); + + // hide after delay + setTimeout(loader.hide, HIDE_PAGE_LOADING_TIMEOUT); + } + + deferred.reject(absUrl, settings); + } + } // if end + }; + request.open(settings.type || "GET", fileUrl, true); + request.send(settings.data); + } else { + deferred.reject(absUrl, settings); + } + + + return deferred.promise(); + }; + + /** + * Open a page + * @method open + * @param {string|HTMLElement} toPage page url or element + * @param {Object} options + * @param {string} [options.type] connection type + * @param {Object} [options.data] additional url query parameters + * @param {boolean} [options.showLoadMsg=false] whether to show loading message + * @param {number} [options.loadMsgDelay] loading message delay in milliseconds + * @member ns.router.PageExternal + */ + prototype.open = function (toPage, options) { + var self = this; + if (typeof toPage === "string") { + self.loadPage(toPage, options) + .done(function (url, newOptions, newPage, dupCachedPage) { + newOptions.duplicateCachedPage = dupCachedPage; + setTimeout(function () { + parentOpen.call(self, newPage, newOptions); + }, 10); + }) + .fail(function (url, options) { + //clear out the active button state + removeActiveLinkClass(true); + + events.trigger(options.pageContainer, pageEvents.PAGE_CHANGE_FAILED, {}); + }); + return; + } + parentOpen.call(self, toPage, options); + }; + /** + * @method getBaseElement + * @member ns.router.PageExternal + * @return {HTMLElement} base element + */ + prototype.getBaseElement = function () { + if (!base && !this.justBuild) { + //>>excludeStart("tauDebug", pragmas.tauDebug); + ns.log("adding base tag"); + //>>excludeEnd("tauDebug"); + base = document.createElement("base"); + document.head.appendChild(base); + } + return base; + }; + /** + * Sets href url on base element + * @method setBase + * @param {string} href + * @member ns.router.PageExternal + * @return {HTMLElement} base element + */ + prototype.setBase = function (href) { + var baseElement = this.getBaseElement(); + if (baseElement) { + baseElement.setAttribute("href", path.makeUrlAbsolute(href, documentBase)); + } + + return baseElement; + }; + /** + * Resets href url on base element + * @method resetBase + * @member ns.router.PageExternal + * @return {HTMLElement} base element + */ + prototype.resetBase = function () { + var baseElement = this.getBaseElement(); + + // Change nothing when just building + if (!engine.getJustBuild() && baseElement) { + baseElement.setAttribute("href", documentBase.hrefNoHash); + } + + return baseElement; + }; + + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + return ns.router.Page; + } + ); + //>>excludeEnd("tauBuildExclude"); +}(window.document, ns)); diff --git a/tau/src/js/profile/mobile/router/PageTransition.js b/tau/src/js/profile/mobile/router/PageTransition.js new file mode 100644 index 00000000..a6e1fc2d --- /dev/null +++ b/tau/src/js/profile/mobile/router/PageTransition.js @@ -0,0 +1,453 @@ +/*global window, define, HTMLElement, ns, setTimeout */ +/*jslint nomen: true */ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ +/** + * #Mobile Router with Transition + * Class is responsible for change pages in applications when + * transition is enable. + * @class ns.router.PageTransition + * @override ns.router.Page + * @author Maciej Urbanski <m.urbanski@samsung.com> + * @author Piotr Karny <p.karny@samsung.com>> + * @author Hyunkook Cho <hk0713.cho@samsung.com> + * @author Junhyeon Lee <juneh.lee@samsung.com> + */ +(function (window, document, ns) { + "use strict"; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + define( + [ + "../../../core/engine", + "../../../core/router", // fetch namespace + "../../../core/util", + "../../../core/util/selectors", + "../../../core/util/DOM/attributes", + "../../../core/util/deferred", + "./Page" + ], + function () { + //>>excludeEnd("tauBuildExclude"); + var MAX_SCROLL_FOR_TRANSITION_FACTOR = 3, + util = ns.util, + selectors = util.selectors, + isPageTransitioning = false, + pageTransitionQueue = [], + RouterPage = ns.router.Page, + parentInit = RouterPage.prototype.init, + //existing base tag? + //tuck away the original document URL minus any fragment. + activeClickedLink, + transitions = {}, + DOM = util.DOM, + UtilsDeferred = util.deferred, + engine = ns.engine, + maxTransitionWidth = false, + /** + * Returns max scroll amount + * @return {number} + * @method getMaxScrollForTransition + * @private + * @static + * @member ns.router.PageTransition + */ + getMaxScrollForTransition = function () { + return window.offsetHeight * MAX_SCROLL_FOR_TRANSITION_FACTOR; + }, + defaultHomeScroll = 0, + classes = { + uiPagePreIn: "ui-page-pre-in", + uiMobileViewportTransitioning: "ui-mobile-viewport-transitioning", + viewportPrefix: "viewport-", + reverse: "reverse", + out: "out", + inClass: "in", + uiBlocker: "ui-blocker" + }, + /** + * Transition handler + * @param {boolean} sequential + * @method transitionHandler + * @private + * @static + * @member ns.router.PageTransition + */ + transitionHandler = function (sequential) { + + // Default to sequential + if (sequential === undefined) { + sequential = true; + } + + return function (name, reverse, to, from) { + + var deferred = new UtilsDeferred(), + router = ns.engine.getRouter(), + focusPage = router.focusPage, + container = router.container, + reverseClass = reverse ? classes.reverse : "", + toScroll = 0,//active.lastScroll || defaultHomeScroll, + screenHeight = window.offsetHeight, + maxTransitionOverride = maxTransitionWidth !== false + && window.offsetWidth > maxTransitionWidth, + none = maxTransitionOverride || !name || name === "none" || + Math.max(window.scrollY, toScroll) > getMaxScrollForTransition(), + toPreClass = classes.uiPagePreIn, + toggleViewportClass = function () { + var containerClassList = container.classList; + containerClassList.toggle(classes.uiMobileViewportTransitioning); + containerClassList.toggle(classes.viewportPrefix + name); + }, + fromWidget, + toWidget, + fromClassList = from && from.classList, + toClassList = to.classList, + toStyle = to.style, + fromStyle = from && from.style, + scrollPage = function () { + // Prevent blinking on page scrolling in Tizen/Android devices. + // Don't scoll window, when current scroll top(scrollY) is already at + // toScroll, or when current scroll top is 0 and toScroll is same to + // defaultHomeScroll (which means the top position of page). In these + // case, page scrolling is not needed. + var st = window.scrollY; + if (st === toScroll || (defaultHomeScroll === toScroll + && st === 0)) { + return; + } + + // By using scrollTo instead of silentScroll, we can keep things + // better in order Just to be precautios, disable scrollstart + // listening like silentScroll would + ns.setConfig("event.special.scrollstart.enabled", false); + + window.scrollTo(0, toScroll); + + // reenable scrollstart listening like silentScroll would + // 150ms timeout ensures that the scrolling will be complete + setTimeout(function () { + ns.setConfig("event.special.scrollstart.enabled", true); + }, 150); + }, + cleanFrom = function () { + fromWidget = engine.getBinding(from); + if (fromWidget) { + fromWidget.setActive(false, router.getContainer()); + } + fromClassList.remove(classes.out); + fromClassList.remove(classes.inClass); + fromClassList.remove(classes.reverse); + fromClassList.remove(name); + fromStyle.height = ""; + }, + doneIn = function () { + to.removeEventListener("animationend", doneIn, false); + to.removeEventListener("webkitAnimationEnd", doneIn, false); + if (!sequential) { + if (from) { + cleanFrom(); + } + } + + toClassList.remove(classes.out); + toClassList.remove(classes.inClass); + toClassList.remove(classes.reverse); + toClassList.remove(name); + toStyle.height = ""; + + toggleViewportClass(); + + // In some browsers (iOS5), 3D transitions block the ability to + // scroll to the desired location during transition This ensures we + // jump to that spot after the fact, if we aren't there already. + if (window.scrollY !== toScroll) { + scrollPage(); + } + + deferred.resolve(name, reverse, to, from, true); + }, + startIn = function () { + // Prevent flickering in phonegap container: see comments at #4024 + // regarding iOS + toStyle.zIndex = -10; + + toWidget = engine.instanceWidget(to, DOM.getNSData(to, "role") === + "page" ? "Page" : "Dialog"); + toWidget.setActive(true, router.getContainer()); + + toClassList.add(toPreClass); + + // Send focus to page as it is now display: block + focusPage(to); + + // Set to page height + toStyle.height = screenHeight + toScroll; + + scrollPage(); + + // Restores visibility of the new page: added together with + // $to.css("z-index", -10); + toStyle.zIndex = ""; + + if (!none) { + to.addEventListener("animationend", doneIn, false); + to.addEventListener("webkitAnimationEnd", doneIn, false); + } + + toClassList.remove(toPreClass); + toClassList.add(name); + toClassList.add(classes.inClass); + if (reverseClass) { + toClassList.add(reverseClass); + } + + if (none) { + setTimeout(doneIn, 0); + } + + }, + doneOut = function () { + if (from && sequential) { + from.removeEventListener("animationend", doneOut, false); + from.removeEventListener("webkitAnimationEnd", doneOut, false); + cleanFrom(); + } + startIn(); + }, + startOut = function () { + // if it's not sequential, call the doneOut transition to start the + // TO page animating in simultaneously + if (sequential) { + from.addEventListener("animationend", doneOut, false); + from.addEventListener("webkitAnimationEnd", doneOut, false); + } else { + doneOut(); + } + + // Set the from page's height and start it transitioning out + // Note: setting an explicit height helps eliminate tiling in the + // transitions + fromStyle.height = screenHeight + window.scrollY; + fromClassList.add(name); + fromClassList.add(classes.out); + if (reverseClass) { + fromClassList.add(reverseClass); + } + }; + + toggleViewportClass(); + + if (from && !none) { + startOut(); + } else { + doneOut(); + } + + return deferred.promise(); + }; + }; + + /** + * @method _maybeDegradeTransition + * @param {string} transition + * @member ns.router.PageTransition + * @private + * @static + * @return {string} transition + */ + function _maybeDegradeTransition(transition) { + if (transition && !ns.support.cssTransform3d && transitions[transition] + && transitions[transition].fallback) { + transition = transitions[transition].fallback; + } + + return transition; + } + + /** + * @method removeEventBlocker + * @member ns.router.PageTransition + * @private + * @static + */ + function removeEventBlocker() { + var html = document.querySelector("html"); + html.classList.remove(classes.uiBlocker); + //$html.unbind( "touchstart touchend vclick mousedown mouseup click" ); + } + + /** + * @method transitionPages + * @param {HTMLElement} toPage + * @param {HTMLElement} fromPage + * @param {string} transition + * @param {boolean} reverse + * @member ns.router.PageTransition + * @private + * @static + * @return {Object} promise + */ + function transitionPages(toPage, fromPage, transition, reverse) { + var handler = (transitions[transition || "default"] + && transitions[transition || "default"].handler) || + transitions["default"].handler, + promise = handler(transition, reverse, toPage, fromPage); + + //clear page loader + //$.mobile.hidePageLoadingMsg(); + + transition = _maybeDegradeTransition(transition); + + //find the transition handler for the specified transition. If there + //isn't one in our transitionHandlers dictionary, use the default one. + //call the handler immediately to kick-off the transition. + + promise.done(function () { + util.requestAnimationFrame(function () { + removeEventBlocker(); + }); + }); + + return promise; + } + + /** + * @method removeActiveLinkClass + * @param {boolean} forceRemoval + * @member ns.router.PageTransition + * @private + * @static + */ + function removeActiveLinkClass(forceRemoval) { + if (!!activeClickedLink && (!selectors.getClosestByClass(activeClickedLink, + ns.getConfig("activePageClass")).length || forceRemoval)) { + activeClickedLink.classList.remove(ns.getConfig("activeBtnClass")); + } + activeClickedLink = null; + } + + /** + * @method releasePageTransitionLock + * @param {ns.router.Page} router + * @member ns.router.PageTransition + * @private + * @static + */ + function releasePageTransitionLock(router) { + isPageTransitioning = false; + if (pageTransitionQueue.length > 0) { + router.open(pageTransitionQueue.pop()); + } + } + + /** + * Changes page. + * @method changePage + * @param {Object} settings + * @param {Object} [settings.fromPage] + * @param {Object} [settings.toPage] + * @param {string} [settings.transition] + * @param {boolean} [settings.reverse=false] + * @param {boolean} [settings.duplicateCachedPage] + * @member ns.router.PageTransition + */ + RouterPage.prototype.changePage = function (settings) { + var fromPage = settings.fromPage, + toPage = settings.toPage, + router = this; + + if (isPageTransitioning) { + pageTransitionQueue.unshift(arguments); + return; + } + + transitionPages(toPage, fromPage, settings.transition, settings.reverse) + .done(function (name, reverse, toPage, fromPage) { + var duplicateCachedPage = settings.duplicateCachedPage; + removeActiveLinkClass(); + + //if there's a duplicateCachedPage, remove it from the DOM now that it's + //hidden + if (duplicateCachedPage instanceof HTMLElement) { + duplicateCachedPage.parentNode.removeChild(duplicateCachedPage); + } + + releasePageTransitionLock(router); + router.changePageFinish(fromPage, toPage); + isPageTransitioning = false; + }); + }; + + /** + * Registers transition. + * @method registerTransition + * @param {string} name + * @param {Object} handler + * @param {Object} fallback + * @member ns.router.PageTransition + */ + RouterPage.prototype.registerTransition = function (name, handler, fallback) { + transitions[name] = { + handler: handler, + fallback: fallback + }; + }; + + /** + * Returns list of transitions. + * @method getTransitions + * @member ns.router.PageTransition + * @return {Array} transitions + */ + RouterPage.prototype.getTransitions = function () { + return transitions; + }; + + /** + * Returns transition. + * @method getTransition + * @param {string} name + * @member ns.router.PageTransition + * @return {Object} transition + */ + RouterPage.prototype.getTransition = function (name) { + return transitions[name]; + }; + + RouterPage.prototype._maybeDegradeTransition = _maybeDegradeTransition; + + RouterPage.prototype.getMaxScrollForTransition = getMaxScrollForTransition; + + /** + * Initializes router. + * @method init + * @param {boolean} justBuild + * @member ns.router.PageTransition + */ + RouterPage.prototype.init = function (justBuild) { + var self = this; + self.registerTransition("sequential", transitionHandler()); + self.registerTransition("simultaneous", transitionHandler(false)); + self.registerTransition("default", self.getTransition("sequential").handler); + self.registerTransition("flip", null, "fade"); + self.registerTransition("depth", self.getTransition("simultaneous").handler, + "fade"); + self.registerTransition("flow", null, "fade"); + self.registerTransition("pop", null, "fade"); + self.registerTransition("slide", self.getTransition("simultaneous").handler, + "fade"); + self.registerTransition("slidedown", null, "fade"); + self.registerTransition("slideup", null, "fade"); + self.registerTransition("slidefade", null, "fade"); + self.registerTransition("turn", null, "fade"); + parentInit.call(self, justBuild); + }; + + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + return ns.router.Page; + } + ); + //>>excludeEnd("tauBuildExclude"); +}(window, window.document, ns)); diff --git a/tau/src/js/profile/mobile/router/route/dialog.js b/tau/src/js/profile/mobile/router/route/dialog.js deleted file mode 100644 index 0deab528..00000000 --- a/tau/src/js/profile/mobile/router/route/dialog.js +++ /dev/null @@ -1,391 +0,0 @@ -/*global window, define */ -/*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Route Page - * Support class for router to control changing pages in profile Wearable. - * @class ns.router.route.page - * @author Maciej Urbanski <m.urbanski@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/engine", - "../../../../core/util/DOM/attributes", - "../../../../core/util/path", - "../../../../core/util/selectors", - "../../../../core/util/object", - "../../widget/mobile/Dialog", - "../../../../core/router/route", - "../../../../core/router/history" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var util = ns.util, - path = util.path, - DOM = util.DOM, - object = util.object, - utilSelector = util.selectors, - history = ns.router.history, - engine = ns.engine, - Dialog = ns.widget.mobile.Dialog, - baseElement, - routeDialog = {}, - previousPage, - head; - - /** - * Tries to find a page element matching id and filter (selector). - * Adds data url attribute to found page, sets page = null when nothing found - * @method findPageAndSetDataUrl - * @param {string} dataUrl DataUrl of searching element - * @param {string} filter Query selector for searching page - * @return {?HTMLElement} - * @private - * @static - * @member ns.router.route.page - */ - function findDialogAndSetDataUrl(dataUrl, filter) { - var id = path.stripQueryParams(dataUrl).replace("#", ""), - dialog = document.getElementById(id); - - if (dialog && utilSelector.matchesSelector(dialog, filter)) { - if (dataUrl === id) { - DOM.setNSData(dialog, "url", "#" + id); - } else { - DOM.setNSData(dialog, "url", dataUrl); - } - - } else { - // if we matched any element, but it doesn't match our filter - // reset page to null - dialog = null; - } - // @TODO ... else - // probably there is a need for running onHashChange while going back to a history entry - // without state, eg. manually entered #fragment. This may not be a problem on target device - return dialog; - } - - /** - * Property containing default properties - * @property {Object} defaults - * @property {string} defaults.transition="none" - * @static - * @member ns.router.route.page - */ - routeDialog.defaults = { - transition: "none" - }; - - /** - * Property defining selector for filtering only page elements - * @property {string} filter - * @member ns.router.route.page - * @static - */ - routeDialog.filter = engine.getWidgetDefinition("Dialog").selector; - - /** - * Returns default route options used inside Router. - * @method option - * @static - * @member ns.router.route.page - * @return {Object} default route options - */ - routeDialog.option = function () { - var defaults = object.merge({}, routeDialog.defaults); - defaults.transition = ns.getConfig('pageTransition', defaults.transition); - return defaults; - }; - - routeDialog.init = function() { - var pages = [].slice.call(document.querySelectorAll(this.filter)); - pages.forEach(function (page) { - if (!DOM.getNSData(page, "url")) { - DOM.setNSData(page, "url", (page.id && "#" + page.id) || location.pathname + location.search); - } - }); - }; - - /** - * This method changes page. It sets history and opens page passed as a parameter. - * @method open - * @param {HTMLElement|string} toPage The page which will be opened. - * @param {Object} [options] - * @param {boolean} [options.fromHashChange] Sets if call was made on hash change. - * @param {string} [options.dataUrl] Sets if page has url attribute. - * @member ns.router.route.page - */ - routeDialog.open = function (toPage, options) { - var pageTitle = document.title, - url, - state = {}, - router = engine.getRouter(); - - if (toPage === router.getFirstPage() && !options.dataUrl) { - url = path.documentUrl.hrefNoHash; - } else { - url = DOM.getNSData(toPage, "url"); - } - - pageTitle = DOM.getNSData(toPage, "title") || utilSelector.getChildrenBySelector(toPage, ".ui-header > .ui-title").textContent || pageTitle; - if (!DOM.getNSData(toPage, "title")) { - DOM.setNSData(toPage, "title", pageTitle); - } - - if (url && !options.fromHashChange) { - if (!path.isPath(url) && url.indexOf("#") < 0) { - url = path.makeUrlAbsolute("#" + url, path.documentUrl.hrefNoHash); - } - - state = object.merge( - {}, - options, - { - url: url - } - ); - - history.replace(state, pageTitle, url); - } - - // write base element - this._setBase(url); - - //set page title - document.title = pageTitle; - - options.widget = "Dialog"; - - this.activeDialog = engine.instanceWidget(toPage, options.widget); - - previousPage = this.getContainer().getActivePage(); - - this.getContainer().change(toPage, options); - }; - - /** - * This method determines target page to open. - * @method find - * @param {string} absUrl Absolute path to opened page - * @member ns.router.route.page - * @return {?HTMLElement} Element of page to open. - */ - routeDialog.find = function (absUrl) { - var self = this, - router = engine.getRouter(), - dataUrl = self._createDataUrl(absUrl), - initialContent = router.getFirstPage(), - pageContainer = router.getContainer(), - page, - selector = "[data-url='" + dataUrl + "']", - filterRegexp = /,/gm; - - if (/#/.test(absUrl) && path.isPath(dataUrl)) { - return null; - } - - // Check to see if the page already exists in the DOM. - // NOTE do _not_ use the :jqmData pseudo selector because parenthesis - // are a valid url char and it breaks on the first occurence - // prepare selector for new page - selector += self.filter.replace(filterRegexp, ",[data-url='" + dataUrl + "']"); - page = pageContainer.element.querySelector(selector); - - // If we failed to find the page, check to see if the url is a - // reference to an embedded page. If so, it may have been dynamically - // injected by a developer, in which case it would be lacking a - // data-url attribute and in need of enhancement. - if (!page && dataUrl && !path.isPath(dataUrl)) { - //Remove search data - page = findDialogAndSetDataUrl(dataUrl, self.filter); - } - - // If we failed to find a page in the DOM, check the URL to see if it - // refers to the first page in the application. Also check to make sure - // our cached-first-page is actually in the DOM. Some user deployed - // apps are pruning the first page from the DOM for various reasons. - // We check for this case here because we don't want a first-page with - // an id falling through to the non-existent embedded page error case. - if (!page && - path.isFirstPageUrl(dataUrl) && - initialContent && - initialContent.parentNode) { - page = initialContent; - } - - return page; - }; - - /** - * This method handles hash change. - * It closes opened popup. - * @method onHashChange - * @param {string} url - * @param {object} options - * @return {boolean} - * @member ns.router.route.popup - * @static - */ - routeDialog.onHashChange = function (url, options) { - return false; - }; - - /** - * This method parses HTML and runs scripts from parsed code. - * Fetched external scripts if required. - * Sets document base to parsed document absolute path. - * @method parse - * @param {string} html HTML code to parse - * @param {string} absUrl Absolute url for parsed page - * @member ns.router.route.page - * @return {?HTMLElement} Element of page in parsed document. - */ - routeDialog.parse = function (html, absUrl) { - var self = this, - page, - dataUrl = self._createDataUrl(absUrl); - - // write base element - // @TODO shouldn't base be set if a page was found? - self._setBase(absUrl); - - // Finding matching page inside created element - page = html.querySelector(self.filter); - - // If a page exists... - if (page) { - // TODO tagging a page with external to make sure that embedded pages aren't - // removed by the various page handling code is bad. Having page handling code - // in many places is bad. Solutions post 1.0 - DOM.setNSData(page, "url", dataUrl); - DOM.setNSData(page, "external", true); - } - return page; - }; - - /** - * This method creates data url from absolute url given as argument. - * @method _createDataUrl - * @param {string} absoluteUrl - * @protected - * @static - * @member ns.router.route.page - * @return {string} - */ - routeDialog._createDataUrl = function (absoluteUrl) { - return path.convertUrlToDataUrl(absoluteUrl, true); - }; - - /** - * On open fail, currently never used - * @method onOpenFailed - * @member ns.router.route.page - */ - routeDialog.onOpenFailed = function (/* options */) { - this._setBase(path.parseLocation().hrefNoSearch); - }; - - /** - * This method returns base element from document head. - * If no base element is found, one is created based on current location. - * @method _getBaseElement - * @protected - * @static - * @member ns.router.route.page - * @return {HTMLElement} - */ - routeDialog._getBaseElement = function () { - // Fetch document head if never cached before - if (!head) { - head = document.querySelector("head"); - } - // Find base element - if (!baseElement) { - baseElement = document.querySelector("base"); - if (!baseElement) { - baseElement = document.createElement("base"); - baseElement.href = path.documentBase.hrefNoHash; - head.appendChild(baseElement); - } - } - return baseElement; - }; - - /** - * Sets document base to url given as argument - * @method _setBase - * @param {string} url - * @protected - * @member ns.router.route.page - */ - routeDialog._setBase = function (url) { - var base = this._getBaseElement(), - baseHref = base.href; - - if (path.isPath(url)) { - url = path.makeUrlAbsolute(url, path.documentBase); - if (path.parseUrl(baseHref).hrefNoSearch !== path.parseUrl(url).hrefNoSearch) { - base.href = url; - path.documentBase = path.parseUrl(path.makeUrlAbsolute(url, path.documentUrl.href)); - } - } - }; - - /** - * Returns container of pages - * @method getContainer - * @return {?ns.widget.wearable.Page} - * @member ns.router.route.page - * @static - */ - routeDialog.getContainer = function () { - return engine.getRouter().getContainer(); - }; - - /** - * Returns active page. - * @method getActive - * @return {?ns.widget.wearable.Page} - * @member ns.router.route.page - * @static - */ - routeDialog.getActive = function () { - return this.getContainer().getActivePage(); - }; - - /** - * Returns element of active page. - * @method getActiveElement - * @return {HTMLElement} - * @member ns.router.route.page - * @static - */ - routeDialog.getActiveElement = function () { - return this.getActive().element; - }; - ns.router.route.dialog = routeDialog; - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return routeDialog; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/mobile/router/urlHistory.js b/tau/src/js/profile/mobile/router/urlHistory.js new file mode 100644 index 00000000..e8c21278 --- /dev/null +++ b/tau/src/js/profile/mobile/router/urlHistory.js @@ -0,0 +1,144 @@ +/*global define, ns */ +/* +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ +/** + * #URL History Support For Router + * Class manages history of changing pages in application. + * @class ns.router.urlHistory + * @singleton + * @author Maciej Urbanski <m.urbanski@samsung.com> + * @author Hyunkook Cho <hk0713.cho@samsung.com> + * @author Junhyeon Lee <juneh.lee@samsung.com> + */ +(function (ns) { + "use strict"; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + define( + [ + "../../../core/router" // fetch namespace + ], + function () { + //>>excludeEnd("tauBuildExclude"); + var urlHistory = { + /** + * History stack + * @property {Array.<object>} stack + * @readonly + * @member ns.router.urlHistory + * @member ns.router.urlHistorydirect + */ + stack: [], + /** + * Current active index in the history stack + * @property {number} [activeIndex=0] + * @readonly + * @member ns.router.urlHistory + */ + activeIndex: 0, + /** + * Returns current active history element + * @return {object} + * @method getActive + * @member ns.router.urlHistory + */ + getActive: function () { + return urlHistory.stack[urlHistory.activeIndex]; + }, + /** + * Returns previous history element + * @return {object} + * @method getPrev + * @member ns.router.urlHistory + */ + getPrev: function () { + return urlHistory.stack[urlHistory.activeIndex - 1]; + }, + /** + * Returns next history element + * @return {object} + * @method getNext + * @member ns.router.urlHistory + */ + getNext: function () { + return urlHistory.stack[urlHistory.activeIndex + 1]; + }, + /** + * Add new history element to stack + * @param {string} url + * @param {string} transition + * @param {string} title + * @param {string} pageUrl + * @param {string} role + * @method addNew + * @member ns.router.urlHistory + */ + addNew: function (url, transition, title, pageUrl, role) { + //if there's forward history, wipe it + if (urlHistory.getNext()) { + urlHistory.clearForward(); + } + + urlHistory.stack.push({ + url : url, + transition: transition, + title: title, + pageUrl: pageUrl, + role: role + }); + + urlHistory.activeIndex = urlHistory.stack.length - 1; + }, + /** + * Wipe all history elements ahead of active element + * @method clearForward + * @member ns.router.urlHistory + */ + clearForward: function () { + urlHistory.stack = urlHistory.stack.slice(0, urlHistory.activeIndex + 1); + }, + /** + * Changes hash in history. + * @param {Object} options + * @method directHashChange + * @member ns.router.urlHistory + */ + directHashChange: function (options) { + var back, + forward, + newActiveIndex; + + // check if url is in history and if it's ahead or behind current page + urlHistory.stack.forEach(function (historyEntry, index) { + //if the url is in the stack, it's a forward or a back + if (decodeURIComponent(options.currentUrl) === decodeURIComponent(historyEntry.url)) { + //define back and forward by whether url is older or newer than current page + back = index < urlHistory.activeIndex; + forward = !back; + newActiveIndex = index; + } + }); + + // save new page index, null check to prevent false or 0 result + this.activeIndex = newActiveIndex || this.activeIndex; + + if (back) { + (options.either || options.isBack)(true); + } else if (forward) { + (options.either || options.isForward)(false); + } + }, + //disable hashchange event listener internally to ignore one change + //toggled internally when location.hash is updated to match the url of a successful page load + ignoreNextHashChange: false + }; + + ns.router.urlHistory = urlHistory; + + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + return ns.router.urlHistory; + } + ); + //>>excludeEnd("tauBuildExclude"); +}(ns)); diff --git a/tau/src/js/profile/mobile/widget/mobile.js b/tau/src/js/profile/mobile/widget/mobile.js index 4af713c1..e45069e6 100644 --- a/tau/src/js/profile/mobile/widget/mobile.js +++ b/tau/src/js/profile/mobile/widget/mobile.js @@ -1,19 +1,8 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Mobile Widget Reference * diff --git a/tau/src/js/profile/mobile/widget/mobile/BaseWidgetMobile.js b/tau/src/js/profile/mobile/widget/mobile/BaseWidgetMobile.js index a684e7eb..9f140176 100644 --- a/tau/src/js/profile/mobile/widget/mobile/BaseWidgetMobile.js +++ b/tau/src/js/profile/mobile/widget/mobile/BaseWidgetMobile.js @@ -1,19 +1,8 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * #BaseWidgetMobile @@ -42,9 +31,13 @@ parent_disable = basePrototype.disable, parent_enable = basePrototype.enable, prototype = new BaseWidget(), + disableClass = "ui-state-disabled", + ariaDisabled = "aria-disabled", slice = [].slice; - BaseWidgetMobile.classes = BaseWidget.classes; + BaseWidgetMobile.classes = { + disable: disableClass + }; /** * Configures widget object from definition. @@ -118,6 +111,8 @@ parent_disable.apply(self, args); elementClasses.add(self.widgetFullName + "-disabled"); + elementClasses.add(disableClass); + element.setAttribute(ariaDisabled, true); // @TODO //this.hoverable.removeClass( "ui-state-hover" ); //this.focusable.removeClass( "ui-state-focus" ); @@ -137,6 +132,8 @@ parent_enable.apply(self, args); elementClasses.remove(self.widgetFullName + "-disabled"); + elementClasses.remove(disableClass); + element.setAttribute(ariaDisabled, false); // @TODO //this.hoverable.removeClass( "ui-state-hover" ); //this.focusable.removeClass( "ui-state-focus" ); diff --git a/tau/src/js/profile/mobile/widget/mobile/Button.js b/tau/src/js/profile/mobile/widget/mobile/Button.js index f7fba8f6..e3131795 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Button.js +++ b/tau/src/js/profile/mobile/widget/mobile/Button.js @@ -1,19 +1,8 @@ /*global window, define, ns, setTimeout, clearTimeout */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * # Button Widget @@ -21,7 +10,7 @@ * * ## Default selectors * In default all **BUTTON** tags and all **INPUT** tags with type equals _button_, _submit_ or _reset_ are change to Tizen WebUI buttons. - * In addition all elements with _data-role=button_ and class _ui-button_ are changed to Tizen Web UI buttons. + * In addition all elements with _data-role=button_ and class _ui-btn_ are changed to Tizen Web UI buttons. * To prevent auto enhance element to Tizen Web UI buttons you can use _data-role=none_ attribute on **BUTTON** or **INPUT** element. * * ###HTML Examples @@ -34,7 +23,7 @@ * ####Create simple button from link using class selector * * @example - * <a href="#page2" class="ui-button">Link button</a> + * <a href="#page2" class="ui-btn">Link button</a> * * ####Create simple button using button's tag * @@ -218,11 +207,10 @@ uiSubmit: "ui-submit", uiBtnActive: "ui-btn-active", uiBtnIconNotext: "ui-btn-icon-notext", - uiBtnIconRight: "ui-btn-icon-right" + uiBtnIconRight: 'ui-btn-icon-right' }, eventsAdded = false, - prototype = new BaseWidget(), - ICON_FILE_REGEXP = /[.]/; + prototype = new BaseWidget(); prototype.options = { theme: null, @@ -235,8 +223,7 @@ mini: null, bar: false, style: null, - wrapperEls: "span", - text: null + wrapperEls: "span" }; Button.prototype = prototype; @@ -278,14 +265,14 @@ } // Return not disabled button element which is the closest to element - // @method closestButton + // @method closestEnabledButton // @param {HTMLElement} element // @return {HTMLElement} // @private // @static // @member ns.widget.mobile.Button - function closestButton(element) { - return selectorsUtils.getClosestBySelector(element, "." + classes.uiBtn); + function closestEnabledButton(element) { + return selectorsUtils.getClosestBySelector(element, "." + classes.uiBtn + ":not(." + classes.uiDisabled + ")"); } /** @@ -330,7 +317,7 @@ // @static // @member ns.widget.mobile.Button function onFocus(event) { - var button = closestButton(event.target); + var button = closestEnabledButton(event.target); if (button) { button.classList.add(classes.uiFocus); button.classList.remove(classes.uiBlur); @@ -344,7 +331,7 @@ // @static // @member ns.widget.mobile.Button function onBlur(event) { - var button = closestButton(event.target); + var button = closestEnabledButton(event.target); if (button) { button.classList.add(classes.uiBlur); button.classList.remove(classes.uiFocus); @@ -495,7 +482,6 @@ * @property {boolean} [options.bar=false] if button is part of bar then you should set true * @property {"circle"|"nobg"|null} [options.style=null] style of button * @property {"span"|"div"} [options.wrapperEls="span"] wrapper tag name of button - * @property {string} [options.text=null] text for button * @member ns.widget.mobile.Button */ ns.util.object.merge(this.options, prototypeOptions); @@ -626,9 +612,7 @@ prototype._createIcon = function mobileButtonCreateIcon(element) { var iconElement = document.createElement("span"), iconElementClassList = iconElement.classList, - ui = this.ui, - icon = this.options.icon, - iconAsSourceFile = ICON_FILE_REGEXP.test(icon); + ui = this.ui; // Due to visibility non-breaking space on button cancel // in SearchBar widget @@ -637,15 +621,11 @@ } // Set icon classes iconElementClassList.add(classes.uiIcon); - if (!iconAsSourceFile) { - iconElementClassList.add(classes.uiIconPrefix + icon); - } else { - iconElement.style["background-image"] = "url(" + icon + ")"; - } + iconElementClassList.add(classes.uiIconPrefix + this.options.icon); //set icon information on container - if (element && !iconAsSourceFile) { - element.classList.add(classes.uiBtnIconPrefix + icon); + if (element) { + element.classList.add(classes.uiBtnIconPrefix + this.options.icon); } // Add icon element to DOM @@ -709,34 +689,6 @@ }; /** - * Returns element containing the widget - * @member ns.widget.mobile.BaseWidgetMobile - * @return {HTMLElement|null} - * @instance - */ - prototype._getContainer = function () { - var self = this; - - if (self._ui && self._ui.container) { - return self._ui.container; - } - return self.element; - }; - /** - * Set text on button before build - * @method _buildText - * @param {HTMLElement|HTMLInputElement|HTMLButtonElement} element - * @protected - * @member ns.widget.mobile.Button - */ - prototype._buildText = function(element) { - var text = this.options.text; - if (text) { - element.textContent = text; - } - }; - - /** * Build structure of button widget * @method _build * @param {HTMLElement|HTMLInputElement} element @@ -752,6 +704,7 @@ }, buttonInner, buttonText, + buttonIcon, buttonStyle, buttonClassList, buttonClassArray = [], @@ -759,15 +712,15 @@ elementTypeName, innerClass = classes.uiBtnInner, textClass = classes.uiBtnText, - options = self.options, + options = this.options, buttonValue, buttonInnerHTML, container, innerTextLength, label, + prototypeOptions = prototype.options, i; - self._buildText(element); // Create default structure of button buttonInner = document.createElement(options.wrapperEls); buttonInner.id = element.id + "-div-inner"; @@ -823,7 +776,7 @@ } container.setAttribute("tabindex", 0); - if ( (!options.bar) || + if ( (element.getAttribute("data-role") === "button" && !options.bar) || (elementTagName === "input" && ((elementTypeName === "submit") || (elementTypeName === "reset") || (elementTypeName === "button")) ) || (elementTagName === "button") ) { buttonClassArray.push(classes.uiBtnBoxThemePrefix + options.theme); @@ -871,6 +824,13 @@ buttonClassArray.push(options.inline ? classes.uiBtnInline : classes.uiBtnBlock); } + // Default disable element + if (attributes.disabled) { + disableElement(element, container); + } else { + enableElement(element, container); + } + innerClass += options.corners ? " " + classes.uiBtnCornerAll : ""; // Copy classes of structure @@ -1155,7 +1115,7 @@ ns.widget.mobile.Button = Button; engine.defineWidget( "Button", - "[data-role='button'], button, [type='button'], [type='submit'], [type='reset'], .ui-button", + "[data-role='button'], button, [type='button'], [type='submit'], [type='reset']", [], Button, "mobile" diff --git a/tau/src/js/profile/mobile/widget/mobile/Checkboxradio.js b/tau/src/js/profile/mobile/widget/mobile/Checkboxradio.js index 7ec7b519..647ed376 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Checkboxradio.js +++ b/tau/src/js/profile/mobile/widget/mobile/Checkboxradio.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Checkbox-radio Widget @@ -108,38 +97,25 @@ "../../../../core/util/selectors", "../../../../core/util/DOM/attributes", "../../../../core/util/DOM/manipulation", - "../../../../core/widget/core/Button", + "./Button", "../mobile", // fetch namespace "./BaseWidgetMobile" ], function () { //>>excludeEnd("tauBuildExclude"); var Checkboxradio = function () { - var self = this; /** * @property {Object} options Object with default options * @property {string} [options.theme='s'] Widget's theme * @member ns.widget.mobile.Checkboxradio + * @instance */ - self.options = { + this.options = { theme: 's' }; - self._callbacks = { - onLabelClick : null, - onInputClick : null - } - - self.inputType = ""; - self.checkedClass = ""; - self.uncheckedClass = ""; - self.ariaCheckedAttr = ""; - self.checkedIcon = ""; - self.uncheckedIcon = ""; - - self.label = null; - self.icon = null; - self.wrapper = null; + this._onLabelClickBound = null; + this._onInputClickBound = null; }, /** * @property {Object} Widget Alias for {@link ns.widget.BaseWidget} @@ -183,13 +159,7 @@ * @static */ classes = { - DISABLED: "ui-disabled", - ICON_PREFIX: "ui-icon-", - ICON_WRAPPER: "ui-icon-wrapper", - ICON: "ui-icon", - OFF: "-off", - ON: "-on", - UI: "ui-" + checkboxradioIconWrapper: "ui-icon-wrapper" }, /** * @property {Function} slice Alias for function Array.slice @@ -211,6 +181,43 @@ Checkboxradio.classes = classes; /** + * Finds best matched label for given input: <br> + * 1. Checks if one of parents is not a label<br> + * 2. Checks label#for=input.id if input.id is set in parent form, fieldset, page<br> + * 3. Creates label + * @method getLabel + * @param {HTMLElement} input + * @return {HTMLElement} + * @private + * @static + * @member ns.widget.mobile.Checkboxradio + */ + function getLabel(input) { + var parent = selectors.getClosestByTag(input, "label"), + label; + if (parent) { //1 + parent.parentNode.replaceChild(parent.firstElementChild, parent); + return parent; + } + if (input.id) { //2 + parent = selectors.getClosestBySelector(input, + "form, fieldset, [data-role='page'], [data-role='dialog']"); + if (parent) { + label = parent.querySelector("label[for='" + input.id + "']"); + if (label) { + return label; + } + } + } + //3 + label = document.createElement("label"); + if (input.id) { + label.setAttribute("for", input.id); + } + return label; + } + + /** * Function fires on label click event * @method onLabelClick * @param {ns.widget.mobile.Checkboxradio} self @@ -276,244 +283,183 @@ self._updateAll(); } - function setStyleForChecked(self) { - var labelClassList = self.label.classList, - iconClassList; - if (self.icon) { - iconClassList = self.icon.classList; - iconClassList.add(self.checkedIcon); - iconClassList.remove(self.uncheckedIcon); + /** + * Check checkboxradio element + * @method checkElement + * @param {ns.widget.mobile.Checkboxradio} instance + * @private + * @member ns.widget.mobile.Checkboxradio + * @new + */ + function checkElement(instance) { + var labelClassList = instance.label.classList, + iconClassList, + element = instance.element; + if (!element.getAttribute("disabled")) { + if (instance.icon) { + iconClassList = instance.icon.classList; + iconClassList.add(instance.checkedicon); + iconClassList.remove(instance.uncheckedicon); + } + labelClassList.add(instance.checkedClass); + labelClassList.remove(instance.uncheckedClass); + instance.wrapper.setAttribute(instance.ariaCheckedAttr, true); } - labelClassList.add(self.checkedClass); - labelClassList.remove(self.uncheckedClass); - self.wrapper.setAttribute(self.ariaCheckedAttr, true); } - function setStyleForUnchecked(self) { - var labelClassList = self.label.classList, - iconClassList; - if (self.icon) { - iconClassList = self.icon.classList; - iconClassList.add(self.uncheckedIcon); - iconClassList.remove(self.checkedIcon); - } - labelClassList.add(self.uncheckedClass); - labelClassList.remove(self.checkedClass); - self.wrapper.setAttribute(self.ariaCheckedAttr, false); - } /** - * Check or uncheck checkboxradio element - * @method setCheckboxradioStatus - * @param {ns.widget.mobile.Checkboxradio} self - * @param {boolean} status + * Uncheck checkboxradio element + * @method uncheckElement + * @param {ns.widget.mobile.Checkboxradio} instance * @private * @member ns.widget.mobile.Checkboxradio * @new */ - function setCheckboxradioStatus(self, status) { - var element = self.element; + function uncheckElement(instance) { + var labelClassList = instance.label.classList, + iconClassList, + element = instance.element; if (!element.getAttribute("disabled")) { - if (status) { - // checkbox is checked - setStyleForChecked(self); - } else { - // checkbox is checked - setStyleForUnchecked(self); + if (instance.icon) { + iconClassList = instance.icon.classList; + iconClassList.add(instance.uncheckedicon); + iconClassList.remove(instance.checkedicon); } + labelClassList.add(instance.uncheckedClass); + labelClassList.remove(instance.checkedClass); + instance.wrapper.setAttribute(instance.ariaCheckedAttr, false); } } /** - * Finds best matched label for given input: <br> - * 1. Checks if one of parents is not a label<br> - * 2. Checks label#for=input.id if input.id is set in parent form, fieldset, page<br> - * 3. Creates label - * @method _findLabel - * @return {HTMLElement} + * Builds structure of checkboxradio widget + * @method _build + * @param {HTMLInputElement} element + * @return {HTMLInputElement} * @protected * @member ns.widget.mobile.Checkboxradio + * @instance */ - Checkboxradio.prototype._findLabel = function() { - var input = this.element, - parent = selectors.getClosestByTag(input, "label"), - selector = [], - definition, - label; - if (parent) { //1 - parent.parentNode.replaceChild(parent.firstElementChild, parent); - return parent; - } - if (input.id) { //2 - selector.push("form, fieldset"); - // page - definition = engine.getWidgetDefinition("Page"); - if (definition) { - selector.push(definition.selectors.toString()); - } - // dialog - definition = engine.getWidgetDefinition("Dialog"); - if (definition) { - selector.push(definition.selectors.toString()); - } - // find parent - parent = selectors.getClosestBySelector(input, selector.toString()); - if (parent) { - label = parent.querySelector("label[for='" + input.id + "']"); - if (label) { - return label; - } - } - } - //3 - label = document.createElement("label"); - if (input.id) { - label.setAttribute("for", input.id); - } - return label; - }; - - Checkboxradio.prototype._buildLabel = function (element) { - var inputType = this.inputType, + Checkboxradio.prototype._build = function (element) { + var inputtype = element.getAttribute('type'), options = this.options, + label, + labelClassList, + wrapper, + ariaCheckedAttr, + icon, checkedState, checkedClass, - icon, - label, + uncheckedClass, + uncheckedState, + checkedicon, + uncheckedicon, + activeBtn, + iconSpan, + iconClassList, + iconpos, mini, - iconpos; + iconSpanParent, + iconWrapper; - icon = selectors.getParentsBySelector(element, "[data-type='horizontal']").length ? false : inputType + classes.OFF; - label = this._findLabel(); + //if created dynamically on wrong element, just return from here + if (inputtype !== "checkbox" && inputtype !== "radio") { + //_build should always return element + return element; + } + ariaCheckedAttr = inputtype === 'radio' ? 'aria-selected' : 'aria-checked'; + checkedState = inputtype + "-on"; + uncheckedState = inputtype + "-off"; + icon = selectors.getParentsBySelector(element, "[data-type='horizontal']").length ? false : uncheckedState; + if (!icon) { + activeBtn = "ui-btn-active"; + } + checkedClass = "ui-" + checkedState; + uncheckedClass = "ui-" + uncheckedState; + checkedicon = "ui-icon-" + checkedState; + uncheckedicon = "ui-icon-" + uncheckedState; + + label = getLabel(element); + labelClassList = label.classList; //@todo these options should not be passed via DOM element mini = dom.inheritAttr(element, "data-mini", "form,fieldset"); if (mini) { - dom.setNSData(label, "mini", mini); + label.setAttribute('data-mini', mini); } + iconpos = dom.inheritAttr(element, "data-iconpos", "form,fieldset"); if (iconpos) { - dom.setNSData(label, "iconpos", iconpos); + label.setAttribute('data-iconpos', iconpos); } - dom.setNSData(label, "theme", options.theme); - dom.setNSData(label, "icon", icon); - dom.setNSData(label, "shadow", false); - dom.setNSData(label, "bar", true); + label.setAttribute('data-theme', options.theme); + label.setAttribute('data-icon', icon); + label.setAttribute('data-shadow', false); + label.setAttribute('data-bar', true); engine.instanceWidget(label, "Button"); + iconSpan = label.getElementsByClassName('ui-icon')[0]; + iconSpanParent = iconSpan && iconSpan.parentElement; + iconWrapper = document.createElement("span"); - //make sure label is after input - if (element.nextElementSibling) { - element.parentNode.insertBefore(label, element.nextElementSibling); - } else { - element.parentNode.appendChild(label); - } - - if (!icon) { - if (element.checked) { - label.classList.add(ns.widget.mobile.Button.classes.uiBtnActive); - } else { - label.classList.remove(ns.widget.mobile.Button.classes.uiBtnActive); - } + if (iconSpan) { + iconClassList = iconSpan.classList; + iconWrapper.classList.add(classes.checkboxradioIconWrapper); + iconWrapper.appendChild(iconSpan); + iconSpanParent.appendChild(iconWrapper); } - return label; - }; - - Checkboxradio.prototype._buildWrapper = function (element) { - var label = this._findLabel(), - inputType = this.inputType, - ariaCheckedAttr = this.ariaCheckedAttr, - wrapper; - // Wrap the input + label in a div - wrapper = "<div role='" + inputType + "' class='ui-" + inputType; + wrapper = '<div role="' + inputtype + '" class="ui-' + inputtype; if (element.classList.contains("favorite")) { - wrapper += " favorite"; + wrapper += ' favorite'; } - wrapper += "'></div>"; + wrapper += '"></div>'; + //make sure label is after input + if (element.nextElementSibling) { + element.parentNode.insertBefore(label, element.nextElementSibling); + } else { + element.parentNode.appendChild(label); + } dom.wrapInHTML([element, label], wrapper); - // wrapper's node wrapper = element.parentNode; + if (element.hasAttribute('checked')) { + // quick fix to resolve problem in tests when sometimes attribute checked isn't proper interpreted to property in object + element.checked = true; + } if (element.checked) { + labelClassList.add(checkedClass); + if (!icon) { + labelClassList.add(activeBtn); + } + labelClassList.remove(uncheckedClass); + if (iconSpan) { + iconClassList.add(checkedicon); + iconClassList.remove(uncheckedicon); + } wrapper.setAttribute(ariaCheckedAttr, true); } else { + labelClassList.remove(checkedClass); + if (!icon) { + labelClassList.remove(activeBtn); + } + labelClassList.add(uncheckedClass); + if (iconSpan) { + iconClassList.add(uncheckedicon); + iconClassList.remove(checkedicon); + } wrapper.setAttribute(ariaCheckedAttr, false); } - if (element.getAttribute("disabled")) { - wrapper.classList.add(classes.DISABLED); - } else { - wrapper.classList.remove(classes.DISABLED); - } - - return wrapper; - }; - - Checkboxradio.prototype._buildIcon = function (element) { - var inputType = this.inputType, - icon, - iconParent, - iconWrapper; - - icon = this._findLabel().getElementsByClassName(classes.ICON)[0]; - iconParent = icon && icon.parentElement; - iconWrapper = document.createElement("span"); - - if (icon) { - iconWrapper.classList.add(classes.ICON_WRAPPER); - iconWrapper.appendChild(icon); - iconParent.appendChild(iconWrapper); - } - - return icon; - }; - - /** - * Builds structure of checkboxradio widget - * @method _build - * @param {HTMLInputElement} element - * @return {HTMLInputElement} - * @protected - * @member ns.widget.mobile.Checkboxradio - */ - Checkboxradio.prototype._build = function (element) { - var self = this, - inputType = element.getAttribute("type"); - - //if created dynamically on wrong element, just return from here - if (inputType !== "checkbox" && inputType !== "radio") { - //_build should always return element - return element; - } + element.checked = element.getAttribute('checked') === 'checked'; - if (element.hasAttribute('checked')) { - // quick fix to resolve problem in tests when sometimes attribute checked isn't proper interpreted to property in object - element.checked = true; - } - - // set classes - self.element = element; - self.inputType = inputType; - self.checkedClass = classes.UI + inputType + classes.ON; - self.uncheckedClass = classes.UI + inputType + classes.OFF; - self.ariaCheckedAttr = inputType === "radio" ? "aria-selected" : "aria-checked"; - self.checkedIcon = classes.ICON_PREFIX + inputType + classes.ON; - self.uncheckedIcon = classes.ICON_PREFIX + inputType + classes.OFF; - - // create elements - self.label = self._buildLabel(element); - self.icon = self._buildIcon(element); - self.wrapper = self._buildWrapper(element); - - // check or uncheck element - if (element.checked) { - setStyleForChecked(self); + if (element.getAttribute("disabled")) { + wrapper.classList.add('ui-disabled'); } else { - setStyleForUnchecked(self); + wrapper.classList.remove('ui-disabled'); } - return element; }; @@ -523,18 +469,18 @@ * @param {HTMLElement} element * @protected * @member ns.widget.mobile.Checkboxradio + * @instance */ Checkboxradio.prototype._init = function (element) { - var self = this; - self.label = self._findLabel(); - self.icon = self.label.getElementsByClassName("ui-icon")[0]; - self.wrapper = element.parentNode; - self.inputType = element.getAttribute("type"); - self.checkedClass = classes.UI + self.inputType + classes.ON; - self.uncheckedClass = classes.UI + self.inputType + classes.OFF; - self.ariaCheckedAttr = self.inputType === "radio" ? "aria-selected" : "aria-checked"; - self.checkedIcon = classes.ICON_PREFIX + self.inputType + classes.ON; - self.uncheckedIcon = classes.ICON_PREFIX + self.inputType + classes.OFF; + this.label = getLabel(element); + this.icon = this.label.getElementsByClassName('ui-icon')[0]; + this.wrapper = element.parentNode; + this.inputtype = element.getAttribute('type'); + this.checkedClass = 'ui-' + this.inputtype + '-on'; + this.uncheckedClass = 'ui-' + this.inputtype + '-off'; + this.ariaCheckedAttr = this.inputtype === 'radio' ? 'aria-selected' : 'aria-checked'; + this.checkedicon = "ui-icon-" + this.inputtype + '-on'; + this.uncheckedicon = "ui-icon-" + this.inputtype + '-off'; }; /** @@ -542,14 +488,13 @@ * @method _bindEvents * @protected * @member ns.widget.mobile.Checkboxradio + * @instance */ Checkboxradio.prototype._bindEvents = function () { - var callbacks = this._callbacks; - - callbacks.onLabelClick = onLabelClick.bind(null, this); - callbacks.onInputClick = onInputClick.bind(null, this); - this.label.addEventListener('vclick', callbacks.onLabelClick, true); - this.element.addEventListener('vclick', callbacks.onInputClick, false); + this._onLabelClickBound = onLabelClick.bind(null, this); + this._onInputClickBound = onInputClick.bind(null, this); + this.label.addEventListener('vclick', this._onLabelClickBound, true); + this.element.addEventListener('vclick', this._onInputClickBound, false); }; /** @@ -558,11 +503,12 @@ * @return {Array} * @protected * @member ns.widget.mobile.Checkboxradio + * @instance */ Checkboxradio.prototype._getInputSet = function () { var parent; - if (this.inputType === 'checkbox') { + if (this.inputtype === 'checkbox') { return [this.element]; } @@ -571,7 +517,7 @@ if (parent) { return slice.call(parent.querySelectorAll( - "input[name='" + this.element.name + "'][type='" + this.inputType + "']" + "input[name='" + this.element.name + "'][type='" + this.inputtype + "']" )); } @@ -583,6 +529,7 @@ * @method _updateAll * @protected * @member ns.widget.mobile.Checkboxradio + * @instance */ Checkboxradio.prototype._updateAll = function () { this._getInputSet().forEach(function (el) { @@ -601,12 +548,17 @@ * Refreshes widget * @method refresh * @member ns.widget.mobile.Checkboxradio + * @instance */ Checkboxradio.prototype.refresh = function () { var element = this.element; - setCheckboxradioStatus(this, element.checked); + if (element.checked) { + checkElement(this); + } else { + uncheckElement(this); + } if (element.getAttribute("disabled")) { this.disable(); @@ -620,6 +572,7 @@ * @method _enable * @member ns.widget.mobile.Checkboxradio * @protected + * @instance */ Checkboxradio.prototype._enable = function () { dom.removeAttribute(this.element, "disabled"); @@ -631,6 +584,7 @@ * @method _disable * @protected * @member ns.widget.mobile.Checkboxradio + * @instance */ Checkboxradio.prototype._disable = function () { dom.setAttribute(this.element, "disabled", true); @@ -642,21 +596,20 @@ * @method _destroy * @protected * @member ns.widget.mobile.Checkboxradio + * @instance */ Checkboxradio.prototype._destroy = function () { - var self = this, - callbacks = self._callbacks; - self.label.removeEventListener('vclick', callbacks.onLabelClick, true); - self.element.removeEventListener('vclick', callbacks.onInputClick, false); + this.label.removeEventListener('vclick', this._onLabelClickBound, true); + this.element.removeEventListener('vclick', this._onInputClickBound, false); }; /** - * Return checked checkboxradio element - * @method getCheckedElement - * @return {?HTMLElement} - * @member ns.widget.mobile.Checkboxradio - * @new - */ + * Return checked checkboxradio element + * @method getCheckedElement + * @return {?HTMLElement} + * @member ns.widget.mobile.Checkboxradio + * @new + */ Checkboxradio.prototype.getCheckedElement = function () { var radios = this._getInputSet(), i, @@ -670,13 +623,14 @@ }; /** - * Returns value of checkbox if it is checked or value of radios with the same name - * @method _getValue - * @member ns.widget.mobile.Checkboxradio - * @return {?string} + * Returns value of checkbox if it is checked or value of radios with the same name + * @method _getValue + * @member ns.widget.mobile.Checkboxradio + * @return {?string} * @protected - * @new - */ + * @instance + * @new + */ Checkboxradio.prototype._getValue = function () { var checkedElement = this.getCheckedElement(); @@ -693,6 +647,8 @@ * @param {string} value * @member ns.widget.mobile.Checkboxradio * @chainable + * @instance + * @protected * @new */ Checkboxradio.prototype._setValue = function (value) { @@ -705,9 +661,9 @@ if (radios[i].value === value) { checkedElement = this.getCheckedElement(); if (checkedElement) { - setCheckboxradioStatus(engine.getBinding(checkedElement), false); + uncheckElement(engine.getBinding(checkedElement)); } - setCheckboxradioStatus(engine.getBinding(radios[i]), true); + checkElement(engine.getBinding(radios[i])); return this; } } @@ -718,9 +674,7 @@ ns.widget.mobile.Checkboxradio = Checkboxradio; engine.defineWidget( "Checkboxradio", - "input[type='checkbox']:not(.ui-slider-switch-input):not([data-role='toggleswitch']):not(.ui-toggleswitch)," + - "input[type='radio']," + - "input.ui-checkbox", + "input[type='checkbox']:not(.ui-slider-switch-input):not([data-role='toggleswitch']), input[type='radio'], .ui-checkbox", [ "enable", "disable", diff --git a/tau/src/js/profile/mobile/widget/mobile/Circularview.js b/tau/src/js/profile/mobile/widget/mobile/Circularview.js index f3f72194..06caa69d 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Circularview.js +++ b/tau/src/js/profile/mobile/widget/mobile/Circularview.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Circular View Widget @@ -139,12 +128,9 @@ } } } - translate = "translate3d(" + translateX + "px, 0px, 0px)"; - viewStyle.transform = - viewStyle.webkitTransform = - viewStyle.mozTransform = - viewStyle.msTransform = - viewStyle.oTransform = translate; + translate = "translate3d(" + translateX + "px, 0px, 0px)"; + viewStyle.transform = translate; + viewStyle.webkitTransform = translate; circularview._lastGapSize = gapSize; } diff --git a/tau/src/js/profile/mobile/widget/mobile/Collapsible.js b/tau/src/js/profile/mobile/widget/mobile/Collapsible.js index 57a7bc90..f6b7bbf3 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Collapsible.js +++ b/tau/src/js/profile/mobile/widget/mobile/Collapsible.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * #Collapsible Widget @@ -123,9 +112,9 @@ "../../../../core/util/selectors", "../../../../core/util/DOM/attributes", "../../../../core/util/DOM/manipulation", - "../../../../core/widget/core/Button", "../mobile", - "./BaseWidgetMobile" + "./BaseWidgetMobile", + "./Button" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -140,7 +129,7 @@ * @private * @static */ - Button = ns.widget.core.Button, + Button = ns.widget.mobile.Button, /** * @property {Object} engine alias variable * @private @@ -246,7 +235,6 @@ uiCornerTop: "ui-corner-top", uiCornerBottom: "ui-corner-bottom", uiIcon: "ui-icon", - uiLiActive: "ui-li-active", // Prefixes uiBodyPrefix: "ui-body-", uiIconPrefix: "ui-icon-", @@ -292,6 +280,8 @@ headerLink, headerLinkClassList, headerStatus, + btnInner, + btnInnerClassList, content, alterHeader, parentCollapsibleSet = selectors.getClosestBySelector(element, "[data-role='collapsible-set']"), @@ -391,8 +381,15 @@ headerLink = header.firstElementChild; headerLinkClassList = headerLink.classList; - headerLinkClassList.add(classes.uiIconPrefix + options.iconpos); - headerLinkClassList.add(classes.uiIconPrefix + options.collapsedIcon); + // Make headerLink button-like + engine.instanceWidget(headerLink, "Button", { + shadow: false, + corners: false, + iconpos: options.iconpos, + icon: options.collapsedIcon, + mini: options.mini, + theme: options.theme + }); headerLink.removeAttribute("role"); @@ -401,8 +398,16 @@ if (options.inset) { elementClassList.add(classes.uiCollapsibleInset); - header.classList.add(classes.uiCornerTop); - header.classList.add(classes.uiCornerBottom); + + headerLinkClassList.add(classes.uiCornerTop); + headerLinkClassList.add(classes.uiCornerBottom); + + btnInner = headerLink.firstElementChild; + if (btnInner) { + btnInnerClassList = btnInner.classList; + btnInnerClassList.add(classes.uiCornerTop); + btnInnerClassList.add(classes.uiCornerBottom); + } } Collapsible.prototype.options = options; @@ -421,8 +426,9 @@ header = selectors.getChildrenByClass(element, classes.uiCollapsibleHeading)[0], headerClassList = header.classList, headerStatus = header.querySelector("." + classes.uiCollapsibleHeadingStatus), + headerIcon = header.querySelector("." + classes.uiIcon), + headerIconClassList = headerIcon.classList, headerLink = header.firstElementChild, - headerLinkClassList = headerLink.classList, content = selectors.getChildrenByClass(element, classes.uiCollapsibleContent)[0], parentCollapsibleSet = selectors.getClosestBySelector(element, "[data-role='collapsible-set']"), isCollapse = event.type === "collapse"; @@ -443,14 +449,14 @@ //Toggle functions switched to if/else statement due to toggle bug on Tizen if (isCollapse) { headerClassList.add(classes.uiCollapsibleHeadingCollapsed); - headerLinkClassList.remove(classes.uiIconPrefix + options.expandedIcon); - headerLinkClassList.add(classes.uiIconPrefix + options.collapsedIcon); + headerIconClassList.remove(classes.uiIconPrefix + options.expandedIcon); + headerIconClassList.add(classes.uiIconPrefix + options.collapsedIcon); elementClassList.add(classes.uiCollapsibleCollapsed); content.classList.add(classes.uiCollapsibleContentCollapsed); } else { headerClassList.remove(classes.uiCollapsibleHeadingCollapsed); - headerLinkClassList.add(classes.uiIconPrefix + options.expandedIcon); - headerLinkClassList.remove(classes.uiIconPrefix + options.collapsedIcon); + headerIconClassList.add(classes.uiIconPrefix + options.expandedIcon); + headerIconClassList.remove(classes.uiIconPrefix + options.collapsedIcon); elementClassList.remove(classes.uiCollapsibleCollapsed); content.classList.remove(classes.uiCollapsibleContentCollapsed); } @@ -458,13 +464,13 @@ headerStatus.innerHTML = isCollapse ? options.expandCueText : options.collapseCueText; if(options.expandedIcon === options.collapsedIcon) { - headerLinkClassList.add(classes.uiIconPrefix + options.collapsedIcon); + headerIconClassList.add(classes.uiIconPrefix + options.collapsedIcon); } content.setAttribute("aria-hidden", isCollapse); if (options.contentTheme && options.inset && (!parentCollapsibleSet || domUtils.getNSData(element, "collapsible-last"))) { - slice.call(header.querySelectorAll("." + classes.uiCollapsibleHeadingToggle)).forEach(function (value) { + slice.call(header.querySelectorAll("." + Button.classes.uiBtnInner)).forEach(function (value) { if (isCollapse) { value.classList.add(classes.uiCornerBottom); @@ -501,12 +507,12 @@ removeActiveClass, header = selectors.getChildrenByClass(element, classes.uiCollapsibleHeading)[0], setActiveHeaderLinkClass = function (setClass) { - var headerClassList = header.classList; - + var link = header.querySelector("a"); + // @todo change to method called on button object if (setClass) { - headerClassList.add(classes.uiLiActive); + link.classList.add(Button.classes.uiBtnActive); } else { - headerClassList.remove(classes.uiLiActive); + link.classList.remove(Button.classes.uiBtnActive); } }; diff --git a/tau/src/js/profile/mobile/widget/mobile/Collapsibleset.js b/tau/src/js/profile/mobile/widget/mobile/Collapsibleset.js index e3f83c24..9a9eb531 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Collapsibleset.js +++ b/tau/src/js/profile/mobile/widget/mobile/Collapsibleset.js @@ -1,26 +1,15 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * #Collapsible Set Widget * Collapsible Set Widget groups many Collapsible Widgets in one container. * * ##Default selectors - * In default all elements with _data-role="collapsible-set"_ or class _.ui-collapsible-set_ are changed to collapsibleset widget. + * In default all elements with _data-role="collapsible-set"_ or clas _.ui-collapsible-set_ are changed to collapsibleset widget. * * ##HTML Examples * @@ -189,6 +178,7 @@ uiCollapsibleHeading: "ui-collapsible-heading", uiCornerTop: "ui-corner-top", uiCornerBottom: "ui-corner-bottom", + uiBtnInner: "ui-btn-inner", uiCollapsibleContent : "ui-collapsible-content" }; @@ -230,23 +220,34 @@ classes = CollapsibleSet.classes, dataAttributes = CollapsibleSet.attributes, firstCollapsibleHeading = selectors.getChildrenByClass(firstCollapsible, classes.uiCollapsibleHeading)[0], + firstCollapsibleLink = selectors.getChildrenByTag(firstCollapsibleHeading, "a")[0], + firstCollapsibleButtonInner = selectors.getChildrenByClass(firstCollapsibleLink, classes.uiBtnInner)[0], lastCollapsible = collapsiblesInSet[collapsiblesInSet.length-1], - lastCollapsibleHeading = selectors.getChildrenByClass(lastCollapsible, classes.uiCollapsibleHeading)[0]; + lastCollapsibleHeading = selectors.getChildrenByClass(lastCollapsible, classes.uiCollapsibleHeading)[0], + lastCollapsibleLink = selectors.getChildrenByTag(lastCollapsibleHeading, "a")[0], + lastCollapsibleButtonInner = selectors.getChildrenByClass(lastCollapsibleLink, classes.uiBtnInner)[0]; //clean up borders collapsiblesInSet.forEach(function(collapsibleElement) { var heading = selectors.getChildrenByClass(collapsibleElement, classes.uiCollapsibleHeading)[0], - headingClassList = heading.classList; + link = selectors.getChildrenByTag(heading, "a")[0], + linkClassList = link.classList, + buttonInner = selectors.getChildrenByClass(link, classes.uiBtnInner)[0], + buttonInnerClassList = buttonInner.classList; domUtils.removeNSData(collapsibleElement, dataAttributes.last); - headingClassList.remove(classes.uiCornerBottom); - headingClassList.remove(classes.uiCornerTop); + linkClassList.remove(classes.uiCornerBottom); + linkClassList.remove(classes.uiCornerTop); + buttonInnerClassList.remove(classes.uiCornerBottom); + buttonInnerClassList.remove(classes.uiCornerTop); }); - firstCollapsibleHeading.classList.add(classes.uiCornerTop); + firstCollapsibleLink.classList.add(classes.uiCornerTop); + firstCollapsibleButtonInner.classList.add(classes.uiCornerTop); - lastCollapsibleHeading.classList.add(classes.uiCornerBottom); + lastCollapsibleLink.classList.add(classes.uiCornerBottom); + lastCollapsibleButtonInner.classList.add(classes.uiCornerBottom); domUtils.setNSData(lastCollapsible, dataAttributes.last, true); } return collapsiblesInSet; @@ -266,16 +267,21 @@ dataAttributes = CollapsibleSet.attributes, firstCollapsible = element.firstChild, collapsibleHeading = selectors.getChildrenByClass(collapsible, classes.uiCollapsibleHeading)[0], - collapsibleHeadingClassList = collapsibleHeading.classList, + headingLink = selectors.getChildrenByTag(collapsibleHeading, "a")[0], + headingLinkClassList = headingLink.classList, + buttonInner = selectors.getChildrenByClass(headingLink, classes.uiBtnInner)[0], + buttonInnerClassList = buttonInner.classList, collapsibleContent = selectors.getChildrenByClass(collapsible, classes.uiCollapsibleContent)[0], collapsibleContentClassList = collapsibleContent.classList; if(domUtils.hasNSData(collapsible, dataAttributes.last) && !!options.inset) { if(isCollapse) { - collapsibleHeadingClassList.add(classes.uiCornerBottom); + headingLinkClassList.add(classes.uiCornerBottom); + buttonInnerClassList.add(classes.uiCornerBottom); collapsibleContentClassList.remove(classes.uiCornerBottom); } else { - collapsibleHeadingClassList.remove(classes.uiCornerBottom); + headingLinkClassList.remove(classes.uiCornerBottom); + buttonInnerClassList.remove(classes.uiCornerBottom); collapsibleContentClassList.add(classes.uiCornerBottom); } } @@ -766,7 +772,7 @@ widget.mobile.CollapsibleSet = CollapsibleSet; engine.defineWidget( "CollapsibleSet", - "[data-role='collapsible-set'], .ui-collapsible-set", + "[data-role='collapsible-set'],.ui-collapsible-set", [], CollapsibleSet, "mobile" diff --git a/tau/src/js/profile/mobile/widget/mobile/Controlgroup.js b/tau/src/js/profile/mobile/widget/mobile/Controlgroup.js index 94ecd141..664df282 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Controlgroup.js +++ b/tau/src/js/profile/mobile/widget/mobile/Controlgroup.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * #Control Group Widget diff --git a/tau/src/js/profile/mobile/widget/mobile/Datetimepicker.js b/tau/src/js/profile/mobile/widget/mobile/Datetimepicker.js index 3c690309..8692e34b 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Datetimepicker.js +++ b/tau/src/js/profile/mobile/widget/mobile/Datetimepicker.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Date-time Picker Widget @@ -31,7 +20,7 @@ "../mobile", // fetch namespace "./BaseWidgetMobile", "./Popup", - "../../../../core/widget/core/Button", + "./Button", "./Circularview", "../../../../core/event", "../../../../core/event/vmouse", @@ -785,10 +774,6 @@ elementClassList = element.classList, tagName = element.tagName.toLowerCase(), classes = Datetimepicker.classes; - - // INFO: Since 2.3, we decided to use Webkit based date-time picker. - ns.warn("TAU based Datetimepicker widget will be deprecated. It is decieded to be replaced <input> based date-time picker. Please use <input type='month|week|date|time|datetime-local'> for date-time picker"); - if (tagName === 'input') { element.style.display = 'none'; /* diff --git a/tau/src/js/profile/mobile/widget/mobile/Dialog.js b/tau/src/js/profile/mobile/widget/mobile/Dialog.js index 3500273b..332b8183 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Dialog.js +++ b/tau/src/js/profile/mobile/widget/mobile/Dialog.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** @@ -222,7 +211,7 @@ "../../../../core/util/DOM/attributes", "../mobile", // fetch namespace "./BaseWidgetMobile", - "../../../../core/widget/core/Button", + "./Button", "./Page" ], function () { @@ -267,13 +256,13 @@ */ events = ns.event, /** - * Alias to {@link ns.widget.core.Button#classes} + * Alias to {@link ns.widget.mobile.Button#classes} * @property {Object} buttonClasses * @member ns.widget.mobile.Dialog * @private * @static */ - buttonClasses = ns.widget.core.Button.classes, + buttonClasses = ns.widget.mobile.Button.classes, /** * Dictionary for dialog related css class names @@ -338,8 +327,7 @@ page: null // page related with this dialog }; - }, - prototype = new BaseWidget(); + }; /** * Dictionary for dialog related css class names @@ -348,7 +336,7 @@ */ Dialog.classes = classes; - Dialog.prototype = prototype; + Dialog.prototype = new BaseWidget(); /** @@ -402,7 +390,7 @@ options = self.options, elementClassList = self.element.classList, dialogClasses = classes, - pageClasses = ns.widget.core.Page.classes; + pageClasses = ns.widget.mobile.Page.classes; if (value) { elementClassList.remove(dialogClasses.uiDialogHidden); elementClassList.add(pageClasses.uiPage); @@ -588,46 +576,6 @@ } /** - * Layouting page structure - * @method layout - * @member ns.widget.core.Page - */ - prototype.layout = function () { - }; - - /** - * This method triggers BEFORE_SHOW event. - * @method onBeforeShow - * @member ns.widget.core.Page - */ - prototype.onBeforeShow = function () { - }; - - /** - * This method triggers SHOW event. - * @method onShow - * @member ns.widget.core.Page - */ - prototype.onShow = function () { - }; - - /** - * This method triggers BEFORE_HIDE event. - * @methofocusd onBeforeHide - * @member ns.widget.core.Page - */ - prototype.onBeforeHide = function () { - }; - - /** - * This method triggers HIDE event. - * @method onHide - * @member ns.widget.core.Page - */ - prototype.onHide = function () { - }; - - /** * Handler function to close the dialog on click. * @method closeOnClick * @param {ns.widget.mobile.Dialog} self diff --git a/tau/src/js/profile/mobile/widget/mobile/Drawer.js b/tau/src/js/profile/mobile/widget/mobile/Drawer.js index 84516b9d..3fb3922a 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Drawer.js +++ b/tau/src/js/profile/mobile/widget/mobile/Drawer.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Drawer Widget * Drawer widget provide creating drawer widget and managing drawer operation. @@ -89,41 +78,111 @@ define( [ "../../../../core/widget/core/Drawer", + "./Page", "../../../../core/engine" ], function () { //>>excludeEnd("tauBuildExclude"); var CoreDrawer = ns.widget.core.Drawer, + CoreDrawerPrototype = CoreDrawer.prototype, + Page = ns.widget.mobile.Page, engine = ns.engine, Drawer = function () { var self = this; CoreDrawer.call(self); + self.options.swipeStartAreaRatio = 0.05; + self._pageSelector = Page.classes.uiPage; + + self._onSwipeBound = null; + self._onMouseDownBound = null; + self._onSideEdgeMouseUpBound = null; + self._swiped = false; }, - prototype = new CoreDrawer(); + prototype = new CoreDrawer(), + classes = CoreDrawer.classes; Drawer.prototype = prototype; + Drawer.classes = classes; + + /** + * Swipe event handler + * @method _onSwipe + * @private + * @static + * @param {Event} event + * @member ns.widget.mobile.Drawer + */ + prototype._onSwipe = function(event) { + // If swipeleft event was triggered at drawer position right, + // drawer should be opend. So 'direction' has reverse value for swipe direction. + var self = this, + direction = event.type === "swipeleft" ? "right" : "left"; + + if (self.options.position === direction && self._swiped) { + self.open(); + self._swiped = false; + } + + } /** - * Configure Drawer widget - * @method _configure + * Check vmousedown event whether triggerred on side edge area or not + * @method _checkSideEdgeMouseDown + * @private + * @static + * @param {Event} event + * @member ns.widget.mobile.Drawer + */ + prototype._checkSideEdgeMouseDown = function(event) { + var self = this, + eventClientX = event.clientX, + options = self.options, + position = options.position, + swipeStartArea = window.innerWidth * options.swipeStartAreaRatio; + + if ((position === "left" && eventClientX > 0 && eventClientX < swipeStartArea) || + (position === "right" && eventClientX < window.innerWidth && eventClientX > window.innerWidth - swipeStartArea)) { + self._swiped = true; + } + } + /** + * Vmousedown event handler + * @method _onMouseDown + * @private + * @static + * @param {Event} event + * @member ns.widget.mobile.Drawer + */ + prototype._onMouseDown = function(event) { + this._checkSideEdgeMouseDown(event); + } + + /** + * Bind events to widget + * @method _bindEvents * @protected - * @member ns.widget.wearable.Drawer + * @member ns.widget.mobile.Drawer */ - prototype._configure = function() { - var self = this; - /** - * Widget options - * @property {string} [options.drawerTarget="ui-page"] Drawer appended target. Value type is CSS selector type. - * @property {string} [options.position="left"] Drawer position. "left" or "right" - * @property {boolean} [options.enable=true] Enable drawer widget. - * @property {Number} [options.dragEdge=0.05] Start dragging gesture possible area ratio of target or handler between 0 and 1. - */ - self.options.dragEdge = 0.05; + prototype._bindEvents = function() { + var self = this, + page = self._drawerPage; + CoreDrawerPrototype._bindEvents.call(self); + + self._onMouseDownBound = self._onMouseDown.bind(self); + self._onSwipeBound = self._onSwipe.bind(self); + page.addEventListener("vmousedown", self._onMouseDownBound, false); + page.addEventListener("swipeleft", self._onSwipeBound, false); + page.addEventListener("swiperight", self._onSwipeBound, false); }; - prototype._build = function(element) { - CoreDrawer.prototype._build.call(this, element); - return element; + + prototype._destroy = function() { + var self = this, + page = self._drawerPage; + CoreDrawerPrototype._destroy.call(self); + page.removeEventListener("vmousedown", self._onMouseDownBound, false); + page.removeEventListener("swipeleft", self._onSwipeBound, false); + page.removeEventListener("swiperight", self._onSwipeBound, false); }; ns.widget.mobile.Drawer = Drawer; @@ -131,12 +190,9 @@ "Drawer", "[data-role='drawer'], .ui-drawer", [ - "transition", - "setDragHandler", "open", "close", - "isOpen", - "getState" + "isOpen" ], Drawer, "mobile" diff --git a/tau/src/js/profile/mobile/widget/mobile/ExtendableList.js b/tau/src/js/profile/mobile/widget/mobile/ExtendableList.js index b7893d44..ced73b02 100644 --- a/tau/src/js/profile/mobile/widget/mobile/ExtendableList.js +++ b/tau/src/js/profile/mobile/widget/mobile/ExtendableList.js @@ -1,19 +1,8 @@ /*global window, define, ns, $ */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, white: true, plusplus: true*/ /** * #Extendable List Widget diff --git a/tau/src/js/profile/mobile/widget/mobile/Fastscroll.js b/tau/src/js/profile/mobile/widget/mobile/Fastscroll.js index 71660dad..0283e02d 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Fastscroll.js +++ b/tau/src/js/profile/mobile/widget/mobile/Fastscroll.js @@ -1,19 +1,8 @@ -/*global window, define, Object, ns */ +/*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * # Fast Scroll Widget @@ -107,7 +96,7 @@ * <div data-role="page" id="main"> * <div data-role="content"> * <ul id="contacts"> - * <li data-role="list-divider">A</li>F + * <li data-role="list-divider">A</li> * <li>Anton</li> * <li>Arabella</li> * <li data-role="list-divider">B</li> @@ -127,6 +116,7 @@ * </script> * * @class ns.widget.mobile.FastScroll + * @extends ns.widget.mobile.Listview * @since 2.0 */ (function (document, ns) { @@ -135,72 +125,264 @@ define( [ "../../../../core/engine", + "../../../../core/theme", + "../../../../core/widget", + "../../../../core/util/DOM/attributes", + "../../../../core/util/DOM/manipulation", + "../../../../core/util/DOM/css", + "./TabBar", + "./Page", + "./Listview", "../../../../core/event", - "../../../../core/util/selectors", - "../../../../core/widget/core/indexscrollbar/IndexScrollbar", - "../mobile", - "./BaseWidgetMobile" + "../../../../core/util/selectors" ], function () { //>>excludeEnd("tauBuildExclude"); + /** + * @property {Object} selectors Alias to ns.util.selectors + * @member ns.widget.mobile.FastScroll + * @private + * @static + */ + var selectors = ns.util.selectors, - var engine = ns.engine, + /** + * @property {Function} Tabbar Alias for class ns.widget.mobile.Tabbar + * @member ns.widget.mobile.FastScroll + * @static + * @private + */ + Tabbar = ns.widget.mobile.TabBar, + /** + * @property {Object} engine Alias for class {@link ns.engine} + * @member ns.widget.mobile.FastScroll + * @private + * @static + */ + engine = ns.engine, + /** + * @property {Object} events alias variable + * @member ns.widget.mobile.FastScroll + * @static + * @private + */ events = ns.event, - selectors = ns.util.selectors, - NUMBER_REGEXP = /^[0-9]/, - BaseWidget = ns.widget.mobile.BaseWidgetMobile, - classes = {}, - prototype = new BaseWidget(), - /* - * Event is triggering after _destroy method call - * @event destroyed + /** + * @property {Function} Page Alias for class ns.widget.mobile.Page + * @member ns.widget.mobile.FastScroll + * @static + * @private + */ + Page = ns.widget.mobile.Page, + /** + * @property {Object} DOMUtils Alias to ns.util.DOM + * @private + * @member ns.widget.mobile.FastScroll + * @static + */ + DOMUtils = ns.util.DOM, + /** + * @property {Function} Listview Alias for class ns.widget.mobile.Listview + * @member ns.widget.mobile.FastScroll + * @static + * @private + */ + Listview = ns.widget.mobile.Listview, + + /** + * Backup of _build methods for replacing it + * @method parent_build * @member ns.widget.mobile.FastScroll + * @private */ - eventType = { - DESTROYED: "destroyed" - }, - FastScroll = function () { - this.eventHandlers = {}; - this._ui = { - scrollView: null - }; - }; + parent_build = Listview.prototype._build, + + /** + * Backup of _configure methods for replacing it + * @method parent_configure + * @member ns.widget.mobile.FastScroll + * @private + */ + parent_configure = Listview.prototype._configure, + + /** + * Backup of _init methods for replacing it + * @method parent_init + * @member ns.widget.mobile.FastScroll + * @private + */ + parent_init = Listview.prototype._init, + + /** + * Backup of _bindEvents methods for replacing it + * @method parent_bindEvents + * @member ns.widget.mobile.FastScroll + * @private + */ + parent_bindEvents = Listview.prototype._bindEvents, + + /** + * Backup of _destroy methods for replacing it + * @method parent_destroy + * @member ns.widget.mobile.FastScroll + * @private + */ + parent_destroy = Listview.prototype._destroy, + + /** + * Refresh FastScroll widget + * + * This method updates and redraws current widget. + * + * @example + * <div data-role="page" id="main"> + * <div data-role="content"> + * <ul id="list" data-role="listview" data-fastscroll="true"> + * <li data-role="list-divider">A</li> + * <li>Anton</li> + * <li>Arabella</li> + * <li data-role="list-divider">B</li> + * <li>Barry</li> + * <li>Bily</li> + * </ul> + * </div> + * </div> + * <script> + * var element = document.getElementById("list"), + * fastscroll = tau.widget.FastScroll(element); + * + * element.insertAdjacentHTML("afterend", "<li>Bruce</li>"); + * fastscroll.refresh(); + * </script> + * + * or JQueryMobile notation: + * + * @example + * <div data-role="page" id="main"> + * <div data-role="content"> + * <ul data-role="listview" data-fastscroll="true" id="fastscroll"> + * <li data-role="list-divider">A</li> + * <li>Anton</li> + * <li>Arabella</li> + * <li data-role="list-divider">B</li> + * <li>Barry</li> + * <li>Bily</li> + * </ul> + * </div> + * </div> + * <script> + * $("#list").append("<li>Bruno</li>"); + * $("#list").fastscroll("refresh"); + * </script> + * + * @method refresh + * @member ns.widget.mobile.FastScroll + */ + + /** + * Backup of _refresh methods for replacing it + * @method parent_refresh + * @member ns.widget.mobile.FastScroll + * @private + */ + parent_refresh = Listview.prototype._refresh, + + /** + * Alias for object ns.widget.mobile.Listview.classes + * @property {Object} classes + * @member ns.widget.mobile.FastScroll + * @static + * @property {string} listviewClasses.uiFastscroll + * Main calss of fascscroll view + * @property {string} listviewClasses.uiFastscrollTarget + * Class of fascroll target (listview) + * @property {string} listviewClasses.uiFastscrollPopup + * Class of fastscroll popup + * @property {string} listviewClasses.uiScrollbar + * Class of scrollbar + * @property {string} listviewClasses.uiFastscrollHover + * Class of fastscroll item with fover + * @property {string} listviewClasses.uiFastscrollHoverFirstItem + * Class of first item in fastscroll with fover + * @property {string} listviewClasses.uiFastscrollHoverDown + * Class of presed fastscroll item with fover + */ + listviewClasses = Listview.classes, + + /** + * FastScroll event types + * @property {Object} eventType + * @property {string} [eventType.DESTROYED="destroyed"] + * Event is triggering after _destroy method call. + * @static + * @readonly + * @member ns.widget.mobile.FastScroll + */ + eventType = Listview.eventType || {}, + + /** + * Local cache of function type name + * @property {string} [TYPE_FUNCTION="function"] + * @private + * @static + * @member ns.widget.mobile.FastScroll + */ + TYPE_FUNCTION = "function"; + + // the extension of Listview events dictionary + /* + * Event is triggering after _destroy method call + * @event destroyed + * @member ns.widget.mobile.FastScroll + */ + eventType.DESTROYED = "destroyed"; // the extension of Listview classes - classes.uiFastscroll = "ui-fastscroll"; - classes.uiFastscrollTarget = "ui-fastscroll-target"; - classes.uiFastscrollPopup = "ui-fastscroll-popup"; - classes.uiScrollbar = "ui-scrollbar"; - classes.uiFastscrollHover = "ui-fastscroll-hover"; - classes.uiFastscrollHoverFirstItem = "ui-fastscroll-hover-first-item"; - classes.uiFastscrollHoverDown = "ui-fastscroll-hover-down"; - FastScroll.classes = classes; + listviewClasses.uiFastscroll = "ui-fastscroll"; + listviewClasses.uiFastscrollTarget = "ui-fastscroll-target"; + listviewClasses.uiFastscrollPopup = "ui-fastscroll-popup"; + listviewClasses.uiScrollbar = "ui-scrollbar"; + listviewClasses.uiFastscrollHover = "ui-fastscroll-hover"; + listviewClasses.uiFastscrollHoverFirstItem = "ui-fastscroll-hover-first-item"; + listviewClasses.uiFastscrollHoverDown = "ui-fastscroll-hover-down"; /** - * @pram {string[]} index - * @deprecated + * Count what is max height of short cut on fastscroll list + * @method getMaxFastscrollItemHeight + * @param {ns.widget.mobile.FastScroll} self + * @param {HTMLElement} item + * @param {number} itemsCount + * @param {number} containerHeight + * @return {number} + * @private + * @static + * @member ns.widget.mobile.FastScroll */ - prototype.indexString = function (index) { - var self = this; - ns.warn("Deprecated method: indexString use instead option('index', string)"); - self.indexScrollbar.option({ - "index": index, - "indexHeight": Math.floor(self._ui.scrollView.clientHeight / index.length) - }); - }; + function getMaxFastscrollItemHeight(self, item, itemsCount, containerHeight) { + var style = window.getComputedStyle(item, null), + marginHeight = self.marginHeight || parseInt(style.marginBottom.replace(/[^\d\.]/g, ""), 10), + itemHeight = Math.floor(containerHeight / itemsCount); + + marginHeight = self.marginHeight || marginHeight + 2 * parseInt(style.borderBottomWidth.replace(/[^\d\.]/g, ""), 10); + + self.marginHeight = marginHeight; + itemHeight -= marginHeight; + + return itemHeight; + } /** * Match char to divider * @method matchToDivider * @param {HTMLElement} divider * @param {string} indexChar - * @param {Object} map + * @param {Array} map * @private * @static * @member ns.widget.mobile.FastScroll */ function matchToDivider(divider, indexChar, map) { - if (indexChar === divider.textContent) { + if (indexChar === divider.innerText) { map[indexChar] = divider; } } @@ -216,41 +398,699 @@ * @member ns.widget.mobile.FastScroll */ function makeCharacterSet(divider, primaryCharacterSet) { - var content = divider.textContent; - return primaryCharacterSet + ((NUMBER_REGEXP.test(content)) ? "" : content); + return primaryCharacterSet + divider.innerText; } /** - * Creates map of deviders - * @method _createDividerMap - * @protected + * Function called whane pageshow event on fastscroll parent is called + * @method onPageshow + * @param {ns.widget.mobile.FastScroll} self + * @param {Event} event + * @private + * @static * @member ns.widget.mobile.FastScroll */ - prototype._createDividerMap = function (element) { - var self = this, + function onPageshow(self, event) { + event.target.removeEventListener("pageshow", self._onPageshowBound); + self._refresh(); + } + + /** + * Function called on focus out on fast scroll item + * @method onShortcutsListMouseOut + * @param {ns.widget.mobile.FastScroll} self + * @private + * @static + * @member ns.widget.mobile.FastScroll + */ + function onShortcutsListMouseOut(self) { + var items, + itemsLength, + i, + ui = self._ui; + + ui._popup.style.display = "none"; + + items = document.getElementsByClassName(listviewClasses.uiFastscrollHover); + itemsLength = items.length; + for (i = 0; i < itemsLength; i++) { + items[0].classList.remove(listviewClasses.uiFastscrollHover); + } + + items = document.getElementsByClassName(listviewClasses.uiFastscrollHoverDown); + itemsLength = items.length; + for (i = 0; i < itemsLength; i++) { + items[i].classList.remove(listviewClasses.uiFastscrollHoverDown); + } + + items = document.getElementsByClassName(listviewClasses.uiFastscrollHoverFirstItem); + itemsLength = items.length; + for (i = 0; i < itemsLength; i++) { + items[i].classList.remove(listviewClasses.uiFastscrollHoverFirstItem); + } + + ui._shortcutsContainer.classList.remove(listviewClasses.uiFastscrollHover); + } + + /** + * Function called on focus in on fast scroll item + * @method onShortcutsListMouseOver + * @param {ns.widget.mobile.FastScroll} self + * @param {Event} event + * @private + * @static + * @member ns.widget.mobile.FastScroll + */ + function onShortcutsListMouseOver(self, event) { + var coords = { + x: event.pageX, + y: event.pageY + }, + ui = self._ui, + shortcutsList = ui._shortcutsList, + shortcutsContainer = ui._shortcutsContainer, + shortcutsListOffset = { + left: shortcutsList.offsetLeft, + top: shortcutsList.offsetTop + }, + shortcutsContainerTop = shortcutsContainer.offsetTop, + shortcutsContainerLeft = shortcutsContainer.offsetLeft, + target = event.target, + shortcutsListItems, + shortcutsListItemsLength, + i, + j, + left, + top, + right, + bottom, + unit, + baseTop, + baseBottom, + omitSet, + listItem, + omitSetLength, + tagName = target.tagName.toLowerCase(); + + shortcutsContainer.classList.add(listviewClasses.uiFastscrollHover); + + // If the element is a list item, get coordinates relative to the shortcuts list + if (tagName === "li") { + coords.x += shortcutsListOffset.left - shortcutsContainerLeft; + coords.y += shortcutsListOffset.top - shortcutsContainerTop; + } + + if (tagName === "span") { + coords.x += target.parentElement.offsetLeft - shortcutsListOffset.left; + coords.y += target.parentElement.offsetTop - shortcutsListOffset.top; + } + + shortcutsListItems = shortcutsList.getElementsByTagName("li"); + shortcutsListItemsLength = shortcutsListItems.length; + for (i = 0; i < shortcutsListItemsLength; i++) { + listItem = shortcutsListItems[i]; + listItem.classList.remove(listviewClasses.uiFastscrollHover); + listItem.classList.remove(listviewClasses.uiFastscrollHoverDown); + + left = listItem.offsetLeft; + top = listItem.offsetTop; + right = left + Math.abs(listItem.offsetWidth); + bottom = top + Math.abs(listItem.offsetHeight); + + if (coords.x >= left && coords.x <= right && coords.y >= top && coords.y <= bottom) { + if (listItem.innerText === ".") { + omitSet = DOMUtils.getNSData(listItem, "omitSet"); + omitSetLength = omitSet.length; + unit = (bottom - top) / omitSetLength; + for (j = 0; j < omitSetLength; j++) { + baseTop = top + (j * unit); + baseBottom = baseTop + unit; + if (coords.y >= baseTop && coords.y <= baseBottom) { + self._hitOmitItem(listItem, omitSet.charAt(i)); + } + } + } else { + self._hitItem(listItem); + } + } + } + + event.preventDefault(); + event.stopPropagation(); + } + + /** + * Refresh fastscroll list items + * + * Recount of fastscroll height, recount of fastscroll item height, + * refresh short cuts list. + * + * @method fastscrollRefresh + * @param {ns.widget.mobile.FastScroll} self + * @private + * @static + * @member ns.widget.mobile.FastScroll + */ + function fastscrollRefresh(self) { + var element = self.element, + ui = self._ui, + scrollViewClip = selectors.getClosestByClass( + element, + Tabbar.classes.uiScrollviewClip + ), + contentHeight = DOMUtils.getElementHeight(scrollViewClip), primaryCharacterSet = null, secondCharacterSet = null, - numberSet = "0123456789", + popup = ui._popup, + popupStyle, + popupHeight, + shortcutsList = ui._shortcutsList, + shapItem, + shapItemSpan1, + shapItemSpan2, + omitIndex = 0, + containerHeight, + shortcutsItems, + shortcutItem, + shortcutsTop, + maxNumOfItems, + numOfItems, + minHeight, + omitInfo, dividers, - map = {}, + listItems, + emptySize, indexChar, + lastIndex, + seconds, i, - j, + listItemsLength, + dividersLength, + secondsLength, + shortcutsItemsLength, + styles, + item, + headers, + shortcutsContainer, + headersLength, + dividerClass = ns.widget.mobile.ListDivider.classes.uiLiDivider, + itemHeight, + maxHeight, + primaryCharacterSetLength; + + if (typeof parent_refresh === TYPE_FUNCTION) { + parent_refresh.call(self); + } + if (true !== self.options.fastscroll) { + return; + } + + if (shortcutsList) { + self._createDividerMap(); + DOMUtils.removeAllChildren(shortcutsList); + + dividers = element.getElementsByClassName(dividerClass); + listItems = selectors.getChildrenBySelector(element, "li:not(." + dividerClass + ")"); + + listItemsLength = listItems.length; + + shortcutsList.style.display = "block"; + ui._lastListItem = listItemsLength > 0 ? listItems[listItemsLength - 1] : null; + + shapItem = document.createElement("li"); + shapItem.setAttribute("aria-label", "double to move Number list"); + shapItem.tabIndex = 0; + shapItemSpan1 = document.createElement("span"); + shapItemSpan1.setAttribute("aria-hidden", "true"); + shapItemSpan1.innerText = "#"; + shapItem.appendChild(shapItemSpan1); + shapItemSpan2 = document.createElement("span"); + shapItemSpan2.setAttribute("aria-label", "Number"); + shapItem.appendChild(shapItemSpan2); + + shortcutsList.appendChild(shapItem); + self._focusItem(shapItem); + + dividersLength = dividers.length; + + if (primaryCharacterSet === null) { + primaryCharacterSet = ""; + for (i = 0; i < dividersLength; i++) { + primaryCharacterSet = makeCharacterSet(dividers[i], primaryCharacterSet); + } + } + + minHeight = shapItem.offsetHeight; + maxNumOfItems = parseInt(contentHeight / minHeight - 1, 10); + numOfItems = primaryCharacterSet.length; + + maxNumOfItems = secondCharacterSet ? maxNumOfItems - 2 : maxNumOfItems; + + if (maxNumOfItems < 3) { + if (shapItem.parentElement) { + shapItem.parentElement.removeChild(shapItem); + } + + return; + } + + omitInfo = self._omit(numOfItems, maxNumOfItems); + + for (i = 0, primaryCharacterSetLength = primaryCharacterSet.length; i < primaryCharacterSetLength; i++) { + indexChar = primaryCharacterSet.charAt(i); + shortcutItem = document.createElement("li"); + shortcutItem.setAttribute("aria-label", "double to move " + indexChar + " list"); + shortcutItem.setAttribute("tabindex", 0); + shortcutItem.innerText = indexChar; + + self._focusItem(shortcutItem); + + if (omitInfo && omitInfo[omitIndex] > 1) { + shortcutItem = document.createElement("li"); + shortcutItem.innerText = "."; + DOMUtils.setNSData(shortcutItem, "omitSet", self._makeOmitSet(i, omitInfo[omitIndex], primaryCharacterSet)); + i += omitInfo[omitIndex] - 1; + } + + shortcutsList.appendChild(shortcutItem); + omitIndex++; + } + + if (secondCharacterSet !== null) { + lastIndex = secondCharacterSet.length - 1; + seconds = []; + + seconds.push(secondCharacterSet.charAt(0)); + seconds.push(secondCharacterSet.charAt(lastIndex)); + + for (i = 0, secondsLength = seconds.length; i < secondsLength; i++) { + indexChar = seconds[i]; + shortcutItem = document.createElement("li"); + shortcutItem.tabIndex = 0; + shortcutItem.setAttribute("aria-label", "double to move " + indexChar + " list"); + shortcutItem.innerText = indexChar; + + self._focusItem(shortcutItem); + shortcutsList.append(shortcutItem); + } + } + + shortcutsContainer = ui._shortcutsContainer; + maxHeight = contentHeight - element.offsetTop; + shortcutsContainer.style.maxHeight = maxHeight + "px"; + + containerHeight = shortcutsContainer.offsetHeight; + emptySize = contentHeight - containerHeight; + shortcutsItems = shortcutsList.children; + shortcutsItemsLength = shortcutsItems.length; + shortcutsTop = (dividersLength > 0) ? dividers[0].offsetTop : 0; + + if (emptySize > 0) { + if (shortcutsItemsLength > 0) { + item = shortcutsItems[0]; + itemHeight = getMaxFastscrollItemHeight(self, item, shortcutsItemsLength, maxHeight); + } + for (i = 0; i < shortcutsItemsLength; i++) { + item = shortcutsItems[i]; + styles = item.style; + styles.height = itemHeight + "px"; + styles.lineHeight = styles.height; + } + } + + headers = shortcutsContainer.parentNode.getElementsByClassName(Tabbar.classes.uiHeader); + + for (i = 0, headersLength = headers.length; i < headersLength; i++) { + shortcutsTop += headers[i].offsetHeight; + } + + shortcutsTop += (maxHeight - shortcutsContainer.offsetHeight) / 2; + + ui._shortcutsContainer.style.top = shortcutsTop + "px"; + + popupHeight = DOMUtils.getElementHeight(popup); + popupStyle = popup.style; + popupStyle.width = popupHeight + 'px'; + popupStyle.marginLeft = -parseInt(DOMUtils.getElementWidth(popup) / 2, 10) + 'px'; + popupStyle.marginTop = -parseInt(popupHeight / 2, 10) + 'px'; + } + } + + /** + * Function called on mouse down on short cut + * @method onListItemVMouseDown + * @param {ns.widget.mobile.FastScroll} self + * @param {Event} event + * @private + * @static + * @member ns.widget.mobile.FastScroll + */ + function onListItemVMouseDown(self, event) { + self._ui._shortcutsList.setAttribute("aria-hidden", false); + self._hitItem(event.target); + } + + /** + * Function called on mouse up on short cut + * @method onListItemVMouseUp + * @param {ns.widget.mobile.FastScroll} self + * @private + * @static + * @member ns.widget.mobile.FastScroll + */ + function onListItemVMouseUp(self) { + var i, length, - dividersLength; + elements, + ui = self._ui; - element = element || self.element; - dividers = element.querySelectorAll( - ns.engine.getWidgetDefinition('ListDivider').selector - ); - dividersLength = dividers.length; + ui._shortcutsList.setAttribute("aria-hidden", true); + ui._popup.style.display = "none"; - for (i = 0; i < dividersLength; i++) { - if (numberSet.search(dividers[i].textContent) !== -1) { - map["#"] = dividers[i]; - break; + elements = document.getElementsByClassName(listviewClasses.uiFastscrollHover); + length = elements.length; + for (i = 0; i < length; i++) { + elements[0].classList.remove(listviewClasses.uiFastscrollHover); + } + + elements = document.getElementsByClassName(listviewClasses.uiFastscrollHoverFirstItem); + length = elements.length; + for (i = 0; i < length; i++) { + elements[0].classList.remove(listviewClasses.uiFastscrollHoverFirstItem); + } + + elements = document.getElementsByClassName(listviewClasses.uiFastscrollHoverDown); + length = elements.length; + for (i = 0; i < length; i++) { + elements[0].classList.remove(listviewClasses.uiFastscrollHoverDown); + } + } + + /** + * Prepare default configuration of fastscroll widget + * @method _configure + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._configure = function () { + if (typeof parent_configure === TYPE_FUNCTION) { + parent_configure.call(this); + } + + /** + * Object with default options + * @property {Object} options + * @property {boolean} [options.fastscroll=false] Sets if fastscroll should be enabled. + * @member ns.widget.mobile.FastScroll + */ + this.options = this.options || {}; + this.options.fastscroll = false; + }; + + /** + * Builds fasctroll + * @method _build + * @param {HTMLElement} element HTML element with fasctscroll enabled + * @return {HTMLElement} + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._build = function (element) { + var scrollView, + shortcutsContainer, + shortcutsList, + fastscrollPopup, + lastListItem, + elementChildrens, + elementChildrensLength, + scrollBars = [], + i, + ui, + scrollviewParent, + scrollBarsLength, + id = this.id; + + parent_build.call(this, element); + + // Make sure, that *this* has assigned correct element + // It is required for this.isBuilt checking. + this.element = element; + + // @TODO This is bad solution and need to be fixed + // Since few widgets can be built on one html element + // every Listview 'plugin' can be built more than one. + // There is a problem with selectors and Listview + // plugins management + if (this.options.fastscroll === true + && !( + this.isBuilt('FastScroll') + || this.isBuilt('Listview') + || this.isBuilt('ListviewFilter') + || this.isBuilt('ListviewAutodivider') + ) + ) { + //FIXME Why class uiScrollviewClip is in Tabbar not in Scrollview? + scrollView = selectors.getClosestByClass(element, Tabbar.classes.uiScrollviewClip); + if (scrollView) { + shortcutsContainer = document.createElement("div"); + shortcutsContainer.classList.add(listviewClasses.uiFastscroll); + shortcutsContainer.setAttribute("aria-label", "Fast scrollbar, double tap to fast scroll mode"); + shortcutsContainer.setAttribute("tabindex", 0); + shortcutsContainer.setAttribute("id", id + "-shortcutscontainer"); + shortcutsContainer.style.maxHeight = scrollView.offsetHeight + "px"; + + shortcutsList = document.createElement("ul"); + shortcutsList.setAttribute("aria-hidden", "true"); + shortcutsList.setAttribute("id", id + "-shortcutslist"); + + fastscrollPopup = document.createElement("div"); + fastscrollPopup.classList.add(listviewClasses.uiFastscrollPopup); + fastscrollPopup.setAttribute("id", id + "-fastscrollpopup"); + + shortcutsContainer.appendChild(shortcutsList); + + scrollviewParent = scrollView.parentNode; + scrollviewParent.appendChild(shortcutsContainer); + scrollviewParent.appendChild(fastscrollPopup); + + elementChildrens = element.children; + elementChildrensLength = elementChildrens.length; + + if (elementChildrensLength > 0) { + lastListItem = elementChildrens[elementChildrensLength - 1]; + } + + scrollBars = scrollView.getElementsByClassName(listviewClasses.uiScrollbar); + for (i = 0, scrollBarsLength = scrollBars.length; i < scrollBarsLength; i++) { + scrollBars[i].style.display = "none"; + } + + this._ui = this._ui || {}; + ui = this._ui; + + ui._scrollView = scrollView; + ui._shortcutsContainer = shortcutsContainer; + ui._shortcutsList = shortcutsList; + ui._lastListItem = lastListItem; + ui._popup = fastscrollPopup; } } + return element; + }; + + /** + * Initialize fastscroll widget + * @method _init + * @param {HTMLElement} element + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._init = function (element) { + var ui, + elementChildrens, + elementChildrensLength, + id = this.id; + if (typeof parent_init === TYPE_FUNCTION) { + parent_init.call(this, element); + } + + if (this.options.fastscroll) { + this._ui = this._ui || {}; + ui = this._ui; + + ui._scrollView = selectors.getClosestByClass(element, Tabbar.classes.uiScrollviewClip); + ui._shortcutsContainer = document.getElementById(id + "-shortcutscontainer"); + ui._shortcutsList = document.getElementById(id + "-shortcutslist"); + ui._popup = document.getElementById(id + "-fastscrollpopup"); + + elementChildrens = element.children; + elementChildrensLength = elementChildrens.length; + + if (elementChildrensLength > 0) { + ui._lastListItem = elementChildrens[elementChildrensLength - 1]; + } + + element.classList.add(listviewClasses.uiFastscrollTarget); + } + }; + + /** + * Binds fastscroll widget events + * @method _bindEvents + * @param {HTMLElement} element + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._bindEvents = function (element) { + var pageParent = selectors.getParentsByClass(element, Page.classes.uiPage)[0], + shortcutsList = this._ui._shortcutsList; + + this._uiPageParent = pageParent; + + if (typeof parent_bindEvents === TYPE_FUNCTION) { + parent_bindEvents.call(this, element); + } + + if (this.options.fastscroll !== true) { + return; + } + + this._onPageshowBound = onPageshow.bind(null, this); + this._onRefreshBound = fastscrollRefresh.bind(null, this); + this._onShortcutsListMouseOverBound = onShortcutsListMouseOver.bind(null, this); + this._onShortcutsListMouseOutBound = onShortcutsListMouseOut.bind(null, this); + + if (pageParent) { + pageParent.addEventListener("pageshow", this._onPageshowBound, true); + } + + element.addEventListener("updatelayout", this._onRefreshBound, false); + window.addEventListener("resize", this._onRefreshBound, false); + window.addEventListener("orientationchange", this._onRefreshBound, false); + + if (shortcutsList) { + shortcutsList.addEventListener("vmousedown", this._onShortcutsListMouseOverBound, false); + shortcutsList.addEventListener("vmousemove", this._onShortcutsListMouseOverBound, false); + shortcutsList.addEventListener("vmouseover", this._onShortcutsListMouseOverBound, false); + + shortcutsList.addEventListener("vmouseup", this._onShortcutsListMouseOutBound, false); + shortcutsList.addEventListener("vmouseout", this._onShortcutsListMouseOutBound, false); + } + }; + + /** + * Destroy FastScroll widget + * + * Destroy current widget. + * + * @example + * <div data-role="page" id="main"> + * <div data-role="content"> + * <ul id="list" data-role="listview" data-fastscroll="true"> + * <li data-role="list-divider">A</li> + * <li>Anton</li> + * <li>Arabella</li> + * <li data-role="list-divider">B</li> + * <li>Barry</li> + * <li>Bily</li> + * </ul> + * </div> + * </div> + * <script> + * var element = document.getElementById("list"), + * fastscroll = tau.widget.FastScroll(element); + * fastscroll.destroy(); + * </script> + * + * or JQueryMobile notation: + * + * @example + * <div data-role="page" id="main"> + * <div data-role="content"> + * <ul data-role="listview" data-fastscroll="true" id="fastscroll"> + * <li data-role="list-divider">A</li> + * <li>Anton</li> + * <li>Arabella</li> + * <li data-role="list-divider">B</li> + * <li>Barry</li> + * <li>Bily</li> + * </ul> + * </div> + * </div> + * <script> + * $("#list").fastscroll("destroy"); + * </script> + * + * @method destroy + * @member ns.widget.mobile.FastScroll + */ + + /** + * Unbinds fastscroll widget events + * @method _destroy + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._destroy = function () { + var element = this.element, + pageParent = this._uiPageParent, + shortcutsList = this._ui._shortcutsList, + shortcutsListItems, + listItem, + shortcutsListItemsLength, + i; + if (typeof parent_destroy === TYPE_FUNCTION) { + parent_destroy.call(this); + } + + if (pageParent) { + pageParent.removeEventListener("pageshow", this._onPageshowBound); + } + + element.removeEventListener("updatelayout", this._onRefreshBound); + window.removeEventListener("resize", this._onRefreshBound); + window.removeEventListener("orientationchange", this._onRefreshBound); + + if (shortcutsList) { + shortcutsList.removeEventListener("vmousedown", this._onShortcutsListMouseOverBound); + shortcutsList.removeEventListener("vmousemove", this._onShortcutsListMouseOverBound); + shortcutsList.removeEventListener("vmouseover", this._onShortcutsListMouseOverBound); + + shortcutsList.removeEventListener("vmouseup", this._onShortcutsListMouseOutBound); + shortcutsList.removeEventListener("vmouseout", this._onShortcutsListMouseOutBound); + + shortcutsListItems = shortcutsList.getElementsByTagName("li"); + + for (i = 0, shortcutsListItemsLength = shortcutsListItems.length; i < shortcutsListItemsLength; i++) { + listItem = shortcutsListItems[i]; + listItem.removeEventListener("vmousedown", this._onListItemVMouseDownBound); + listItem.removeEventListener("vmouseup", this._onListItemVMouseUpBound); + } + } + + events.trigger(element, eventType.DESTROYED, { + widget: "FastScroll", + parent: pageParent + }); + }; + + /** + * Creates map of deviders + * @method _createDividerMap + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._createDividerMap = function () { + var primaryCharacterSet = null, + secondCharacterSet = null, + numberSet = "0123456789", + dividers = this.element.getElementsByClassName(ns.widget.mobile.ListDivider.classes.uiLiDivider), + map = {}, + indexChar, + i, + j, + length, + dividersLength = dividers.length; if (primaryCharacterSet === null) { primaryCharacterSet = ""; @@ -275,110 +1115,290 @@ } } - self._dividerMap = map; - self._charSet = primaryCharacterSet + secondCharacterSet; + for (i = 0; i < dividersLength; i++) { + if (numberSet.search(dividers[i].innerText) !== -1) { + map.number = dividers[i]; + break; + } + } + + this._dividerMap = map; + this._charSet = primaryCharacterSet + secondCharacterSet; }; - prototype._build = function (element) { - var self = this, - indexElement = document.createElement("div"), - page = selectors.getClosestByClass(element, "ui-page"), - scrollView = selectors.getClosestByClass(element, "ui-scrollview-clip"), - index; - - ns.warn("Deprecated widget 'FastScroll'. Please use instead 'IndexScrollbar'"); - - indexElement.classList.add("ui-indexscrollbar"); - indexElement.style["height"] = scrollView.offsetHeight + "px"; - indexElement.style["top"] = scrollView.offsetTop + "px"; - // @deprecated - indexElement.classList.add(classes.uiFastscroll); - - self._createDividerMap(element); - - page.appendChild(indexElement); - index = Object.keys(self._dividerMap).join(","); - self.indexScrollbar = engine.instanceWidget( - indexElement, - "IndexScrollbar", { - "indexHeight": indexElement.clientHeight / index.length, - "index": index, - "delimiter": /[,:]/ - }); - return element; + /** + * Finds closes divider + * @method _findClosestDivider + * @param {string} targetChar + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._findClosestDivider = function (targetChar) { + var i, + dividerMap = this._dividerMap, + charSet = this._charSet, + charSetLen = charSet.length, + targetIdx = charSet.indexOf(targetChar), + lastDivider, + subDivider = null; + + for (i = 0; i < targetIdx; ++i) { + lastDivider = dividerMap[charSet.charAt(i)]; + if (lastDivider !== undefined) { + subDivider = lastDivider; + } + } + if (!subDivider) { + for (++i; i < charSetLen; ++i) { + lastDivider = dividerMap[charSet.charAt(i)]; + if (lastDivider !== undefined) { + subDivider = lastDivider; + break; + } + } + } + return subDivider; }; - prototype._init = function () { - var self = this; + /** + * Scroll listview to asked divider + * @method _jumpToDivider + * @param {HTMLElement} divider + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._jumpToDivider = function (divider) { + var dividerY = divider.offsetTop, + ui = this._ui, + lastListItem = ui._lastListItem, + bottomOffset = lastListItem.offsetHeight + lastListItem.offsetTop, + scrollviewHeight = ui._scrollView.offsetHeight, + maxScroll = bottomOffset - scrollviewHeight, + scrollViewBinding = engine.getBinding(ui._scrollView); + + dividerY = (dividerY > maxScroll ? maxScroll : dividerY); + + dividerY = Math.max(dividerY, 0); - self._ui.scrollView = selectors.getClosestByClass(self.element, "ui-scrollview-clip"); - self.scrollView = ns.engine.getBinding(self._ui.scrollView, "Scrollview"); + scrollViewBinding.scrollTo(0, dividerY, scrollViewBinding.scrollDuration); }; - function findFirstDividerByIndex(self, index) { - return self._dividerMap[index]; - } + /** + * On fastscroll item pressed + * @method _hitItem + * @param {HTMLElement} listItem + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._hitItem = function (listItem) { + var popup = this._ui._popup, + text = listItem.innerText, + divider, + listItemClassList = listItem.classList, + nextElement = listItem.nextElementSibling, + popupStyles = popup.style; - function onSelectIndexScrollbar(self, ev) { - var divider, - element = self.element; - divider = findFirstDividerByIndex(self, ev.detail.index); + if (text === "#") { + divider = this._dividerMap.number; + } else { + divider = this._dividerMap[text] || this._findClosestDivider(text); + } + if (divider) { - self.scrollView.scrollTo(0, divider.offsetTop - element.offsetTop); + this._jumpToDivider(divider); } - } - prototype._bindEvents = function () { - var self = this; + popup.innerText = text; + popupStyles.display = "block"; + popupStyles.width = popup.offsetHeight + 'px'; + popupStyles.marginLeft = -parseInt(popup.offsetWidth / 2) + 'px'; + popupStyles.marginTop = -parseInt(popup.offsetHeight / 2) + 'px'; - self.eventHandlers.onSelectIndexScrollbar = - onSelectIndexScrollbar.bind(null, self); - self.indexScrollbar.addEventListener( - "select", self.eventHandlers.onSelectIndexScrollbar, false - ); + listItemClassList.add(listviewClasses.uiFastscrollHover); + if (!listItem.previousElementSibling) { + listItemClassList.add(listviewClasses.uiFastscrollHoverFirstItem); + } + if (nextElement) { + nextElement.classList.add(listviewClasses.uiFastscrollHoverDown); + } }; - prototype._unbindEvents = function () { - var self = this; - - self.indexScrollbar.removeEventListener( - "select", self.eventHandlers.onSelectIndexScrollbar, false - ); + /** + * Add focus to shortcut item + * @method _focusItem + * @param {HTMLElement} listItem + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._focusItem = function (listItem) { + this._onListItemVMouseDownBound = this._onListItemVMouseDownBound || onListItemVMouseDown.bind(null, this); + this._onListItemVMouseUpBound = this._onListItemVMouseUpBound || onListItemVMouseUp.bind(null, this); + listItem.addEventListener("vmouseover", this._onListItemVMouseDownBound, false); + listItem.addEventListener("vmouseout", this._onListItemVMouseUpBound, false); }; - prototype._destroy = function () { - var self = this, - element = self.element; + /** + * If max number of items is greater then 3 return array with cout of omited items. + * @method _omit + * @param {number} numOfItems + * @param {number} maxNumOfItems + * @return {?Array} + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._omit = function (numOfItems, maxNumOfItems) { + var maxGroupNum = parseInt((maxNumOfItems - 1) / 2, 10), + numOfExtraItems = numOfItems - maxNumOfItems, + groupPos = [], + omitInfo = [], + groupPosLength, + group, + size, + i; - self.indexScrollbar.destroy(); - self.indexScrollbar.element.classList.remove(classes.uiFastscroll); + if ((maxNumOfItems < 3) || (numOfItems <= maxNumOfItems)) { + return null; + } - self._unbindEvents(); + if (numOfExtraItems >= maxGroupNum) { + size = 2; + group = 1; + groupPosLength = maxGroupNum; + } else { + size = maxNumOfItems / (numOfExtraItems + 1); + group = size; + groupPosLength = numOfExtraItems; + } - events.trigger(element, eventType.DESTROYED, { - widget: "FastScroll", - parent: element.parentNode - }); + for (i = 0; i < groupPosLength; i++) { + groupPos.push(parseInt(group, 10)); + group += size; + } + + for (i = 0; i < maxNumOfItems; i++) { + omitInfo.push(1); + } + + for (i = 0; i < numOfExtraItems; i++) { + omitInfo[groupPos[i % maxGroupNum]]++; + } + + return omitInfo; }; - // definition - FastScroll.prototype = prototype; - ns.widget.mobile.FastScroll = FastScroll; + /** + * Creates string containing omited elements. Omits items starting from index. + * Max number of omited elemets is given as length parameter + * @method _makeOmitSet + * @param {number} index + * @param {number} length + * @param {string} primaryCharacterSet + * @return {string} + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._makeOmitSet = function (index, length, primaryCharacterSet) { + var count, + omitSet = ""; + + for (count = 0; count < length; count++) { + omitSet += primaryCharacterSet[index + count]; + } + + return omitSet; + }; + + /** + * Refresh Fast Scroll widget + * @method _refresh + * @protected + * @member ns.widget.mobile.FastScroll + */ + Listview.prototype._refresh = function () { + this._onRefreshBound = this._onRefreshBound || fastscrollRefresh.bind(this); + this._onRefreshBound(); + }; /** - * @deprecated; + * Get or set index string: + * + * You can use the _indexString_ method with the fast scroll to manage string values to be used in shortcut items: + * + * @example + * <div data-role="page" id="main"> + * <div data-role="content"> + * <ul id="fastscroll"> + * <li data-role="list-divider">A</li> + * <li>Anton</li> + * <li>Arabella</li> + * <li data-role="list-divider">B</li> + * <li>Barry</li> + * <li>Bily</li> + * </ul> + * </div> + * </div> + * <script> + * // get index string + * var element = document.getElementById("fastscroll"), + * fastscroll = tau.widget.FastScroll(element, {fastscroll: true}); + * fastscroll.indexString(); + * + * // set index string + * fastscroll.indexString("A,D,J,P,W,Z"); + * </script> + * + * or JQueryMobile notation: + * + * @example + * <div data-role="page" id="main"> + * <div data-role="content"> + * <ul data-role="listview" data-fastscroll="true" id="fastscroll"> + * <li data-role="list-divider">A</li> + * <li>Anton</li> + * <li>Arabella</li> + * <li data-role="list-divider">B</li> + * <li>Barry</li> + * <li>Bily</li> + * </ul> + * </div> + * </div> + * <script> + * $("#fastscroll").fastscroll("indexString", "A,D,J,P,W,Z"); + * </script> + * + * @method indexString + * @param {string} [indexAlphabet] values to be used in shortcut items + * @member ns.widget.mobile.FastScroll + * @since 2.1 + * @return {?string} Primary and secondary language */ + Listview.prototype.indexString = function (indexAlphabet) { + var characterSet; + + if (undefined === indexAlphabet) { + return this._primaryLanguage + ":" + this._secondLanguage; + } + + characterSet = indexAlphabet.split(":"); + this._primaryLanguage = characterSet[0]; + if (2 === characterSet.length) { + this._secondLanguage = characterSet[1]; + } + return null; + }; + + // definition + ns.widget.mobile.FastScroll = Listview; engine.defineWidget( "FastScroll", - "ul[data-fastscroll='true']", + "", ["indexString"], - FastScroll, - "mobile" + Listview, + "tizen" ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.mobile.FastScroll; + return false; } ); //>>excludeEnd("tauBuildExclude"); diff --git a/tau/src/js/profile/mobile/widget/mobile/Fieldcontain.js b/tau/src/js/profile/mobile/widget/mobile/Fieldcontain.js index 48ad66b6..7cabf643 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Fieldcontain.js +++ b/tau/src/js/profile/mobile/widget/mobile/Fieldcontain.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint plusplus: true, nomen: true */ /** * #Field's Container Grouping Widget diff --git a/tau/src/js/profile/mobile/widget/mobile/Gallery.js b/tau/src/js/profile/mobile/widget/mobile/Gallery.js index b48ba1df..cc8d5cd6 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Gallery.js +++ b/tau/src/js/profile/mobile/widget/mobile/Gallery.js @@ -1,27 +1,13 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Gallery Widget * The gallery widget shows images in a gallery on the screen. * - * ##Default selectors - * In default all elements with _data-role="gallery"_ or class _.ui-gallery_ are changed to gallery widget. - * * @class ns.widget.mobile.Gallery * @extends ns.widget.BaseWidget */ @@ -130,7 +116,7 @@ */ function getHeight(element) { var page = selectors.getClosestBySelectorNS(element, "role=page"), - content = selectors.getAllByDataNS(page, "role=content")[0], + content = selectors.getAllByDataNS(element, "role=content"), header = selectors.getAllByDataNS(page, "role=header"), footer = selectors.getAllByDataNS(page, "role=footer"), headerHeight = header.length ? doms.getElementHeight(header[0]) : 0, @@ -192,9 +178,8 @@ style = imageContainer.style; style.webkitTransform = translate; - style.oTransform = translate; - style.mozTransform = translate; - style.msTransform = translate; + style.OTransform = translate; + style.MozTransform = translate; style.transform = translate; return imageContainer; @@ -313,11 +298,10 @@ */ Gallery.classes = { uiGallery: "ui-gallery", - uiGalleryContainer: "ui-gallery-container", uiGalleryBg: "ui-gallery-bg", uiContent: "ui-content", uiHeader: "ui-header", - uiFooter: "ui-footer", + uiFooter: "ui-footer" }; /** @@ -387,16 +371,15 @@ i, length; - element.classList.add(classes.uiGallery); images = selectors.getChildrenByTag(element, "img"); for (i = 0, length = images.length; i < length; i++) { image = images[i]; doms.wrapInHTML(image, "<div class='" + classes.uiGalleryBg + "'></div>"); } if (element.children.length) { - doms.wrapInHTML(element.children, "<div class='" + classes.uiGalleryContainer + "'></div>"); + doms.wrapInHTML(element.children, "<div class='" + classes.uiGallery + "'></div>"); } else { - element.innerHTML = "<div class='" + classes.uiGalleryContainer + "'></div>"; + element.innerHTML = "<div class='" + classes.uiGallery + "'></div>"; } index = parseInt(options.index, 10); if (!index) { @@ -424,7 +407,7 @@ Gallery.prototype._init = function (element) { var images = element.getElementsByTagName("img"), classes = Gallery.classes; - this.container = selectors.getChildrenByClass(element, classes.uiGalleryContainer)[0]; + this.container = selectors.getChildrenByClass(element, classes.uiGallery)[0]; this._detachAll(images); // for "compare" test @@ -504,16 +487,12 @@ * @member ns.widget.mobile.Gallery */ Gallery.prototype._moveLeft = function (imageContainer, value, duration) { - var style; + var transition = ""; if (imageContainer) { if (duration !== undefined) { - style = imageContainer.style; - style.webkitTransition = "-webkit-transform " + (duration / 1000) + "s ease"; - style.mozTransition = "-moz-transform " + (duration / 1000) + "s ease"; - style.msTransition = "-ms-transform " + (duration / 1000) + "s ease"; - style.oTransition = "-o-transform " + (duration / 1000) + "s ease"; - style.transition = "transform " + (duration / 1000) + "s ease"; + transition = "-webkit-transform " + (duration / 1000) + "s ease"; + imageContainer.style.webkitTransition = transition; } imageContainer = setTranslatePosition(imageContainer, value); } @@ -1224,7 +1203,7 @@ ns.widget.mobile.Gallery = Gallery; engine.defineWidget( "Gallery", - "[data-role='gallery'], .ui-gallery", + "[data-role='gallery'], .ui-gallery-container", [ "add", "remove", diff --git a/tau/src/js/profile/mobile/widget/mobile/Gallery3D.js b/tau/src/js/profile/mobile/widget/mobile/Gallery3D.js index 4b4219e7..86bef595 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Gallery3D.js +++ b/tau/src/js/profile/mobile/widget/mobile/Gallery3D.js @@ -24,7 +24,7 @@ * The Gallery3D widget displays images along a curved path on a 3-dimensional coordinate system. * * ## Default selectors - * In default all elements with _data-role=gallery3d_ or class _.ui-gallery3d_ are changed to Tizen Web UI Gallery3D + * In default all elements with _data-role=gallery3d_ are changed to Tizen Web UI Gallery3D * * @example * <div id="gallery3d" data-role="gallery3d"></div> @@ -2057,7 +2057,7 @@ ns.widget.mobile.Gallery3D = Gallery3D; engine.defineWidget( "Gallery3D", - "[data-role='gallery3d'], .ui-gallery3d", + "[data-role='gallery3d']", ["add", "remove", "next", "prev", "select", "clearThumbnailCache", "empty", "length"], diff --git a/tau/src/js/profile/mobile/widget/mobile/IndexScrollbar.js b/tau/src/js/profile/mobile/widget/mobile/IndexScrollbar.js deleted file mode 100644 index dfb3f3aa..00000000 --- a/tau/src/js/profile/mobile/widget/mobile/IndexScrollbar.js +++ /dev/null @@ -1,167 +0,0 @@ -/*global define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/** - * # Index Scrollbar Widget - * The index scrollbar widget shows a shortcut list that can be bound with a other widget eg. listview. - * - * If you move the mouse on the shortcut column then a pop-up with the text currently - * under the cursor is also displayed. - * - * - * ## Default selectors - * - * In default all elements with class _ui-indexcrollbar_ are changed to Tizen Web UI Index Scrollbar - * - * @example - * <div data-role="page" id="main"> - * <div data-role="content"> - * <ul data-role="listview" data-fastscroll="true"> - * <li data-role="list-divider">A</li> - * <li>Anton</li> - * <li>Arabella</li> - * <li data-role="list-divider">B</li> - * <li>Barry</li> - * <li>Bily</li> - * </ul> - * </div> - * </div> - * - * #### Create Index Scrollbar widget using tau method: - * - * @example - * <div data-role="page" id="main"> - * <div data-role="content"> - * <ul id="list" data-fastscroll="true"> - * <li data-role="list-divider">A</li> - * <li>Anton</li> - * <li>Arabella</li> - * <li data-role="list-divider">B</li> - * <li>Barry</li> - * <li>Bily</li> - * </ul> - * </div> - * </div> - * <script> - * var fastscroll = tau.widget.FastScroll(document.getElementById("list")); - * </script> - * - * #### Create Index Scrollbar widget using jQueryMobile notation: - * - * @example - * <div data-role="page" id="main"> - * <div data-role="content"> - * <ul id="list" data-fastscroll="true"> - * <li data-role="list-divider">A</li> - * <li>Anton</li> - * <li>Arabella</li> - * <li data-role="list-divider">B</li> - * <li>Barry</li> - * <li>Bily</li> - * </ul> - * </div> - * </div> - * <script> - * var fastscroll = $("#list").fastscroll(); - * </script> - * - * ## Options - * - * ### Index Scrollbar - * _data-fastscroll_ option set to true, creates a fast scroll using the HTML unordered list (<ul>) element. - * - * @example - * <div data-role="page" id="main"> - * <div data-role="content"> - * <ul id="contacts" data-role="listview" data-fastscroll="true"> - * <li data-role="list-divider">A</li> - * <li>Anton</li> - * <li>Arabella</li> - * <li data-role="list-divider">B</li> - * <li>Barry</li> - * <li>Bily</li> - * </ul> - * </div> - * </div> - * - * ## Methods - * - * To call method on widget you can use tau API: - * - * @example - * <div data-role="page" id="main"> - * <div data-role="content"> - * <ul id="contacts"> - * <li data-role="list-divider">A</li> - * <li>Anton</li> - * <li>Arabella</li> - * <li data-role="list-divider">B</li> - * <li>Barry</li> - * <li>Bily</li> - * </ul> - * </div> - * </div> - * <script> - * var element = document.getElementById("contacts"), - * contacts = tau.widget.FastScroll(element, {fastscroll: true}); - * - * contacts.methodName(methodArgument1, methodArgument2, ...); - * - * // or JQueryMobile notation: - * $(element).contacts("methodName", methodArgument1, methodArgument2, ...); - * </script> - * - * @class ns.widget.mobile.IndexScrollbar - * @extends ns.widget.core.IndexScrollbar - * @since 2.0 - */ -(function (ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/widget/core/indexscrollbar/IndexScrollbar", - "../mobile" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var engine = ns.engine, - CoreIndexScrollbar = ns.widget.core.IndexScrollbar, - prototype = new CoreIndexScrollbar(), - IndexScrollbar = function () { - CoreIndexScrollbar.call(this); - }; - - // definition - IndexScrollbar.prototype = prototype; - ns.widget.mobile.IndexScrollbar = IndexScrollbar; - - engine.defineWidget( - "IndexScrollbar", - ".ui-indexscrollbar", - [], - IndexScrollbar, - "mobile" - ); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.mobile.IndexScrollbar; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(ns)); diff --git a/tau/src/js/profile/mobile/widget/mobile/Listdivider.js b/tau/src/js/profile/mobile/widget/mobile/Listdivider.js index ff0e9a81..6302d578 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Listdivider.js +++ b/tau/src/js/profile/mobile/widget/mobile/Listdivider.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * # List Divider Widget @@ -133,7 +122,7 @@ "../../../../core/util/selectors", "../mobile", "./BaseWidgetMobile", - "../../../../core/widget/core/Button", + "./Button" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -169,7 +158,7 @@ * @static * @private */ - Button = ns.widget.core.Button, + Button = ns.widget.mobile.Button, ListDivider = function () { return this; @@ -239,21 +228,21 @@ //@todo check if ol tag and reset counter if (!options.style || options.style === "normal" || options.style === "check") { - dom.wrapInHTML( - element.childNodes, - "<span class='ui-divider-text'></span>" - ); - if (options.folded === true) { + /* buttonMarkup on element */ + engine.instanceWidget(element, "Button"); + } else { dom.wrapInHTML( element.childNodes, - "<a href='#'></a>" + "<span class='" + buttonClasses.uiBtnText + "'></span>" ); } if (options.line === true) { if (options.folded === true) { - elementWithLine = element.firstChild; + /*append to element.childrenBySelector("ui-btn-inner")*/ + elementWithLine = selectors.getChildrenByClass(element, + buttonClasses.uiBtnInner)[0]; } else { elementWithLine = element; } diff --git a/tau/src/js/profile/mobile/widget/mobile/Listview.js b/tau/src/js/profile/mobile/widget/mobile/Listview.js index bce6b1d3..e3159b8f 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Listview.js +++ b/tau/src/js/profile/mobile/widget/mobile/Listview.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * # Listview Widget @@ -735,10 +724,10 @@ "../../../../core/event", "../../../../core/event/vmouse", "../../../../core/util/colors", - "../../../../core/widget/core/Page", - "../../../../core/widget/core/Button", "../mobile", "./BaseWidgetMobile", + "./Button", + "./Page" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -768,21 +757,21 @@ */ DOM = ns.util.DOM, /** - * Alias for class ns.widget.core.Button + * Alias for class ns.widget.mobile.Button * @property {Function} Button * @member ns.widget.mobile.Listview * @static * @private */ - Button = ns.widget.core.Button, + Button = ns.widget.mobile.Button, /** - * Alias for class ns.widget.core.Page + * Alias for class ns.widget.mobile.Page * @property {Function} Page * @member ns.widget.mobile.Listview * @static * @private */ - Page = ns.widget.core.Page, + Page = ns.widget.mobile.Page, /** * Alias for class {@link ns.util.color} * @property {Function} Page @@ -820,9 +809,7 @@ * @property {string} classes.uiLiIcon class of icon included in li element * @property {string} classes.uiLiHasIcon class of li element which has icon * @property {string} classes.uiLiHasCheckbox class of li element which has checkbox - * @property {string} classes.uiLiHasCheckboxDisabled class of li element which has checkbox disabled * @property {string} classes.uiLiHasRadio class of li element which has radio button - * @property {string} classes.uiLiHasRadioDisabled class of li element which has radio button disabled * @property {string} classes.uiLiHasRightCircleBtn class of li element which has circle button * @property {string} classes.uiLiHasRightBtn class of li element which has button allign to right * @property {string} classes.uiLiCount class of count included in li element @@ -854,19 +841,16 @@ uiLiIcon: "ui-li-icon", uiLiHasIcon: "ui-li-has-icon", uiLiHasCheckbox: "ui-li-has-checkbox", - uiLiHasCheckboxDisabled: "ui-li-has-checkbox-disabled", uiLiHasRadio: "ui-li-has-radio", - uiLiHasRadioDisabled: "ui-li-has-radio-disabled", uiLiHasRightCircleBtn: "ui-li-has-right-circle-btn", uiLiHasRightBtn: "ui-li-has-right-btn", uiLiCount: "ui-li-count", uiLiHasCount: "ui-li-has-count", - uiLiAnchor: "ui-li-anchor", uiLiStatic: "ui-li-static", uiLiHeading: "ui-li-heading" }, /** - * Alias for object ns.widget.core.Button.classes + * Alias for object ns.widget.mobile.Button.classes * @property {Object} buttonClasses * @member ns.widget.mobile.Listview * @static @@ -910,9 +894,6 @@ * @property {?string} [options.theme=null] theme of widget * @property {?string} [options.dividerTheme="s"] theme of listview divider * @property {boolean} [options.inset=false] inset option - listview is wrapped by additionally layer - * @property {"colored"|null} [options.type=null] set type of list, colored or not - * @property {number} [options.coloredListNumber=18] max number of colored items - * @property {number} [options.diffLightness=3] difference between colored items * @member ns.widget.mobile.Listview */ options = self.options || {}; @@ -920,8 +901,7 @@ options.theme = null; options.dividerTheme = "s"; options.inset = false; - options.type = null; - options.coloredListNumber = 18; + options.coloredListNumber = 12; options.diffLightness = 3; self.options = options; @@ -929,6 +909,83 @@ }; /** + * Change links to button widget + * @method changeLinksToButton + * @param {HTMLElement} item + * @param {Array} links + * @param {string} itemTheme + * @private + * @static + * @member ns.widget.mobile.Listview + */ + function changeLinksToButton(item, links, itemTheme) { + var icon = DOM.getNSData(item, "icon"), + linkClassList = links[0].classList, + linksLength = links.length, + last = links[linksLength - 1], + span; + DOM.setNSData(item, "theme", itemTheme); + engine.instanceWidget( + item, + "Button", + { + wrapperEls: "div", + shadow: false, + corners: false, + iconpos: "right", + icon: false + } + ); + + if (linksLength === 1) { + item.classList.add(classes.uiLiHasArrow); + if (icon !== false) { + item.classList.add(buttonClasses.uiBtnIconRight); + } + } else if (linksLength > 1) { + item.classList.add(classes.uiLiHasAlt); + item.appendChild(last); + last.classList.add(classes.uiLiLinkAlt); + last.setAttribute("title", last.innerText); + last.innerText = ""; + engine.instanceWidget( + last, + "Button", + { + wrapperEls: "span", + shadow: false, + corners: false, + iconpos: "right", + icon: false + } + ); + last.classList.add(buttonClasses.uiBtnIconNotext); + + span = document.createElement("span"); + engine.instanceWidget( + span, + "Button", + { + wrapperEls: "span", + shadow: true, + corners: false, + iconpos: "notext", + icon: "arrow-r" + } + ); + last.querySelector("." + buttonClasses.uiBtnInner) + .appendChild(span); + } + linkClassList.remove(classes.uiLink); + linkClassList.add(classes.uiLinkInherit); + + selectors.getChildrenByClass(item, buttonClasses.uiBtnInner) + .forEach(function (element) { + element.classList.add(classes.uiLi); + }); + } + + /** * Add thumb classes img * @method addThumbClassesToImg * @param {HTMLElement} img @@ -975,22 +1032,13 @@ function addCheckboxRadioClasses(container) { var inputAttr = container.querySelector("input"), typeOfInput, - contenerClassList = container.classList, - disabled = false; - + contenerClassList = container.classList; if (inputAttr) { typeOfInput = inputAttr.getAttribute("type"); - disabled = inputAttr.hasAttribute("disabled"); if (typeOfInput === "checkbox") { contenerClassList.add(classes.uiLiHasCheckbox); - if (disabled) { - contenerClassList.add(classes.uiLiHasCheckboxDisabled); - } } else if (typeOfInput === "radio") { contenerClassList.add(classes.uiLiHasRadio); - if (disabled) { - contenerClassList.add(classes.uiLiHasRadioDisabled); - } } } } @@ -1129,26 +1177,26 @@ self._coloredListHandler = self._scrollHandler.bind(self); // This variable will be used when event handler remove. if (parentElement){ // List in scrollview - element.parentNode.insertBefore(dummyElement, element.parentNode.firstChild); + parentElement.parentNode.appendChild(dummyElement); parentElement.addEventListener("scroll", self._coloredListHandler); if (self._scrollTop) { // It was scrolled before that means listview element made before and don't need to init more. return; } - + dummyElement.style.top = parentElement.offsetTop + "px"; } else { parentElement = element.parentNode; parentElement.appendChild(dummyElement); parentElement.addEventListener("scroll", self._coloredListHandler); - + dummyElement.style.top = "0"; } self._changeColoredPosition(0); // Init linear-gradient parentElement.style.backgroundColor = "transparent"; dummyElement.style.width = element.offsetWidth + "px"; - dummyElement.style.height = parentElement.offsetHeight * 2 + "px"; + dummyElement.style.height = parentElement.offsetHeight + "px"; }; @@ -1216,7 +1264,6 @@ gradientValue, gradient; - self._dummyElement.style.top = scrollTop + "px"; if (!direction) { // move up colorRatio = -colorRatio; // redRatio = -4 / listTopOffsetHeight @@ -1266,13 +1313,10 @@ * @member ns.widget.mobile.Listview */ Listview.prototype._clickCheckboxRadio = function (element) { - var checkboxRadio = slice.call(element.querySelectorAll(".ui-checkbox, .ui-radio, .ui-slider-switch-input")), - i = checkboxRadio.length, - input; - + var checkboxRadio = slice.call(element.querySelectorAll(".ui-checkbox label, .ui-radio label")), + i = checkboxRadio.length; while (--i >= 0) { - input = checkboxRadio[i]; - input.checked = (input.type === "checkbox") ? !input.checked : true; + eventUtils.trigger(checkboxRadio[i], "vclick"); } }; @@ -1288,20 +1332,19 @@ page = selectors.getClosestByClass(element, Page.classes.uiPage); element.addEventListener("vclick", function (event) { - var target = event.target; + var target = event.target, + parentTarget = target.parentNode; - if (target.classList.contains(classes.uiLiHasCheckbox) || - target.classList.contains(classes.uiLiHasRadio) || - target.classList.contains(classes.uiLiHasRightBtn)) { + if (target.classList.contains(classes.uiLiHasCheckbox) || target.classList.contains(classes.uiLiHasRadio)) { self._clickCheckboxRadio(target); - } else if (target.type === "checkbox" || target.type === "radio") { - event.stopPropagation(); - event.preventDefault(); + } else if (parentTarget.classList.contains(classes.uiLiHasCheckbox) || parentTarget.classList.contains(classes.uiLiHasRadio)) { + self._clickCheckboxRadio(parentTarget); } }, false); - if (self.options.type !== "colored") { + if (element.getAttribute("data-type") !== "colored") { element.classList.add("ui-listview-default"); + return; } else { if (!element.classList.contains(classes.uiListviewColored)) { element.classList.add(classes.uiListviewColored); @@ -1417,10 +1460,11 @@ * @member ns.widget.mobile.Listview */ Listview.prototype._refreshCorners = function (ul, create) { - var self = this, - items = selectors.getChildrenByTag(ul, "li"), + var items, + self = this, last; + items = selectors.getChildrenByTag(ul, "li"); if (items.length) { // clean previous corners items.forEach(function (item) { @@ -1448,94 +1492,7 @@ }; /** - * Adds checkboxradio, thumb and right button classes - * if it is essential. - * @method addItemClasses - * @param {HTMLElement} item Element to add classes to - * @static - * @private - * @member ns.widget.mobile.Listview - */ - function addItemClasses(item) { - addCheckboxRadioClasses(item); - addThumbClasses(item); - addRightBtnClasses(item); - } - - /** - * Refreshes item elements with "a" tag - * @method refreshLinks - * @param {HTMLElement} element HTML LI element - * @static - * @private - * @member ns.widget.mobile.Listview - */ - function refreshLinks(item) { - var links = selectors.getChildrenByTag(item, "a"), - itemClassList = item.classList; - if (links.length) { - addItemClasses(links[0]); - itemClassList.add(classes.uiLiAnchor); - } else { - itemClassList.add(classes.uiLiStatic); - item.setAttribute("tabindex", "0"); - } - } - - /** - * Refreshes single item of a list - * @method refreshItem - * @param {HTMLElement} element HTML LI element - * @param {boolean} create True if item is forced to be created - * @param {string} dividerTheme List divider theme - * @static - * @private - * @member ns.widget.mobile.Listview - */ - function refreshItem(item, create, dividerTheme) { - var itemClassList = item.classList; - - if (create || (!itemClassList.contains(classes.uiLi) && DOM.isOccupiedPlace(item))) { - itemClassList.add(classes.uiLi); - - if (item.querySelector("." + classes.uiLiCount)) { - itemClassList.add(classes.uiLiHasCount); - } - - if (item.hasAttribute("tabindex") === false) { - item.setAttribute("tabindex", 0); - } - - if (selectors.matchesSelector(item, engine.getWidgetDefinition("ListDivider").selector)) { - engine.instanceWidget(item, "ListDivider", {theme: dividerTheme}); - } else { - refreshLinks(item); - addHeadingClasses(item); - } - } - addItemClasses(item); - } - - /** - * Refreshes list images - * @method refreshImages - * @param {HTMLElement} ul HTML UL element - * @static - * @private - * @member ns.widget.mobile.Listview - */ - function refreshImages(ul) { - var imgs = ul.querySelectorAll("." + classes.uiLinkInherit + " > img:first-child"), - i, - length = imgs.length; - - for (i = 0; i < length; i++) { - addThumbClassesToImg(imgs[i]); - } - } - - /** - * Refreshes items of list + * Refresh items of list * @method _refreshItems * @param {HTMLElement} ul HTML UL element * @param {boolean} create @@ -1543,25 +1500,70 @@ * @member ns.widget.mobile.Listview */ Listview.prototype._refreshItems = function (ul, create) { - var self = this, - items, - options = self.options, + var items, + options = this.options, theme, + last, + imgs, dividerTheme; eventUtils.trigger(ul, "beforerefreshitems"); - items = selectors.getChildrenByTag(ul, "li"); theme = DOM.getNSData(ul, "theme") || options.theme || "s"; dividerTheme = DOM.getNSData(ul, "divider-theme") || options.dividerTheme || theme; + last = items.length - 1; + + //@todo filter only visible + items.forEach(function (item, index) { + var itemTheme, + links, + link, + itemClassList = item.classList; + if (create || !item.classList.contains(classes.uiLi)) { + itemClassList.add(classes.uiLi); + links = selectors.getChildrenByTag(item, "a"); + itemTheme = DOM.getNSData(item, "theme") || theme; + + if (!!item.querySelector("." + classes.uiLiCount)) { + itemClassList.add(classes.uiLiHasCount); + } - items.forEach(function (item) { - refreshItem(item, create, dividerTheme); - }, self); - - refreshImages(ul); + //becasue ListDivider is attached later then Listview I cannot make reference to ListDivider classes + if (selectors.matchesSelector(item, '[data-role="list-divider"],.ui-list-divider')) { + DOM.setNSData(item, "theme", dividerTheme); + engine.instanceWidget(item, "ListDivider"); + } else { + if (links.length) { + changeLinksToButton(item, links, itemTheme); + link = links[0]; + addCheckboxRadioClasses(link); + addThumbClasses(link); + addRightBtnClasses(link); + } else { + itemClassList.add(classes.uiLiStatic); + itemClassList.add(buttonClasses.uiBtnUpThemePrefix + itemTheme); + item.setAttribute("tabindex", "0"); + } + addHeadingClasses(item); + } + } + addCheckboxRadioClasses(item); + addThumbClasses(item); + addRightBtnClasses(item); + if (index === last) { + itemClassList.add(classes.uiLiLast); + } else { + itemClassList.remove(classes.uiLiLast); + } + }, this); - self._refreshCorners(ul, create); + imgs = ul.querySelectorAll("." + classes.uiLinkInherit + " > img:first-child"); + if (imgs.length !== 0) { + slice.call(imgs).forEach(function (img) { + addThumbClassesToImg(img); + }); + } + this._refreshCorners(ul, create); }; /** @@ -1624,7 +1626,7 @@ ns.widget.mobile.Listview = Listview; engine.defineWidget( "Listview", - "ul[data-role='listview'], ul.ui-listview, ol[data-role='listview'], ol.ui-listview", + "[data-role='listview'], .ui-listview", ["addItem", "removeItem"], Listview, "mobile" diff --git a/tau/src/js/profile/mobile/widget/mobile/ListviewAutodivider.js b/tau/src/js/profile/mobile/widget/mobile/ListviewAutodivider.js index db68eb1c..0d346bf6 100644 --- a/tau/src/js/profile/mobile/widget/mobile/ListviewAutodivider.js +++ b/tau/src/js/profile/mobile/widget/mobile/ListviewAutodivider.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Autodividers extension for ListView Widget diff --git a/tau/src/js/profile/mobile/widget/mobile/ListviewFilter.js b/tau/src/js/profile/mobile/widget/mobile/ListviewFilter.js index 0c3e2b6b..a7f77100 100644 --- a/tau/src/js/profile/mobile/widget/mobile/ListviewFilter.js +++ b/tau/src/js/profile/mobile/widget/mobile/ListviewFilter.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Filter Extension For ListView Widget diff --git a/tau/src/js/profile/mobile/widget/mobile/Loader.js b/tau/src/js/profile/mobile/widget/mobile/Loader.js index b14f2664..fad41c23 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Loader.js +++ b/tau/src/js/profile/mobile/widget/mobile/Loader.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Loader Widget diff --git a/tau/src/js/profile/mobile/widget/mobile/MultimediaView.js b/tau/src/js/profile/mobile/widget/mobile/MultimediaView.js index f95edb63..7bf8e5b0 100644 --- a/tau/src/js/profile/mobile/widget/mobile/MultimediaView.js +++ b/tau/src/js/profile/mobile/widget/mobile/MultimediaView.js @@ -1,19 +1,8 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * #Multimedia View widget @@ -38,9 +27,9 @@ '../../../../core/util/selectors', '../../../../core/util/object', '../../../../core/event', - "../../../../core/widget/core/Page", - "../../../../core/widget/core/Button", './BaseWidgetMobile', + "./Button", + './Page', './Scrollview', './Slider', './Progressbar' @@ -113,14 +102,14 @@ utilsSelectors = ns.util.selectors, /** * Local alias for classes of Page widget - * @property {Object} Page Alias for {@link ns.widget.core.Page} + * @property {Object} Page Alias for {@link ns.widget.mobile.Page} */ - pageClasses = ns.widget.core.Page.classes, + pageClasses = ns.widget.mobile.Page.classes, /** * Local alias for classes of Button widget - * @property {Object} Button Alias for {@link ns.widget.core.Button} + * @property {Object} Button Alias for {@link ns.widget.mobile.Button} */ - buttonClasses = ns.widget.core.Button.classes, + buttonClasses = ns.widget.mobile.Button.classes, /** * Local alias for classes of Scrollview widget * @property {Object} Scrollview Alias for {@link ns.widget.mobile.Scrollview} @@ -504,9 +493,6 @@ self.element = element; self._isVideo = isVideo; - // INFO: since 2.3, we decided to use standard HTML <video> and <audio> tag. - ns.warn("TAU based Multimediaview widget will be deprecated. Please use <video> / <audio> tag with standard HTML."); - viewClasslist.add(classes.VIEW); control = self._createControl(); diff --git a/tau/src/js/profile/mobile/widget/mobile/Navbar.js b/tau/src/js/profile/mobile/widget/mobile/Navbar.js index 741d01df..73851e99 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Navbar.js +++ b/tau/src/js/profile/mobile/widget/mobile/Navbar.js @@ -1,19 +1,8 @@ /*global document, window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Navigation Bar Widget @@ -150,7 +139,7 @@ "../../../../core/util/selectors", "../../../../core/event/vmouse", "../mobile", - "../../../../core/widget/Button", + "./Button", "./BaseWidgetMobile" ], function () { @@ -158,7 +147,7 @@ var engine = ns.engine, grid = ns.util.grid, selectors = ns.util.selectors, - buttonActiveClass = ns.widget.core.Button.classes.uiBtnActive, + buttonActiveClass = ns.widget.mobile.Button.classes.uiBtnActive, slice = [].slice, // basic options set for navigation bar buttons buttonOptions = { diff --git a/tau/src/js/profile/mobile/widget/mobile/Navigation.js b/tau/src/js/profile/mobile/widget/mobile/Navigation.js index 88fc1848..9eb0aa06 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Navigation.js +++ b/tau/src/js/profile/mobile/widget/mobile/Navigation.js @@ -1,131 +1,56 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright (c) 2013 - 2014 Samsung Electronics Co., Ltd + * License : MIT License V2 */ /** - * #Navigation Bar + * #Navigation Widget * Navigation Bar inside header to navigate back and forth according to - * navigational history array, which is created by application. + * navigational history array, which is created by application. * By clicking horizontally listed element on the Navigation Bar, - * a page is possible to navigate to the target page. + * page is possible to be changed to the target page. * * ##Default selector * You can make the navigation widget as data-role="navigation". - * To use *NAV* tag is recommended for semantic understanding. + * On creation, to use *NAV* tag is recommended for semantic understanding. + * + * ### HTML Examples * * #### Create Navigation Bar using data-role * * @example - * <div data-role="page" id="pageid"> + * <div data-role="page"> * <div data-role="header" data-position="fixed"> * <h1>title</h1> - * <nav data-role="navigation" id="navigation"></nav> - * </div> - * <div data-role="content"></div> - * </div> - * - * ##HTML Examples - * - * ####How to use Navigation Bar in your code - * - * To create a navigation bar, an array containing history is required. - * And also, each value of the array is recommended - * to have identifiable value such as pageId. - * In the example below, the array is named as navigationHistory. - * - * This widget only provides creation of navigation bar visually, - * not functional navigation. So, it is required to implement the - * navigational function in application by using other - * method such as history.go() or something. - * - * - First, in your HTMl code, you can declare navigation by using date-role. - * - * @example - * <div data-role="page" id="navigation-bar"> - * <!-- declare navigation in header --> - * <div data-role="header" data-position="fixed"> - * <h1>Navigation Bar</h1> * <nav data-role="navigation" id="navigation"> * </nav> * </div> - * <!-- you can put several pages to move --> * <div data-role="content"> - * <ul data-role="listveiw"> - * <li><a href="navigation1.html">Move to Navigation1</a></li> - * <li><a href="navigation2.html">Move to Navigation2</a></li> - * </ul> * </div> * </div> * - * - Second, you can make history array and create navigation bar - * by using javascript code. + * ##Navigation methods * - * @example - * var historyMaker = function(event) { - * //make browsing history be stored in navigationHistory array. - * var iteration = window.navigationHistory.length, - * i = 0, - * targetId = event.target.id; - * if (!iteration) { - * navigationHistory.push({ - * pageId : targetId - * }); - * } else { - * for (i = 0; i < iteration; i++){ - * if (targetId === navigationHistory[i].pageId) { - * navigationHistory.splice(i + 1, iteration - i - 1); - * break; - * } - * } - * if (i >= iteration) { - * navigationHistory.push({ - * pageId : targetId - * }); - * } - * } - * }, + * You can use method of navigation widget. * - * historyDrawer = function(event) { - * var navi = document.getElementById("navigation"), - * naviWidget = tau.widget.Navigation(navi); - * if (document.getElementsByClassName("ui-navigation-ul")[0] - * .childElementCount) { - * tau.warn("Create method should be called only once in a page"); - * } else { - * //Create Navigation widget with navigationHistory - * naviWidget.create(navigationHistory); - * } - * }, + * - "create" - create navigation bar according to history array. + * - To create a naviagtion bar, an array containing history is required. + * And also, each value of the array is recommended to have identifiable value such as name. + * In the example below, the array is named as historyArraytoUse. * - * historyMove = function(event) { - * var selectedIndex = event.originalEvent.detail, - * barLength = navigationHistory.length; - * //clear unnecessary array of history out - * navigationHistory.splice(selectedIndex + 1, barLength - selectedIndex ); - * history.go(- (barLength - selectedIndex) + 1); - * }; + * - This widget only provides creation of navigation bar visually, not funtional navigation. + * So, it is required to implement the navigational function in application by using other + * method such as history.go() or something. + * + * @examples + * <script> + * var navigation = document.getElementById("navigation"), + * navigationBar = tau.widget.Navigation(navigation); * - * window.navigationHistory = window.navigationHistory || []; - * //When page created and showed, following event handlers need to bind only once. - * $(document).one("pagebeforeshow", historyMaker); - * $(document).one("pageshow", historyDrawer); - * $("nav").one("navigate", historyMove); + * navigationBar.create(historyArraytoUse); + * </script> * * @class ns.widget.mobile.Navigation * @extends ns.widget.BaseWidget - * @author Junhyeon Lee <juneh.lee@samsung.com> * @author Maciej Moczulski <m.moczulsku@samsung.com> * @author Hyunkook Cho <hk0713.cho@samsung.com> * @author Hyeoncheol Choi <hc7.choi@samsung.com> @@ -134,6 +59,7 @@ * @author Koeun Choi <koeun.choi@samsung.com> * @author Piort Karny <p.karny@samsung.com> * @author Krzysztof Antonszek <k.antonszek@samsung.com> + * @author Junhyeon Lee <juneh.lee@samsung.com> */ (function (document, ns) { "use strict"; @@ -157,7 +83,6 @@ self._navigateTrigger = null; self._ui = { - page: null, container: null }; self._barLength = null; @@ -169,7 +94,6 @@ * @member ns.widget.mobile.Navigation */ classes = { - page : "ui-page", header : "ui-header", titleNavigation : "ui-title-navigation", navigation: "ui-navigation", @@ -211,7 +135,7 @@ * @member ns.widget.mobile.Navigation */ prototype.create = function (navigationHistory) { - if (!this.element.querySelector("." + classes.navigationUl + " > *:first-child")) { + if (!document.querySelector("." + classes.navigationUl + " > *:first-child")) { this._make(navigationHistory); } else { ns.warn("Navigation Bar should be created only once."); @@ -281,7 +205,6 @@ * @member ns.widget.mobile.Navigation */ prototype._init = function (element){ - this._ui.page = selectors.getParentsByClass(element, classes.page)[0]; this._ui.container = selectors.getChildrenByClass(element, classes.navigationUl)[0]; }; @@ -303,11 +226,10 @@ /** * Destroy Navigation widget * @method _destroy - * @param {HTMLElement} element * @protected * @member ns.widget.mobile.Navigation */ - prototype._destroy = function (element) { + prototype._destroy = function () { element.removeEventListener("vclick", this._navigateTrigger, false); }; diff --git a/tau/src/js/profile/mobile/widget/mobile/Notification.js b/tau/src/js/profile/mobile/widget/mobile/Notification.js index d20ac4e8..9cde5d05 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Notification.js +++ b/tau/src/js/profile/mobile/widget/mobile/Notification.js @@ -1,19 +1,8 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Notification widget @@ -177,9 +166,9 @@ "../../../../core/util/selectors", "../../../../core/util/DOM", "../../../../core/theme", - "../../../../core/widget/core/Page", "../mobile", // fetch namespace - "./BaseWidgetMobile" + "./BaseWidgetMobile", + "./Page" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -190,11 +179,11 @@ */ var BaseWidget = ns.widget.mobile.BaseWidgetMobile, /** - * {Object} Widget Alias for {@link ns.widget.core.Page} + * {Object} Widget Alias for {@link ns.widget.mobile.Page} * @member ns.widget.Notification * @private */ - Page = ns.widget.core.Page, + Page = ns.widget.mobile.Page, /** * @property {Object} engine Alias for class ns.engine * @member ns.widget.mobile.Notification diff --git a/tau/src/js/profile/mobile/widget/mobile/Page.js b/tau/src/js/profile/mobile/widget/mobile/Page.js index 018ad995..025199a3 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Page.js +++ b/tau/src/js/profile/mobile/widget/mobile/Page.js @@ -1,20 +1,9 @@ /*jslint nomen: true, plusplus: true */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #Page Widget * Page widget represents the screen of an application @@ -277,7 +266,7 @@ * @member ns.widget.mobile.Page */ -(function (window, ns) { +(function (ns) { "use strict"; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( @@ -288,28 +277,30 @@ "../../../../core/util/DOM/css", "../../../../core/util/object", "../../../../core/event/orientationchange", - "../../../../core/widget/core/Page", - "../../../../core/widget/core/Button", - "../mobile" + "../mobile", + "../../../../core/theme", + "./BaseWidgetMobile", + "./Button" ], function () { //>>excludeEnd("tauBuildExclude"); - var CorePage = ns.widget.core.Page, - CorePagePrototype = CorePage.prototype, + var BaseWidget = ns.widget.mobile.BaseWidgetMobile, engine = ns.engine, selectors = ns.util.selectors, object = ns.util.object, utilsDOM = ns.util.DOM, + slice = [].slice, Page = function () { - var self = this; - CorePage.call(self); - self.options = object.copy(Page.prototype.options); - }, - buttonClasses = ns.widget.core.Button.classes, - classes, - prototype = new CorePage(); - - Page.prototype = prototype; + /** + * @property {boolean} [pageSetHeight=false] The flag is indicates that height of the page was set by framework + * @member ns.widget.mobile.Page + */ + this.pageSetHeight = false; + this.contentFillCallback = null; + this.contentFillAfterResizeCallback = null; + this.destroyCallback = null; + this.options = object.copy(Page.prototype.options); + }; /** * Dictionary for page related css class names @@ -324,10 +315,11 @@ * @property {string} [classes.uiTitleMultiline='ui-title-multiline'] Title multiline class * @property {string} [classes.uiPage='ui-page'] Main page class * @property {string} [classes.uiPageActive='ui-page-active'] Page active class - * @property {string} [classes.uiHeaderFullscreen='ui-page-header-fullscreen'] Page header fullscreen class - * @property {string} [classes.uiFooterFullscreen='ui-page-footer-fullscreen'] Page footer fullscreen class - * @property {string} [classes.uiHeaderFixed='ui-page-header-fixed'] Page header fixed class - * @property {string} [classes.uiFooterFixed='ui-page-footer-fixed'] Page footer fixed class + * @property {string} [classes.uiPageHeaderFullscreen='ui-page-header-fullscreen'] Page header fullscreen class + * @property {string} [classes.uiPageFooterFullscreen='ui-page-footer-fullscreen'] Page footer fullscreen class + * @property {string} [classes.uiPageHeaderFixed='ui-page-header-fixed'] Page header fixed class + * @property {string} [classes.uiPageFooterFixed='ui-page-footer-fixed'] Page footer fixed class + * @property {string} [classes.uiOverlayPrefix='ui-overlay-'] Ui overlay prefix * @property {string} [classes.uBtnLeft='ui-btn-left'] Left button class * @property {string} [classes.uiBtnRight='ui-btn-right'] Right button class * @property {string} [classes.uiBtnRightPrefix='ui-btn-right-'] Right button prefix @@ -337,7 +329,7 @@ * @static * @readonly */ - classes = object.merge({}, CorePage.classes, { + Page.classes = { uiPrefix: "ui-", uiBarPrefix: "ui-bar-", uiBodyPrefix: "ui-body-", @@ -347,41 +339,48 @@ uiTitleTextSub: "ui-title-text-sub", uiTitleMultiline: "ui-title-multiline", uiFooterBtn: "ui-footer-btn-", - uiHeaderFullscreen: "ui-page-header-fullscreen", - uiFooterFullscreen: "ui-page-footer-fullscreen", - uiHeaderFixed: "ui-page-header-fixed", - uiFooterFixed: "ui-page-footer-fixed", + uiPage: "ui-page", + uiPageActive: "ui-page-active", + uiPageContent: "ui-content", + uiPageHeader: "ui-header", + uiPageFooter: "ui-footer", + uiPageHeaderFullscreen: "ui-page-header-fullscreen", + uiPageFooterFullscreen: "ui-page-footer-fullscreen", + uiPageHeaderFixed: "ui-page-header-fixed", + uiPageFooterFixed: "ui-page-footer-fixed", uiOverlayPrefix: "ui-overlay-", uiBtnLeft: "ui-btn-left", uiBtnRight: "ui-btn-right", uiBtnRightPrefix: "ui-btn-right-", fixedSuffix: "-fixed", - fullscreenSuffix: "-fullscreen", - uiHeaderDivider: "ui-header-divider" + fullscreenSuffix: "-fullscreen" // @todo put all used classes here - }); + }; - Page.classes = classes; + Page.prototype = new BaseWidget(); /** * Object with default options * @property {Object} options * @property {boolean} [options.fullscreen=false] Fullscreen page flag - * @property {string} [options.theme='s'] Page theme + * @property {string} [options.theme='a'] Page theme * @property {boolean} [options.domCache=false] Use DOM cache * @property {?string} [options.contentTheme=null] Page content theme - * @property {string} [options.headerTheme='s'] Page header theme. If headerTheme is empty `theme` will be used - * @property {string} [options.footerTheme='s'] Page footer theme. If footerTheme is empty `theme` will be used + * @property {string} [options.headerTheme='a'] Page header theme. If headerTheme is empty `theme` will be used + * @property {string} [options.footerTheme='a'] Page footer theme. If footerTheme is empty `theme` will be used * @member ns.widget.mobile.Page */ Page.prototype.options = { - theme: "s", - contentTheme: null, - headerTheme: "s", - footerTheme: "s", fullscreen: false, + theme: "a", domCache: false, keepNativeDefault: ns.getConfig("keepNative"), + contentTheme: null, + headerTheme: "a", + footerTheme: "a", + // @removed + addBackBtn: false, + enhanced: false }; /** @@ -401,6 +400,59 @@ */ Page.prototype.backBtnTheme = null; + // Sets top-bottom css attributes for content element + // to allow it to fill the page dynamically + // @method contentFill + // @param {ns.widget.mobile.Page} self + function contentFill(self) { + var content, + contentStyle, + element = self.element, + header, + headerDivider, + headerBtn, + headerBtnWidth = 0, + pageClasses = Page.classes, + top = 0, + bottom = 0, + i, + footer, + len; + + if (element && !self.pageSetHeight && element.classList.contains(Page.classes.uiPageActive)) { + content = element.querySelector("[data-role=content],." + pageClasses.uiPageContent); + if (content) { + //>>excludeStart("tauDebug", pragmas.tauDebug); + ns.log("Page (contentFill) on ", self.id, " styles was recalculated"); + //>>excludeEnd("tauDebug"); + contentStyle = content.style; + header = element.querySelector("[data-role=header],." + pageClasses.uiPageHeader); + + if (header) { + headerDivider = header.getElementsByClassName("ui-header-divider"); + len = headerDivider.length; + if (len) { + headerBtn = header.getElementsByClassName("ui-btn"); + // Header divider exist + for (i = 0; i < len; i++) { + headerBtnWidth += headerBtn[i].offsetWidth; + headerDivider[i].style.right = headerBtnWidth + "px"; + } + } + top = utilsDOM.getElementHeight(header); + } + + footer = element.querySelector("[data-role=footer],." + pageClasses.uiPageFooter); + bottom = utilsDOM.getElementHeight(footer); + + contentStyle.top = top + "px"; + contentStyle.bottom = bottom + "px"; + contentStyle.height = utilsDOM.getElementHeight(content.parentNode) - top - bottom + "px"; + self.pageSetHeight = true; + } + } + } + // Build header/footer/content // @method buildSections // @param {Object} options Object with options for widget @@ -408,21 +460,23 @@ // @param {string} pageTheme page theme name function buildSections(options, pageElement, pageTheme) { var pageClassList = pageElement.classList, + pageClasses = Page.classes, fullscreen = options.fullscreen; if (fullscreen) { // "fullscreen" overlay positioning - pageClassList.add(classes.uiHeaderFullscreen); - pageClassList.add(classes.uiFooterFullscreen); + pageClassList.add(pageClasses.uiPageHeaderFullscreen); + pageClassList.add(pageClasses.uiPageFooterFullscreen); } else { // If not fullscreen, add class to page to set top or bottom padding - pageClassList.add(classes.uiHeaderFixed); - pageClassList.add(classes.uiFooterFixed); + pageClassList.add(pageClasses.uiPageHeaderFixed); + pageClassList.add(pageClasses.uiPageFooterFixed); } - [].slice.call(pageElement.querySelectorAll("." + classes.uiHeader + - ",." + classes.uiContent + - ",." + classes.uiFooter)) + [].slice.call(pageElement.querySelectorAll("[data-role='header'],[data-role='content'],[data-role='footer'],." + + pageClasses.uiPageHeader + + ",." + pageClasses.uiPageContent + + ",." + pageClasses.uiPageFooter)) .forEach(function (section) { var role = section.getAttribute("data-role"), sectionTheme = section.getAttribute("data-theme"), @@ -441,9 +495,9 @@ previousElementOfHeaderButton; if (!role) { - if (sectionClassList.contains(classes.uiHeader)) { + if (sectionClassList.contains(pageClasses.uiPageHeader)) { role = "header"; - } else if (sectionClassList.contains(classes.uiContent)) { + } else if (sectionClassList.contains(pageClasses.uiPageContent)) { role = "content"; } else { role = "footer"; @@ -452,7 +506,7 @@ section.setAttribute("data-role", role); } - sectionClassList.add(classes.uiPrefix + role); + sectionClassList.add(pageClasses.uiPrefix + role); // Adding transition classes for all matched elements // @todo support transition form config @@ -469,17 +523,17 @@ section.setAttribute("role", "main"); currentTheme = sectionTheme || options.contentTheme; if (currentTheme) { - sectionClassList.add(classes.uiBodyPrefix + currentTheme); + sectionClassList.add(pageClasses.uiBodyPrefix + currentTheme); } } else { currentTheme = sectionTheme || (role === "header" ? options.headerTheme : options.footerTheme) || pageTheme; - sectionClassList.add(classes.uiBarPrefix + currentTheme); + sectionClassList.add(pageClasses.uiBarPrefix + currentTheme); // We always set the ui-[header|footer]-fixed class to match Tizen design needs - sectionClassList.add(classes.uiPrefix + role + classes.fixedSuffix); + sectionClassList.add(pageClasses.uiPrefix + role + pageClasses.fixedSuffix); if (fullscreen) { - sectionClassList.add(classes.uiPrefix + role + classes.fullscreenSuffix); + sectionClassList.add(pageClasses.uiPrefix + role + pageClasses.fullscreenSuffix); } section.setAttribute("role", role === "header" ? "banner" : "contentinfo"); @@ -488,20 +542,20 @@ headerAnchors = selectors.getChildrenBySelector(section, "a, div.naviframe-button, button, [data-role=button]"); headerAnchors.forEach(function (anchor) { var anchorClassList = anchor.classList; - leftButton = anchorClassList.contains(classes.uiBtnLeft); - rightButton = anchorClassList.contains(classes.uiBtnRight); + leftButton = anchorClassList.contains(pageClasses.uiBtnLeft); + rightButton = anchorClassList.contains(pageClasses.uiBtnRight); }); - if (!leftButton && headerAnchors[0] && !headerAnchors[0].classList.contains(classes.uiBtnRight)) { + if (!leftButton && headerAnchors[0] && !headerAnchors[0].classList.contains(pageClasses.uiBtnRight)) { leftButton = headerAnchors[0]; utilsDOM.setNSData(leftButton, "role", "button"); - leftButton.classList.add(classes.uiBtnLeft); + leftButton.classList.add(pageClasses.uiBtnLeft); } if (!rightButton && headerAnchors[1]) { rightButton = headerAnchors[1]; utilsDOM.setNSData(rightButton, "role", "button"); - rightButton.classList.add(classes.uiBtnRight); + rightButton.classList.add(pageClasses.uiBtnRight); } headerButtons = selectors.getChildrenBySelector(section, "a,[data-role='button']"); @@ -514,8 +568,8 @@ }); } - if (section.querySelector("." + classes.uiTitleTextSub)) { - sectionClassList.add(classes.uiTitleMultiline); + if (section.querySelector("." + pageClasses.uiTitleTextSub)) { + sectionClassList.add(pageClasses.uiTitleMultiline); } } else if (role === "footer") { footerButtons = selectors.getChildrenBySelector(section, "a,div.naviframe-button,[data-role='button'],button,[type='button'],[type='submit'],[type='reset']"); @@ -532,7 +586,7 @@ role: "button" }); }); - section.classList.add(classes.uiFooterBtn + footerButtons.length); + section.classList.add(pageClasses.uiFooterBtn + footerButtons.length); } } @@ -542,7 +596,7 @@ width, titleStyle = title.style; - title.classList.add(classes.uiTitle); + title.classList.add(pageClasses.uiTitle); title.setAttribute("role", "heading"); title.setAttribute("aria-level", 1); title.setAttribute("aria-label", "title"); @@ -585,19 +639,6 @@ } /** - * Configure widget - * @method _configure - * @param {HTMLElement} element - * @protected - * @member ns.widget.mobile.Page - */ - prototype._configure = function(element) { - CorePagePrototype._configure.call(this, element); - // in mobile header should always be build by default - this.options.header = true; - }; - - /** * Build page * @method _build * @param {HTMLElement} element @@ -606,78 +647,28 @@ * @member ns.widget.mobile.Page */ Page.prototype._build = function (element) { - CorePagePrototype._build.call(this, element); buildStructure(this.options, element); return element; }; - /** - * Bind events to widget - * @method _bindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.mobile.Page - */ - Page.prototype._bindEvents = function (element) { - var self = this; - CorePagePrototype._bindEvents.call(self, element); - element.addEventListener("pageshow", self.contentFillAfterResizeCallback, false); - element.addEventListener("updatelayout", self.contentFillAfterResizeCallback, false); - }; - - /** - * Sets top-bottom css attributes for content element - * to allow it to fill the page dynamically - * @method _contentFill - * @member ns.widget.mobile.Page - */ - Page.prototype._contentFill = function () { - var self = this, - content, - contentStyle, - element = self.element, - header, - headerDivider, - headerBtn, - headerBtnWidth = 0, - pageClasses = Page.classes, - top = 0, - bottom = 0, - i, - footer, - len; - - CorePagePrototype._contentFill.call(self, element); - content = element.querySelector("." + pageClasses.uiContent); - if (content) { - //>>excludeStart("tauDebug", pragmas.tauDebug); - ns.log("Page (contentFill) on ", self.id, " styles was recalculated"); - //>>excludeEnd("tauDebug"); - contentStyle = content.style; - header = element.querySelector("." + pageClasses.uiHeader); - - if (header) { - headerDivider = header.getElementsByClassName(pageClasses.uiHeaderDivider); - len = headerDivider.length; - if (len) { - headerBtn = header.getElementsByClassName(buttonClasses.uiBtn); - // Header divider exist - for (i = 0; i < len; i++) { - headerBtnWidth += headerBtn[i].offsetWidth; - headerDivider[i].style.right = headerBtnWidth + "px"; - } + /*Page.prototype._updatePadding = function (page) { + var pageStyle = page.style; + Array.prototype.slice.call(page.querySelectorAll("[data-role='header'],[data-role='content'],[data-role='footer']")).forEach(function (section) { + var role = section.getAttribute("data-role"), + dataposition = section.getAttribute("data-position"), + sectionStyle = section.style; + if (dataposition === "fixed") { + sectionStyle.position = "fixed"; + if (role === "header") { + pageStyle.paddingTop = section.offsetHeight + "px"; + sectionStyle.top = 0; + } else if (role === "footer") { + pageStyle.paddingBottom = section.offsetHeight + "px"; + sectionStyle.bottom = 0; } - top = utilsDOM.getElementHeight(header); } - - footer = element.querySelector("." + pageClasses.uiFooter); - bottom = utilsDOM.getElementHeight(footer); - - contentStyle.top = top + "px"; - contentStyle.bottom = bottom + "px"; - contentStyle.height = window.innerHeight - top - bottom + "px"; - } - }; + }); + };*/ /** * Set page active / unactive @@ -701,44 +692,38 @@ */ Page.prototype.setActive = function (value, pageContainer) { var theme = this.options.theme, + classes = Page.classes, themeClass = classes.uiOverlayPrefix + theme, - bodyClassList; - - bodyClassList = pageContainer.classList; - - CorePagePrototype.setActive.call(this, value); + bodyClassList = pageContainer.classList; if (value) { + this.element.classList.add(classes.uiPageActive); + this.focus(); bodyClassList.add(themeClass); } else { + this.element.classList.remove(classes.uiPageActive); + this.blur(); bodyClassList.remove(themeClass); } }; /** - * Refresh widget structure - * @method _refresh - * @protected - * @member ns.widget.mobile.Page - */ - Page.prototype._refresh = function () { - var self = this; - buildStructure(self.options, self.element); - CorePagePrototype._refresh.call(self); - }; - - /** - * Destroy widget - * @method _destroy - * @protected + * GUI Builder only : redesign page when user drag&drop header, footer + * + * !!!This method is only available through TAU API!!! + * + * @example + * <div id="myPage"></div> + * <script type="text/javascript"> + * var page = tau.widget.page(document.getElementById("myPage")); + * page.setToolbar(); + * </script> + * + * @method setToolbar * @member ns.widget.mobile.Page */ - Page.prototype._destroy = function () { - var self = this, - element = self.element; - CorePagePrototype._destroy.call(self); - element.removeEventListener("updatelayout", self.contentFillAfterResizeCallback, false); - element.removeEventListener("pageshow", self.contentFillAfterResizeCallback, false); + Page.prototype.setToolbar = function () { + this.trigger("pagebeforeshow"); }; /** @@ -762,11 +747,10 @@ * </script> * * @method removeContainerBackground - * @deprecated 2.3 * @member ns.widget.mobile.Page */ Page.prototype.removeContainerBackground = function () { - ns.warn("removeContainerBackground is deprecated at 2.3"); + engine.getRouter().getContainer().classList.remove("ui-overlay-" + engine.getTheme().getInheritedTheme(this.element.parentNode)); }; /** @@ -791,11 +775,11 @@ * * @method setContainerBackground * @param {string} [theme] - * @deprecated 2.3 * @member ns.widget.mobile.Page */ Page.prototype.setContainerBackground = function (theme) { - ns.warn("setContainerBackground is deprecated at 2.3"); + theme = theme || this.options.theme; + engine.getRouter().getContainer().classList.add("ui-overlay-" + theme); }; /** @@ -805,7 +789,6 @@ * @member ns.widget.mobile.Page */ Page.prototype.addBackBtn = function () { - ns.warn("addBackBtn is deprecated at 2.3"); return null; }; @@ -846,9 +829,157 @@ return optionsKeepNativeDefault; }; - prototype.bindEvents = function (element, onlyBuild) { - CorePagePrototype.bindEvents.call(this, element, onlyBuild); - this.trigger("pageinit"); + + /** + * This will set the content element's top or bottom padding equal to the toolbar's height + * + * !!!This method is only available through TAU API!!! + * + * @example + * <div id="myPage"></div> + * <script type="text/javascript"> + * var page = tau.widget.page(document.getElementById("myPage")); + * page.updatePagePadding(); + * </script> + * + * @method updatePagePadding + * @member ns.widget.mobile.Page + */ + Page.prototype.updatePagePadding = function () { + contentFill(this); + }; + + /** + * Calculate and update content height + * + * !!!This method is only available through TAU API!!! + * + * @example + * <div id="myPage"></div> + * <script type="text/javascript"> + * var page = tau.widget.page(document.getElementById("myPage")); + * page.updatePageLayout(); + * </script> + * + * @method updatePageLayout + * @member ns.widget.mobile.Page + */ + Page.prototype.updatePageLayout = function () { + contentFill(this); + }; + + + /** + * Sets the focus to page + * + * !!!This method is only available through TAU API!! + * + * @example + * <div id="myPage"></div> + * <script type="text/javascript"> + * var page = tau.widget.page(document.getElementById("myPage")); + * page.focus(); + * </script> + * @method focus + * @member ns.widget.mobile.Page + */ + Page.prototype.focus = function () { + var autofocus = this.element.querySelector("[autofocus]"); + if (autofocus) { + autofocus.focus(); + return; + } + this.element.focus(); + }; + + /** + * Removes focus from page and all descendants + * + * !!!This method is only available through TAU API!!! + * + * @example + * <div id="myPage"></div> + * <script type="text/javascript"> + * var page = tau.widget.page(document.getElementById("myPage")); + * page.blur(); + * </script> + * + * @method blur + * @member ns.widget.mobile.Page + */ + Page.prototype.blur = function () { + slice.call(this.element.querySelectorAll(":focus")).forEach(function (element) { + element.blur(); + }); + }; + + /** + * Bind events to widget + * @method _bindEvents + * @param {HTMLElement} element + * @protected + * @member ns.widget.mobile.Page + */ + Page.prototype._bindEvents = function (element) { + var self = this; + self.contentFillCallback = contentFill.bind(null, self); + self.contentFillAfterResizeCallback = function () { + self.pageSetHeight = false; + contentFill(self); + }; + self.destroyCallback = self.destroy.bind(self, element); + /* + * @TODO + * mobile zoom and persistant toolbar + element.addEventListener("pagebeforehide", function (e, ui) { + var _updatePadding = this.getAttribute("data-update-page-padding") || true, + disablePageZoom = this.getAttribute("data-disable-page-zoom") || true; + if (disablePageZoom === true) { + // @TODO $.mobile.zoom.enable( true ); + } + var thisFooter = $( ".ui-footer-fixed:jqmData(id)", this ), + thisHeader = $( ".ui-header-fixed:jqmData(id)", this ), + nextFooter = thisFooter.length && ui.nextPage && $( ".ui-footer-fixed:jqmData(id='" + thisFooter.jqmData( "id" ) + "')", ui.nextPage ) || $(), + nextHeader = thisHeader.length && ui.nextPage && $( ".ui-header-fixed:jqmData(id='" + thisHeader.jqmData( "id" ) + "')", ui.nextPage ) || $(); + if ( nextFooter.length || nextHeader.length ) { + nextFooter.add( nextHeader ).appendTo( $.mobile.pageContainer ); + ui.nextPage.one( "pageshow", function () { + nextFooter.add( nextHeader ).appendTo( this ); + }); + } + }, false); + */ + window.addEventListener("throttledresize", self.contentFillAfterResizeCallback, false); + element.addEventListener("updatelayout", self.contentFillAfterResizeCallback, false); + element.addEventListener("pageshow", self.contentFillCallback, true); + self.on("pageremove", self.destroyCallback); + }; + + /** + * Refresh widget structure + * @method _refresh + * @protected + * @member ns.widget.mobile.Page + */ + Page.prototype._refresh = function () { + buildStructure(this.options, this.element); + this.pageSetHeight = false; + contentFill(this); + }; + + /** + * Destroy widget + * @method _destroy + * @protected + * @member ns.widget.mobile.Page + */ + Page.prototype._destroy = function () { + var element = this.element; + window.removeEventListener("throttledresize", this.contentFillAfterResizeCallback, false); + this.off("pageremove", this.destroyCallback); + if (element) { + element.removeEventListener("pageshow", this.contentFillCallback, true); + } }; // definition @@ -857,20 +988,16 @@ "Page", "[data-role='page'], .ui-page", [ - "focus", - "blur", - "setActive", "keepNativeSelector", "setContainerBackground", "removeContainerBackground" ], Page, - "mobile", - true + "mobile" ); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return Page; } ); //>>excludeEnd("tauBuildExclude"); -}(window, ns)); +}(ns)); diff --git a/tau/src/js/profile/mobile/widget/mobile/PageContainer.js b/tau/src/js/profile/mobile/widget/mobile/PageContainer.js deleted file mode 100644 index 3b2ce4fc..00000000 --- a/tau/src/js/profile/mobile/widget/mobile/PageContainer.js +++ /dev/null @@ -1,111 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/** - * # PageContainer Widget - * PageContainer is a widget, which is supposed to have multiple child pages but display only one at a time. - * - * It allows for adding new pages, switching between them and displaying progress bars indicating loading process. - * - * ## Background Settings - * Widget allows to set fullscreen background with centered content. - * - * @example - * <body class="ui-pagecontainer" data-background="bg.jpg">... - * - * - * @class ns.widget.tv.PageContainer - * @extends ns.widget.core.PageContainer - * @author Maciej Urbanski <m.urbanski@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../mobile", - "../../../../core/widget/core/PageContainer", - "../../../../core/engine", - "../../../../core/util" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var CorePageContainer = ns.widget.core.PageContainer, - CorePageContainerPrototype = CorePageContainer.prototype, - PageContainer = function () { - CorePageContainer.call(this); - }, - util = ns.util, - engine = ns.engine, - prototype = new CorePageContainer(), - classes = CorePageContainer.classes; - - classes.uiOverlayPrefix = "ui-overlay-"; - - PageContainer.events = CorePageContainer.events; - PageContainer.classes = CorePageContainer.classes; - - /** - * This method adds an element as a page. - * @method _include - * @param {HTMLElement} page an element to add - * @return {HTMLElement} - * @member ns.widget.core.PageContainer - * @protected - */ - prototype._include = function (page) { - var element = this.element; - if (!page.parentNode || page.ownerDocument !== document) { - page = util.importEvaluateAndAppendElement(page, element); - } - return page; - }; - - /** - * This method sets currently active page. - * @method _setActivePage - * @param {ns.widget.core.Page} page a widget to set as the active page - * @member ns.widget.core.PageContainer - * @protected - */ - prototype._setActivePage = function (page) { - var self = this; - if (self.activePage) { - self.activePage.setActive(false, this.element); - } - self.activePage = page; - page.setActive(true, this.element); - }; - - PageContainer.prototype = prototype; - - // definition - ns.widget.mobile.PageContainer = PageContainer; - - engine.defineWidget( - "pagecontainer", - "body", - ["change", "getActivePage", "showLoading", "hideLoading"], - PageContainer, - "mobile", - true - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/mobile/widget/mobile/Popup.js b/tau/src/js/profile/mobile/widget/mobile/Popup.js index c719ace0..784a4a90 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Popup.js +++ b/tau/src/js/profile/mobile/widget/mobile/Popup.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Popup Widget @@ -171,7 +160,7 @@ * * To be sure that popup will be opened in context style with arrow, we can set properties _data-position-to="origin"_ as well as _id_ in the related with popup link as in the example above. * - * Moreover, the same result can be achieve by setting only _id_ and not setting _positionTo_ in link because popup has value "origin" for option _positionTo_ by default. + * Moreover, the same resulte can be achieve by setting only _id_ and not setting _positionTo_ in link because popup has value "origin" for option _positionTo_ by default. * * @example * <!-- in link id is set --> @@ -508,56 +497,447 @@ define( [ "../../../../core/engine", - "../../../../core/util/object", + "../../../../core/theme", + "../../../../core/event", "../../../../core/util/selectors", - "../../../../core/widget/core/ContextPopup", - "../mobile" + "../../../../core/util/DOM/attributes", + "../../../../core/util/DOM/manipulation", + "../../../../core/util/DOM/css", + "../../../../core/util/deferred", + "../../../../core/util/deferredWhen", + "./Scrollview", + "../mobile", + "./BaseWidgetMobile" ], function () { //>>excludeEnd("tauBuildExclude"); - var CorePopup = ns.widget.core.ContextPopup, - CorePopupPrototype = CorePopup.prototype, + var Popup = function () { + var self = this; + /** + * @property {Object} options Object with default options + * @property {string} [options.theme="s"] Sets the color scheme (swatch) for the popup contents. + * @property {?string} [options.overlayTheme=""] Sets the color scheme (swatch) for the popup background, which covers the entire window. + * @property {boolean} [options.shadow=true] Sets whether to draw a shadow around the popup. + * @property {boolean} [options.corners=true] Sets whether to draw the popup with rounded corners. + * @property {boolean} [options.noScreen=false] Set screen to be always hidden. + * @property {string} [options.transition="none"] Sets the default transition for the popup. + * @property {string} [options.positionTo="origin"] Sets the element relative to which the popup will be centered. + * @property {Object} [options.tolerance={t: 10, r: 10, b: 10, l: 10}] Sets the minimum distance from the edge of the window for the corresponding edge of the popup. + * @property {Array} [options.directionPriority=["bottom", "top", "right", "left"]] Sets directions of popup's placement by priority. First one has the highest priority, last the lowest. + * @property {string} [options.closeLinkSelector="a[data-rel="back"]"] Sets selector for buttons in popup + * @property {?string} [options.link=null] Sets id of element used as reference for relative popup placement + * @property {boolean} [options.isHardwarePopup=false] Sets whether the popup is hardware one. + * @property {?number} [options.positionX=null] Sets desired horizontal coordinate of the center point in popup in pixels. + * @property {?number} [options.positionY=null] Sets desired vertical coordinate of the center point in popup in pixels. + * @property {boolean} [options.history=false] Sets whether to alter the url when a popup is open to support the back button. + * @property {string} [options.specialContainerClass=""] Sets CSS class which is added for popup's container. + * @member ns.widget.mobile.Popup + */ + self.options = { + theme: null, + overlayTheme: null, + shadow: true, + corners: true, + noScreen: false, + transition: "pop", + positionTo: "origin", + tolerance: { t: 10, r: 10, b: 10, l: 10 }, + directionPriority: ["bottom", "top", "right", "left"], + closeLinkSelector: "a[data-rel='back']", + link: null, + isHardwarePopup: false, + positionX: null, + positionY: null, + history: false, + specialContainerClass: "" + }; + self.defaultOptions = { + theme: "s" + }; + // @property {Object} _ui Object with html elements connected with popup + // @member ns.widget.mobile.Popup + self._ui = { + screen: null, + placeholder: null, + container: null, + arrow: null + }; + // @property {HTMLElement} _page Page element + // @member ns.widget.mobile.Popup + self._page = null; + // @property {boolean} _isPreOpen Status of popup before animation + // @member ns.widget.mobile.Popup + self._isPreOpen = false; + // @property {boolean} _isOpen Status of popup after animation + // @member ns.widget.mobile.Popup + self._isOpen = false; + // @property {boolean} _isPreClose Status of popup before animation (popup starts to close) + // @member ns.widget.mobile.Popup + self._isPreClose = false; + // animations + self._prereqs = null; + self._fallbackTransition = ""; + self._currentTransition = "none"; + // callbacks + self._onClickBound = null; + self._onResizeBound = null; + self._onButtonClickBound = null; + // @property {Function} _callback Callback for "resize" event, which sets position of widget. + // This callback must return object with properties "x" and "y". + // @member ns.widget.mobile.Popup + self._callback = null; + }, + /** + * @property {Object} Widget Alias for {@link ns.widget.BaseWidget} + * @member ns.widget.mobile.Popup + * @private + */ + BaseWidget = ns.widget.mobile.BaseWidgetMobile, + /** + * @property {Object} engine Alias for class ns.engine + * @member ns.widget.mobile.Popup + * @private + */ + engine = ns.engine, + /** + * @property {Object} selectors Alias for class ns.selectors + * @member ns.widget.mobile.Popup + * @private + */ + selectors = ns.util.selectors, + /** + * @property {Object} doms Alias for class ns.util.DOM + * @member ns.widget.mobile.Popup + * @private + */ + doms = ns.util.DOM, + /** + * @property {Object} themes Alias for class ns.theme + * @member ns.widget.mobile.Popup + * @private + */ + themes = ns.theme, + /** + * @property {Object} events Alias for class ns.event + * @member ns.widget.mobile.Popup + * @private + */ + events = ns.event, + scrollviewClipClass = ns.widget.mobile.Scrollview.classes.clip, + pageActiveClass = ns.widget.mobile.Page.classes.uiPageActive, + /** + * @property {ns.util.deferred} UtilsDeferred Alias for class ns.util.deferred + * @member ns.widget.mobile.Popup + * @private + */ + UtilsDeferred = ns.util.deferred; - positionTypes = CorePopup.positionTypes, + // Return window coordinates + // @method windowCoords + // @return {Object} + // @private + // @static + // @member ns.widget.mobile.Popup + function windowCoords() { + var body = window.body; - engine = ns.engine, + return { + x: body ? (body.scrollLeft || 0) : 0, + y: body ? (body.scrollTop || 0) : 0, + elementWidth: (window.innerWidth || window.width), + elementHeight: (window.innerHeight || window.height) + }; + } - objectUtils = ns.util.object, + // Return size of segment + // @method fitSegmentInsideSegment + // @param {Number} winSize + // @param {Number} segSize + // @param {Number} offset + // @param {Number} desired + // @return {Number} + // @private + // @static + // @member ns.widget.mobile.Popup + function fitSegmentInsideSegment(winSize, segSize, offset, desired) { + var ret = desired; - utilSelector = ns.util.selectors, + if (winSize < segSize) { + // Center segment if it's bigger than the window + ret = offset + (winSize - segSize) / 2; + } else { + // Otherwise center it at the desired coordinate while keeping it completely inside the window + ret = Math.min(Math.max(offset, desired - segSize / 2), offset + winSize - segSize); + } - Popup = function () { - var self = this; - CorePopup.call(this); - // set options - self.options = objectUtils.merge(self.options, Popup.defaults); - self._positionCallback = null; - }; + return ret; + } - /** - * @property {Object} options Object with default options - * @property {string} [options.transition="none"] Sets the default transition for the popup. - * @property {string} [options.positionTo="origin"] Sets the element relative to which the popup will be centered. - * @property {Array} [options.directionPriority=["bottom", "top", "right", "left"]] Sets directions of popup's placement by priority. - * First one has the highest priority, last the lowest. It is *deprecated* option. - * @property {string} [options.closeLinkSelector="a[data-rel="back"]"] Sets selector for buttons in popup - * @property {boolean} [options.history=false] Sets whether to alter the url when a popup is open to support the back button. - * @member ns.widget.mobile.Popup - */ - Popup.defaults = objectUtils.merge({}, CorePopup.defaults, { - closeLinkSelector: "a[data-rel='back']", - transition: "pop", - directionPriority: ["bottom", "top", "right", "left"], /* deprecated */ - arrow: "b,t,r,l", - positionTo: "origin" - }); - Popup.events = objectUtils.merge({}, CorePopup.events, { - AFTER_OPEN: "popupafteropen", - AFTER_CLOSE: "popupafterclose" - }); + // Return element relative to which popup must be positioned + // @method findPositionToElement + // @param {string} elementSelector + // @return {HTMLElement} + // @private + // @static + // @member ns.widget.mobile.Popup + function findPositionToElement(elementSelector) { + var positionToElement = null; + + if (elementSelector) { + if (elementSelector[0] === "#") { + positionToElement = document.getElementById(elementSelector.slice(1)); + } else { + positionToElement = document.querySelector(elementSelector); + } + // :visible - in jq (>=1.3.2) an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0 + if (positionToElement && positionToElement.offsetWidth <= 0 && positionToElement.offsetHeight <= 0) { + positionToElement = null; + } + } + + return positionToElement; + } + + // Return offset of element + // @method getOffsetOfElement + // @param {HTMLElement} element + // @param {?string} link + // @return {Object} + // @private + // @static + // @member ns.widget.mobile.Popup + function getOffsetOfElement(element, link) { + var top = element.offsetTop, + left = element.offsetLeft, + scrollview; + while (element.offsetParent) { + top += element.offsetParent.offsetTop; + left += element.offsetParent.offsetLeft; + if (element.getAttribute("data-role") === "page") { + break; + } + + element = element.offsetParent; + } + if (link) { + scrollview = selectors.getClosestByClass(document.getElementById(link), scrollviewClipClass); + top -= scrollview ? scrollview.scrollTop : 0; + } + + return {top: top, left: left}; + } + + // Function fires on window resizing + // @method onResize + // @private + // @static + // @member ns.widget.mobile.Popup + function onResize(self) { + var callback, + options; + if (!self._isOpen) { + return; + } + if (self._callback) { + callback = self._callback(); + self._setPosition(callback.x, callback.y); + } else { + options = self.options; + self._setPosition(options.positionX, options.positionY); + } + } + + // Function fires on click + // @method _eatEventAndClose + // @private + // @static + // @member ns.widget.mobile.Popup + function _eatEventAndClose(self, event) { + event.preventDefault(); + events.stopPropagation(event); + setTimeout(self.close.bind(self), 10); + return false; + } + + function removeProperties() { + var page = document.getElementsByClassName(pageActiveClass)[0], + tabindexElements = page ? page.querySelectorAll("[tabindex]") : null, + hrefElements = page ? page.querySelectorAll("[href]") : null, + value; + + if (tabindexElements) { + tabindexElements = [].slice.call(tabindexElements); + tabindexElements.forEach(function (tabindexElement) { + if (selectors.getClosestBySelector(tabindexElement, "[data-role='popup']") === null) { + value = tabindexElement.getAttribute("tabindex"); + doms.setNSData(tabindexElement, "tabindex", value); + tabindexElement.removeAttribute("tabindex"); + } + }); + } + if (hrefElements) { + hrefElements = [].slice.call(hrefElements); + hrefElements.forEach(function (hrefElement) { + if (selectors.getClosestBySelector(hrefElement, "[data-role='popup']") === null) { + value = hrefElement.getAttribute("href"); + doms.setNSData(hrefElement, "href", value); + hrefElement.removeAttribute("href"); + } + }); + } + } + + function restoreProperties() { + var page = document.getElementsByClassName(ns.widget.mobile.Page.classes.uiPageActive)[0], + tabindexElements = page ? selectors.getAllByDataNS(page, "tabindex") : null, + hrefElements = page ? page.querySelectorAll("[href]") : null, + value; + + if (tabindexElements) { + selectors.getAllByDataNS(page, "tabindex").forEach(function (tabindexElement) { + value = doms.getNSData(tabindexElement, "tabindex"); + tabindexElement.setAttribute("tabindex", value); + doms.removeNSData(tabindexElement, "tabindex"); + }); + } + if (hrefElements) { + selectors.getAllByDataNS(page, "href").forEach(function (hrefElement) { + value = doms.getNSData(hrefElement, "href"); + hrefElement.setAttribute("href", value); + doms.removeNSData(hrefElement, "href"); + }); + } + } + + function applyTheme(element, theme, prefix) { + var classes = element.classList, + classesLength = classes.length, + currentTheme = null, + matches, + i, + regex = new RegExp("^ui-" + prefix + "-([a-z]+)$"); - Popup.prototype = new CorePopup(); + for (i = 0; i < classesLength; i++) { + matches = regex.exec(classes[i]); + if (matches && matches.length > 1) { + currentTheme = matches[1]; + break; + } + } + + if (theme !== currentTheme) { + element.classList.remove("ui-" + prefix + "-" + currentTheme); + if (theme !== null && theme !== "none") { + element.classList.add("ui-" + prefix + "-" + theme); + } + } + } + + // @method chooseDirectionByPriority + // @param {Array} directionPriority + // @param {Object} positionOffsets + // @param {Object} elementDimensions + // @param {Object} arrowBorderWidths + // @private + // @static + // @return {string} + function chooseDirectionByPriority(directionPriority, positionOffsets, elementDimensions, arrowBorderWidths) { + var direction, + bestMatchingDirection, + spaceOccupied, + priorityQueue; + + if (typeof directionPriority === "string") { + directionPriority = directionPriority.split(","); + } + // Copy array to queue + priorityQueue = directionPriority.slice(); + do { + // Get get first element + direction = priorityQueue.shift(); + if (direction) { + if (direction === "top" || direction === "bottom") { + spaceOccupied = elementDimensions.height; + } else { + spaceOccupied = elementDimensions.width; + } + + spaceOccupied += arrowBorderWidths[direction]; + + // Check if popup fits into free space + if (spaceOccupied <= positionOffsets[direction]) { + bestMatchingDirection = direction; + } + } + // Repeat until space is found or queue is empty + } while (!bestMatchingDirection && priorityQueue.length > 0); + + // Last matching direction has the highest priority + return bestMatchingDirection || "bottom"; + } + + // Set events connected with animation + // @method animationComplete + // @param {HTMLElement} element + // @param {Function} callback + // @private + // @static + // @member ns.widget.mobile.Popup + function animationComplete(element, callback) { + events.one(element, "webkitAnimationEnd", callback); + events.one(element, "animationend", callback); + } + + // This function starts opening popup by seting global property "activePopup" + // and calling "_open" method + // @method startOpeningPopup + // @param {ns.widget.mobile.Popup} instance + // @param {Object} options opening options + // @param {Event} event + // @private + // @static + // @memberOf ns.widget.Popup + function startOpeningPopup(instance, options, event) { + ns.activePopup = instance; + events.trigger(document, "activePopup", instance); + instance._open(options, event); + } + + Popup.prototype = new BaseWidget(); + + /** + * Dictionary for popup related css class names + * @property {Object} classes + * @member ns.widget.mobile.Popup + * @static + */ + Popup.classes = { + IN: "in", + OUT: "out", + REVERSE: "reverse", + SCREEN_HIDDEN: "ui-screen-hidden", + uiPopupScreen: "ui-popup-screen", + uiPopupContainer: "ui-popup-container", + uiPopupWindow: "ui-popup-window", + uiPopupWindowPadding: "ui-popupwindow-padding", + uiCtxpopupScreen: "ui-ctxpopup-screen", + uiCtxpopupContainer: "ui-ctxpopup-container", + uiSelectmenuHidden: "ui-selectmenu-hidden", + uiArrow: "ui-arrow", + uiPopup: "ui-popup", + top: "top", + bottom: "bottom", + right: "right", + left: "left", + uiPopupActive: "ui-popup-active", + uiPopupOpen: "ui-popup-open", + uiCtxpopup: "ui-ctxpopup", + uiCornerAll: "ui-corner-all", + uiOverlaryShadow: "ui-overlay-shadow", + uiCtxpopupOptionmenu: "ui-ctxpopup-optionmenu", + uiBodyPrefix: "ui-body-" + }; /** * Build structure of popup widget @@ -568,72 +948,345 @@ * @member ns.widget.mobile.Popup */ Popup.prototype._build = function (element) { - var page = utilSelector.getClosestByClass(element, "ui-page") || document.body; - if (element.parentNode !== page) { - page.appendChild(element); + var classes = Popup.classes, + options = this.options, + page = selectors.getParentsByClass(element, "ui-page")[0] || document.body, + uiScreen = document.createElement("div"), + uiScreenClasses = uiScreen.classList, + uiPlaceholder = document.createElement("div"), + uiContainer = document.createElement("div"), + uiContainerClasses = uiContainer.classList, + uiArrow = document.createElement("div"), + myId = element.id, + fragment = document.createDocumentFragment(); + + // init ui elements + uiScreenClasses.add(classes.SCREEN_HIDDEN); + uiScreenClasses.add(classes.uiPopupScreen); + uiPlaceholder.style.display = "none"; + uiContainerClasses.add(classes.uiPopupContainer); + uiContainerClasses.add(classes.uiSelectmenuHidden); + + // this option specifies what CSS class is added for container of popup + // it is used by Tizen Slider widget to distinguish popup related with + // slider, because it has to have different style than a normal popup + if (options.specialContainerClass) { + uiContainerClasses.add(options.specialContainerClass); } - return CorePopupPrototype._build.call(this, element); + uiArrow.classList.add(classes.uiArrow); + + // define the container for navigation event bindings + // TODO this would be nice at the the mobile widget level + //this.options.container = this.options.container || $.mobile.pageContainer; + + uiScreen.setAttribute("id", myId + "-screen"); + uiContainer.setAttribute("id", myId + "-popup"); + uiPlaceholder.setAttribute("id", myId + "-placeholder"); + uiPlaceholder.innerHTML = "<!-- placeholder for " + myId + " -->"; + uiArrow.setAttribute("id", myId + "-arrow"); + element.classList.add(classes.uiPopup); + + doms.insertNodeAfter(element, uiPlaceholder); + uiContainer.appendChild(element); + uiContainer.appendChild(uiArrow); + fragment.appendChild(uiScreen); + fragment.appendChild(uiContainer); + page.appendChild(fragment); + + return element; }; - Popup.prototype._setDirectionPriority = function(element, value) { - if (value) { - this.options.arrow = value.map(function(arrow) { - return arrow.charAt(0).toLowerCase(); - }).join(","); - } + /** + * Init widget + * @method _init + * @param {HTMLElement} element + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._init = function (element) { + var id = element.id, + options = this.options, + ui; + + // set options + options.theme = options.theme || themes.getInheritedTheme(element, this.defaultOptions.theme); + this._setTolerance(element, options.tolerance); + + // @todo define instance variables + ui = { + screen: document.getElementById(id + "-screen"), + placeholder: document.getElementById(id + "-placeholder"), + container: element.parentNode, + arrow: document.getElementById(id + "-arrow") + }; + // if page isn't built, we choose body as page + this._page = selectors.getParentsByClass(element, "ui-page")[0] || document.body; + this._ui = ui; + this._isPreOpen = false; + this._isOpen = false; + this._isPreClose = false; }; /** - * Refresh structure - * @method _refresh - * @protected - * @member ns.widget.mobile.Popup - */ - Popup.prototype._refresh = function() { - var self = this, - position; - if (this._isActive()) { - if (typeof self._positionCallback === "function") { - position = self._positionCallback(); + * Set tolerance for widget's position + * @method _setTolerance + * @param {HTMLElement} element + * @param {string|Array} value + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._setTolerance = function (element, value) { + var options = this.options, + tolerance = {}; + + if (value && typeof value === "string") { + value = value.split(","); + value.forEach(function(val, index){ + value[index] = parseInt(val, 10); + }); + switch (value.length) { + // All values are to be the same + case 1: + if (!isNaN(value[0])) { + tolerance.t = tolerance.r = tolerance.b = tolerance.l = value[0]; + } + break; + + // The first value denotes top/bottom tolerance, and the second value denotes left/right tolerance + case 2: + if (!isNaN(value[0])) { + tolerance.t = tolerance.b = value[0]; + } + if (!isNaN(value[1])) { + tolerance.l = tolerance.r = value[1]; + } + break; + + // The array contains values in the order top, right, bottom, left + case 4: + if (!isNaN(value[0])) { + tolerance.t = value[0]; + } + if (!isNaN(value[1])) { + tolerance.r = value[1]; + } + if (!isNaN(value[2])) { + tolerance.b = value[2]; + } + if (!isNaN(value[3])) { + tolerance.l = value[3]; + } + break; + + default: + break; } - CorePopupPrototype._refresh.call(this); + options.tolerance = tolerance; } }; /** - * Find clicked element. - * @method _findClickedElement - * @param {number} x - * @param {number} y - * @protected - * @member ns.widget.mobile.Popup - */ - Popup.prototype._findClickedElement = function(x, y) { - var element = CorePopupPrototype._findClickedElement.call(this, x, y), - button = utilSelector.getClosestBySelector(element, engine.getWidgetDefinition("Button").selector); - return button || element; + * Return desired coordinates of popup + * @method _desiredCoords + * @param {string|HTMLElement} positionTo + * @param {Number} x + * @param {Number} y + * @return {Object} + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._desiredCoords = function (positionTo, x, y) { + var winCoords = windowCoords(), + offset; + + if (positionTo === "window") { + x = winCoords.elementWidth / 2 + winCoords.x; + y = winCoords.elementHeight / 2 + winCoords.y; + } else if (positionTo) { + // In this case, positionTo is HTML element, to which popup is positioned + offset = getOffsetOfElement(positionTo, this.options.link); + x = offset.left + positionTo.offsetWidth / 2; + y = offset.top + positionTo.offsetHeight / 2; + } + + // Make sure x and y are valid numbers - center over the window + if (typeof x !== "number" || isNaN(x)) { + x = winCoords.elementWidth / 2 + winCoords.x; + } + if (typeof y !== "number" || isNaN(y)) { + y = winCoords.elementHeight / 2 + winCoords.y; + } + + return {x : x, + y : y}; }; /** - * Show popup - * @method _onShow - * @protected - * @member ns.widget.mobile.Popup - */ - Popup.prototype._onShow = function() { - CorePopupPrototype._onShow.call(this); - this.trigger(Popup.events.AFTER_OPEN); + * Return placement of popup + * @method _placementCoords + * @param {Object} desired + * @return {Object} + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._placementCoords = function (desired) { + // rectangle within which the popup must fit + var uiContainer = this._ui.container, + winCoords = windowCoords(), + tolerance = this.options.tolerance, + maxCoords = { + x: tolerance.l, + y: winCoords.y + tolerance.t, + elementWidth: winCoords.elementWidth - tolerance.l - tolerance.r, + elementHeight: winCoords.elementHeight - tolerance.t - tolerance.b + }, + menuSize, + finalCoords, + docElement = document.documentElement, + docBody = document.body, + docHeight = Math.max(docElement.clientHeight, docBody.scrollHeight, docBody.offsetHeight, docElement.scrollHeight, docElement.offsetHeight); + + // Clamp the width of the menu before grabbing its size + uiContainer.style.maxWidth = maxCoords.elementWidth; + + menuSize = { + elementWidth: uiContainer.clientWidth, + elementHeight: uiContainer.clientHeight + }; + + // Center the menu over the desired coordinates, while not going outside + // the window tolerances. This will center wrt. the window if the popup is too large. + finalCoords = { + x: fitSegmentInsideSegment(maxCoords.elementWidth, menuSize.elementWidth, maxCoords.x, desired.x), + y: fitSegmentInsideSegment(maxCoords.elementHeight, menuSize.elementHeight, maxCoords.y, desired.y) + }; + + // Make sure the top of the menu is visible + finalCoords.y = Math.max(0, finalCoords.y); + + // If the height of the menu is smaller than the height of the document + // align the bottom with the bottom of the document + + finalCoords.y -= Math.min(finalCoords.y, Math.max(0, finalCoords.y + menuSize.elementHeight - docHeight)); + + if (this.options.isHardwarePopup) { + return { + left: tolerance.l, + top: maxCoords.elementHeight - menuSize.elementHeight - tolerance.b, + arrowleft: 0, + arrowtop: 0 + }; + } + return {left: finalCoords.x, top: finalCoords.y}; }; + /** - * Hide popup - * @method _onHide + * Set placement of arrow + * @method _setArrowPosition + * @param {number} type + * @param {HTMLElement} positionToElement + * @param {number} containerLeft container's left position + * @param {number} containerTop container's top position + * @param {Object} positionToElementOffset contains toElement offsets + * @return {Object} * @protected * @member ns.widget.mobile.Popup */ - Popup.prototype._onHide = function() { - CorePopupPrototype._onHide.call(this); - this.trigger(Popup.events.AFTER_CLOSE); + Popup.prototype._setArrowPosition = function (type, positionToElement, containerLeft, containerTop, positionToElementOffset) { + var classes = Popup.classes, + options = this.options, + tolerance = options.tolerance, + uiContainer = this._ui.container, + uiContainerHeight = uiContainer.clientHeight, + uiContainerWidth = uiContainer.clientWidth, + popupMargin, + arrow = this._ui.arrow, + arrowClasses = arrow.classList, + arrowStyle = arrow.style, + // @TODO this will fail when not all arrow borders are the same + arrowBorderWidth = parseFloat(doms.getCSSProperty(arrow, "border-" + type + "-width")) || 0, + left = positionToElement ? getOffsetOfElement(positionToElement, options.link).left + positionToElement.clientWidth / 2 - arrowBorderWidth : 0, + positionToElementHeight = positionToElement ? positionToElement.clientHeight : 0, + positionToElementWidth = positionToElement ? positionToElement.clientWidth : 0, + correctionValue = [0, 0], + usedTolerance, + arrowLeft; + + arrow.removeAttribute("class"); + arrowClasses.add(classes.uiArrow); + arrowClasses.add(classes[type]); + + arrowLeft = left - containerLeft; + + uiContainer.classList.add(classes[type]); + + switch (type) { + case "bottom": + popupMargin = parseInt(doms.getCSSProperty(this.element, "margin-top"), 10) || 0; + arrowClasses.add(classes.bottom); + arrowStyle.top = -arrowBorderWidth + popupMargin + "px"; + // Developer can try to change position of popup using method *refresh*. + // However, in case of context popup, arrow should be always placed + // in the middle of element related with popup. + // So we have to check if arrow is still in range of popup's container + // and correct value of left position of popup if it is necessary. + if (arrowLeft < 0) { + // popup container is positioned too far to the right + usedTolerance = tolerance.l; + arrowStyle.left = usedTolerance + "px"; + correctionValue[0] = arrowLeft - usedTolerance; + } else if (arrowLeft > uiContainerWidth) { + // popup container is positioned too far to the left + usedTolerance = tolerance.r; + arrowStyle.left = uiContainerWidth - usedTolerance - arrowBorderWidth * 2 + "px"; + correctionValue[0] = arrowLeft - uiContainerWidth + usedTolerance + arrowBorderWidth * 2; + } else { + // popup container is positioned properly, + // so correction value of left position remains zero + arrowStyle.left = arrowLeft + "px"; + } + // correction value of top position is always the same + correctionValue[1] = positionToElementHeight + positionToElementOffset.top - containerTop + break; + case "right": + // @todo + arrowStyle.left = -arrowBorderWidth * 2 + 1 + "px"; + arrowStyle.top = uiContainerHeight / 2 - arrowBorderWidth + "px"; + correctionValue = [positionToElementWidth + positionToElementOffset.left - arrowBorderWidth, 0]; + break; + case "top": + popupMargin = parseInt(doms.getCSSProperty(this.element, "margin-bottom"), 10) || 0; + arrowClasses.add(classes.top); + arrowStyle.top = uiContainerHeight - popupMargin - arrowBorderWidth + "px"; + // @todo make one correction for *top* and *bottom* arrows + if (arrowLeft < 0) { + // popup container is set too far to the right + usedTolerance = tolerance.l; + arrowStyle.left = usedTolerance + "px"; + correctionValue[0] = arrowLeft - usedTolerance; + } else if (arrowLeft > uiContainerWidth) { + // popup container is set too far to the left + usedTolerance = tolerance.r; + arrowStyle.left = uiContainerWidth - usedTolerance - arrowBorderWidth * 2 + "px"; + correctionValue[0] = arrowLeft - uiContainerWidth + usedTolerance + arrowBorderWidth * 2; + } else { + arrowStyle.left = arrowLeft + "px"; + } + correctionValue[1] = -(containerTop + uiContainerHeight - positionToElementOffset.top); + break; + case "left": + // @todo + arrowStyle.left = uiContainer.clientWidth + 3 + "px"; + arrowStyle.top = uiContainerHeight / 2 - arrowBorderWidth + "px"; + correctionValue = [positionToElementOffset.left - uiContainerWidth, 0]; + break; + } + + return correctionValue; + + // @todo arrow's positions (in original file, it was in _placementCoords) + // correctionValue = [0, (positionToElement.offsetTop + positionToElement.style.height - y)]; }; /** @@ -675,6 +1328,7 @@ Popup.prototype.setPositionCB = function (callback) { this.setPositionCallback(callback); }; + /** * Set callback, which is called on "resize" event. This callback should return desired position of popup after resizing. * @@ -712,9 +1366,1015 @@ * @new 2.3 */ Popup.prototype.setPositionCallback = function (callback) { - this._positionCallback = callback; + this._callback = callback; + }; + + /** + * Set position of popup + * @method _setPosition + * @param {number} [left] + * @param {number} [top] + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._setPosition = function (left, top) { + var ui = this._ui, + uiArrow = ui.arrow, + uiContainer = ui.container, + uiContainerStyle = uiContainer.style, + uiContainerWidth = uiContainer.offsetWidth, + uiContainerHeight = uiContainer.offsetHeight, + options = this.options, + positionToOption = options.positionTo.toLowerCase(), + positionToElement, + positionToElementOffset, + docElement = document.documentElement, + desired, + arrowType = "top", + positionOffsets, + correctionValue = [0, 0], + arrowDimensions, + arrowBorders = { + "border-top-width": 0, + "border-right-width": 0, + "border-bottom-width": 0, + "border-left-width": 0 + }, + elementDimensions; + + doms.extractCSSProperties(uiArrow, arrowBorders); + + if (typeof top === "number" && typeof left === "number") { + desired = { + x: left, + y: top + }; + } + + if (positionToOption === "window") { + top = null; + uiContainerStyle.bottom = "0"; + } else if (positionToOption === "origin") { + // popup with arrow + if (options.link) { + positionToElement = findPositionToElement("#" + options.link); + } else { + positionToElement = null; + } + desired = this._placementCoords(desired || this._desiredCoords(positionToElement)); + top = desired.top; + left = desired.left; + + if (positionToElement) { + positionToElementOffset = getOffsetOfElement(positionToElement, options.link); + positionOffsets = { + "top": positionToElementOffset.top, + "right": docElement.clientWidth - (positionToElementOffset.left + doms.getElementWidth(positionToElement)), + "bottom": docElement.clientHeight - (positionToElementOffset.top + doms.getElementHeight(positionToElement)), + "left": positionToElementOffset.left + }; + elementDimensions = { + width: uiContainerWidth, + height: uiContainerHeight + }; + arrowDimensions = { + // For proper results arrow width and height are assumed to be "0" + "top": arrowBorders["border-top-width"], + "right": arrowBorders["border-right-width"], + "bottom": arrowBorders["border-bottom-width"], + "left": arrowBorders["border-left-width"] + }; + arrowType = chooseDirectionByPriority(options.directionPriority, positionOffsets, elementDimensions, arrowDimensions); + + if (uiArrow.style.display !== "none") { + correctionValue = this._setArrowPosition(arrowType, positionToElement, left, top, positionToElementOffset); + } + } + } else { + // position to element which matches to options.positionTo selector + positionToElement = findPositionToElement(options.positionTo); + desired = this._placementCoords(desired || this._desiredCoords(positionToElement)); + top = desired.top; + left = desired.left; + } + + if (top) { + uiContainerStyle.left = left + correctionValue[0] + "px"; + uiContainerStyle.top = top + correctionValue[1] + "px"; + } + }; + + /** + * Set context style of widget + * @method _setContextStyle + * @param {boolean} popupwindow + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._setContextStyle = function (popupwindow) { + var classes = Popup.classes, + options = this.options, + ui = this._ui, + linkElement = options.link ? document.getElementById(options.link) : null, + position = options.positionTo.toLowerCase(), + containerList = ui.container.classList; + + if ((position !== "window" && linkElement && linkElement.getAttribute("data-position-to") !== "window") || options.isHardwarePopup) { + this.element.classList.add(classes.uiCtxpopup); + if (popupwindow) { + containerList.add(classes.uiPopupWindow); + this.element.classList.add(classes.uiPopupWindowPadding); + } else { + containerList.remove(classes.uiPopupContainer); + containerList.add(classes.uiCtxpopupContainer); + } + if (position === "origin") { + ui.arrow.style.display = "initial"; + ui.screen.classList.add(classes.uiCtxpopupScreen); + } else { + ui.arrow.style.display = "none"; + } + } else { + this._setOverlayTheme(this.element, "dim"); + ui.arrow.style.display = "none"; + } + + if (options.isHardwarePopup) { + ui.arrow.style.display = "none"; + } + }; + + /** + * Set overlay theme for screen + * @method _setOverlayTheme + * @param {HTMLElement} element + * @param {string} value + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._setOverlayTheme = function (element, value) { + var classes = Popup.classes, + screen = this._ui.screen; + + applyTheme(screen, value, "overlay"); + if (this._isOpen) { + screen.classList.add(classes.IN); + } + }; + + /** + * Set type of corners + * @method _setCorners + * @param {boolean} value + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._setCorners = function (value) { + var classes = Popup.classes; + if (value) { + this.element.classList.add(classes.uiCornerAll); + } else { + this.element.classList.remove(classes.uiCornerAll); + } + }; + + /** + * Set transition + * @method _applyTransition + * @param {string} value + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._applyTransition = function (value) { + var self = this; + + if (self._fallbackTransition) { + self._ui.container.classList.remove(self._fallbackTransition); + } + if (value && value !== "none") { + // @todo + // this._fallbackTransition = $.mobile._maybeDegradeTransition( value ); + self._fallbackTransition = value; + self._ui.container.classList.add(self._fallbackTransition); + } + }; + + /** + * Prepare deferred objects for animation + * @method _createPrereqs + * @param {Function} screenPrereq + * @param {Function} containerPrereq + * @param {Function} whenDone + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._createPrereqs = function (screenPrereq, containerPrereq, whenDone) { + var self = this, + prereqs; + + // It is important to maintain both the local variable prereqs and self._prereqs. The local variable remains in + // the closure of the functions which call the callbacks passed in. The comparison between the local variable and + // self._prereqs is necessary, because once a function has been passed to .animationComplete() it will be called + // next time an animation completes, even if that's not the animation whose end the function was supposed to catch + // (for example, if an abort happens during the opening animation, the .animationComplete handler is not called for + // that animation anymore, but the handler remains attached, so it is called the next time the popup is opened + // - making it stale. Comparing the local variable prereqs to the widget-level variable self._prereqs ensures that + // callbacks triggered by a stale .animationComplete will be ignored. + prereqs = { + screen: new UtilsDeferred(), + container: new UtilsDeferred() + }; + + prereqs.screen.then(function () { + if (prereqs === self._prereqs) { + screenPrereq(); + } + }); + + prereqs.container.then(function() { + if (prereqs === self._prereqs) { + containerPrereq(); + } + }); + + ns.util.deferredWhen(prereqs.screen, prereqs.container).done(function() { + if ( prereqs === self._prereqs ) { + self._prereqs = null; + whenDone(); + } + }); + + self._prereqs = prereqs; + }; + + /** + * Set animation + * @method _animate + * @param {Object} options + * @param {boolean} [options.additionalCondition] + * @param {string} [options.transition] + * @param {Array|string} [options.classToRemove] + * @param {Array|string} [options.screenClassToAdd] + * @param {Array|string} [options.containerClassToAdd] + * @param {boolean} [options.applyTransition] + * @param {Object} [options.prereqs] + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._animate = function (options) { + var ui = this._ui, + screenClasses = ui.screen.classList, + container = ui.container, + containerClasses = container.classList, + transition = options.transition, + classesToRemove = typeof options.classToRemove === "string" ? options.classToRemove.split(" ") : options.classToRemove, + classesToRemoveLen = classesToRemove.length, + classes, + classesLen, + i; + + for (i = 0; i < classesToRemoveLen; i++) { + if (classesToRemove[i]) { + screenClasses.remove(classesToRemove[i]); + } + } + + classes = typeof options.screenClassToAdd === "string" ? options.screenClassToAdd.split(" ") : options.screenClassToAdd; + classesLen = classes.length; + for (i = 0; i < classesLen; i++) { + if (classes[i]) { + screenClasses.add(classes[i]); + } + } + + options.prereqs.screen.resolve(); + + if (transition && transition !== "none") { + if (options.applyTransition) { + this._applyTransition(transition); + } + animationComplete(container, options.prereqs.container.resolve); + classes = typeof options.containerClassToAdd === "string" ? options.containerClassToAdd.split(" ") : options.containerClassToAdd; + classesLen = classes.length; + for (i = 0; i < classesLen; i++) { + containerClasses.add(classes[i]); + } + for (i = 0; i < classesToRemoveLen; i++) { + if (classesToRemove[i]) { + containerClasses.remove(classesToRemove[i]); + } + } + } else { + for (i = 0; i < classesToRemoveLen; i++) { + if (classesToRemove[i]) { + containerClasses.remove(classesToRemove[i]); + } + } + options.prereqs.container.resolve(); + } + }; + + /** + * Animation's callback on completed opening + * @method _openPrereqsComplete + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._openPrereqsComplete = function() { + var self = this, + container = self._ui.container; + + container.classList.add(Popup.classes.uiPopupActive); + self._isOpen = true; + self._isPreOpen = false; + + // Android appears to trigger the animation complete before the popup + // is visible. Allowing the stack to unwind before applying focus prevents + // the "blue flash" of element focus in android 4.0 + setTimeout(function(){ + container.setAttribute("tabindex", "0"); + container.focus(); + events.trigger(self.element, "popupafteropen"); + events.trigger(self.element, "popupshow"); + }); + }; + + /** + * Set popup, which will be opened + * @method _open + * @param {Object} options + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._open = function (options, event) { + var element = this.element, + position = doms.getNSData(element, "position-to"), + classes = Popup.classes, + savedOptions = this.options, + elementTheme = savedOptions.theme, + ui = this._ui, + uiContainer = ui.container, + uiContainerClasses = uiContainer.classList, + linkElement, + transition, + top, + left; + + this._isPreOpen = true; + + options = options || {}; + top = savedOptions.positionY = options.positionY; + left = savedOptions.positionX = options.positionX; + transition = options.transition || savedOptions.transition; + options.noScreen = options.noScreen || savedOptions.noScreen; + + this._setTolerance(element, options.tolerance); + + // Give applications a chance to modify the contents of the container before it appears + events.trigger(this.element, "beforeposition"); + + if (options.link) { + savedOptions.link = options.link; + savedOptions.positionTo = options.positionTo || position || "origin"; + } else { + if (event) { + linkElement = selectors.getClosestBySelector(event.target, "[data-role='button'],input[type='button']"); + savedOptions.link = linkElement ? linkElement.getAttribute("id") : null; + savedOptions.positionTo = options.positionTo || position || "origin"; + } + } + + if (element.classList.contains(classes.uiCtxpopupOptionmenu)) { + savedOptions.isHardwarePopup = true; + } + + this._setContextStyle(options.popupwindow || savedOptions.popupwindow); + this._setPosition(left, top); + this._setCorners(options.corners || savedOptions.corners); + + + this._createPrereqs(function(){}, function(){}, this._openPrereqsComplete.bind(this)); + + if (transition) { + this._currentTransition = transition; + this._applyTransition(transition); + } + + if (elementTheme) { + element.classList.add(classes.uiBodyPrefix + elementTheme); + } + + if (!options.noScreen) { + ui.screen.classList.remove(classes.SCREEN_HIDDEN); + } + uiContainerClasses.remove(classes.uiSelectmenuHidden); + this._page.classList.add(classes.uiPopupOpen); + + this._animate({ + additionalCondition: true, + transition: transition, + classToRemove: "", + screenClassToAdd: (options.noScreen) ? "" : classes.IN, + containerClassToAdd: classes.IN, + applyTransition: false, + prereqs: this._prereqs + }); + + // FIX: for tv profile + if (typeof this._supportKeyboard !== "boolean") { + // This fix problem with host keyboard + // @todo keyboard support for mobile + removeProperties(); + } + }; + + /** + * Animation's callback on scren closing + * @method _closePrereqScreen + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._closePrereqScreen = function() { + var classes = Popup.classes, + screenClasses = this._ui.screen.classList; + + screenClasses.remove(classes.OUT); + screenClasses.add(classes.SCREEN_HIDDEN); + }; + + /** + * Animation's callback on container closing + * @method _closePrereqContainer + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._closePrereqContainer = function() { + var classes = Popup.classes, + container = this._ui.container, + containerClasses = container.classList; + + containerClasses.remove(classes.REVERSE); + containerClasses.remove(classes.OUT); + containerClasses.add(classes.uiSelectmenuHidden); + container.removeAttribute("style"); + }; + + /** + * Animation's callbacl on completed closing + * @method _closePrereqsDone + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._closePrereqsDone = function() { + var self = this; + + self._ui.container.removeAttribute("tabindex"); + + // @todo? + // remove nav bindings if they are still present + // var opts = self.options; + //opts.container.unbind( opts.closeEvents ); + + // @todo? + // unbind click handlers added when history is disabled + //self.element.undelegate( opts.closeLinkSelector, opts.closeLinkEvents ); + + ns.activePopup = null; + // Popup's closing phase is finished + this._isPreClose = false; + events.trigger(document, "activePopup", null); + events.trigger(this.element, "popupafterclose"); // this event must be triggered after setting mobile.popup.active + events.trigger(this.element, "popuphide"); + }; + + /** + * Set popup, which will be closed + * @method _close + * @return {void} + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._close = function (immediate) { + var classes = Popup.classes, + ui = this._ui, + uiContainer = ui.container, + uiContainerClass = uiContainer.classList, + element = this.element, + inputs = [].slice.call(element.querySelectorAll("input")); + + uiContainerClass.remove(classes.uiPopupActive); + this._page.classList.remove(classes.uiPopupOpen); + + this._isOpen = false; + this._isPreOpen = false; + // Popup is starting to close + this._isPreClose = true; + + inputs.forEach(function(input){ + input.blur(); + }); + + // Count down to triggering "popupafterclose" - we have two prerequisites: + // 1. The popup window reverse animation completes (container()) + // 2. The screen opacity animation completes (screen()) + this._createPrereqs( + this._closePrereqScreen.bind(this), + this._closePrereqContainer.bind(this), + this._closePrereqsDone.bind(this)); + + this._animate( { + additionalCondition: this._ui.screen.classList.contains("in"), + transition: (immediate ? "none" : (this._currentTransition || this.options.transition)), + classToRemove: classes.IN, + screenClassToAdd: classes.OUT, + containerClassToAdd: [classes.REVERSE, classes.OUT], + applyTransition: true, + prereqs: this._prereqs + }); + + // FIX: for tv profile + if (typeof this._supportKeyboard !== "boolean") { + // @todo keyboard support for mobile + restoreProperties(); + } + }; + + /** + * This method opens popup. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")); + * + * popupWidget.open(); + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * $("#popup").open("open", {"noScreen" : true, "positionX" : 10}); + * </script> + * + * @method open + * @param {Object} [options] + * @param {boolean} [options.corners] Sets whether to draw the popup with rounded corners. + * @param {string} [options.positionTo="origin"] Sets the element relative to which the popup will be centered. + * @param {?string} [options.link=null] Sets id of element used as reference for relative popup placement. + * @param {Object} [options.tolerance] Sets the minimum distance from the edge of the window for the corresponding edge of the popup. + * @param {boolean} [options.noScreen] Set screen to be always hidden + * @param {string} [options.transition] Sets the default transition for the popup. + * @param {boolean} [options.popupwindow] Sets whether the popup has context style. + * @param {boolean} [options.isHardwarePopup] Sets whether the popup is hardware one. + * @param {?number} [options.positionX] Sets desired horizontal coordinate of the center point in popup in pixels. + * @param {?number} [options.positionY] Sets desired vertical coordinate of the center point in popup in pixels. + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype.open = function (options) { + var activePopup = ns.activePopup, + closePopup, + event = arguments[1], + startOpeningCallback = startOpeningPopup.bind(null, this, options, event); + + if (activePopup === this) { + return; + } + // If there is an active popup, wait until active popup will close + if (activePopup) { + events.one(activePopup.element, "popupafterclose", startOpeningCallback); + if (activePopup._isOpen) { + activePopup.close(); + } else if (!activePopup._isPreClose) { + // If popup is opening or is promised to be opened + // close it just after opening + closePopup = activePopup.close.bind(activePopup); + events.one(activePopup.element, "popupafteropen", closePopup); + } + } else { + startOpeningCallback(); + } + ns.activePopup = this; + }; + + /** + * Close popup + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")); + * + * popupWidget.close(true); // popup will be closed without animation + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * $("#popup").popup("close"); + * </script> + * + * @method close + * @param {boolean} [immediate=false] defined if popup should be closed without animation + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype.close = function (immediate) { + // @todo define mutex $.mobile.popup.active + if (!ns.activePopup || !this._isOpen) { + return; + } + + this._close(immediate); + }; + + /** + * Bind events to widget + * @method _bindEvents + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._bindEvents = function () { + var self = this, + buttons = self.element.querySelectorAll(self.options.closeLinkSelector), + i, + buttonsLen = buttons.length; + self._onClickBound = _eatEventAndClose.bind(null, self); + self._onResizeBound = onResize.bind(null, self); + self._closeOnEvent = self.close.bind(self, true); + self._destroyOnEvent = self.destroy.bind(self, self.element); + + self._ui.screen.addEventListener("vclick", self._onClickBound, true); + window.addEventListener("throttledresize", self._onResizeBound, true); + if (buttonsLen) { + for (i = 0; i < buttonsLen; i++) { + buttons[i].addEventListener("click", self._closeOnEvent, true); + } + } + self._page.addEventListener("pagebeforehide", self._closeOnEvent, true); + self._page.addEventListener("pagedestroy", self._destroyOnEvent, true); + // @todo + // - orientationchange + // - resize + // - keyup + }; + + /** + * Removes the popup functionality completely. + * + * This will return the element back to its pre-init state. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")); + * popupWidget.destroy(); + * <script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * $("#popup").popup("destroy"); + * </script> + * + * @method destroy + * @member ns.widget.mobile.Popup + */ + + /** + * Destroy popup + * @method _destroy + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._destroy = function () { + var self = this, + classes = Popup.classes, + ui = self._ui, + uiScreen = ui.screen, + uiPlaceholder = ui.placeholder, + page = self._page, + element = self.element, + elementClasses = element.classList, + buttons = element.querySelectorAll(self.options.closeLinkSelector), + i, + buttonsLen = buttons.length; + + // When we destroy widget, we close it without animation + self.close(true); + + uiScreen.removeEventListener("vclick", self._onClickBound, true); + window.removeEventListener("throttledresize", self._onResizeBound, true); + if (buttonsLen) { + for (i = 0; i < buttonsLen; i++) { + buttons[i].removeEventListener("click", self._closeOnEvent, true); + } + } + + page.removeEventListener("pagebeforehide", self._closeOnEvent, true); + page.removeEventListener("pagedestroy", self._destroyOnEvent, true); + + doms.insertNodesBefore(uiPlaceholder, element); + elementClasses.remove(classes.uiPopup); + elementClasses.remove(classes.uiOverlaryShadow); + elementClasses.remove(classes.uiCornerAll); + uiPlaceholder.parentNode.removeChild(uiPlaceholder); + ui.arrow.parentNode.removeChild(ui.arrow); + ui.container.parentNode.removeChild(ui.container); + uiScreen.parentNode.removeChild(uiScreen); + }; + + /** + * This method refreshes position of opened popup. + * + * In case of context popup, position of arrow is not changed after calling this method. + * If the new position of popup's content causes disconnection from the arrow, the position of popup will be corrected automatically. Content of popup is always set so that the arrow is placed between left and right side of the popup's container with proper margin set in option.tolerance. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")); + * + * popupWidget.refresh(); // only refresh original position + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * $("#popup").popup("refresh", {top: 10, left: 10}); // try to set new position for the center point of popup + * </script> + * + * @method refresh + * @param {Object} [options] options + * @param {number} [options.positionX] desired horizontal coordinate of the center point in popup in pixels (it only works if both coordinates are set - top and left) + * @param {number} [options.positionY] desired vertical coordinate of the center point in popup in pixels (it only works if both coordinates are set - top and left) + * @chainable + * @member ns.widget.mobile.Popup + */ + + /** + * Refresh popup + * @method _refresh + * @protected + * @member ns.widget.mobile.Popup + */ + Popup.prototype._refresh = function (options) { + options = options || {}; + this._setPosition(options.positionX, options.positionY); }; + /** + * This method changes state of popup on enabled and removes CSS classes connected with state. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")); + * popupWidget.enable(); + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * $("#popup").popup("enable"); + * </script> + * + * @method enable + * @chainable + * @member ns.widget.mobile.Popup + */ + + /** + * This method changes state of popup on disabled and adds CSS classes connected with state. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")); + * popupWidget.disable(); + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * $("#popup").popup("disable"); + * </script> + * + * @method disable + * @chainable + * @member ns.widget.mobile.Popup + */ + + /** + * The function "value" is not supported in this widget. + * + * @method value + * @chainable + * @member ns.widget.mobile.Popup + */ + + /** + * Get/Set options of the widget. + * + * This method can work in many context. + * + * If first argument is type of object them, method set values for options given in object. Keys of object are names of options and values from object are values to set. + * + * If you give only one string argument then method return value for given option. + * + * If you give two arguments and first argument will be a string then second argument will be intemperate as value to set. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")), + * optionValue; + * + * optionValue = popupWidget.option("positionTo"); // read value of option positionTo + * popupWidget.option("positionTo", "window") // set value + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * optionValue = $("#popup").popup("option", "positionTo"); + * $("#popup").popup("option", "positionTo", "window"); + * </script> + * + * @method option + * @param {string|Object} [name] name of option + * @param {*} value value to set + * @member ns.widget.mobile.Popup + * @return {*} return value of option or undefined if method is called in setter context + */ + + /** + * Trigger an event on widget's element. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")); + * popupWidget.trigger("eventName"); + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * $("#popup").popup("trigger", "eventName"); + * </script> + * + * @method trigger + * @param {string} eventName the name of event to trigger + * @param {?*} [data] additional object to be carried with the event + * @param {boolean} [bubbles=true] indicating whether the event bubbles up through the DOM or not + * @param {boolean} [cancelable=true] indicating whether the event is cancelable + * @return {boolean} false, if any callback invoked preventDefault on event object + * @member ns.widget.mobile.Popup + */ + + /** + * Add event listener to widget's element. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")), + * callback = function () { + * console.log("event fires"); + * }); + * + * popupWidget.on("eventName", callback); + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * $("#popup").popup("on", "eventName", callback); + * </script> + * + * @method on + * @param {string} eventName the name of event + * @param {Function} listener function call after event will be trigger + * @param {boolean} [useCapture=false] useCapture param to addEventListener + * @member ns.widget.mobile.Popup + */ + + /** + * Remove event listener to widget's element. + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * var popupWidget = tau.widget.Popup(document.getElementById("popup")), + * callback = function () { + * console.log("event fires"); + * }); + * + * // add callback on event "eventName" + * popupWidget.on("eventName", callback); + * // ... + * // remove callback on event "eventName" + * popupWidget.off("eventName", callback); + * </script> + * + * If jQuery is loaded: + * + * @example + * <div id="popup" data-role="popup"> + * <p>This is a completely basic popup, no options set.</p> + * </div> + * + * <script> + * // add callback on event "eventName" + * $("#popup").popup("on", "eventName", callback); + * // ... + * // remove callback on event "eventName" + * $("#popup").popup("off", "eventName", callback); + * </script> + * + * @method off + * @param {string} eventName the name of event + * @param {Function} listener function call after event will be trigger + * @param {boolean} [useCapture=false] useCapture param to addEventListener + * @member ns.widget.mobile.Popup + */ + ns.widget.mobile.Popup = Popup; engine.defineWidget( "Popup", @@ -722,13 +2382,11 @@ [ "open", "close", - "reposition", "setPositionCallback", "setPositionCB" ], Popup, - "mobile", - true + "mobile" ); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.widget.mobile.Popup; diff --git a/tau/src/js/profile/mobile/widget/mobile/Progress.js b/tau/src/js/profile/mobile/widget/mobile/Progress.js index fd92d3bc..244707ab 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Progress.js +++ b/tau/src/js/profile/mobile/widget/mobile/Progress.js @@ -1,19 +1,8 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** diff --git a/tau/src/js/profile/mobile/widget/mobile/Progressbar.js b/tau/src/js/profile/mobile/widget/mobile/Progressbar.js index 77f4f126..8471c015 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Progressbar.js +++ b/tau/src/js/profile/mobile/widget/mobile/Progressbar.js @@ -1,19 +1,8 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** @@ -25,7 +14,7 @@ * In default elements matches to : * * - HTML elements with data-role equal "progressbar" - * - HTML elements with class ui-progressbar + * - HTML elements with class ui-progressbar-container * * ###HTML Examples * @@ -328,7 +317,7 @@ ns.widget.mobile.ProgressBar = ProgressBar; engine.defineWidget( "ProgressBar", - "[data-role='progressbar'], .ui-progressbar", + "[data-role='progressbar'], .ui-progressbar-container", ["value"], ProgressBar, "tizen" diff --git a/tau/src/js/profile/mobile/widget/mobile/ScrollHandler.js b/tau/src/js/profile/mobile/widget/mobile/ScrollHandler.js index f0a3bef5..4a36f0ef 100644 --- a/tau/src/js/profile/mobile/widget/mobile/ScrollHandler.js +++ b/tau/src/js/profile/mobile/widget/mobile/ScrollHandler.js @@ -1,19 +1,8 @@ /*global window, define, ns, console */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * # Scroll Handler @@ -294,9 +283,9 @@ "../../../../core/engine", "../../../../core/util/DOM/css", "../../../../core/util/selectors", - "../../../../core/widget/core/Page", - "../../../../core/widget/core/Scrollview", - "../mobile" + "../mobile", + "./Scrollview", + "./Page" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -309,15 +298,13 @@ * @property {string} [options.handlerTheme="s"] Handler theme * @property {"x"|"y"} [options.direction="y"] The direction of the handler * @property {"x"|"y"|"xy"} [options.scroll="y"] The direction of scrolling - * @property {number} [options.delay=1500] Time in ms after which the scrollhandler disappears. * @member ns.widget.mobile.ScrollHandler */ self.options = { handler: true, handlerTheme: "s", direction: "y", - scroll: "y", - delay: 1500 + scroll: "y" }; /** * A collection of handler UI elements @@ -415,8 +402,8 @@ engine = ns.engine, CSSUtils = ns.util.DOM, selectors = ns.util.selectors, - PageClasses = ns.widget.core.Page.classes, - Scrollview = ns.widget.core.Scrollview, + PageClasses = ns.widget.mobile.Page.classes, + Scrollview = ns.widget.mobile.Scrollview, ScrollviewPrototype = Scrollview.prototype, ScrollviewBuild = ScrollviewPrototype._build, ScrollviewInit = ScrollviewPrototype._init, @@ -474,8 +461,6 @@ style.webkitTransform = translateString; style.mozTransform = translateString; - style.msTransform = translateString; - style.oTransform = translateString; style.transform = translateString; } } @@ -560,7 +545,7 @@ } self._hideTimer = window.setTimeout(function () { self.ui.handler.classList.remove(classes.visible); - }, self.options.delay); + }, 1500); } } @@ -685,7 +670,7 @@ } self._hideTimer = window.setTimeout(function () { self.ui.handler.classList.remove(classes.visible); - }, self.options.delay); + }, 1500); } } @@ -717,6 +702,7 @@ thumb.className = classes.thumb; track.className = classes.track; + handle.setAttribute("tabindex", 0); handle.setAttribute("aria-label", (options.direction === "y" ? "Vertical" : "Horizontal") + " handler, double tap and move to scroll"); handle.appendChild(thumb); @@ -802,20 +788,30 @@ ui = self.ui, handle = ui.handle, handleStyle = handle.style, - handlerStyle = ui.handler.style, + parent = element.parentNode, + childrenHeight = 0, clipHeight = CSSUtils.getElementHeight(element, "inner", true), clipWidth = CSSUtils.getElementWidth(element, "inner", true), view = element.querySelector("." + Scrollview.classes.view), viewHeight = CSSUtils.getElementHeight(view, "inner", true), viewWidth = CSSUtils.getElementWidth(view, "inner", true), - clipOffset = CSSUtils.getElementOffset(element), - offsetTop = clipOffset.top || 0, - marginRight = window.innerWidth - clipWidth - clipOffset.left || 0; + marginTop = null, + child = parent.firstElementChild; + + while (child) { + // filter out current scrollview + if (child !== element) { + childrenHeight += CSSUtils.getElementHeight(child, "inner", true); + } else if (marginTop === null) { + marginTop = childrenHeight; + } + child = child.nextElementSibling; + } + marginTop = marginTop || 0; if (self.options.direction === 'y') { handleStyle.height = floor(clipHeight / viewHeight * clipHeight) + 'px'; - handlerStyle.marginTop = offsetTop + "px"; } else { handleStyle.width = floor(clipWidth / viewWidth * clipWidth) + 'px'; } @@ -825,9 +821,7 @@ self._availableOffsetX = max(0, viewWidth - clipWidth); self._availableOffsetY = max(0, viewHeight - clipHeight); - - // set handler to be on the right side of clip - handlerStyle.marginRight = marginRight + "px"; + ui.handler.style.marginTop = marginTop + "px"; }; /** diff --git a/tau/src/js/profile/mobile/widget/mobile/Scrollview.js b/tau/src/js/profile/mobile/widget/mobile/Scrollview.js index 8ef26d01..c25434bf 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Scrollview.js +++ b/tau/src/js/profile/mobile/widget/mobile/Scrollview.js @@ -1,20 +1,9 @@ /*global window, define, ns*/ /*jslint nomen: true */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * # ScrollView Widget * Widgets allows for creating scrollable panes, lists, etc. @@ -211,18 +200,751 @@ define( [ "../../../../core/engine", - "../../../../core/widget/core/Scrollview" + "../../../../core/event", + "../../../../core/util", + "../../../../core/util/easing", + "../../../../core/util/DOM/css", + "../../../../core/util/DOM/attributes", + "../../../../core/util/selectors", + "../../../../core/event/orientationchange", + "../../../../core/event/vmouse", + "../mobile", // fetch namespace + "./BaseWidgetMobile", + "./Button", + "./Page" ], function () { //>>excludeEnd("tauBuildExclude"); - var Scrollview = ns.widget.core.Scrollview; + var BaseWidget = ns.widget.mobile.BaseWidgetMobile, + engine = ns.engine, + util = ns.util, + easingUtils = ns.util.easing, + eventUtils = ns.event, + DOMUtils = ns.util.DOM, + selectors = ns.util.selectors, + currentTransition = null, + Page = ns.widget.mobile.Page, + pageClass = Page.classes.uiPage, + pageActiveClass = Page.classes.uiPageActive, + Scrollview = function () { + var self = this, + ui; + /** + * @property {Object} state Scrollview internal state object + * @property {Function} state.currentTransition Instance transition function + * @readonly + */ + self.state = { + currentTransition: null + }; + /** + * @property {number} scrollDuration The time length of the scroll animation + * @member ns.widget.mobile.Scrollview + */ + self.scrollDuration = 300; + self.scrollviewSetHeight = false; + /** + * Scrollview options + * @property {Object} options + * @property {string} [options.scroll='y'] Scroll direction + * @property {boolean} [options.scrollJump=false] Scroll jump buttons flag + * @member ns.widget.mobile.Scrollview + */ + self.options = { + scroll: "y", + scrollJump: false + }; + /** + * Dictionary for holding internal DOM elements + * @property {Object} ui + * @property {HTMLElement} ui.view The main view element + * @property {HTMLElement} ui.page The main page element + * @property {HTMLElement} ui.jumpHorizontalButton Jump left button + * @property {HTMLElement} ui.jumpVerticalButton Jump top button + * @member ns.widget.mobile.Scrollview + * @readonly + */ + ui = self._ui || {}; + ui.view = null; + ui.page = null; + ui.jumpHorizontalButton = null; + ui.jumpVerticalButton = null; + self._ui = ui; + /** + * Dictionary for holding internal listeners + * @property {Object} _callbacks + * @property {Function} _callbacks.repositionJumps Refresh jumps listener + * @property {Function} _callbacks.jumpTop Top jump button click callback + * @property {Function} _callbacks.jumpLeft Left jump button click callback + * @member ns.widget.mobile.Scrollview + * @protected + * @readonly + */ + self._callbacks = { + repositionJumps: null, + jumpTop: null, + jumpBottom: null + }; + }, + /** + * Dictionary for scrollview css classes + * @property {Object} classes + * @property {string} [classes.view='ui-scrollview-view'] View main class + * @property {string} [classes.clip='ui-scrollview-clip'] Clip main class + * @property {string} [classes.jumpTop='ui-scroll-jump-top-bg'] Jump top button background + * @property {string} [classes.jumpLeft='ui-scroll-jump-left-bg'] Jump bottom button background + * @member ns.widget.mobile.Scrollview + * @static + * @readonly + */ + classes = { + view: "ui-scrollview-view", + clip: "ui-scrollview-clip", + jumpTop: "ui-scroll-jump-top-bg", + jumpLeft: "ui-scroll-jump-left-bg" + }; + + // Changes static position to relative + // @param {HTMLElement} view + function makePositioned(view) { + if (DOMUtils.getCSSProperty(view, "position") === "static") { + view.style.position = "relative"; + } else { + view.style.position = "absolute"; + } + } + + // Translation animation loop + // @param {Object} state Scrollview instance state + // @param {HTMLElement} element + // @param {number} startTime + // @param {number} startX + // @param {number} startY + // @param {number} translateX + // @param {number} translateY + // @param {number} endX + // @param {number} endY + // @param {number} duration + function translateTransition(state, element, startTime, startX, startY, translateX, translateY, endX, endY, duration) { + var timestamp = (new Date()).getTime() - startTime, + newX = parseInt(easingUtils.cubicOut(timestamp, startX, translateX, duration), 10), + newY = parseInt(easingUtils.cubicOut(timestamp, startY, translateY, duration), 10); + if (element.scrollLeft !== endX) { + element.scrollLeft = newX; + } + if (element.scrollTop !== endY) { + element.scrollTop = newY; + } + + if ((newX !== endX || newY !== endY) && + (newX >= 0 && newY >= 0) && + state.currentTransition) { + util.requestAnimationFrame(state.currentTransition); + } else { + state.currentTransition = null; + } + } + + // Translates scroll posotion directly or with an animation + // if duration is specified + // @param {Object} state Scrollview instance state + // @param {HTMLElement} element + // @param {number} x + // @param {number} y + // @param {number=} [duration] + function translate(state, element, x, y, duration) { + if (duration) { + state.currentTransition = translateTransition.bind( + null, + state, + element, + (new Date()).getTime(), + element.scrollLeft, + element.scrollTop, + x, + y, + element.scrollLeft + x, + element.scrollTop + y, + duration + ); + util.requestAnimationFrame(state.currentTransition); + } else { + if (x) { + element.scrollLeft = element.scrollLeft + x; + } + if (y) { + element.scrollTop = element.scrollTop + y; + } + } + } + + // Refresh jumpTop jumpLeft buttons + // @param {ns.widget.mobile.Scrollview} self + function repositionJumps(self) { + var ui = self._ui, + horizontalJumpButton = ui.jumpHorizontalButton, + verticalJumpButton = ui.jumpVerticalButton, + offsets = horizontalJumpButton || verticalJumpButton ? DOMUtils.getElementOffset(self.element) : null; // dont calc when not used + + if (horizontalJumpButton) { + horizontalJumpButton.style.left = offsets.left + "px"; + } + + if (verticalJumpButton) { + verticalJumpButton.style.top = offsets.top + "px"; + } + } + + Scrollview.classes = classes; + + Scrollview.prototype = new BaseWidget(); + + /** + * Builds the widget + * @param {HTMLElement} element + * @return {HTMLElement} + * @method _build + * @protected + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype._build = function (element) { + //@TODO wrap element's content with external function + var self = this, + ui = self._ui, + view = selectors.getChildrenByClass(element, classes.view)[0] || document.createElement("div"), + clipStyle = element.style, + node = null, + child = element.firstChild, + options = self.options, + direction = options.scroll, + jumpButton, + jumpBackground; + view.className = classes.view; + + while (child) { + node = child; + child = child.nextSibling; + if (view !== node) { + view.appendChild(node); + } + } + + if (view.parentNode !== element) { + element.appendChild(view); + } + + // setting view style + makePositioned(view); + + element.classList.add(classes.clip); + + switch (direction) { + case "x": + clipStyle.overflowX = "scroll"; + break; + case "xy": + clipStyle.overflow = "scroll"; + break; + default: + clipStyle.overflowY = "scroll"; + break; + } + + if (options.scrollJump) { + if (direction.indexOf("x") > -1) { + jumpBackground = document.createElement("div"); + jumpBackground.className = classes.jumpLeft; + jumpButton = document.createElement("div"); + + jumpBackground.appendChild(jumpButton); + element.appendChild(jumpBackground); + engine.instanceWidget( + jumpButton, + "Button", + { + "icon": "scrollleft", + "style": "box" + } + ); + ui.jumpHorizontalButton = jumpBackground; + } + + if (direction.indexOf("y") > -1) { + jumpBackground = document.createElement("div"); + jumpBackground.className = classes.jumpTop; + jumpButton = document.createElement("div"); + + jumpBackground.appendChild(jumpButton); + element.appendChild(jumpBackground); + engine.instanceWidget( + jumpButton, + "Button", + { + "icon": "scrolltop", + "style": "box" + } + ); + ui.jumpVerticalButton = jumpBackground; + } + } + + ui.view = view; + // @TODO + //this._addOverflowIndicator(element); + return element; + }; + + /** + * Inits widget + * @method _init + * @param {HTMLElement} element + * @protected + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype._init = function (element) { + var ui = this._ui, + page = ui.page; + + if (!ui.view) { + ui.view = selectors.getChildrenByClass(element, classes.view)[0]; + } + + if (!page) { + page = selectors.getClosestByClass(element, pageClass); + if (page) { + ui.page = page; + if (page.classList.contains(pageActiveClass) && this.options.scrollJump) { + repositionJumps(this); + } + } + } + }; + + /** + * Adds overflow indicators + * @param {HTMLElement} clip + * @method _addOverflowIndicator + * @protected + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype._addOverflowIndicator = function (clip) { + if ((clip.getAttribute("data-overflow-enable") || "true") === "false") { + return; + } + clip.insertAdjacentHTML("beforeend", '<div class="ui-overflow-indicator-top"></div><div class="ui-overflow-indicator-bottom"></div>'); + }; + + /** + * Scrolls to specified position + * + * ### Example usage with TAU API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * </div> + * </div> + * <script> + * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")); + * scrollview.scrollTo(0, 200, 1000); // scroll to 200px vertical with 1s animation + * </script> + * + * ### Example usage with jQuery API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * </div> + * </div> + * <script> + * var element = $(".myPageClass > div[data-role=content]")); + * element.scrollview(); + * element.scrollview("scrollTo", 0, 200, 1000); // scroll to 200px vertical with 1s animation + * </script> + * + * @param {number} x + * @param {number} y + * @param {number=} [duration] + * @method scrollTo + * @protected + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype.scrollTo = function (x, y, duration) { + var element = this.element; + this.translateTo(x - element.scrollLeft, y - element.scrollTop, duration); + }; + + /** + * Translates the scroll to specified position + * + * ### Example usage with TAU API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * </div> + * </div> + * <script> + * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")); + * scrollview.translateTo(0, 200, 1000); // scroll forward 200px in vertical direction with 1s animation + * </script> + * + * ### Example usage with jQuery API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * </div> + * </div> + * <script> + * var element = $(".myPageClass > div[data-role=content]")); + * element.scrollview(); + * element.scrollview("translateTo", 0, 200, 1000); // scroll forward 200px in vertical direction with 1s animation + * </script> + * + * @param {number} x + * @param {number} y + * @param {number=} [duration] + * @method translateTo + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype.translateTo = function (x, y, duration) { + translate(this.state, this.element, x, y, duration); + }; + + /** + * Ensures that specified element is visible in the + * clip area + * + * ### Example usage with TAU API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * <div class="testElementClass">somedata</div> + * </div> + * </div> + * <script> + * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")), + * testElement = document.querySelector(".testElementClass"); + * scrollview.ensureElementIsVisible(testelement); + * </script> + * + * ### Example usage with jQuery API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * <div class="testElementClass">somedata</div> + * </div> + * </div> + * <script> + * var element = $(".myPageClass > div[data-role=content]")), + * testElement = $(".testElementClass"); + * element.scrollview(); + * element.scrollview("ensureElementIsVisible", testElement); + * </script> + * + * @param {HTMLElement} element + * @method ensureElementIsVisible + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype.ensureElementIsVisible = function (element) { + var clip = this.element, + clipHeight = DOMUtils.getElementHeight(clip), + clipWidth = DOMUtils.getElementWidth(clip), + clipTop = 0, + clipBottom = clipHeight, + elementHeight = DOMUtils.getElementHeight(element), + elementWidth = DOMUtils.getElementWidth(element), + elementTop = 0, + elementBottom, + elementFits = clipHeight >= elementHeight && clipWidth >= elementWidth, + anchor, + anchorPositionX, + anchorPositionY, + parent, + findPositionAnchor = function (input) { + var id = input.getAttribute("id"), + tagName = input.tagName.toLowerCase(); + if (id && ["input", "textarea", "button"].indexOf(tagName) > -1) { + return input.parentNode.querySelector("label[for=" + id + "]"); + } + }, + _true = true; + + parent = element.parentNode; + while (parent && parent.node !== clip) { + elementTop += parent.offsetTop; + //elementLeft += parent.offsetLeft; + parent = parent.parentNode; + } + elementBottom = elementTop + elementHeight; + //elementRight = elementLeft + elementWidth; + + switch (_true) { + case elementFits && clipTop < elementTop && clipBottom > elementBottom: // element fits in view is inside clip area + // pass, element position is ok + break; + case elementFits && clipTop < elementTop && clipBottom < elementBottom: // element fits in view but its visible only at top + case elementFits && clipTop > elementTop && clipBottom > elementBottom: // element fits in view but its visible only at bottom + case elementFits: // element fits in view but is not visible + this.centerToElement(element); + break; + case clipTop < elementTop && clipBottom < elementBottom: // element visible only at top + case clipTop > elementTop && clipBottom > elementBottom: // element visible only at bottom + // pass, we cant do anything, if we move the scroll + // the user could lost view of something he scrolled to + break; + default: // element is not visible + anchor = findPositionAnchor(element); + if (!anchor) { + anchor = element; + } + anchorPositionX = anchor.offsetLeft + DOMUtils.getCSSProperty(anchor, "margin-left", 0, "integer"); + anchorPositionY = anchor.offsetTop + DOMUtils.getCSSProperty(anchor, "margin-top", 0, "integer"); + parent = anchor.parentNode; + while (parent && parent !== clip) { + anchorPositionX = parent.offsetLeft + DOMUtils.getCSSProperty(parent, "margin-left", 0, "integer"); + anchorPositionY = parent.offsetTop + DOMUtils.getCSSProperty(parent, "margin-top", 0, "integer"); + parent = parent.parentNode; + } + this.scrollTo(anchorPositionX, anchorPositionY, this.scrollDuration); + break; + } + }; + + /** + * Centers specified element in the clip area + * + * ### Example usage with TAU API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * <div class="testElementClass">somedata</div> + * </div> + * </div> + * <script> + * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")), + * testElement = document.querySelector(".testElementClass"); + * scrollview.centerToElement(testelement); + * </script> + * + * ### Example usage with jQuery API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * <div class="testElementClass">somedata</div> + * </div> + * </div> + * <script> + * var element = $(".myPageClass > div[data-role=content]")), + * testElement = $(".testElementClass"); + * element.scrollview(); + * element.scrollview("centerToElement", testElement); + * </script> + * + * @param {HTMLElement} element + * @method centerToElement + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype.centerToElement = function (element) { + var clip = this.element, + deltaX = parseInt(DOMUtils.getElementWidth(clip) / 2 - DOMUtils.getElementWidth(element) / 2, 10), + deltaY = parseInt(DOMUtils.getElementHeight(clip) / 2 - DOMUtils.getElementHeight(element) / 2, 10), + elementPositionX = element.offsetLeft, + elementPositionY = element.offsetTop, + parent = element.parentNode; + + while (parent && parent !== clip) { + elementPositionX += parent.offsetLeft + DOMUtils.getCSSProperty(parent, "margin-left", 0, "integer"); + elementPositionY += parent.offsetTop + DOMUtils.getCSSProperty(parent, "margin-top", 0, "integer"); + parent = parent.parentNode; + } + this.scrollTo(elementPositionX - deltaX, elementPositionY - deltaY, this.scrollDuration); + }; + + /** + * This is just for compatibility + * @method skipDragging + * @member ns.widget.mobile.Scrollview + * @deprecated 2.3 + */ + Scrollview.prototype.skipDragging = function () { + if (ns.warn) { + ns.warn("ns.widget.mobile.Scrollview: skipDragging is deprecated"); + } + }; // just for TWEBUIFW compat + + /** + * Returns scroll current position + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * </div> + * </div> + * <script> + * var scrollview = tau.widget.Scrollview(document.querySelector(".myPageClass > div[data-role=content]")), + * currentPosition = scrollview.getScrollPosition(); + * </script> + * + * ### Example usage with jQuery API + * + * @example + * <div class="myPageClass" data-role="page"> + * <div data-role="content" data-scroll="y"> + * content + * </div> + * </div> + * <script> + * var element = $(".myPageClass > div[data-role=content]")), + * position; + * element.scrollview(); + * position = element.scrollview("getScrollPosition"); + * </script> + * + * @return {Object} + * @method getScrollPosition + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype.getScrollPosition = function () { + var element = this.element; + return { + "x": element.scrollLeft, + "y": element.scrollTop + }; + }; + + /** + * Binds scrollview events + * @method _bindEvents + * @param {HTMLElement} element + * @protected + * @member ns.widget.mobile.Scrollview + */ + Scrollview.prototype._bindEvents = function (element) { + var scrollTimer = null, + view = element.children[0], + lastClipHeight = DOMUtils.getElementHeight(element), + lastClipWidth = DOMUtils.getElementWidth(element), + notifyScrolled = function () { + eventUtils.trigger(element, "scrollstop"); + window.clearTimeout(scrollTimer); + scrollTimer = null; + }, + self = this, + //FIXME there should be some other way to get parent container + ui = self._ui, + page = ui.page, + jumpTop = ui.jumpVerticalButton, + jumpLeft = ui.jumpHorizontalButton, + repositionJumpsCallback, + jumpTopCallback, + jumpLeftCallback, + callbacks = self._callbacks; + + if (page) { + if (this.options.scrollJump) { + repositionJumpsCallback = repositionJumps.bind(null, this); + jumpTopCallback = function () { + self.scrollTo(element.scrollLeft, 0, 250); + }; + jumpLeftCallback = function () { + self.scrollTo(0, element.scrollTop, 250); + }; + page.addEventListener("pageshow", repositionJumpsCallback, false); + if (jumpTop) { + jumpTop.firstChild.addEventListener("vclick", jumpTopCallback, false); + } + if (jumpLeft) { + jumpLeft.firstChild.addEventListener("vclick", jumpLeftCallback, false); + } + + callbacks.repositionJumps = repositionJumpsCallback; + callbacks.jumpTop = jumpTopCallback; + callbacks.jumpLeft = jumpLeftCallback; + } + + element.addEventListener("scroll", function () { + if (scrollTimer) { + window.clearTimeout(scrollTimer); + } else { + eventUtils.trigger(element, "scrollstart"); + } + scrollTimer = window.setTimeout(notifyScrolled, 100); + eventUtils.trigger(element, "scrollupdate"); + }, false); + + + window.addEventListener("throttledresize", function () { + var focusedElement = view.querySelector(".ui-focus"), + clipWidth, + clipHeight; + if (focusedElement) { + self.ensureElementIsVisible(focusedElement); + } else { + clipHeight = DOMUtils.getElementHeight(element); + clipWidth = DOMUtils.getElementWidth(element); + self.translateTo( + lastClipWidth - clipWidth, + lastClipHeight - clipHeight, + self.scrollDuration + ); + lastClipHeight = clipHeight; + lastClipWidth = clipWidth; + } + }, false); + + document.addEventListener("vmousedown", function () { + if (currentTransition) { + currentTransition = null; + } + }, false); + + } + }; + + Scrollview.prototype._destroy = function () { + var ui = this._ui, + page = ui.page, + scrollJump = this.options.scrollJump, + jumpTop = ui.jumpVerticalButton, + jumpLeft = ui.jumpHorizontalButton, + callbacks = this._callbacks, + repositionJumpsCallback = callbacks.repositionJumps, + jumpTopCallback = callbacks.jumpTop, + jumpLeftCallback = callbacks.jumpLeft; + + if (scrollJump) { + if (page && repositionJumpsCallback) { + page.removeEventListener("pageshow", repositionJumpsCallback, false); + } + if (jumpTop && jumpTopCallback) { + jumpTop.firstChild.removeEventListener("vclick", jumpTopCallback, false); + } + if (jumpLeft && jumpLeftCallback) { + jumpLeft.firstChild.removeEventListener("vclick", jumpLeftCallback, false); + } + } + + }; ns.widget.mobile.Scrollview = Scrollview; - ns.engine.defineWidget( + engine.defineWidget( "Scrollview", - ".ui-content:not([data-scroll='none']):not([data-handler='true']):not(.ui-scrollview-clip):not(.ui-scrolllistview):not(.ui-scrollhandler)" + - ", [data-scroll]:not([data-scroll='none']):not([data-handler='true']):not(.ui-scrollhandler)" + - ", .ui-scrollview:not([data-scroll='none']):not([data-handler='true']):not(.ui-scrollhandler)", + "[data-role='content']:not([data-scroll='none']):not([data-handler='true']):not(.ui-scrollview-clip):not(.ui-scrolllistview), [data-scroll]:not([data-scroll='none']):not([data-handler='true']), .ui-scrollview:not([data-scroll='none']):not([data-handler='true'])", [ "scrollTo", "ensureElementIsVisible", diff --git a/tau/src/js/profile/mobile/widget/mobile/SearchBar.js b/tau/src/js/profile/mobile/widget/mobile/SearchBar.js index 6e894e62..f0ca31e6 100644 --- a/tau/src/js/profile/mobile/widget/mobile/SearchBar.js +++ b/tau/src/js/profile/mobile/widget/mobile/SearchBar.js @@ -1,19 +1,8 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * # Search Bar Widget @@ -282,12 +271,10 @@ uiInputSearchWide: "ui-input-search-wide", uiBtnCancelHide: "ui-btn-cancel-hide", uiBtnCancelShow: "ui-btn-cancel-show", - uiFocus: "ui-focus", + uiFocus: 'ui-focus', uiHeaderSearchBar: "ui-header-searchbar", clearActive: textInputClasses.clearActive, - textLine: textInputClasses.textLine, - uiSearchBarIconPositionLeft: "ui-search-bar-icon-left", - uiSearchBarIconPositionRight: "ui-search-bar-icon-right" + textLine: textInputClasses.textLine }; SearchBar.prototype = new BaseWidget(); @@ -301,25 +288,17 @@ SearchBar.classes = classes; SearchBar.prototype._configure = function () { - var self = this, - options = self.options || {}; /** * @property {Object} options All possible widget options * @property {?string} [options.theme=null] theme of widget * @property {boolean} [options.cancelBtn=false] shows or not cancel button - * @property {boolean} [options.clearButton=false] shows or not clear button * @property {?string} [options.icon=null] type of icon on action button, possible values are the same as in button widget. If opition is not set then action button isn't showing - * @property {?string} [options.buttonPosition="left"] position of icon - * @property {?string} [options.defaultText=""] Default placeholder text * @member ns.widget.mobile.SearchBar */ - options.theme = null; - options.cancelBtn = false; - options.clearButton = true; - options.icon = null; - options.buttonPosition = "left"; - options.defaultText = ""; - self.options = options; + this.options = this.options || {}; + this.options.theme = null; + this.options.cancelBtn = false; + this.options.icon = null; }; /** @@ -405,7 +384,7 @@ */ function findLabel(element) { var elemParent = element.parentNode, - label = elemParent.querySelector("label[for='" + element.id + "']"); + label = elemParent.querySelector('label[for="' + element.id + '"]'); return label; } @@ -424,33 +403,16 @@ } /** - * Build button position - * @method _buildButtonPosition - * @param {HTMLElement} container - * @protected - * @member ns.widget.mobile.SearchBar - */ - SearchBar.prototype._buildButtonPosition = function (container) { - var elementClassList = container.classList; - elementClassList.remove(classes.uiSearchBarIconPositionLeft); - elementClassList.remove(classes.uiSearchBarIconPositionRight); - elementClassList.add(this.options.buttonPosition === "left" ? classes.uiSearchBarIconPositionLeft : classes.uiSearchBarIconPositionRight); - }; - - /** * Build widget structure - * @method _build * @param {HTMLElement} element * @returns {HTMLElement} * @protected * @member ns.widget.mobile.SearchBar */ SearchBar.prototype._build = function (element) { - var self = this, - id = self.id, - options = self.options, + var options = this.options, protoOptions = SearchBar.prototype.options, - theme = options.theme || themes.getInheritedTheme(element, (protoOptions || protoOptions.theme) || "c"), + theme = options.theme || themes.getInheritedTheme(element, (protoOptions || protoOptions.theme) || 'c'), themeClass = classes.themePrefix + theme, searchBox, clearButton, @@ -464,8 +426,8 @@ inputClassList = element.classList, ui; - ui = self._ui || {}; - self._ui = ui; + this._ui = this._ui || {}; + ui = this._ui; if (label) { label.classList.add(classes.uiInputText); @@ -476,24 +438,25 @@ element.parentNode.classList.add(classes.uiHeaderSearchBar); } - element.setAttribute("autocorrect", "off"); - element.setAttribute("autocomplete", "off"); + if (element.autocorrect !== undefined) { // @todo && !$.support.touchOverflow ) { + // Set the attribute instead of the property just in case there + // is code that attempts to make modifications via HTML. + element.setAttribute("autocorrect", "off"); + element.setAttribute("autocomplete", "off"); + } - element.removeAttribute("type"); + element.removeAttribute('type'); inputClassList.add(classes.uiInputText); + inputClassList.add(themeClass); - searchBox = document.createElement("div"); + searchBox = document.createElement('div'); searchBoxClasses = searchBox.classList; searchBoxClasses.add(classes.uiInputSearch); searchBoxClasses.add(classes.uiShadowInset); searchBoxClasses.add(classes.uiCornerAll); searchBoxClasses.add(classes.uiBtnShadow); - - if (typeof theme === "string") { - inputClassList.add(themeClass); - searchBoxClasses.add(themeClass); - } + searchBoxClasses.add(themeClass); element.parentNode.replaceChild(searchBox, element); searchBox.appendChild(element); @@ -506,65 +469,66 @@ searchBoxClasses.add(classes.uiInputSearchDefault); } - if (options.clearBtn) { - clearButton = document.createElement("a"); - clearButton.setAttribute("href", "#"); - clearButton.setAttribute("title", "clear text"); - clearButton.classList.add(classes.uiInputClear); - if (!element.value) { - clearButton.classList.add(classes.uiInputClearHidden); - } - clearButton.setAttribute("id", id + "-clear-button"); - searchBox.appendChild(clearButton); - engine.instanceWidget(clearButton, "Button", { - icon: "deleteSearch", - iconpos: "notext", - corners: true, - shadow: true - }); - - // Give space from right - element.classList.add(classes.clearActive); + clearButton = document.createElement('a'); + clearButton.setAttribute('href', '#'); + clearButton.setAttribute('title', 'clear text'); + clearButton.classList.add(classes.uiInputClear); + if (!element.value) { + clearButton.classList.add(classes.uiInputClearHidden); } - - inputSearchBar = document.createElement("div"); + clearButton.setAttribute('id', this.id + '-clear-button'); + searchBox.appendChild(clearButton); + engine.instanceWidget(clearButton, 'Button', { + icon: "deleteSearch", + iconpos: "notext", + corners: true, + shadow: true + }); + + // Give space from right + element.classList.add(classes.clearActive); + + inputSearchBar = document.createElement('div'); inputSearchBar.classList.add(classes.inputSearchBar); searchBox.parentNode.replaceChild(inputSearchBar, searchBox); inputSearchBar.appendChild(searchBox); if (options.icon) { searchBoxClasses.add(classes.uiSearchBarIcon); - frontIcon = document.createElement("div"); - DOM.setNSData(frontIcon, "role", "button"); + frontIcon = document.createElement('div'); + DOM.setNSData(frontIcon, 'role', 'button'); inputSearchBar.appendChild(frontIcon); - engine.instanceWidget(frontIcon, "Button", { - style: "circle", + engine.instanceWidget(frontIcon, 'Button', { iconpos: "notext", - icon: options.icon, - shadow: true + icon: options.icon }); frontIcon.classList.add(classes.uiBtnSearchFrontIcon); - self._buildButtonPosition(inputSearchBar); } // @TODO use TextInput widget instead if (options.cancelBtn) { - cancelButton = document.createElement("div"); - DOM.setNSData(cancelButton, "role", "button"); + cancelButton = document.createElement('div'); + DOM.setNSData(cancelButton, 'role', 'button'); cancelButton.classList.add(classes.uiInputCancel); - cancelButton.setAttribute("title", "Clear text"); - cancelButton.textContent = "Cancel"; - cancelButton.setAttribute("id", id + "-cancel-button"); + cancelButton.setAttribute('title', 'Clear text'); + cancelButton.textContent = 'Cancel'; + cancelButton.setAttribute('id', this.id + '-cancel-button'); - engine.instanceWidget(cancelButton, "Button"); + engine.instanceWidget(cancelButton, 'Button'); inputSearchBar.appendChild(cancelButton); } // Default Text - defaultText = options.defaultText || element.getAttribute("placeholder") || "Search"; + defaultText = DOM.getNSData(element, "default-text"); - element.setAttribute("placeholder", "Search"); + if (defaultText !== null) { + element.setAttribute("placeholder", defaultText); + } + + if (!element.getAttribute("placeholder")) { + element.setAttribute("placeholder", "Search"); + } ui.input = element; ui.clearButton = clearButton; @@ -573,18 +537,13 @@ } if (labelDiv) { ui.labelDiv = labelDiv; - labelDiv.setAttribute("id", id + "-label-div"); + labelDiv.setAttribute('id', this.id + '-label-div'); } ui.searchBox = searchBox; - searchBox.setAttribute("id", id + "-search-box"); + searchBox.setAttribute('id', this.id + '-search-box'); return element; - } - - function clearInputAndTriggeerChange(input) { - input.value = ""; - events.trigger(input, "change"); - } + }; /** * Callback for click event on clear button @@ -598,9 +557,10 @@ function clearButtonClick(self, event) { var input = self._ui.input; if (!input.getAttribute("disabled")) { - clearInputAndTriggeerChange(input); + input.value = ''; + events.trigger(input, 'change'); input.focus(); - events.preventDefault(event); + event.preventDefault(); } } @@ -614,22 +574,22 @@ * @member ns.widget.mobile.SearchBar */ function cancelButtonClick(self, event) { - var ui = self._ui, - input = ui.input, + var input = self._ui.input, localClassList; if (!input.getAttribute("disabled")) { - events.preventDefault(event); - events.stopPropagation(event); + event.preventDefault(); + event.stopPropagation(); - clearInputAndTriggeerChange(input); + input.value = ''; + events.trigger(input, 'change'); input.blur(); - if (self.options.cancelBtn) { - localClassList = ui.searchBox.classList; + if (self.options.cancel) { + localClassList = self._ui.searchBox.classList; localClassList.add(classes.uiInputSearchWide); localClassList.remove(classes.uiInputSearchDefault); - localClassList = ui.cancelButton.classList; + localClassList = self._ui.cancelButton.classList; localClassList.add(classes.uiBtnCancelHide); localClassList.remove(classes.uiBtnCancelShow); } @@ -645,23 +605,22 @@ * @member ns.widget.mobile.SearchBar */ function inputFocus(self) { - var ui = self._ui, - input = ui.input, + var input = self._ui.input, localClassList; if (!input.getAttribute("disabled")) { - localClassList = ui.searchBox.classList; + localClassList = self._ui.searchBox.classList; localClassList.add(classes.uiFocus); - if (self.options.cancelBtn) { + if (self.options.cancel) { localClassList.remove(classes.uiInputSearchWide); localClassList.add(classes.uiInputSearchDefault); - localClassList = ui.cancelButton.classList; + localClassList = self._ui.cancelButton.classList; localClassList.remove(classes.uiBtnCancelHide); localClassList.add(classes.uiBtnCancelShow); } } - if (ui.labelDiv) { - ui.labelDiv.classList.add(classes.uiInputDefaultHidden); + if (self._ui.labelDiv) { + self._ui.labelDiv.classList.add(classes.uiInputDefaultHidden); } } @@ -674,16 +633,15 @@ * @member ns.widget.mobile.SearchBar */ function inputBlur(self) { - var ui = self._ui, - inputedText = ui.input.value, + var inputedText = self._ui.input.value, classes = SearchBar.classes, - labelDiv = ui.labelDiv; + ui = self._ui; ui.searchBox.classList.remove(classes.uiFocus); - if (labelDiv) { + if (ui.labelDiv) { if (inputedText.length > 0) { - labelDiv.classList.add(classes.uiInputDefaultHidden); + ui.labelDiv.classList.add(classes.uiInputDefaultHidden); } else { - labelDiv.classList.remove(classes.uiInputDefaultHidden); + ui.labelDiv.classList.remove(classes.uiInputDefaultHidden); } } } @@ -697,9 +655,8 @@ * @member ns.widget.mobile.SearchBar */ function labelClick(self) { - var input = self._ui.input; - input.blur(); - input.focus(); + self._ui.input.blur(); + self._ui.input.focus(); } /** @@ -710,15 +667,14 @@ * @member ns.widget.mobile.SearchBar */ SearchBar.prototype._init = function (element) { - var self = this, - ui = self._ui || {}, - id = self.id; - self._ui = ui; + var ui; + this._ui = this._ui || {}; + ui = this._ui; ui.input = element; - ui.clearButton = document.getElementById(id + "-clear-button"); - ui.cancelButton = document.getElementById(id + "-cancel-button"); - ui.labelDiv = document.getElementById(id + "-label-div"); - ui.searchBox = document.getElementById(id + "-search-box"); + ui.clearButton = document.getElementById(this.id + '-clear-button'); + ui.cancelButton = document.getElementById(this.id + '-cancel-button'); + ui.labelDiv = document.getElementById(this.id + '-label-div'); + ui.searchBox = document.getElementById(this.id + '-search-box'); }; /** @@ -729,19 +685,17 @@ */ SearchBar.prototype._bindEvents = function () { var handlers, - self = this, - ui = self._ui, + ui = this._ui, input = ui.input; - self._callbacks = self._callbacks || {}; - handlers = self._callbacks; - handlers.clearClick = clearButtonClick.bind(null, self); - handlers.cancelClick = cancelButtonClick.bind(null, self); - handlers.inputFocus = inputFocus.bind(null, self); - handlers.inputBlur = inputBlur.bind(null, self); - handlers.labelClick = labelClick.bind(null, self); - if(ui.clearButton) { - ui.clearButton.addEventListener("vclick", handlers.clearClick, false); - } + this._handlers = this._handlers || {}; + handlers = this._handlers; + handlers.clearClick = clearButtonClick.bind(null, this); + handlers.cancelClick = cancelButtonClick.bind(null, this); + handlers.inputFocus = inputFocus.bind(null, this); + handlers.inputBlur = inputBlur.bind(null, this); + handlers.labelClick = labelClick.bind(null, this); + + ui.clearButton.addEventListener("vclick", handlers.clearClick, false); if (ui.cancelButton) { ui.cancelButton.addEventListener("vclick", handlers.cancelClick, false); } @@ -753,30 +707,6 @@ }; /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.mobile.SearchBar - */ - SearchBar.prototype._destroy = function () { - var handlers, - ui = this._ui, - input = ui.input; - handlers = this._callbacks; - if(ui.clearButton) { - ui.clearButton.removeEventListener("vclick", handlers.clearClick, false); - } - if (ui.cancelButton) { - ui.cancelButton.removeEventListener("vclick", handlers.cancelClick, false); - } - input.removeEventListener("focus", handlers.inputFocus, false); - input.removeEventListener("blur", handlers.inputBlur, false); - if (ui.labelDiv) { - ui.labelDiv.removeEventListener("vclick", handlers.labelClick, false); - } - }; - - /** * Gets or sets value of input text. * * If you call with parameter then first argument will be set as new @@ -805,6 +735,14 @@ * @member ns.widget.mobile.SearchBar */ + SearchBar.prototype.value = function (value) { + if (value) { + this._setValue(value); + return; + } + return this._getValue(); + }; + /** * Gets value for widget * @method _getValue @@ -844,8 +782,10 @@ ns.widget.mobile.SearchBar = SearchBar; engine.defineWidget( "SearchBar", - "input[type='search'], [data-type='search'], [data-type='tizen-search'], .ui-searchbar", - [], + "input[type='search'],[data-type='search'], input[type=tizen-search],[data-type='tizen-search'], .ui-searchbar", + [ + "value" + ], SearchBar, "tizen" ); diff --git a/tau/src/js/profile/mobile/widget/mobile/SelectMenu.js b/tau/src/js/profile/mobile/widget/mobile/SelectMenu.js index 4b862065..85d8e929 100644 --- a/tau/src/js/profile/mobile/widget/mobile/SelectMenu.js +++ b/tau/src/js/profile/mobile/widget/mobile/SelectMenu.js @@ -1,28 +1,14 @@ -/*global window, ns, define */ -/*jslint nomen: true */ +/*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /** * #SelectMenu Widget * SelectMenu widget provide creating SelectMenu widget in the form of dropdown list and managing its operation. * * ##Default selector - * In default all select elements with _data-role=select_ or with class .ui-select-menu - * are changed to Tizen WebUI SelectMenu. Additionally elements with - * _data-native-menu=false_ will use custom popups for option selection + * In default all select element are changed to Tizen WebUI SelectMenu. * * ### HTML Examples * @@ -143,7 +129,6 @@ "../../../../core/util/selectors", "../../../../core/event", "../../../../core/util/DOM/manipulation", - "../../../../core/widget/core/Page", "../mobile", "./BaseWidgetMobile" ], @@ -156,7 +141,6 @@ eventUtils = ns.event, selectors = ns.util.selectors, slice = [].slice, - Page = ns.widget.core.Page, indexOf = [].indexOf, SelectMenu = function () { var self = this; @@ -191,53 +175,14 @@ * @property {boolean} [options.inline=false] Sets the SelectMenu widget as inline/normal type. * @property {boolean} [options.label=false] Sets the SelectMenu widget as label/normal type. * @property {boolean} [options.hidePlaceholderMenuItems=true] Hide/Reveal the placeholder option in dropdown list of the SelectMenu. - * @property {boolean} [options.backgroundLayer=true] Enable or disable background layer which close select menu after click * @member ns.widget.mobile.SelectMenu */ self.options = { nativeMenu: true, inline: false, label: false, - hidePlaceholderMenuItems: true, - backgroundLayer: true + hidePlaceholderMenuItems: true }; - - /** - * @property {Function|null} _toggleMenuBound callback for select action - * @protected - * @member ns.widget.mobile.SelectMenu - */ - self._toggleMenuBound = null; - /** - * @property {Function|null} _changeOptionBound callback for change value - * @protected - * @member ns.widget.mobile.SelectMenu - */ - self._changeOptionBound = null; - /** - * @property {Function|null} _onResizeBound callback for throttledresize - * @protected - * @member ns.widget.mobile.SelectMenu - */ - self._onResizeBound = null; - /** - * @property {Function|null} _nativeChangeOptionBound callback for change value - * @protected - * @member ns.widget.mobile.SelectMenu - */ - self._nativeChangeOptionBound = null; - /** - * @property {Function|null} _focusBound callback for focus action - * @protected - * @member ns.widget.mobile.SelectMenu - */ - self._focusBound = null; - /** - * @property {Function|null} _blurBound callback for blur action - * @protected - * @member ns.widget.mobile.SelectMenu - */ - self._blurBound = null; }, /** * Dictionary for SelectMenu related css class names @@ -260,11 +205,9 @@ inline : "ui-selectmenu-inline", native : "ui-select-native", top : "ui-selectmenu-option-top", - bottom : "ui-selectmenu-option-bottom", - focus : "ui-focus" + bottom : "ui-selectmenu-option-bottom" }, prototype = new BaseWidget(); - SelectMenu.prototype = prototype; SelectMenu.classes = classes; @@ -336,40 +279,6 @@ } /** - * Function adds ui-focus class on focus - * @private - * @static - * @param {ns.widget.mobile.SelectMenu} self - * @param {Event} event - * @member ns.widget.mobile.SelectMenu - */ - function onFocus(self, event) { - var ui = self._ui, - target = event.target; - if (target === ui.elSelectWrapper || - target.parentNode === ui.elOptionContainer) { - target.classList.add(classes.focus); - } - } - - /** - * Function removes ui-focus class on focus - * @private - * @static - * @param {ns.widget.mobile.SelectMenu} self - * @param {Event} event - * @member ns.widget.mobile.SelectMenu - */ - function onBlur(self, event) { - var ui = self._ui, - target = event.target; - if (target === ui.elSelectWrapper || - target.parentNode === ui.elOptionContainer) { - target.classList.remove(classes.focus); - } - } - - /** * Toggle enable/disable selectmenu * @method setDisabledStatus * @private @@ -400,11 +309,7 @@ * @member ns.widget.mobile.SelectMenu */ function convertOptionToHTML(option, isDisabled) { - var className = option.className; - if (isDisabled) { - className += " " + classes.disabled; - } - return "<li data-value='" + option.value + "'" + (className ? " class='" + className + "'" : "") + (!isDisabled ? " tabindex='0'" : "") + ">" + option.textContent + "</li>"; + return "<li data-value='" + option.value + "'" + (isDisabled ? (" class='" + classes.disabled + "'") : "tabindex='0'" ) + ">" + option.textContent + "</li>"; } /** @@ -438,6 +343,7 @@ * @method constructOption * @private * @static + * @param {HTMLElement} element * @param {ns.widget.mobile.SelectMenu} self * @return {string} * @member ns.widget.mobile.SelectMenu @@ -566,21 +472,21 @@ fragment, elementId = element.id, ui = self._ui, + elSelect = element, elPlaceHolder, elSelectWrapper, elOptions, screenFilter, - elOptionContainer, - pageClasses = Page.classes; + elOptionContainer; - ui.elSelect = element; - ui.page = selectors.getParentsByClass(element, pageClasses.uiPage)[0] || document.body; - ui.content = selectors.getParentsByClass(element, pageClasses.uiContent)[0] || selectors.getParentsByClass(element, pageClasses.uiHeader)[0]; - ui.elDefaultOption = findDataPlaceHolder(element); + ui.elSelect = elSelect; + ui.page = selectors.getParentsByClass(elSelect, "ui-page")[0] || document.body; + ui.content = selectors.getParentsByClass(elSelect, "ui-content")[0]; + ui.elDefaultOption = findDataPlaceHolder(elSelect); if (!ui.elOptions) { - self._selectedIndex = element.selectedIndex; + self._selectedIndex = elSelect.selectedIndex; } - selectedOption = ui.elDefaultOption || element[self._selectedIndex]; + selectedOption = ui.elDefaultOption || elSelect[self._selectedIndex]; elSelectWrapper = document.getElementById(elementId + "-selectmenu"); @@ -596,13 +502,13 @@ elPlaceHolder = document.createElement("span"); elPlaceHolder.id = elementId + "-placeholder"; elPlaceHolder.className = classes.placeHolder; - domUtils.insertNodesBefore(element, elSelectWrapper); + domUtils.insertNodesBefore(elSelect, elSelectWrapper); elSelectWrapper.appendChild(elPlaceHolder); - elSelectWrapper.appendChild(element); + elSelectWrapper.appendChild(elSelect); elSelectWrapper.classList.add(classes.native); elPlaceHolder.innerHTML = selectedOption.textContent; } - elOptions = element.querySelectorAll("option"); + elOptions = elSelect.querySelectorAll("option"); } else { options = constructOption(self); @@ -612,15 +518,15 @@ elPlaceHolder = document.createElement("span"); elPlaceHolder.id = elementId + "-placeholder"; elPlaceHolder.className = classes.placeHolder; - domUtils.insertNodesBefore(element, elSelectWrapper); + domUtils.insertNodesBefore(elSelect, elSelectWrapper); elSelectWrapper.appendChild(elPlaceHolder); - elSelectWrapper.appendChild(element); - if (self.options.backgroundLayer) { - screenFilter = document.createElement("div"); - screenFilter.className = classes.filterHidden; - screenFilter.classList.add(classes.filter); - screenFilter.id = elementId + "-screen"; - } + elSelectWrapper.appendChild(elSelect); + + screenFilter = document.createElement("div"); + screenFilter.className = classes.filterHidden; + screenFilter.classList.add(classes.filter); + screenFilter.id = elementId + "-screen"; + elOptionContainer = document.createElement("ul"); elOptionContainer.className = classes.optionList; elOptionContainer.id = elementId + "-options"; @@ -638,9 +544,7 @@ *****************************************************************************************************/ if (isNewBuild) { fragment = document.createDocumentFragment(); - if (screenFilter) { - fragment.appendChild(screenFilter); - } + fragment.appendChild(screenFilter); fragment.appendChild(elOptionContainer); ui.page.appendChild(fragment); } @@ -649,7 +553,7 @@ elOptions[self._selectedIndex].classList.add(classes.selected); } - elSelectWrapper.setAttribute("tabindex", "0"); + elSelectWrapper.setAttribute("tabindex", 0); ui.elSelectWrapper = elSelectWrapper; ui.elPlaceHolder = elPlaceHolder; @@ -675,15 +579,18 @@ ui = self._ui, elementId = element.id; if (!ui.elSelectWrapper) { - ui.elSelectWrapper = document.getElementById(elementId + "-selectmenu"); - ui.elPlaceHolder = document.getElementById(elementId + "-placeholder"); + ui.elSelectWrapper = document.getElementById(elementId+"-selectmenu"); + ui.elPlaceHolder = document.getElementById(elementId+"-placeholder"); ui.elSelect = element; if (!self.options.nativeMenu) { - ui.screenFilter = document.getElementById(elementId + "-screen"); - ui.elOptionContainer = document.getElementById(elementId + "-options"); + ui.screenFilter = document.getElementById(elementId+"-screen"); + ui.elOptionContainer = document.getElementById(elementId+"-options"); ui.elOptions = ui.elOptionContainer.querySelectorAll("li[data-value]"); } } + if (element.disabled) { + self._disable(); + } }; /** @@ -693,7 +600,8 @@ * @member ns.widget.mobile.SelectMenu */ prototype._refresh = function () { - this._generate(this.element); + var self = this; + self._generate(self._ui.elSelect); }; /** @@ -750,27 +658,16 @@ */ prototype._bindEvents = function () { var self = this, - ui = self._ui, - elOptionContainer = ui.elOptionContainer, - elSelectWrapper = ui.elSelectWrapper; + ui = self._ui; self._toggleMenuBound = toggleMenu.bind(null, self); - self._changeOptionBound = changeOption.bind(null, self); - self._onResizeBound = onResize.bind(null, self); - self._nativeChangeOptionBound = nativeChangeOption.bind(null, self); - self._focusBound = onFocus.bind(null, self); - self._blurBound = onBlur.bind(null, self); - - elSelectWrapper.addEventListener("focus", self._focusBound); - elSelectWrapper.addEventListener("blur", self._blurBound); - if (!self.options.nativeMenu) { - elSelectWrapper.addEventListener("vclick", self._toggleMenuBound); - elOptionContainer.addEventListener("vclick", self._changeOptionBound); - elOptionContainer.addEventListener("focusin", self._focusBound); // bubble - elOptionContainer.addEventListener("focusout", self._blurBound); // bubble - if (ui.screenFilter) { - ui.screenFilter.addEventListener("vclick", self._toggleMenuBound); - } + self._changeOptionBound = changeOption.bind(null,self); + self._onResizeBound = onResize.bind(null,self); + self._nativeChangeOptionBound = nativeChangeOption.bind(null,self); + if (!self.options.nativeMenu){ + ui.elSelectWrapper.addEventListener("vclick", self._toggleMenuBound); + ui.elOptionContainer.addEventListener("vclick", self._changeOptionBound); + ui.screenFilter.addEventListener("vclick", self._toggleMenuBound); window.addEventListener("throttledresize", self._onResizeBound, true); } else { ui.elSelect.addEventListener("change", self._nativeChangeOptionBound); @@ -864,22 +761,17 @@ container = ui.elOptionContainer; if (self._isOpen) { - if (ui.screenFilter) { - ui.screenFilter.classList.add(classes.filterHidden); - } + ui.screenFilter.classList.add(classes.filterHidden); container.removeAttribute("style"); ui.elSelectWrapper.classList.remove(classes.active); container.classList.remove(classes.active); - ui.elSelectWrapper.focus(); } else { container.setAttribute("style", self._coordinateOption()); - if (ui.screenFilter) { - ui.screenFilter.classList.remove(classes.filterHidden); - } + ui.screenFilter.classList.remove(classes.filterHidden); ui.elSelectWrapper.classList.add(classes.active); container.classList.add(classes.active); container.setAttribute("tabindex", "0"); - container.firstElementChild.focus(); + container.focus(); } self._isOpen = !self._isOpen; }; @@ -919,22 +811,13 @@ */ prototype._destroy = function () { var self = this, - ui = self._ui, - elSelectWrapper = ui.elSelectWrapper, - elOptionContainer = ui.elOptionContainer; - - elSelectWrapper.removeEventListener("focus", self._focusBound); - elSelectWrapper.removeEventListener("blur", self._blurBound); + ui = self._ui; if (!self.options.nativeMenu) { - elSelectWrapper.removeEventListener("vclick", self._toggleMenuBound); - elOptionContainer.removeEventListener("vclick", self._changeOptionBound); - elOptionContainer.removeEventListener("focusin", self._focusBound); - elOptionContainer.removeEventListener("focusout", self._blurBound); - if (ui.screenFilter) { - ui.screenFilter.removeEventListener("vclick", self._toggleMenuBound); - } + ui.elSelectWrapper.removeEventListener("vclick", self._toggleMenuBound); + ui.elOptionContainer.removeEventListener("vclick", self._changeOptionBound); + ui.screenFilter.removeEventListener("vclick", self._toggleMenuBound); window.removeEventListener("throttledresize", self._onResizeBound, true); - } else { + } else{ ui.elSelect.removeEventListener("change", self._nativeChangeOptionBound); } }; @@ -942,9 +825,11 @@ ns.widget.mobile.SelectMenu = SelectMenu; engine.defineWidget( "SelectMenu", - "select:not([data-role='slider']):not([data-role='range']):not([data-role='toggleswitch']):not(.ui-toggleswitch):not(.ui-slider)" + - ", select.ui-select-menu:not([data-role='slider']):not([data-role='range']):not([data-role='toggleswitch'])", - ["open", "close"], + "select:not([data-role='slider']):not([data-role='range']):not([data-role='toggleswitch'])", + [ + "open", + "close" + ], SelectMenu, "mobile" ); @@ -954,4 +839,4 @@ } ); //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); +}(window.document, ns));
\ No newline at end of file diff --git a/tau/src/js/profile/mobile/widget/mobile/Slider.js b/tau/src/js/profile/mobile/widget/mobile/Slider.js index bd1b7dd0..d1132539 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Slider.js +++ b/tau/src/js/profile/mobile/widget/mobile/Slider.js @@ -1,19 +1,8 @@ -/*global window, define, ns */ +/*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Flip Toggle Switch Widget @@ -22,15 +11,15 @@ * handle like a slider or tap one side of the switch. * * ## Default selectors - * all **SELECT** tags with _data-type=range_ or class _ui-slider_ are changed - * to toggle switch. + * all **SELECT** tags with _data-role=slider_ or with _data-type=range_ are + * changed to toggle switch * * ###HTML Examples * * ####Create simple toggle switch from select using data-role * * @example - * <select name="flip-11" id="flip-11" data-role="range"> + * <select name="flip-11" id="flip-11" data-role="slider"> * <option value="off"></option> * <option value="on"></option> * </select> @@ -40,7 +29,7 @@ * widget from **tau** namespace: * * @example - * <select id="toggle" name="flip-11" id="flip-11" data-role="range" + * <select id="toggle" name="flip-11" id="flip-11" data-role="slider" * data-mini="true"> * <option value="off"></option> * <option value="on"></option> @@ -57,7 +46,7 @@ * ####If jQuery library is loaded, its method can be used: * * @example - * <select id="toggle" name="flip-11" id="flip-11" data-role="range" + * <select id="toggle" name="flip-11" id="flip-11" data-role="slider" * data-mini="true"> * <option value="off"></option> * <option value="on"></option> @@ -82,7 +71,7 @@ * as the standard version and has a smaller text size. * * @example - * <select name="flip-11" id="flip-11" data-role="range" + * <select name="flip-11" id="flip-11" data-role="slider" * data-mini="true"> * <option value="off"></option> * <option value="on"></option> @@ -95,24 +84,12 @@ * and icons inside, add the data-inline="true" attribute to the slider. * * @example - * <select name="flip-11" id="flip-11" data-role="range" + * <select name="flip-11" id="flip-11" data-role="slider" * data-inline="true"> * <option value="off"></option> * <option value="on"></option> * </select> * - * ###Vertical Slider - * To implement verticcal slider, add _vertical_ option to *input* element. - * The value of vertical property is designed to set the height of vertical slider. - * If the vertical value is set to simply "true", the height of vertical slider - * is set to pixel value as 5 time of its max value by default. So, to change one value - * in veritcal slider with "true" option, handle is needed to move 5px. - * The below example would create a vertical slider with 300px of height. - * - * @example - * <input id="vSlider" name="vSlider" type="range" - * value="5" min="0" max="10" data-vertical="300" /> - * * ##Methods * * To call method on widget you can use one of existing API: @@ -120,7 +97,7 @@ * First API is from tau namespace: * * @example - * <select name="flip-11" id="toggle" data-role="range" + * <select name="flip-11" id="toggle" data-role="slider" * data-mini="true"> * <option value="off"></option> * <option value="on"></option> @@ -136,7 +113,7 @@ * Second API is jQuery Mobile API and for call _methodName_ you can use: * * @example - * <select name="flip-11" id="toggle" data-role="range" + * <select name="flip-11" id="toggle" data-role="slider" * data-mini="true"> * <option value="off"></option> * <option value="on"></option> @@ -165,13 +142,12 @@ "../../../../core/theme", "../../../../core/util/DOM/attributes", "../../../../core/util/DOM/css", - "../../../../core/util/DOM/manipulation", "../../../../core/event", "../../../../core/util/selectors", "../../../../core/event/vmouse", "../mobile", // fetch namespace "./BaseWidgetMobile", - "../../../../core/widget/core/Button", + "./Button", "./Textinput" ], function () { @@ -193,8 +169,6 @@ * "true" then toggle switch has css property * display = "inline" * @property {string} [options.theme=null] theme of widget - * @property {boolean | number} [options.vertical=false] sets - * height of vertical slider * @member ns.widget.mobile.Slider */ self.options = { @@ -203,11 +177,9 @@ mini: null, highlight: true, inline: null, - theme: null, - vertical: false + theme: null }; self._ui = {}; - self._callbacks = {}; //container background self.valueBackGround = null; self.dragging = false; @@ -217,7 +189,7 @@ }, BaseWidget = ns.widget.mobile.BaseWidgetMobile, TextInput = ns.widget.mobile.TextInput, - Button = ns.widget.core.Button, + Button = ns.widget.mobile.Button, engine = ns.engine, events = ns.event, themes = ns.theme, @@ -231,10 +203,8 @@ sliderInline: "ui-slider-inline", sliderMini: "ui-slider-mini", slider: "ui-slider", - sliderVertical: "ui-vertical-slider", sliderHandle: "ui-slider-handle", sliderBg: "ui-slider-bg", - sliderBgVertical: "ui-vertical-slider-bg", sliderToggle: "ui-toggle-switch", sliderToggleOn: "ui-toggle-on", sliderToggleOff: "ui-toggle-off", @@ -243,7 +213,6 @@ sliderLabel: "ui-slider-label", sliderLabelTheme: "ui-slider-label-", sliderContainer: "ui-slider-container", - sliderContainerVertical: "ui-vertical-slider-container", sliderLabelA: "ui-slider-label-a", sliderStateActive: "ui-state-active" }, @@ -301,8 +270,8 @@ * @member ns.widget.mobile.Slider */ function findLabel(element) { - return element.parentNode.querySelector("label[for='" + - element.id + "']"); + return element.parentNode.querySelector('label[for="' + + element.id + '"]'); } /** @@ -320,8 +289,8 @@ getElementWidth = DOMutils.getElementWidth.bind(DOMutils), handlePercent = getElementWidth(shandle, "outer") / getElementWidth(ui.slider, "outer") * 100, - aPercent = percent && handlePercent + (100 - handlePercent) * - percent / 100, + aPercent = percent && handlePercent + (100 - handlePercent) + * percent / 100, bPercent = percent === 100 ? 0 : Math.min(handlePercent + 100 - aPercent, 100), labels = ui.labels, @@ -331,8 +300,8 @@ while (i--) { label = labels[i]; label.style.width = - (label.classList.contains(classes.sliderLabelA) ? - aPercent : bPercent) + "%"; + (label.classList.contains(classes.sliderLabelA) + ? aPercent : bPercent) + "%"; } } @@ -360,14 +329,12 @@ * @static * @member ns.widget.mobile.Slider */ - function createBackground(domSlider, self) { + function createBackground(domSlider) { var background = document.createElement("div"), cList = background.classList, btnClasses = Button.classes; - cList.add(self.options.vertical ? classes.sliderBgVertical : - classes.sliderBg); - + cList.add(classes.sliderBg); cList.add(btnClasses.uiBtnActive); cList.add(btnClasses.uiBtnCornerAll); @@ -380,8 +347,8 @@ * @method refresh * @param {ns.widget.mobile.Slider} self * @param {Object|number|null} val - * @param {boolean} [isfromControl = false] - * @param {boolean} [preventInputUpdate = false] + * @param {boolean} isfromControl + * @param {boolean} preventInputUpdate * @private * @static * @member ns.widget.mobile.Slider @@ -406,14 +373,12 @@ touchThreshold, localClasses = shandle.classList, slider = ui.slider, - isVertical = self.options.vertical, newval, valModStep, alignValue, valueChanged, newValueOption, - sliderOffsetLeft, - sliderOffsetTop; + sliderOffsetLeft; if (cType === "input") { min = DOMutils.getNumberFromAttribute(control, @@ -435,54 +400,47 @@ data = val; // @TODO take parameter out to config touchThreshold = 8; - isVertical ? - sliderOffsetTop = - DOMutils.getElementOffset(slider).top : sliderOffsetLeft = - DOMutils.getElementOffset(slider).left; + DOMutils.getElementOffset(slider).left; // If refreshing while not dragging // or movement was within threshold if (!self.dragging || - data.pageX < sliderOffsetLeft - touchThreshold || - data.pageX > sliderOffsetLeft + - slider.offsetWidth + touchThreshold) { + data.pageX < sliderOffsetLeft - touchThreshold || + data.pageX > sliderOffsetLeft + + slider.offsetWidth + touchThreshold) { return; } - // Calculate new left or top side percent - if (isVertical) { - percent = ((data.pageY - sliderOffsetTop + - selectors.getClosestByClass(slider, "ui-content").scrollTop) / - slider.offsetHeight) * 100; - } else { - percent = ((data.pageX - sliderOffsetLeft) / + // Calculate new left side percent + percent = ((data.pageX - sliderOffsetLeft) / slider.offsetWidth) * 100; - } + + // If changes came from input value change } else { if (val === null) { val = (cType === "input") ? parseFloat(control.value) : - control.selectedIndex; + control.selectedIndex; } if (isNaN(val)) { return; } // While dragging prevent jumping by assigning // last percentage value - if (self.dragging && self._lastPercent) { + if(self.dragging && self._lastPercent) { percent = self._lastPercent; } else { - percent = isVertical ? - 100 - ((parseFloat(val) - min) / (max - min) * 100) : - (parseFloat(val) - min) / (max - min) * 100; + percent = (parseFloat(val) - min) / (max - min) * 100; } } + // Make sure percent is a value between 0 - 100; percent = Math.max(0, Math.min(percent, 100)); self._lastPercent = percent; centerPercent = halfPercent - percent; newval = (percent / 100) * (max - min) + min; + //from jQuery UI slider, the following source will round // to the nearest step valModStep = (newval - min) % step; @@ -496,14 +454,9 @@ // (see jQueryUI: #4124) newval = parseFloat(alignValue.toFixed(5)); - if (isVertical) { - shandle.style.top = percent + "%"; - newval = max - Math.max(min, Math.min(newval, max)); - } else { - shandle.style.left = percent + "%"; - newval = Math.max(min, Math.min(newval, max)); - } + newval = Math.max(min, Math.min(newval, max)); + shandle.style.left = percent + "%"; newValueOption = control.querySelectorAll("option")[newval]; shandle.setAttribute("aria-valuenow", cType === "input" ? newval : newValueOption && newValueOption.value); @@ -526,35 +479,17 @@ sliderBackgroundStyle = sliderBackground.style; if (self.options.center) { if (centerPercent >= 0) { - if (isVertical) { - sliderBackgroundStyle.top = "initial"; - sliderBackgroundStyle.bottom = "50%"; - sliderBackgroundStyle.height = centerPercent + "%"; - } else { - sliderBackgroundStyle.right = "50%"; - sliderBackgroundStyle.left = "initial"; - sliderBackgroundStyle.width = centerPercent + "%"; - } + sliderBackgroundStyle.right = "50%"; + sliderBackgroundStyle.left = "initial"; + sliderBackgroundStyle.width = centerPercent + "%"; } else { - if (isVertical) { - sliderBackgroundStyle.top = "50%"; - sliderBackgroundStyle.bottom = "initial"; - sliderBackgroundStyle.height = + sliderBackgroundStyle.right = "initial"; + sliderBackgroundStyle.left = "50%"; + sliderBackgroundStyle.width = Math.abs(centerPercent) + "%"; - } else { - sliderBackgroundStyle.right = "initial"; - sliderBackgroundStyle.left = "50%"; - sliderBackgroundStyle.width = - Math.abs(centerPercent) + "%"; - } } } else { - if (isVertical) { - sliderBackgroundStyle.height = 100 - percent + "%"; - sliderBackgroundStyle.top = percent + "%"; - } else { - sliderBackgroundStyle.width = percent + "%"; - } + sliderBackgroundStyle.width = percent + "%"; } } @@ -707,10 +642,10 @@ initValue, sliderBtnDownTheme, elementsOption = element.querySelector("option"), - btnClasses = Button.classes, - isVertical = options.vertical; + btnClasses = Button.classes; + if (options.highlight && tagName !== "select") { - this._ui.background = createBackground(domSlider, this); + this._ui.background = createBackground(domSlider); } if (isNaN(min)) { min = 0; @@ -731,12 +666,7 @@ domSlider.setAttribute("role", "application"); domSlider.id = elementId + "-slider"; - - if (isVertical) { - domSliderClassList.add(classes.sliderVertical); - } else { - domSliderClassList.add(classes.slider); - } + domSliderClassList.add(classes.slider); if (selectClass) { domSliderClassList.add(selectClass); @@ -760,25 +690,27 @@ initValue = getInitialValue(tagName, element); if (initValue !== 1) { domHandle.classList.add(classes.sliderToggleOff); - if (isVertical) { - domHandle.style.top = "0px"; - } else { - domHandle.style.left = "0px"; - } + domHandle.style.left = "0px"; } domSlider.appendChild(domHandle); //temporary way to send initial parameters //to the instanceWidget method + domHandle.setAttribute("data-corners", "true"); + domHandle.setAttribute("data-theme", theme); + domHandle.setAttribute("data-shadow", "true"); - domHandle.setAttribute("role", "range"); + domHandle.setAttribute("role", "slider"); domHandle.setAttribute("aria-valuemin", min); domHandle.setAttribute("aria-valuemax", max); domHandle.setAttribute("aria-valuenow", initValue); domHandle.setAttribute("aria-valuetext", initValue); domHandle.setAttribute("title", initValue); domHandle.setAttribute("aria-labelledby", "labelID"); + domHandle.setAttribute("data-role", "button"); + domHandle.setAttribute("inline", "false"); + domHandle.setAttribute("data-bar", "true"); domHandle.setAttribute("id", elementId + "-handle"); if (tagName === "select") { @@ -819,23 +751,7 @@ if (tagName === "input") { sliderContainer = document.createElement("div"); - - if (isVertical) { - sliderContainer.classList.add(classes.sliderContainerVertical); - if (isNaN(isVertical)) { - ns.warn("data-vetical has inappropriate value.", - "please use 'true' or proper 'number'."); - isVertical = max * 5; - } - if (typeof isVertical === "boolean") { - isVertical = max * 5; - } - - sliderContainer.style.height = isVertical + "px"; - } else { - sliderContainer.classList.add(classes.sliderContainer); - } - + sliderContainer.classList.add(classes.sliderContainer); sliderContainer.appendChild(domSlider); sliderContainer.id = elementId + "-container"; elementClassList = element.classList; @@ -860,7 +776,7 @@ element.parentNode.insertBefore(sliderContainer, element.nextSibling); - sliderContainer.appendChild(element); + engine.instanceWidget(domHandle, "Button"); return element; }; @@ -882,15 +798,14 @@ ui.handle = document.getElementById(elementId + "-handle"); ui.container = document.getElementById(elementId + "-container") || element; - ui.background = ui.slider.querySelector(self.options.vertical ? - "." + classes.sliderBgVertical : - "." + classes.sliderBg); + ui.background = ui.slider.querySelector("." + + Slider.classes.sliderBg); self._type = element.tagName.toLowerCase(); ui.labels = selectors.getChildrenByClass(ui.slider, - classes.sliderLabel); - if ( self.options.center && ui.background ) { - ui.background.classList.add(classes.sliderBgHasCenter); - } + Slider.classes.sliderLabel); + if ( self.options.center && ui.background ) + ui.background.classList.add( + Slider.classes.sliderBgHasCenter); refresh(self, self._getValue()); }; @@ -1019,29 +934,55 @@ }; /** - * Callback for event keydown - * @method onKeyDown - * @param {ns.widget.mobile.Slider} self - * @param {Event} event - * @private - * @static + * Bind events to widget + * @method _bindEvents + * @protected * @member ns.widget.mobile.Slider */ - function onKeyDown(self, event) { - var element = self.element, + Slider.prototype._bindEvents = function (element) { + var self = this, + ui = self._ui, + handle = ui.handle, tagName = element.nodeName.toLowerCase(), - index = getInitialValue(tagName, element), - keyCode = Slider.keyCode, - classList = event.target.classList, - step = parseFloat( self.element.getAttribute( "step" ) || "1" ), + slider = ui.slider, + step = parseFloat( self.element.getAttribute( "step" ) || + 1 ), min = tagName === "input" ? - parseFloat(element.getAttribute("min")) : 0, - max = tagName === "input" ? - parseFloat(element.getAttribute("max")) : - element.getElementsByTagName("option").length - 1; + parseFloat(element.getAttribute("min")) : 0, + max = tagName === "input" + ? parseFloat(element.getAttribute("max")) : + element.getElementsByTagName( + "option").length - 1; + + element.addEventListener("change", function () { + if (!self.mouseMoved) { + refresh(self, self._getValue(), true); + } + }, false); + + element.addEventListener("keyup", function () { + refresh(self, self._getValue(), true, true); + }, false); + element.addEventListener("blur", function () { + refresh(self, self._getValue(), true); + }, false); - if (!self.options.disabled) { + handle.addEventListener("vmousedown", function (event) { + events.trigger(event.target, "focus"); + }, false); + handle.addEventListener("vclick", function (event) { + event.stopPropagation(); + event.preventDefault(); + }, false); + handle.addEventListener("keydown", function (event) { + var index = getInitialValue(tagName, element), + keyCode = Slider.keyCode, + classList = event.target.classList; + + if (self.options.disabled) { + return; + } // In all cases prevent the default and mark the handle // as active @@ -1050,7 +991,9 @@ case keyCode.END: case keyCode.PAGE_UP: case keyCode.PAGE_DOWN: + case keyCode.UP: case keyCode.RIGHT: + case keyCode.DOWN: case keyCode.LEFT: event.preventDefault(); @@ -1069,92 +1012,20 @@ refresh(self, max); break; case keyCode.PAGE_UP: + case keyCode.UP: case keyCode.RIGHT: refresh(self, index + step); break; case keyCode.PAGE_DOWN: + case keyCode.DOWN: case keyCode.LEFT: //self.refresh(index - step); refresh(self, index - step); break; } - } - } - - /** - * Callback for event keyup - * @method onKeyUp - * @param {ns.widget.mobile.Slider} self - * @private - * @static - * @member ns.widget.mobile.Slider - */ - function onKeyUp (self) { - refresh(self, self._getValue(), true, true); - } - - /** - * Callback for event change - * @method onChangeEvent - * @param {ns.widget.mobile.Slider} self - * @private - * @static - * @member ns.widget.mobile.Slider - */ - function onChangeEvent (self) { - if (!self.mouseMoved) { - refresh(self, self._getValue(), true); - } - } - - /** - * Callback for event blur - * @method onBlur - * @param {ns.widget.mobile.Slider} self - * @private - * @static - * @member ns.widget.mobile.Slider - */ - function onBlur (self) { - refresh(self, self._getValue(), true); - } - - /** - * Bind events to widget - * @method _bindEvents - * @protected - * @member ns.widget.mobile.Slider - */ - Slider.prototype._bindEvents = function (element) { - var self = this, - ui = self._ui, - handle = ui.handle, - callbacks = self._callbacks, - tagName = element.nodeName.toLowerCase(), - slider = ui.slider; - - callbacks.changeEvent = onChangeEvent.bind(null, self); - callbacks.blur = onBlur.bind(null, self); - - element.addEventListener("change", callbacks.changeEvent, false); - callbacks.keyUp = onKeyUp.bind(null,self); - callbacks.keyDown = onKeyDown.bind(null, self); - ui.container.addEventListener("keyup", callbacks.keyUp, false); - - element.addEventListener("blur", callbacks.blur, false); - - handle.addEventListener("vmousedown", function (event) { - events.trigger(event.target, "focus"); }, false); - handle.addEventListener("vclick", function (event) { - event.stopPropagation(); - event.preventDefault(); - }, false); - - ui.container.addEventListener("keydown", callbacks.keyDown, false); - handle.addEventListener("keyup", function () { if (self._keySliding) { self._keySliding = false; @@ -1183,20 +1054,23 @@ refresh(self, event); return false; }, false); + /*TODO - add vmousemove support*/ - callbacks.vmouseMove = onVmouseMove.bind(null, self); - document.addEventListener("vmousemove", callbacks.vmouseMove, false); + this._onVmouseMove = onVmouseMove.bind(null, this); + slider.addEventListener("vmousemove", this._onVmouseMove, + false); slider.addEventListener("vclick", function (event) { event.stopPropagation(); event.preventDefault(); }, false); - //prevent scrolling when slider is in use - document.addEventListener("touchmove", onTouchMove, false); + slider.addEventListener("touchmove", onTouchMove, false); + + this._sliderMouseUp = sliderMouseUp.bind(null, this); + slider.addEventListener("vmouseup", this._sliderMouseUp, + false); - callbacks.mouseUp = sliderMouseUp.bind(null, self); - document.addEventListener("vmouseup", callbacks.mouseUp, false); }; /** @@ -1240,15 +1114,13 @@ * @member ns.widget.mobile.Slider */ Slider.prototype._enable = function (element) { - var self = this, - btnClasses = Button.classes, - slider = self._ui.slider; + var btnClasses = Button.classes, + slider = this._ui.slider; - element = element || self.element; element.removeAttribute("disabled"); slider.classList.remove( btnClasses.uiDisabled ); slider.setAttribute("aria-disabled", false); - self.options.disabled = false; + this.options.disabled = false; }; /** @@ -1292,38 +1164,21 @@ * @member ns.widget.mobile.Slider */ Slider.prototype._disable = function (element) { - var self = this, - btnClasses = Button.classes, - slider = self._ui.slider; + var btnClasses = Button.classes, + slider = this._ui.slider; - element = element || self.element; element.setAttribute("disabled", "disabled"); slider.classList.add( btnClasses.uiDisabled ); slider.setAttribute( "aria-disabled", true ); - self.options.disabled = true; + this.options.disabled = true; }; - /** - * Destroy slider - * @method _destroy - * @protected - * @member ns.widget.mobile.Slider - */ - Slider.prototype._destroy = function () { - var self = this, - callbacks = self._callbacks; - document.removeEventListener("touchmove", onTouchMove); - document.removeEventListener("vmouseup", callbacks.mouseUp); - self.element.removeEventListener("change", callbacks.changeEvent); - self.element.removeEventListener("blur", callbacks.blur); - DOMutils.replaceWithNodes(self._ui.container, self.element); - self._ui = null; - }; + // @TODO add destroy() method ns.widget.mobile.Slider = Slider; engine.defineWidget( "Slider", - "select[data-role='range'], select.ui-slider", + "select[data-type='range']", [], Slider, "mobile" diff --git a/tau/src/js/profile/mobile/widget/mobile/SplitView.js b/tau/src/js/profile/mobile/widget/mobile/SplitView.js index dca80657..e2daa2b1 100644 --- a/tau/src/js/profile/mobile/widget/mobile/SplitView.js +++ b/tau/src/js/profile/mobile/widget/mobile/SplitView.js @@ -1,27 +1,13 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Split View Widget * SplitView is a widget, which displays two children separated with a movable divider. * - * ##Default selectors - * In default all elements with _data-role="splitview"_ or class _.ui-splitview_ are changed to Split View widget. - * * It allows to change the size ratio of its children and supports two orientations. * @class ns.widget.mobile.SplitView * @extends ns.widget.mobile.BaseWidgetMobile @@ -364,7 +350,7 @@ */ prototype._refresh = function () { var self = this, - element = self.element; + element = self.widget(); self._measureSplitter(); if (self._getContainerSize(element)) { @@ -575,7 +561,7 @@ prototype.maximize = function(id) { var self = this, ratio = self.options.ratio, - element = selectors.getChildrenBySelector(self.element, id); + element = selectors.getChildrenBySelector(self.widget(), id); if (element) { self.panes.forEach(function(pane, i) { diff --git a/tau/src/js/profile/mobile/widget/mobile/Swipe.js b/tau/src/js/profile/mobile/widget/mobile/Swipe.js index af34b3f7..4dce4074 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Swipe.js +++ b/tau/src/js/profile/mobile/widget/mobile/Swipe.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * # Swipe Widget @@ -223,13 +212,13 @@ uiSwipeItemCoverInner: classPrefix + "-item-cover-inner" }, selectorRoleSwipe = "[data-role='swipe']", - selectorRoleSwipeItemCover = "[data-role='swipe-item-cover']" + - ', .' + classes.uiSwipeItemCover, - selectorRoleSwipeItem = "[data-role='swipe-item']" + - ', .' + classes.uiSwipeItem, + selectorRoleSwipeItemCover = "[data-role='swipe-item-cover']", + selectorRoleSwipeItem = "[data-role='swipe-item']", classUiBtn = ".ui-btn", swipeLeftEvent = "swipeleft", - swipeRightEvent = "swiperight"; + swipeRightEvent = "swiperight", + webkitTransitionEndEvent = "webkitTransitionEnd"; + Swipe.prototype = new BaseWidget(); @@ -369,12 +358,12 @@ //animations change item opacity in order to show items under cover opacityAnimation = new Animation({ element: item, - duration: "400ms", + duration: "600ms", from: { "opacity": itemStyle.opacity }, to: { - "opacity": (self.opened()) ? "1" : "0" + "opacity": (itemStyle.opacity === 0) ? "0" : "1" }, onEnd: handleAnimationEnd }); @@ -445,11 +434,7 @@ prototype._build = function (element) { var options = this.options, protoOptions = Swipe.prototype.options; - options.theme = options.theme || - ns.theme.getInheritedTheme( - element, - (protoOptions && protoOptions.theme) || "s" - ); + options.theme = options.theme || ns.theme.getInheritedTheme(element, (protoOptions && protoOptions.theme) || "s"); refresh(this, element); return element; }; @@ -480,8 +465,7 @@ function addEvents(self) { var ui = self._ui, covers = ui.covers, - item = ui.item, - buttonSelector = engine.getWidgetDefinition("Button").selector; + item = ui.item; /* * @todo good support multicovers @@ -494,7 +478,7 @@ item.addEventListener(swipeLeftEvent, cover.swipeAnimateLeft, false); cover.addEventListener(swipeRightEvent, cover.swipeAnimateRight, false); - [].forEach.call(item.querySelectorAll(buttonSelector), function (button) { + slice.call(item.querySelectorAll(classUiBtn)).forEach(function (button) { button.addEventListener("vclick", cover.swipeAnimateLeft, false); }); }); diff --git a/tau/src/js/profile/mobile/widget/mobile/TabBar.js b/tau/src/js/profile/mobile/widget/mobile/TabBar.js index ce2f9f2b..231c5125 100644 --- a/tau/src/js/profile/mobile/widget/mobile/TabBar.js +++ b/tau/src/js/profile/mobile/widget/mobile/TabBar.js @@ -1,23 +1,12 @@ -/*global window, define, ns */ +/*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Tab Bar Widget - * The tabbar widget shows an unordered list of tabs on the screen wrapped + * The tabbar widget shows an unordered list of buttons on the screen wrapped * together in a single group. * * This widget can be placed in the header or footer of page. @@ -44,7 +33,7 @@ * </div> * </div> * <div data-role="content"> - * Content + * Content * </div> * </div> * @@ -149,7 +138,7 @@ * * @example * <script> - * var tabBarElement = document.getElementById("tab-bar"), + * var tabBarElement = document.getElementById('tab-bar'), * tabBar = tau.widget.TabBar(TabBarElement); * * tabBar.methodName(methodArgument1, methodArgument2, ...); @@ -159,7 +148,7 @@ * * @example * <script> - * $(".selector").tabbar("methodName", methodArgument1, methodArgument2, ...); + * $(".selector").tabbar('methodName', methodArgument1, methodArgument2, ...); * </script> * * @class ns.widget.mobile.TabBar @@ -175,37 +164,26 @@ "../../../../core/util/grid", "../../../../core/util/DOM/attributes", "../../../../core/event/vmouse", - "../../../../core/widget/core/Scrollview", "../mobile", // fetch namespace - "./BaseWidgetMobile" + "./BaseWidgetMobile", + "./Button", + "./Scrollview" ], function () { //>>excludeEnd("tauBuildExclude"); - var BaseWidget = ns.widget.mobile.BaseWidgetMobile, - Scrollview = ns.widget.core.Scrollview, + var ButtonClasses = ns.widget.mobile.Button.classes, + BaseWidget = ns.widget.mobile.BaseWidgetMobile, engine = ns.engine, selectors = ns.util.selectors, grid = ns.util.grid, DOM = ns.util.DOM, slice = [].slice, TabBar = function () { - this._callbacks = {}; + this.vclickCallback = null; this._ui = {}; - /** - * Object with default options - * @property {Object} options - * @property {string} [options.active="0"] Number of activated tab. - * @property {string} [options.autoChange=true] Defined if widget should set - * activated tab after click event. - * @property {string} [options.iconpos="top"] Position of icon in tabs. - * @property {string} [options.grid=null] Type of grid. - * @member ns.widget.mobile.TabBar - */ this.options = { active: 0, - autoChange: true, - iconpos: "top", - grid: null + autoChange: true }; }, /** @@ -221,6 +199,8 @@ uiTabbarActive: "ui-tabbar-active", uiStatePersist: "ui-state-persist", uiHeader: "ui-header", + uiScrollviewView: "ui-scrollview-view", + uiScrollviewClip: "ui-scrollview-clip", uiNavbar: "ui-navbar", uiFooter: "ui-footer", uiTabBtnStyle: "ui-tab-btn-style", @@ -232,104 +212,57 @@ uiTabbarPersist: "ui-tabbar-persist", uiTabbar: "ui-tabbar", uiPortraitTabbar: "ui-portrait-tabbar", - uiLandscapeTabbar: "ui-landscape-tabbar", - uiTabbarLink: "ui-tabbar-link", - uiTabbarText: "ui-tabbar-text", - uiTabbarIcon: "ui-tabbar-icon", - uiTabActive: "ui-tab-active", - uiDisabled: "ui-disabled", - uiIconPrefix: "ui-icon-", - uiTabbarIconposPrefix: "ui-tabbar-icon-" + uiLandscapeTabbar: "ui-landscape-tabbar" }; TabBar.prototype = new BaseWidget(); - TabBar.classes = classes; + /* + * @todo move to options object + */ /** - * Returns true if one of elements has data-icon set to true - * @method hasIcon - * @param {Array} elements + * Position of icon + * @property {string} [iconpos="top"] * @member ns.widget.mobile.TabBar - * @static - * @private - * @return {boolean} */ - function hasIcon(elements) { - var length = elements.length, - i; - - for (i = 0; i < length; i++) { - if (DOM.getNSData(elements[i],"icon")) { - return true; - } - } - return false; - } - + TabBar.prototype.iconpos = 'top'; /** - * Active scrollable tabbar. - * @method activateScrollableTabbar - * @param {Array} tabs - * @param {HTMLElement} activatedTab + * Grid type + * @property {string} [grid=null] * @member ns.widget.mobile.TabBar - * @static - * @private */ - function activateScrollableTabbar(tabs, activatedTab) { - var length = tabs.length, - i; + TabBar.prototype.grid = null; - for (i = 0; i < length; i++) { - tabs[i].classList.remove(classes.uiTabbarActive); - } - /* - * In original file btnActiveClass is always added. - * Here, if tab is disabled, this class will not be added - */ - if (activatedTab) { - activatedTab.classList.add(classes.uiTabbarActive); - } - } + TabBar.classes = classes; /** - * Active tabbar, which is not scrollable.. - * @method activateUnscrollableTabbar - * @param {Array} tabs - * @param {HTMLElement} activatedTab + * Returns true if one of elements has data-icon set to true + * @method hasIcon + * @param {Array} elements * @member ns.widget.mobile.TabBar * @static * @private + * @return {boolean} */ - function activateUnscrollableTabbar(tabs, activatedTab) { - var tabActiveClass = classes.uiTabActive, - tabClasses, - length = tabs.length, - i; - - for (i = 0; i < length; i++) { - tabClasses = tabs[i].classList; - if (!tabClasses.contains(classes.uiStatePersist)) { - tabClasses.remove(tabActiveClass); - } - } - /* - * In original file tabActiveClass is always added. - * Here, if tab is disabled, this class will not be added - */ - if (activatedTab) { - activatedTab.classList.add(tabActiveClass); - } + function hasIcon(elements) { + return !elements.every(function (element) { + return !element.getAttribute('data-icon'); + }); } function setActive(self, index) { var element = self.element, uls = element.getElementsByTagName("ul"), ul = uls[0], - tabs = element.getElementsByTagName("a"), + buttons = element.getElementsByTagName("a"), + i = 0, + max, hasClass = false, - activatedTab = tabs.length > index ? tabs[index] : null, - i = 0; + buttonClasses, + btnActiveClass = ButtonClasses.uiBtnActive, + classes = TabBar.classes, + activatedButton = buttons.length > index ? buttons[index] : null; while (!hasClass && ul) { if (ul.classList.contains(classes.tabbarScrollUl)) { @@ -338,35 +271,53 @@ ul = uls[++i]; } - // active tabbar if (hasClass) { - activateScrollableTabbar(tabs, activatedTab); + for (i = 0, max = buttons.length; i < max; i++) { + buttons[i].classList.remove(classes.uiTabbarActive); + } + /* + * In original file btnActiveClass is always added. + * Here, if button is disabled, this class will not be added + */ + if (activatedButton) { + activatedButton.classList.add(classes.uiTabbarActive); + self.options.active = index; + } } else { - activateUnscrollableTabbar(tabs, activatedTab); - } - // set option - if (activatedTab) { - self.options.active = index; + for (i = 0, max = buttons.length; i < max; i++) { + buttonClasses = buttons[i].classList; + if (!buttonClasses.contains(classes.uiStatePersist)) { + buttonClasses.remove(btnActiveClass); + } + } + /* + * In original file btnActiveClass is always added. + * Here, if button is disabled, this class will not be added + */ + if (activatedButton) { + activatedButton.classList.add(btnActiveClass); + self.options.active = index; + } } } /** * @method vclickEvent * @param {ns.widget.mobile.TabBar} self - * @param {Event} event * @member ns.widget.mobile.TabBar * @static * @private */ - function vclickEvent(self, event) { - var tabs = self.element.getElementsByTagName("a"), - activatedTab = selectors.getClosestByTag(event.target, "a"), - active = 0, - i, - max; - - for (i = 0, max = tabs.length; i < max; i++) { - if (activatedTab === tabs[i]) { + function vclickEvent(self) { + var element = self.element, + buttons = element.getElementsByTagName("a"), + i = 0, + max, + activatedButton = selectors.getClosestByTag(event.target, "a"), + active = 0; + + for (i = 0, max = buttons.length; i < max; i++) { + if (activatedButton === buttons[i]) { active = i; break; } @@ -388,160 +339,106 @@ * @param {number} index the element index * @member ns.widget.mobile.TabBar */ - function setDisabled(self, value, index) { - var liItems = selectors.getChildrenByTag(self.element.children[0], "li")[index]; + function setDisabled(element, value, index) { + var liItems = selectors.getChildrenByTag(element.children[0], 'li')[index]; - DOM.setAttribute(liItems, "disabled", value); - DOM.setAttribute(liItems, "aria-disabled", value); + DOM.setAttribute(liItems, 'disabled', value); + DOM.setAttribute(liItems, 'aria-disabled', value); if (value) { - liItems.classList.add(classes.uiDisabled); + liItems.classList.add(ButtonClasses.uiDisabled); } else { - liItems.classList.remove(classes.uiDisabled); - setActive(self, index); + liItems.classList.remove(ButtonClasses.uiDisabled); } } - function addClassForElements(elements, addedClass) { - var length = elements.length, - i; - - for (i = 0; i < length; i++) { - elements[i].classList.add(addedClass); - } - } /** - * Set scrollable tabbar. - * @method _buildScrollableTabBar + * Build method + * @method _build * @param {HTMLElement} element + * @return {HTMLElement} * @protected * @member ns.widget.mobile.TabBar */ - TabBar.prototype._buildScrollableTabBar = function (element) { - var self = this, - ui = self._ui, + TabBar.prototype._build = function (element) { + var classes = TabBar.classes, tabbarClassList = element.classList, + links = slice.call(element.getElementsByTagName('a')), headers = selectors.getParentsByClass(element, classes.uiHeader), + scrollview = selectors.getParentsByClass(element, classes.uiScrollviewView)[0], li = slice.call(element.getElementsByTagName("li")), - ul = slice.call(element.getElementsByTagName("ul")), - scrollview = selectors.getClosestByClass(element, Scrollview.classes.view), - scrollviewClip = selectors.getParentsByClass(element, Scrollview.classes.clip), - length, + iconpos, i, - gridOption = self.option.grid; + textpos, + instanceButtonOptions, + instanceButtonHeaderOptions = { + shadow: false, + corners: false, + inline: false, + bar: true + }, + instanceButtonFooterOptions = { + shadow: true, + inline: false, + corners: true, + bar: false + }; + + if (links.length) { + iconpos = hasIcon(links) ? this.iconpos : false; + textpos = links[0].innerHTML.length ? true : false; + } if (headers.length && scrollview) { - addClassForElements(li, classes.tabbarScrollLi); - addClassForElements(ul, classes.tabbarScrollUl); + li.forEach(function (item) { + item.classList.add(classes.tabbarScrollLi); + }); + slice.call(element.getElementsByTagName("ul")).forEach(function (item) { + item.classList.add(classes.tabbarScrollUl); + }); /* add shadow divider */ - for (i = 0, length = scrollviewClip.length; i < length; i++) { - scrollviewClip[i].insertAdjacentHTML("beforeend", "<div class='ui-tabbar-divider ui-tabbar-divider-left' style='display:none'></div><div class='ui-tabbar-divider ui-tabbar-divider-right' style='display:none'></div>"); - } + selectors.getParentsByClass(element, classes.uiScrollviewClip).forEach(function (item) { + item.insertAdjacentHTML('beforeend', '<div class="ui-tabbar-divider ui-tabbar-divider-left" style="display:none"></div><div class="ui-tabbar-divider ui-tabbar-divider-right" style="display:none"></div>'); + }); } else { if (li.length) { tabbarClassList.add(classes.uiNavbar); - for (i = 0, length = ul.length; i < length; i++) { - grid.makeGrid(ul[i], gridOption); - } + slice.call(element.getElementsByTagName("ul")).forEach(function (item) { + /* + * @todo delete getAttribute + */ + grid.makeGrid(item, element.getAttribute("data-grid") || this.grid); + }); } } - /* scrollable tabbar */ - if (element.parentNode.classList.contains(Scrollview.classes.view)) { - if (li.length > 4) { - // scroller was needed when li element has more than forth. - scrollview.style.width = parseInt(li[0].style.width, 10) * li.length + "px"; - ui.scrollview = scrollview; - ui.scrollviewClip = scrollviewClip[0]; - } - + if (selectors.getParentsByClass(element, classes.uiFooter).length) { + li.forEach(function (item) { + item.classList.add(classes.uiTabBtnStyle); + }); } - }; - /** - * Set proper class for headers. - * @method _buildHeader - * @param {HTMLElement} element - * @protected - * @member ns.widget.mobile.TabBar - */ - TabBar.prototype._buildHeader = function (element) { - var parent = element.parentNode, - li = slice.call(element.getElementsByTagName("li")), - header = selectors.getClosestByClass(element, classes.uiHeader); - - if (header && (selectors.getChildrenByClass(parent, classes.uiTitle).length || - (parent.classList.contains(Scrollview.classes.view) && li.length > 4))) { - header.classList.add(classes.uiTitleTabbar); + /* title tabbar */ + if (selectors.getChildrenByClass(element.parentElement, classes.uiTitle).length) { + headers.forEach(function (header) { + header.classList.add(classes.uiTitleTabbar); + }); } - }; - - /** - * Set proper class for elements if they are in footer. - * @method _buildFooter - * @param {HTMLElement} element - * @protected - * @member ns.widget.mobile.TabBar - */ - TabBar.prototype._buildFooter = function (element) { - var li = slice.call(element.getElementsByTagName("li")); - - if (selectors.getClosestByClass(element, classes.uiFooter)) { - addClassForElements(li, classes.uiTabBtnStyle); - } - }; - - /** - * Build tabs on links - * @method _buildTabs - * @param {HTMLElement} element - * @protected - * @member ns.widget.mobile.TabBar - */ - TabBar.prototype._buildTabs = function (element) { - var links = slice.call(element.getElementsByTagName("a")), - iconpos, - linkLength = links.length, - link, - innerText, - linkClassList, - i; - - if (linkLength) { - iconpos = hasIcon(links) ? this.options.iconpos : false; - - for (i = 0; i < linkLength; i++) { - link = links[i]; - linkClassList = link.classList; - if (link.firstChild) { - innerText = document.createElement("span"); - innerText.classList.add(classes.uiTabbarText); - innerText.appendChild(link.firstChild); - link.appendChild(innerText); - } - - if (iconpos) { - linkClassList.add(classes.uiTabbarIconposPrefix + iconpos); - linkClassList.add(classes.uiTabbarIcon); - linkClassList.add(classes.uiIconPrefix + DOM.getNSData(link, "icon")); + /* scrollable tabbar */ + if (element.parentNode.classList.contains(classes.uiScrollviewView)){ + if (li.length > 4) { + i = headers.length; + while (i--) { + headers[i].classList.add(classes.uiTitleTabbar); } - linkClassList.add(classes.uiTabbarLink); + // scroller was needed when li element has more than forth. + scrollview.style.width = parseInt(li[0].style.width, 10) * li.length + "px"; + this._ui.scrollview = scrollview; + this._ui.scrollviewClip = selectors.getParentsByClass(element, classes.uiScrollviewClip)[0]; } - } - }; - - TabBar.prototype._buildFromOptions = function (element) { - var tabbarClassList = element.classList, - links = slice.call(element.getElementsByTagName("a")), - headers = selectors.getParentsByClass(element, classes.uiHeader), - iconpos, - textpos; - if (links.length) { - iconpos = hasIcon(links) ? this.options.iconpos : false; - textpos = links[0].innerHTML.length ? true : false; } if (!iconpos) { @@ -551,80 +448,36 @@ tabbarClassList.add(classes.uiTabbarNotext); } if (textpos && iconpos) { - addClassForElements(headers, classes.uiTitleTabbarMultiline); + headers.forEach(function (header) { + header.classList.add(classes.uiTitleTabbarMultiline); + }); + } + + if (links.length) { + if (headers.length) { + instanceButtonOptions = instanceButtonHeaderOptions; + } else { + instanceButtonOptions = instanceButtonFooterOptions; + } + if (iconpos) { + instanceButtonOptions.iconpos = iconpos; + } + links.forEach(function (item) { + DOM.setNSData(item, "role", "button"); + engine.instanceWidget(item, "Button", instanceButtonOptions); + }); } if (element.getElementsByClassName(classes.uiStatePersist).length) { tabbarClassList.add(classes.uiTabbarPersist); } - tabbarClassList.add(classes.uiTabbar); - }; - /** - * Build method - * @method _build - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.mobile.TabBar - */ - TabBar.prototype._build = function (element) { - var self = this; - - self._buildScrollableTabBar(element); - self._buildFooter(element); - self._buildHeader(element); - self._buildFromOptions(element); - self._buildTabs(element); + tabbarClassList.add(classes.uiTabbar); return element; }; /** - * Init orientation. - * @method _initOrientation - * @param {HTMLElement} element - * @member ns.widget.mobile.TabBar - * @protected - */ - TabBar.prototype._initOrientation = function(element) { - var tabbarClassList = element.classList, - innerWidth = element.offsetWidth ? element.offsetWidth : window.innerWidth, - innerHeight = element.offsetHeight ? element.offsetHeight : window.innerHeight; - - if (innerWidth > innerHeight) { - tabbarClassList.remove(classes.uiPortraitTabbar); - tabbarClassList.add(classes.uiLandscapeTabbar); - } else { - tabbarClassList.remove(classes.uiLandscapeTabbar); - tabbarClassList.add(classes.uiPortraitTabbar); - } - }; - - /** - * Init active tab. - * @method _initActiveTab - * @param {HTMLElement} element - * @member ns.widget.mobile.TabBar - * @protected - */ - TabBar.prototype._initActiveTab = function (element) { - var links = slice.call(element.getElementsByTagName("a")), - active, - index; - - active = element.querySelector("a." + classes.uiTabbarActive); - - if (active) { - index = links.indexOf(active); - if (index < 0) { - index = 0; - } - this.options.active = index; - } - }; - - /** * Init method * @method _init * @param {HTMLElement} element @@ -633,19 +486,36 @@ */ TabBar.prototype._init = function (element) { var self = this, + tabbarClassList = element.classList, li = slice.call(element.getElementsByTagName("li")), innerWidth = element.offsetWidth ? element.offsetWidth : window.innerWidth, - inHeaders = !!(selectors.getParentsByClass(element, classes.uiHeader).length); + innerHeight = element.offsetHeight ? element.offsetHeight : window.innerHeight, + inHeaders = !!(selectors.getParentsByClass(element, classes.uiHeader).length), + isLandscape = innerWidth > innerHeight, + btnActiveClass = ButtonClasses.uiBtnActive, + uiTabbarActive = classes.uiTabbarActive, + links = slice.call(element.getElementsByTagName('a')); if (li.length > 4) { // tabbar elements should be showed maximum forth elements. - self._setWidth(li, innerWidth / 4, inHeaders); + this._setWidth(li, innerWidth / 4, inHeaders); + } else { + this._setWidth(li, innerWidth / li.length, inHeaders); + } + + if (isLandscape) { + tabbarClassList.remove(classes.uiPortraitTabbar); + tabbarClassList.add(classes.uiLandscapeTabbar); } else { - self._setWidth(li, innerWidth / li.length, inHeaders); + tabbarClassList.remove(classes.uiLandscapeTabbar); + tabbarClassList.add(classes.uiPortraitTabbar); } - self._initOrientation(element); - self._initActiveTab(element); + [].forEach.call(links, function(element, index) { + if (element.classList.contains(btnActiveClass) || element.classList.contains(uiTabbarActive)) { + self.options.active = index; + } + }); setActive(self, self.options.active); }; @@ -657,14 +527,10 @@ * @member ns.widget.mobile.TabBar */ TabBar.prototype._bindEvents = function () { - var self = this, - ui = self._ui, - vclickCallback = vclickEvent.bind(null, self); - - self._callbacks.vclick = vclickCallback; - self.element.addEventListener("vclick", vclickCallback, false); - if (ui.scrollviewClip) { - ui.scrollviewClip.addEventListener("scrollstop", roundTabBarPositionX); + this.vclickCallback = vclickEvent.bind(null, this); + this.element.addEventListener("vclick", this.vclickCallback, false); + if (this._ui.scrollviewClip) { + this._ui.scrollviewClip.addEventListener("scrollstop", roundTabBarPositionX); } }; @@ -694,12 +560,9 @@ * @member ns.widget.mobile.TabBar */ TabBar.prototype._destroy = function () { - var self = this, - ui = self._ui; - - self.element.removeEventListener("vclick", self._callbacks.vclick, false); - if (ui.scrollviewClip) { - ui.scrollviewClip.removeEventListener("scrollstop", roundTabBarPositionX); + this.element.removeEventListener("vclick", this.vclickCallback, false); + if (this._ui.scrollviewClip) { + this._ui.scrollviewClip.removeEventListener("scrollstop", roundTabBarPositionX); } }; @@ -786,7 +649,7 @@ */ TabBar.prototype._disable = function (element, index) { if (index !== undefined) { - setDisabled(this, true, index); + setDisabled(element, true, index); } }; @@ -822,7 +685,7 @@ */ TabBar.prototype._enable = function (element, index) { if (index !== undefined) { - setDisabled(this, false, index); + setDisabled(element, false, index); } }; @@ -835,7 +698,7 @@ */ TabBar.prototype._refresh = function () { setActive(this, this.options.active); - }; + } /** * Value method is not supported in this widget. @@ -851,7 +714,7 @@ "[data-role='tabbar'], .ui-tabbar", [], TabBar, - "tizen" + 'tizen' ); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.widget.mobile.TabBar; diff --git a/tau/src/js/profile/mobile/widget/mobile/Textinput.js b/tau/src/js/profile/mobile/widget/mobile/Textinput.js index 4c9e7ee1..49f1b3df 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Textinput.js +++ b/tau/src/js/profile/mobile/widget/mobile/Textinput.js @@ -1,19 +1,8 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** * #Text Input Widget @@ -26,7 +15,7 @@ * "tel" or "month" or "week" or "datetime-local" or "color" or without any * type * - TEXTAREA - * - HTML elements with class _ui-textinput_ + * - HTML elements with class ui-TextInput * * ###HTML Examples * @@ -142,7 +131,7 @@ "../mobile", "../../../../core/util/DOM/manipulation", "./BaseWidgetMobile", - "../../../../core/widget/core/Button" + "./Button" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -161,12 +150,12 @@ clearSearchButtonText: "clear text", disabled: false, mini: null, - theme: 'a', + theme: 's', clearBtn: false }; this._ui = {}; - this._callbacks = {}; + this._handlers = {}; }, /** * Alias for {ns.widget.BaseWidget} @@ -212,7 +201,6 @@ classes = { uiBodyTheme: "ui-body-", uiMini: "ui-mini", - uiTextinput: "ui-textinput", uiInputText: "ui-input-text", clear: "ui-input-clear", clearHidden: "ui-input-clear-hidden", @@ -230,14 +218,14 @@ */ CLEAR_BUTTON_SELECTOR = '.' + classes.clear, /** - * Alias for {ns.widget.core.Button.classes.uiDisabled} + * Alias for {ns.widget.mobile.Button.classes.uiDisabled} * @property {string} CLASS_DISABLED * @member ns.widget.mobile.TextInput * @static * @private * @readonly */ - CLASS_DISABLED = ns.widget.core.Button.classes.DISABLED; + CLASS_DISABLED = ns.widget.mobile.Button.classes.uiDisabled; TextInput.prototype = new BaseWidget(); @@ -328,49 +316,15 @@ * @param {HTMLElement} element * @member ns.widget.mobile.TextInput */ - function _resize(element) { + function _resize(element){ if (element.nodeName.toLowerCase() === "textarea") { - if (element.clientHeight < element.scrollHeight) { + if(element.clientHeight < element.scrollHeight){ element.style.height = element.scrollHeight + "px"; } } } /** - * Get element value - * @method _getValue - * @return {?string} - * @member ns.widget.mobile.TextInput - * @chainable - * @protected - * @since 2.3.1 - */ - TextInput.prototype._getValue = function () { - var element = this.element; - if (element) { - return element.value; - } - return null; - }; - - /** - * Set element value - * @method _setValue - * @param {string} value - * @member ns.widget.mobile.TextInput - * @chainable - * @protected - * @since 2.3.1 - */ - TextInput.prototype._setValue = function (value) { - var element = this.element; - if (element) { - element.value = value; - } - return this; - }; - - /** * Toggle visibility of the clear button * @method toggleClearButton * @param {HTMLElement} clearBtn @@ -394,15 +348,16 @@ /** * Method finds label tag for element. - * @method _findLabel + * @method findLabel * @param {HTMLElement} element * @member ns.widget.mobile.TextInput * @return {HTMLElement} - * @protected + * @static + * @private */ - TextInput.prototype._findLabel = function(element) { - return element.parentNode.querySelector("label[for='" + element.id + "']"); - }; + function findLabel(element) { + return element.parentNode.querySelector('label[for="' + element.id + '"]'); + } /** * Method returns not disabled TextInput element which is the closest @@ -587,13 +542,11 @@ elementClassList = element.classList, options = self.options, themeClass, - labelFor = self._findLabel(element), + labelFor = findLabel(element), clearButton, type = element.type, ui; - elementClassList.add(classes.uiTextinput); - ui = self._ui; options.theme = themes.getInheritedTheme(element) || options.theme; @@ -622,6 +575,7 @@ default: if (element.tagName.toLowerCase() === "textarea") { setAria(element); + ui.textLine = createDecorationLine(element); } } @@ -729,65 +683,13 @@ elementClassList.remove(classes.uiBodyTheme + this.options.theme); }; - /** - * Returns label value - * @method getLabel - * @return {string} Label value or null - * @member ns.widget.mobile.TextInput - */ - TextInput.prototype.getLabel = function () { - var label = this._findLabel(this.element); - if (label !== null) { - return label.innerHTML; - } - return null; - }; - - /** - * Sets label value - * @method setLabel - * @param {string} Label text - * @member ns.widget.mobile.TextInput - */ - TextInput.prototype.setLabel = function (text) { - var self = this, - element = self.element, - label; - - if (typeof text === "string") { - label = self._findLabel(element); - if (label === null) { - // create new label - label = document.createElement("label"); - label.setAttribute("for", element.id); - - // add to parent - element.parentElement.appendChild(label); - } - label.innerHTML = text; - } - }; - ns.widget.mobile.TextInput = TextInput; engine.defineWidget( "TextInput", - "input[type='text']:not([data-role])" + - ", input[type='number']:not([data-role])" + - ", input[type='password']:not([data-role])" + - ", input[type='email']:not([data-role])" + - ", input[type='url']:not([data-role])" + - ", input[type='tel']:not([data-role])" + - ", input[type='month']:not([data-role])" + - ", input[type='week']:not([data-role])" + - ", input[type='datetime-local']:not([data-role])" + - ", input[type='color']:not([data-role])" + - ", input:not([type]):not([data-role]):not(.ui-checkbox):not(.ui-tizenslider)" + - ", textarea" + - ", ." + classes.uiTextinput, - [ - "getLabel", - "setLabel" - ], + "input[type='text'], input[type='number'], input[type='password'], input[type='email']," + + "input[type='url'], input[type='tel'], textarea, input[type='month'], input[type='week']," + + "input[type='datetime-local'], input[type='color'], input:not([type]), .ui-textinput", + [], TextInput, "mobile" ); diff --git a/tau/src/js/profile/mobile/widget/mobile/TizenSlider.js b/tau/src/js/profile/mobile/widget/mobile/TizenSlider.js index 5497f66a..15bb6774 100644 --- a/tau/src/js/profile/mobile/widget/mobile/TizenSlider.js +++ b/tau/src/js/profile/mobile/widget/mobile/TizenSlider.js @@ -1,19 +1,8 @@ -/*global window, define, ns */ +/*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * # Slider Widget @@ -22,7 +11,7 @@ * ## Default selectors * In default all **INPUT** tags with type equals _range_ are changed * to Tizen WebUI sliders. - * In addition all **INPUT** elements with _data-role=range_ and _data-role=slider_ + * In addition all elements with _data-role=range_ and _data-role=slider_ * and class _ui-tizenslider_ are changed to Tizen Web UI sliders. * * ###HTML Examples @@ -116,17 +105,34 @@ "../../../../core/util/DOM/css", "../mobile", "./Slider", - "../../../../core/widget/core/Popup", - "../../../../core/widget/core/Button" + "./Button", + "./Popup" ], function () { //>>excludeEnd("tauBuildExclude"); var Slider = ns.widget.mobile.Slider, - Button = ns.widget.core.Button, + Button = ns.widget.mobile.Button, engine = ns.engine, events = ns.event, objectUtils = ns.util.object, DOM = ns.util.DOM, + POPUP_WIDTH = { + "SMALL": "2.3rem", + "MEDIUM": "2.8rem", + "LARGE": "3.0rem" + }, + FONT_SIZE = { + "SMALL": "0.95rem", + "MEDIUM": "0.85rem", + "LARGE": "0.65rem", + "DEFAULT": "0.45rem" + }, + FONT_TOP = { + "SMALL": "0", + "MEDIUM": "-0.01rem", + "LARGE": "-0.1rem", + "DEFAULT": "-0.15rem" + }, TizenSlider = function () { Slider.call(this); // Some properties for example .popup must be defined once per slider @@ -163,9 +169,7 @@ uiSliderLeftText: "ui-slider-left-text", uiSliderRightText: "ui-slider-right-text", uiSliderHandlePress: "ui-slider-handle-press", - uiSliderCenter: "ui-slider-center", - uiSliderTextPrefix: "ui-slider-text-", - uiSliderIcon: "ui-slider-icon" + uiSliderCenter: "ui-slider-center" }; TizenSlider.prototype = new Slider(); @@ -173,8 +177,8 @@ sliderBuild = TizenSlider.prototype._build; sliderInit = TizenSlider.prototype._init; sliderBindEvents = TizenSlider.prototype._bindEvents; - slider_refresh = TizenSlider.prototype._refresh; - slider_setValue = TizenSlider.prototype._setValue; + slider_refresh = TizenSlider.prototype._refresh, + slider_setValue = TizenSlider.prototype._setValue slider_getValue = TizenSlider.prototype._getValue; /** @@ -187,30 +191,41 @@ /** * All possible widget options * @property {Object} options - * @property {boolean} [options.popup=false] enables popup + * @property {boolean} [options.popup=true] enables popup * @property {boolean} [options.center=false] creates additional markup to pointing center of the slider * @property {string} [options.icon=""] icon type * @property {string} [options.innerLabel=false] Displays the value inside the handler - * @property {?string} [options.textLeft] text attached to left - * @property {?string} [options.textRight] text attached to right + * @property {string} [options.textLeft=""] text attached to left + * @property {string} [options.textRight=""] text attached to right * @member ns.widget.mobile.TizenSlider */ - var options; + var options = this.options; if (typeof sliderConfigure === "function") { sliderConfigure.call(this); } - - options = this.options; options.popup = false; options.center = false; options.innerLabel = false; options.icon = ""; - options.textLeft = null; - options.textRight = null; + options.textLeft = ""; + options.textRight = ""; }; /** + * Check if value is not empty + * @method getValueLength + * @param {number} value + * @return {number} + * @private + * @static + * @member ns.widget.mobile.TizenSlider + */ + function getValueLength(value) { + return (new String(value)).length; + } + + /** * Creates popup element and appends it container passed as argument * @method _createPopup * @param {HTMLElement} container @@ -220,23 +235,26 @@ */ TizenSlider.prototype._createPopup = function (container) { var classes = TizenSlider.classes, - ui = this._ui, popup, popupInstance; // Create element and append it to slider popup = document.createElement("div"); - popup.className = "ui-slider-popup"; container.appendChild(popup); - popup.classList.add(classes.uiSliderPopup); // Create widget instance out of popup element popupInstance = engine.instanceWidget(popup, "Popup", { - positionTo: "origin", - link: ui.handle.id, // popup with arrow + positionTo: "origin", // popup with arrow + link: this._ui.handle.id, // positioned to slider's element transition: "none", - overlay: false, - arrow: "b,t" + noScreen: true, + directionPriority: [ + "top", + "bottom" + ], + tolerance: "10,0,10,0", + specialContainerClass: classes.uiSliderPopupContainer }); + popup.classList.add(classes.uiSliderPopup); return popupInstance; }; @@ -265,6 +283,7 @@ TizenSlider.prototype._updateSlider = function () { var self = this, newValue, + options = self.options, element = self.element, popupElement; @@ -275,7 +294,7 @@ self._popup = self._createPopup(self._ui.container); } - popupElement = self._popup.element.children[0]; + popupElement = self._popup.element; } self._ui.handle.removeAttribute("title"); @@ -309,11 +328,10 @@ * @protected */ TizenSlider.prototype._showPopup = function () { - var self = this, - router = engine.getRouter(); + var self = this; if (self.options.popup && !self.popupVisible) { - router.open(self._popup.id, {rel: "popup", history: false}); + self._popup.open(); self.popupVisible = true; } }; @@ -325,11 +343,10 @@ * @protected */ TizenSlider.prototype._hidePopup = function () { - var self = this, - router = engine.getRouter(); + var self = this; if (self.options.popup && self.popupVisible) { - router.close(self._popup.id, {rel: "popup", history: false}); + self._popup.close(); self.popupVisible = false; } }; @@ -426,6 +443,13 @@ // to determine current popup status self.popupVisible = false; + slider.classList.remove(btnClasses.uiBtnCornerAll); + if (ui && ui.background) { + ui.background.classList.remove(btnClasses.uiBtnCornerAll); + } + self._ui.handle.classList.remove(btnClasses.uiBtnCornerAll); + slider.querySelector('.' + btnClasses.uiBtnInner).classList.remove(btnClasses.uiBtnCornerAll); + switch (icon) { case "bright": case "volume": @@ -436,45 +460,55 @@ marginLeft = (DOM.getElementWidth(elemLeft) + 16) + "px"; marginRight = ""; - sliderContainerStyle.marginLeft = marginLeft; - sliderContainerStyle.marginRight = marginRight; - sliderContainer.classList.add(classes.uiSliderIcon); - break; - default: + case "text": textLeft = (textLeft && textLeft.substring(0, 3)) || ""; textRight = (textRight && textRight.substring(0, 3)) || ""; - if (textLeft || textRight) { - options.icon = icon = "text"; - elemLeft = document.createElement("div"); - elemLeft.classList.add(classes.uiSliderLeftText); + elemLeft = document.createElement("div"); + elemLeft.classList.add(classes.uiSliderLeftText); - elemRight = document.createElement("div"); - elemRight.classList.add(classes.uiSliderRightText); + elemRight = document.createElement("div"); + elemRight.classList.add(classes.uiSliderRightText); - textLength = Math.max(textLeft.length, textRight.length) + 1; - sliderContainer.classList.add(classes.uiSliderTextPrefix + textLength); + textLength = Math.max(textLeft.length, textRight.length) + 1; - inner = document.createElement("span"); - inner.innerHTML = textLeft; + marginLeft = textLength + "rem"; + marginRight = textLength + "rem"; - // Second element is same as first one - elemLeft.appendChild(inner.cloneNode(true)); + // Properties set before appending to element in DOM + elemLeft.style.left = "-" + marginLeft; + elemLeft.style.width = marginLeft; - inner.innerHTML = textRight; + elemRight.style.right = "-" + marginRight; + elemRight.style.width = marginRight; - elemRight.appendChild(inner); + inner = document.createElement("span"); + inner.style.position = "relative"; + inner.style.top = "0.4em"; + inner.innerHTML = textLeft; + + // Second element is same as first one + elemLeft.appendChild(inner.cloneNode(true)); + + inner.innerHTML = textRight; + + elemRight.appendChild(inner); + + slider.parentNode.insertBefore(elemLeft, slider); + slider.parentNode.appendChild(elemRight); - slider.parentNode.insertBefore(elemLeft, slider); - slider.parentNode.appendChild(elemRight); - ui.elemLeft = elemLeft; - ui.elemRight = elemRight; - } break; } + if (icon) { + sliderContainerStyle.marginLeft = marginLeft; + sliderContainerStyle.marginRight = marginRight; + } + + self.handleText = slider.querySelector("." + btnClasses.uiBtnText); + self.element = element; self._updateSlider(element); @@ -606,8 +640,7 @@ ns.widget.mobile.TizenSlider = TizenSlider; engine.defineWidget( "TizenSlider", - "input[type='range'], input[data-role='slider'], input[data-role='range']," + - "input.ui-tizenslider", + "input[type='range'], :not(select)[data-role='slider'], :not(select)[data-type='range'], .ui-tizenslider", [], TizenSlider, "tizen" diff --git a/tau/src/js/profile/mobile/widget/mobile/ToggleSwitch.js b/tau/src/js/profile/mobile/widget/mobile/ToggleSwitch.js index 18a008e5..0e13f912 100644 --- a/tau/src/js/profile/mobile/widget/mobile/ToggleSwitch.js +++ b/tau/src/js/profile/mobile/widget/mobile/ToggleSwitch.js @@ -1,19 +1,8 @@ -/*global window, define, ns */ +/*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true */ /** * # Toggle Switch Widget @@ -91,7 +80,7 @@ "../../../../core/util/DOM/attributes", "../../../../core/util/DOM/manipulation", "../../../../core/event", - "../../../../core/widget/core/Button", + "./Button", "../mobile", // fetch namespace "./BaseWidgetMobile" ], @@ -130,7 +119,7 @@ engine = ns.engine, events = ns.event, DOMutils = ns.util.DOM, - Button = ns.widget.core.Button, + Button = ns.widget.mobile.Button, themes = ns.theme, /** * @property {Object} selectors Alias for class ns.util.selectors @@ -226,8 +215,8 @@ var getElementWidth = DOMutils.getElementWidth, handlePercent = getElementWidth(self._ui.handle, "outer") / getElementWidth(self._ui.slider, "outer") * 100, - aPercent = percent && handlePercent + - (100 - handlePercent) * percent / 100, + aPercent = percent && handlePercent + (100 - handlePercent) + * percent / 100, bPercent = percent === 100 ? 0 : Math.min(handlePercent + 100 - aPercent, 100), i = self._labels.length, @@ -236,8 +225,8 @@ while (i--) { label = self._labels[i]; label.style.width = - (label.classList.contains(classes.sliderLabelA) ? - aPercent : bPercent) + "%"; + (label.classList.contains(classes.sliderLabelA) + ? aPercent : bPercent) + "%"; } } @@ -333,7 +322,7 @@ // If changes came from input value change } else { if (value === null) { - value = getInitialValue(controlType, control); + value = getInitialValue(tagName, control); } if (isNaN(value)) { return; @@ -494,9 +483,6 @@ */ function onChangeValue(self){ self.element.selectedIndex = (self._ui.input.checked) ? 1 :0; - if (self.element.nodeName.toLowerCase() === "select") { - events.trigger(self.element, "change"); - } } /** @@ -550,10 +536,6 @@ event.preventDefault(); } - function onLabelVclick(input, ev) { - input.checked = (input.type === "checkbox") ? !input.checked : true; - events.preventDefault(ev); - } /** * Manage intearaction of widget with key down events * @method onKeydown @@ -628,7 +610,7 @@ function onKeyupHandle (self) { if (self._keySliding) { self._keySliding = false; - self._ui.handle.classList.remove(classes.sliderStateActive); + handle.classList.remove(classes.sliderStateActive); } } @@ -767,8 +749,7 @@ */ function createWrapper(domSlider) { var wrapper, - domSliderChildNode = domSlider.childNodes, - j, length; + domSliderChildNode = domSlider.childNodes; wrapper = createElement("div"); wrapper.className = classes.sliderInneroffset; @@ -871,7 +852,6 @@ /** * Remove events from Slider which is based on Select Tag * @method removeEventsFromToggleBasedOnSelect - * @param {ns.widget.mobile.ToggleSwitch} self * @param {HTMLElement} element * @param {HTMLElement} handle * @param {HTMLElement} slider @@ -879,9 +859,9 @@ * @static * @member ns.widget.mobile.ToggleSwitch */ - function removeEventsFromToggleBasedOnSelect(self, element, handle, slider) { - - element.removeEventListener("change", self._onChange, false); + function removeEventsFromToggleBasedOnSelect(element, handle, slider) { + element.removeEventListener("change", self._onChange, + false); element.removeEventListener("keyup", self._onKeyupElement, false); element.removeEventListener("blur", self._onBlur, false); @@ -901,7 +881,7 @@ /** * Build Slider based on Select Tag - * @method buildSliderBasedOnSelectTag + * @method removeEventsFromToggleBasedOnSelect * @param {ns.widget.mobile.ToggleSwitch} self * @param {HTMLElement} element * @param {HTMLElement} sliderContainer @@ -923,7 +903,7 @@ theme = options.theme = options.theme || parentTheme; trackTheme = options.trackTheme = options.trackTheme || - parentTheme; + parentTheme domSlider.setAttribute("id", elementId + "-slider"); sliderBtnDownTheme = btnClasses.uiBtnDownThemePrefix + @@ -935,6 +915,14 @@ domSlider.appendChild(domHandle); domHandle.setAttribute("id", elementId + "-handle"); + engine.instanceWidget(domHandle, "Button", { + corners: true, + theme: theme, + shadow: true, + inline: false, + bar: true + }); + domSlider.appendChild(createWrapper(domSlider)); // make the handle move with a smooth transition domHandle.classList.add(classes.sliderSnapping); @@ -965,7 +953,7 @@ ns.warn("Please use input[data-role='toggleswitch'] " + "selector in order to define button like " + "toggle, select[data-role='slider'] is " + - "deprecated"); + "depreciated"); label.className = classes.toggleInputLabel; sliderContainer.className = classes.toggle; @@ -980,7 +968,6 @@ element.parentNode.insertBefore(label, element.nextSibling); - label.appendChild(element); } /** @@ -1026,13 +1013,13 @@ ToggleSwitch.prototype._build = function (element) { var roleType, elementsOption, + options = this.options, label = createElement("label"), divHandler = createElement("div"), divInneroffset = createElement("div"), controlType = element.nodeName.toLowerCase(), sliderContainer = createElement("div"); - this._ui.label = label; //when the input with input[data-role='toggleswitch'], //button like toggle if (controlType === "input") { @@ -1076,7 +1063,7 @@ //because the select with empty options is replaced with //input I just need and input on widget instance if (controlType === "input" || elementsOption.innerText === "") { - self._ui.input = element.parentElement.firstChild; + self._ui.input = element.nextSibling.firstChild; } else { elementId = element.id; self._ui.slider = document.getElementById(elementId + @@ -1311,8 +1298,7 @@ * @member ns.widget.mobile.ToggleSwitch */ ToggleSwitch.prototype._disable = function (element) { - var self = this, - btnClasses = Button.classes, + var btnClasses = Button.classes, slider = self._ui.slider; if (slider) { @@ -1332,19 +1318,16 @@ */ ToggleSwitch.prototype._bindEvents = function () { var self = this, - ui = self._ui, element = self.element, - handle = ui.handle, + handle = self._ui.handle, tagName = element.nodeName.toLowerCase(), - slider = ui.slider, + slider = self._ui.slider, elementsOption = element.querySelector("option") || ""; - if (tagName === "input" || elementsOption.innerText === "") { + if (tagName === "input" || elementsOption.innerText === ""){ self._onChangeValue = onChangeValue.bind(null, self); - self._onLabelVclick = onLabelVclick.bind(null, ui.input); - - ui.input.addEventListener("change", self._onChangeValue, true); - ui.label.addEventListener("vclick", self._onLabelVclick, true); + self._ui.input.addEventListener('change', + self._onChangeValue, true); } else { bindCallbacksForSelectTag(self); @@ -1382,34 +1365,33 @@ * @member ns.widget.mobile.ToggleSwitch */ ToggleSwitch.prototype._destroy = function () { - var self = this, + var label, + self = this, element = self.element, - ui = self._ui, - handle = ui.handle, - slider = ui.slider, - label = ui.label, + handle = self._ui.handle, + slider = self._ui.slider, tagName = element.nodeName.toLowerCase(), elementsOption = element.querySelector("option") || ""; if (tagName === "input" || elementsOption.innerText === "") { - ui.input.removeEventListener("change", self._onChangeValue, true); - label.addEventListener("vclick", self._onLabelVclick, true); + self._ui.input.removeEventListener('change', + self._onChangeValue, true); //cleaning toggle based on input type if (tagName === "input") { + label = element.parentElement; + + label.innerHTML = ''; label.classList.remove(classes.toggleInputLabel); - if (label.parentElement) { - label.parentElement.insertBefore(element, label); - } - label.innerHTML = ""; + label.parentElement.insertBefore(element,label); element.removeAttribute("aria-disabled"); element.classList.remove(classes.toggleSwitchInput); //cleaning toggle based on select type } else { - if (element.nextElementSibling && - element.nextElementSibling.tagName.toLowerCase() === "label") { + if (element.nextElementSibling.tagName.toLowerCase() + === "label") { //remove attributes removeAttributesWhenDestroy(element); //remove classes @@ -1420,7 +1402,7 @@ } } } else { - removeEventsFromToggleBasedOnSelect(self, element, handle, slider); + removeEventsFromToggleBasedOnSelect(element, handle, slider); removeAttributesWhenDestroy(element); element.classList.remove(classes.sliderSwitch); @@ -1438,8 +1420,7 @@ "ToggleSwitch", "select[data-role='toggleswitch']," + "input[data-role='toggleswitch']," + - "select[data-role='slider']," + - "select.ui-toggleswitch, input.ui-toggleswitch", + "select[data-role='slider']", [], ToggleSwitch, "mobile" diff --git a/tau/src/js/profile/mobile/widget/mobile/Tokentextarea.js b/tau/src/js/profile/mobile/widget/mobile/Tokentextarea.js index cef9966b..82f73ceb 100644 --- a/tau/src/js/profile/mobile/widget/mobile/Tokentextarea.js +++ b/tau/src/js/profile/mobile/widget/mobile/Tokentextarea.js @@ -1,19 +1,8 @@ /*global window, define */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /* Added to classes: @@ -193,9 +182,9 @@ [ "../../../../core/engine", "../../../../core/util/selectors", - "../../../../core/widget/core/Page", "../mobile", - "./BaseWidgetMobile" + "./BaseWidgetMobile", + "./Page" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -661,7 +650,8 @@ moreBlock.tabIndex = 0; moreBlockClasses.add(classes.uiTokentextareaLinkBase); moreBlockClasses.add(classes.uiBtnBoxS); - moreBlock.textContent = strings.addRecipient; + moreBlock.firstChild.firstChild.textContent = + strings.addRecipient; inputArea.appendChild(moreBlock); element.appendChild(inputArea); return element; diff --git a/tau/src/js/profile/mobile/widget/mobile/VirtualGrid.js b/tau/src/js/profile/mobile/widget/mobile/VirtualGrid.js index 330dcb80..51193bf5 100644 --- a/tau/src/js/profile/mobile/widget/mobile/VirtualGrid.js +++ b/tau/src/js/profile/mobile/widget/mobile/VirtualGrid.js @@ -1,19 +1,8 @@ /*global $, ns, define*/ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true, white: true, browser: true */ /** * #Virtual Grid Widget @@ -80,9 +69,7 @@ var self = this; // Call parent _configure - if (typeof parentPrototype._configure === "function") { - parentPrototype._configure.apply(self, arguments); - } + parentPrototype._configure.apply(self, arguments); /** * @property {Object} options @@ -121,9 +108,7 @@ }; prototype._build = function (element) { - if (typeof parentPrototype._build === "function") { - parentPrototype._build.apply(this, arguments); - } + parentPrototype._build.apply(this, arguments); if (this.options.direction === HORIZONTAL) { element.style.height = "100%"; diff --git a/tau/src/js/profile/mobile/widget/mobile/VirtualListview.js b/tau/src/js/profile/mobile/widget/mobile/VirtualListview.js index 5885fe9f..9160a9a6 100644 --- a/tau/src/js/profile/mobile/widget/mobile/VirtualListview.js +++ b/tau/src/js/profile/mobile/widget/mobile/VirtualListview.js @@ -1,19 +1,8 @@ /*global window, define, $, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ +* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. +* License : MIT License V2 +*/ /*jslint nomen: true, plusplus: true */ /** @@ -88,6 +77,15 @@ * @extends ns.widget.mobile.Listview */ +/** + * CSS MODIFICATION + * creating this widget we modified CSS file. + * + * CHANGED: + * .ui-virtual-list-container { position:relative; } + * + */ + (function (window, document, ns) { "use strict"; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); @@ -95,80 +93,502 @@ [ "../../../../core/engine", "../../../../core/util/selectors", - "../../../../core/util/DOM", "../../../../core/event", "../../../../core/theme", "../mobile", // fetch namespace "./Scrollview", "./Listview", - "../../../../core/widget/core/VirtualListview", + "./BaseWidgetMobile" ], function () { //>>excludeEnd("tauBuildExclude"); - var VirtualListview = ns.widget.core.VirtualListview, + /** + * @property {ns.widget.mobile.Listview} Listview alias variable + * @private + * @static + */ + var Listview = ns.widget.mobile.Listview, + /** + * @property {ns.engine} engine alias variable + * @private + * @static + */ engine = ns.engine, - utils = ns.util, - utilsSelectors = utils.selectors, - nsData = utils.DOM.nsData, - prototype = new VirtualListview(), - // - // CORE METHODS - // - parent_init = prototype._init, - parent_refresh = prototype._refresh, - parent_updateListItem = prototype._updateListItem; - - /** - * Initialize widget on an element. - * @method _init - * @param {HTMLElement} element Widget's element - * @member ns.widget.core.VirtualListview - * @protected + /** + * @property {ns.util.selectors} utilsSelectors alias variable + * @private + * @static + */ + utilsSelectors = ns.util.selectors, + /** + * @property {ns.theme} themes alias variable + * @private + * @static + */ + themes = ns.theme, + /** + * @property {ns.widget.mobile.Listview} listviewPrototype + * @private + */ + parentPrototype = Listview.prototype, + /** + * Shortcut for parent's `{@link ns.widget.mobile.Listview#_build} ns.widget.mobile.Listview._build` + * method from `{@link ns.widget.mobile.Listview} ns.widget.mobile.Listview.prototype` + * @method + * @private + * @static + */ + parent_build = parentPrototype._build, + + /** + * @property {Object} parent_init Shortcut for parent's {@link ns.widget.mobile.Listview#_build} + * method from prototype of {@link ns.widget.mobile.Listview} + * @private + * @static + * @member ns.widget.mobile.ExtendableList + */ + parent_init = Listview.prototype._init, + /** + * @property {Object} parent_bindEvent Shortcut for parent's {@link ns.widget.mobile.Listview#_build} + * method from prototype of {@link ns.widget.mobile.Listview} + * @private + * @static + * @member ns.widget.mobile.ExtendableList + */ + parent_bindEvents = Listview.prototype._bindEvents, + // Constants definition + /** + * @property {number} SCROLL_UP defines index of scroll \_scroll.direction + * to retrive if user is scrolling up + * @private + * @static + */ + SCROLL_UP = 0, + /** + * @property {number} SCROLL_RIGHT defines index of scroll \_scroll.direction + * to retrive if user is scrolling right + * @private + * @static + */ + SCROLL_RIGHT = 1, + /** + * @property {number} SCROLL_DOWN defines index of scroll \_scroll.direction + * to retrive if user is scrolling down + * @private + * @static + */ + SCROLL_DOWN = 2, + /** + * @property {number} SCROLL_LEFT defines index of scroll \_scroll.direction + * to retrive if user is scrolling left + * @private + * @static + */ + SCROLL_LEFT = 3, + /** + * @property {string} VERTICAL Defines vertical scrolling direction. It's default direction. + * @private + * @static + */ + VERTICAL = "y", + /** + * @property {string} HORIZONTAL Defines horizontal scrolling direction. + * @private + * @static + */ + HORIZONTAL = "x", + /** + * @property {boolean} blockEvent Determines that scroll event should not be taken into account if scroll event accurs. + * @private + * @static + */ + blockEvent = false, + /** + * Local constructor function + * @method VirtualListview + * @private + * @member ns.widget.mobile.VirtualListview + */ + VirtualListview = function () { + var self = this; + + /** + * @property {Object} ui VirtualListview widget's properties associated with + * User Interface + * @property {?HTMLElement} [ui.scrollview=null] Reference to associated + * {@link ns.widget.mobile.Scrollview Scrollview widget} + * @property {number} [ui.itemSize=0] Size of list element in piksels. If scrolling is + * vertically it's item width in other case it's height of item element + * @member ns.widget.mobile.VirtualListview + */ + self._ui = { + scrollview: null, + itemSize: 0 + }; + + /** + * @property {Object} _scroll Holds information about scrolling state + * @property {Array} [_scroll.direction=[0,0,0,0]] Holds current direction of scrolling. + * Indexes suit to following order: [up, left, down, right] + * @property {number} [_scroll.lastPositionX=0] Last scroll position from top in pixels. + * @property {number} [_scroll.lastPositionY=0] Last scroll position from left in pixels. + * @property {number} [_scroll.lastJumpX=0] Difference between last and current + * position of horizontal scroll. + * @property {number} [_scroll.lastJumpY=0] Difference between last and current + * position of vertical scroll. + * @property {number} [_scroll.clipWidth=0] Width of clip - visible area for user. + * @property {number} [_scroll.clipHeight=0] Height of clip - visible area for user. + * @member ns.widget.mobile.VirtualListview + */ + self._scroll = { + direction: [0, 0, 0, 0], + lastPositionX: 0, + lastPositionY: 0, + lastJumpX: 0, + lastJumpY: 0, + //@TODO: what if there is another element in scroll view? what size of clip should be? + clipWidth: 0, + clipHeight: 0 + }; + + /** + * @property {number} _currentIndex Current zero-based index of data set. + * @member ns.widget.mobile.VirtualListview + */ + self._currentIndex = 0; + + /** + * Returns list item value at specified index from database. + * + * **Method should overrided by developer using {@link ns.widget.mobile.VirtualListview#create .create} method.** + * @method itemData + * @param {number} index Index of data set. + * @return {Object} + * @member ns.widget.mobile.VirtualListview + */ + self.itemData = function () { + return null; + }; + + //Event function handler + self._scrollEventBound = null; + + return self; + }, + prototype = new Listview(), + classes = { + CONTAINER: "ui-virtual-list-container" + }; + + + VirtualListview.prototype = prototype; + + /** + * Dictionary object containing commonly used widget classes + * @property {Object} classes + * @static + * @member ns.widget.mobile.VirtualListview + * @readonly */ - prototype._init = function (element) { - var self = this; + VirtualListview.classes = classes; - engine.instanceWidget(element, "Listview"); + prototype._configure = function () { + var self = this, + options = self.options; - if (nsData(element, "row") !== null) { - ns.warn("Row option in VirtualListview is deprecated and not supported. Use bufferSize option instead."); - } + // Call parent _configure + parentPrototype._configure.apply(self, arguments); - if (nsData(element, "template") !== null) { - ns.warn("Template option in VirtualListview is deprecated and not supported."); + /** + * @property {Object} options VirtualListview widget options. + * @property {?Object} [options.template=null] Widget template engine. + * @property {?string} [options.theme=null] Widget theme + * value is used when .theme option isn't on element itself and on it's parents. + * @property {number} [options.row=100] Number of items of result set. The minimum + * value is 20 and the default value is 100. As the value gets higher, the loading + * time increases while the system performance improves. So you need to pick a value + * that provides the best performance without excessive loading time. + * @property {number} [options.numItemData=0] Total number of items. + * @property {boolean} [options.standalone=false] If true scrollview instance will be created inside of the widget + */ + options.template = null; + options.theme = null; + options.direction = VERTICAL; + options.row = 50; + options.numItemData = 0; + options.standalone = false; + }; + + //@TODO: Maybe this information should by provided by Scrollview + /** + * Updates scroll information about position, direction and jump size. + * @method _updateScrollInfo + * @private + */ + prototype._updateScrollInfo = function () { + var self = this, + scrollInfo = self._scroll, + scrollDirection, + scrollViewElement = self._ui.scrollview.element, + scrollLastPositionX = scrollInfo.lastPositionX, + scrollLastPositionY = scrollInfo.lastPositionY, + // Fetch current scroll position + scrollviewPosX = scrollViewElement.scrollLeft, + scrollviewPosY = scrollViewElement.scrollTop; + + self._refreshScrollbar(); + //Reset scroll matrix + scrollDirection = [0, 0, 0, 0]; + + //Scrolling UP + if (scrollviewPosY < scrollLastPositionY) { + scrollDirection[SCROLL_UP] = 1; } - if (nsData(element, "theme") !== null) { - ns.warn("Theme option in VirtualListview is deprecated and not supported."); + //Scrolling RIGHT + if (scrollviewPosX > scrollLastPositionX) { + scrollDirection[SCROLL_RIGHT] = 1; } - if (nsData(element, "numItemData") !== null) { - ns.warn("NumItemData option in VirtualListview is deprecated and not supported. Use dataLength option instead."); + //Scrolling DOWN + if (scrollviewPosY > scrollLastPositionY) { + scrollDirection[SCROLL_DOWN] = 1; } - if (typeof self.options.listItemUpdater !== "function") { - ns.warn(["ListItemUpdater in VirtualListview is not set.", - "Probably you use selector for automatic creation of this widget.", - "Selectors for this widget are deprecated and will be removed in future.", - "Use setListItemUpdater to set list item updater."].join(" ")); + //Scrolling LEFT + if (scrollviewPosX < scrollLastPositionX) { + scrollDirection[SCROLL_LEFT] = 1; } - self._ui.listview = engine.instanceWidget(element, "Listview"); - parent_init.call(self, element); + scrollInfo.lastJumpY = Math.abs(scrollviewPosY - scrollLastPositionY); + scrollInfo.lastJumpX = Math.abs(scrollviewPosX - scrollLastPositionX); + scrollInfo.lastPositionX = scrollviewPosX; + scrollInfo.lastPositionY = scrollviewPosY; + scrollInfo.direction = scrollDirection; + scrollInfo.clipHeight = scrollViewElement.clientHeight; + scrollInfo.clipWidth = scrollViewElement.clientWidth; }; - prototype._refresh = function () { - this._ui.listview.refresh(); - parent_refresh.call(this); - }; + /** + * Computes list element size according to scrolling orientation + * @method _computeElementSize + * @param {HTMLElement} element Element whose size should be computed + * @param {string} orientation Scrolling orientation + * @return {number} Size of element in pixels + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function _computeElementSize(element, orientation) { + // @TODO change to util method if it will work perfectly + return parseInt(orientation === VERTICAL ? element.clientHeight : element.clientWidth, 10) + 1; + } - prototype._setupScrollview = function (element) { - var scrollview; + /** + * Scrolls and manipulates DOM element to destination index. Element at destination + * index is the first visible element on the screen. Destination index can + * be different from Virtual List's current index, because current index points + * to first element in the buffer. + * @member ns.widget.mobile.VirtualListview + * @param {ns.widget.mobile.VirtualListview} self VirtualListview widget reference + * @param {number} toIndex Destination index. + * @method _orderElementsByIndex + * @private + * @static + */ + function _orderElementsByIndex(self, toIndex) { + var element = self.element, + options = self.options, + scrollInfo = self._scroll, + resultsetSize = 0, + dataLength = options.numItemData, + indexCorrection = 0, + bufferedElements = 0, + avgListItemSize = 0, + bufferSize = options.row, + i, + offset = 0, + index; + + //Get size of scroll clip depended on scroll direction + resultsetSize = options.direction === VERTICAL ? scrollInfo.clipHeight : scrollInfo.clipWidth; + + //resultsetSize = self._computeResultsetSize(); + //Compute average list item size + avgListItemSize = self._computeAvgSize(); + + //Compute average number of elements in each buffer (before and after clip) + bufferedElements = Math.floor((bufferSize - Math.floor(resultsetSize / avgListItemSize)) / 2); + + if (toIndex - bufferedElements <= 0) { + index = 0; + indexCorrection = 0; + } else { + index = toIndex - bufferedElements; + } + + if (index + bufferSize >= dataLength) { + index = dataLength - bufferSize; + } + indexCorrection = toIndex - index; + + self._loadData(index); + blockEvent = true; + offset = index * avgListItemSize; + if (options.direction === VERTICAL) { + element.style.top = offset + "px"; + } else { + element.style.left = offset + "px"; + } + + for (i = 0; i < indexCorrection; i += 1) { + offset += _computeElementSize(element.children[i], options.direction); + } + + if (options.direction === VERTICAL) { + self.ui.scrollview.element.scrollTop = offset; + } else { + self.ui.scrollview.element.scrollLeft = offset; + } + blockEvent = false; + self._currentIndex = index; + } + + /** + * Orders elements. Controls resultset visibility and does DOM manipulation. + * @method _orderElements + * @param {ns.widget.mobile.VirtualListview} self VirtualListview widget reference + * @private + */ + function _orderElements(self) { + var element = self.element, + scrollInfo = self._scroll, + options = self.options, + elementStyle = element.style, + //Current index of data, first element of resultset + currentIndex = self._currentIndex, + //Number of items in resultset + bufferSize = parseInt(options.row, 10), + //Total number of items + dataLength = options.numItemData, + //Array of scroll direction + scrollDirection = scrollInfo.direction, + scrolledVertically = (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_DOWN]), + scrolledHorizontally = (scrollDirection[SCROLL_LEFT] || scrollDirection[SCROLL_RIGHT]), + scrollClipWidth = scrollInfo.clipWidth, + scrollClipHeight = scrollInfo.clipHeight, + scrollLastPositionY = scrollInfo.lastPositionY, + scrollLastPositionX = scrollInfo.lastPositionX, + elementPositionTop = parseInt(elementStyle.top, 10) || 0, + elementPositionLeft = parseInt(elementStyle.left, 10) || 0, + elementsToLoad = 0, + elementsLeftToLoad = 0, + temporaryElement = null, + avgListItemSize, + resultsetSize, + i, + jump = 0, + hiddenPart = 0, + newPosition; + + resultsetSize = self._computeResultsetSize(); + avgListItemSize = self._computeAvgSize(resultsetSize); + + //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling DOWN + if (scrollDirection[SCROLL_DOWN]) { + hiddenPart = scrollLastPositionY - elementPositionTop; + elementsLeftToLoad = dataLength - currentIndex - bufferSize; + } + + //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling UP + if (scrollDirection[SCROLL_UP]) { + hiddenPart = (elementPositionTop + resultsetSize) - (scrollLastPositionY + scrollClipHeight); + elementsLeftToLoad = currentIndex; + } + + //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling RIGHT + if (scrollDirection[SCROLL_RIGHT]) { + hiddenPart = scrollLastPositionX - elementPositionLeft; + elementsLeftToLoad = dataLength - currentIndex - bufferSize; + } + + //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling LEFT + if (scrollDirection[SCROLL_LEFT]) { + hiddenPart = (elementPositionLeft + resultsetSize) - (scrollLastPositionX + scrollClipWidth); + elementsLeftToLoad = currentIndex; + } + + //manipulate DOM only, when at least 2/3 of result set is hidden + //NOTE: Result Set should be at least 3x bigger then clip size + if (hiddenPart > 0 && (resultsetSize / hiddenPart) <= 1.5) { + + //Left half of hidden elements still hidden/cached + elementsToLoad = Math.floor(hiddenPart / avgListItemSize) - Math.floor((bufferSize - scrollClipHeight / avgListItemSize) / 2); + elementsToLoad = elementsLeftToLoad < elementsToLoad ? elementsLeftToLoad : elementsToLoad; + + if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { + //Switch currentIndex to last + currentIndex = currentIndex + bufferSize - 1; + } + + for (i = elementsToLoad; i > 0; i -= 1) { + if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { + temporaryElement = element.appendChild(element.firstElementChild); + ++currentIndex; + + //Updates list item using template + self._updateListItem(temporaryElement, currentIndex); + if (scrolledVertically) { + jump += temporaryElement.offsetHeight; + } else { + jump += temporaryElement.offsetWidth; + } + } + + if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_LEFT]) { + temporaryElement = element.insertBefore(element.lastElementChild, element.firstElementChild); + --currentIndex; + + //Updates list item using template + self._updateListItem(temporaryElement, currentIndex); + if (scrolledVertically) { + jump -= temporaryElement.offsetHeight; + } else { + jump -= temporaryElement.offsetWidth; + } + } + } + if (scrolledVertically) { + newPosition = elementPositionTop + jump; + + if (newPosition < 0 || currentIndex <= 0) { + newPosition = 0; + currentIndex = 0; + } + + elementStyle.top = newPosition + "px"; + } + + if (scrolledHorizontally) { + newPosition = elementPositionLeft + jump; + + if (newPosition < 0 || currentIndex <= 0) { + newPosition = 0; + currentIndex = 0; + } + + elementStyle.left = newPosition + "px"; + } + + if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { + //Switch currentIndex to first + currentIndex = currentIndex - bufferSize + 1; + } + //Save current index + self._currentIndex = currentIndex; + } + } - // @TODO: get class value from static access to class - scrollview = engine.getBinding(utilsSelectors.getClosestByClass(element, "ui-scrollview-clip")); - return scrollview.element; - }; /** * @method _updateListItem @@ -178,13 +598,401 @@ * @protected */ prototype._updateListItem = function (element, index) { - var self = this; + var self = this, + itemData = self.itemData, + $jqTmpl = self._ui.$jqTmpl, + templateElement; if (typeof self.options.listItemUpdater === "function") { - parent_updateListItem.call(self, element, index); + self.options.listItemUpdater(element, index); } else { - ns.warn("List item updater must be a function. Using jQuery Template in VirtualListview is deprecated and is not supported"); + //@TODO THIS IS A JQUERY INCLUSION IN A TAU WIDGET!!! + //@TODO FIX THIS!!! + templateElement = $.tmpl($jqTmpl, itemData(index))[0]; + element.innerHTML = templateElement.innerHTML; + if (templateElement.className) { + //@TODO move this to utils + window.DOMTokenList.prototype.add.apply(element.classList, templateElement.className.split(" ")); + } + engine.createWidgets(element); + } + }; + + /** + * Build widget structure + * @method _build + * @protected + * @param {string} template + * @param {HTMLElement} element + * @return {HTMLElement} + */ + VirtualListview.prototype._build = function (element) { + var self = this, + options = self.options, + elementStyle = element.style, + styleHeight = elementStyle.height, + styleWidth = elementStyle.width, + standaloneContainer; + + // Check if standalone must be forced + // this is not placed inside _configure method because it could be overriden by a data- attribute + // @TODO other properties could potentially work in this way too + if (styleHeight !== "" && styleHeight !== "auto" && styleWidth !== "" && styleWidth !== "auto") { + options.standalone = true; + } + + // Prepare a parent container for VirtualList + if (options.standalone) { + standaloneContainer = document.createElement('div'); + + // Standalone container must match sizes designed by developer + standaloneContainer.style.width = styleWidth || "100%"; + standaloneContainer.style.height = styleHeight || "100%"; + + // Remove style values + // @TODO reassign those values on destroy + elementStyle.height = ""; + elementStyle.width = ""; + + // Add scrollview to content element + // we must add it before creating instance because some operations inside build method + // require presence inside DOM + element.parentElement.appendChild(standaloneContainer); + + // Create a widget instance of it + self._ui.scrollview = engine.instanceWidget(standaloneContainer, "Scrollview", { + scroll: options.direction + }); + + // After creating scrollview widget apeend list as a child + self._ui.scrollview._ui.view.appendChild(element); } + + //Call parent's method + parent_build.call(self, element); + + options.theme = themes.getInheritedTheme(element) || options.theme; + element.classList.add(classes.CONTAINER); + + //Prepare element + elementStyle.position = "relative"; + + return element; + }; + + /** + * Check if scrolling position is changed and updates list if it needed. + * @method _updateList + * @param {ns.widget.mobile.VirtualListview} self VirtualListview widget reference + * @member ns.widget.mobile.VirtualListview + * @private + * @static + */ + function _updateList(self) { + var _scroll = self._scroll; + + self._updateScrollInfo(); + + if (_scroll.lastJumpY > 0 || _scroll.lastJumpX > 0) { + if (!blockEvent) { + _orderElements(self); + } + } + } + + /** + * Configures list. Sets data source and iterator behavior. + * @method _configureList + * @protected + * @param {Object} argumentsArray + * @member ns.widget.mobile.VirtualListview + */ + prototype._configureList = function (argumentsArray) { + var self = this, + options = self.options, + args = argumentsArray[0] || {}; + + if (typeof args.itemData === "function" && (typeof args.numItemData === "function" || typeof args.numItemData === "number")) { + if (typeof args.numItemData === "function") { + options.numItemData = args.numItemData(); + } else { + options.numItemData = args.numItemData <= 0 ? 0 : args.numItemData; + } + self.itemData = args.itemData; + } + + // @TODO set minimum set size depending on current screen size + options.row = Math.max(20, options.row); + + self._buildList(); + + //Update scroll info: scroll position etc... if options.standalone = true + if (options.standalone) { + self._updateScrollInfo(); + } + }; + + /** + * Sums current element set size depending on direction + * @return {number} current loaded set of elements size + * @protected + */ + prototype._computeResultsetSize = function () { + var self = this, + resultsetSize = 0, + currentDirection = self.options.direction, + childrenNodes = self.element.children, + i; + + // Go through children and fetch their sizes + for (i = childrenNodes.length - 1; i >= 0; i -= 1) { + if (currentDirection === VERTICAL) { + resultsetSize += childrenNodes[i].offsetHeight; + } else { + resultsetSize += childrenNodes[i].offsetWidth; + } + } + + return resultsetSize; + }; + + + /** + * Calculates current set size depending on currently loaded elements + * @method _computeAvgSize + * @param {number} [resultsetSize] result size may be passed for saving computations + * @protected + * @return {number} Average size of result elements + */ + prototype._computeAvgSize = function (resultsetSize) { + var self = this, + size = resultsetSize || self._computeResultsetSize(), + avgSize = Math.ceil(size / self.options.row); + + self._avgListItemSize = avgSize; + + return avgSize; + }; + + /** + * Initialize list on an element + * @method _init + * @protected + * @param {HTMLElement} element + * @member ns.widget.mobile.VirtualListview + */ + prototype._init = function (element) { + var self = this, + ui = self._ui, + options = self.options, + standalone = options.standalone, + direction, + scrollviewInstance; + + + // scrollview may be set while widget is created with standalone option + if (standalone && !ui.scrollview || !standalone) { + //Get Scrollview widget instance + // @TODO make this asynchrous, it's currently possible that a child widget will be built before scrollview (for example VirtualGrid) + // @TODO this will fail also if data-scroll is set to none on target scrollable element + scrollviewInstance = engine.getBinding(utilsSelectors.getClosestByClass(element, 'ui-scrollview-clip')); + ui.scrollview = scrollviewInstance; + } else { + scrollviewInstance = ui.scrollview; + } + + //@TODO JQUERY! + ui.$jqTmpl = $(document.getElementById(self.options.template)); + + options.row = parseInt(options.row, 10); + + //Set direction, default vertical scrolling is allowed + direction = (options.direction.toLowerCase() === HORIZONTAL) ? HORIZONTAL : VERTICAL; + options.direction = direction; + + // Prepare view + if (standalone && options.direction === HORIZONTAL) { + scrollviewInstance._ui.view.style.height = "100%"; + } + + parent_init.call(self, element); + }; + + /** + * Builds list items + * @method _buildList + * @protected + * @member ns.widget.mobile.VirtualListview + */ + prototype._buildList = function () { + var self = this, + listItem, + list = self.element, + childElementType = (list.tagName === "UL" || list.tagName === "OL") ? "li" : "div", + numberOfItems = self.options.row, + documentFragment = document.createDocumentFragment(), + direction = self.options.direction, + i; + + for (i = 0; i < numberOfItems; ++i) { + listItem = document.createElement(childElementType); + + if (direction === HORIZONTAL) { + // TODO: check if whiteSpace: nowrap is better for vertical listes + // NOTE: after rebuild this condition check possible duplication from _init method + listItem.style.float = 'left'; + } + + self._updateListItem(listItem, i); + documentFragment.appendChild(listItem); + } + + list.appendChild(documentFragment); + self._refresh(); + }; + + /** + * Refresh list + * @method _refresh + * @member ns.widget.mobile.VirtualListview + * @protected + * @instance + */ + prototype._refresh = function (create) { + //Set default value of variable create + create = create === undefined ? false : create; + //Set default value of variable create + this._refreshItems(this.element, create); + this._refreshScrollbar(); + }; + + /** + * Loads data from specefied index to result set size. + * @method _loadData + * @protected + * @param {number} index Index of first row + * @member ns.widget.mobile.VirtualListview + */ + prototype._loadData = function (index) { + var self = this, + children = self.element.firstElementChild; + + if (self._currentIndex !== index) { + self._currentIndex = index; + do { + self._updateListItem(children, index); + ++index; + children = children.nextElementSibling; + } while (children); + } + }; + + /** + * Sets proper scrollbar size: height (vertical), width (horizontal) + * @method _refreshScrollbar + * @protected + * @member ns.widget.mobile.VirtualListview + */ + prototype._refreshScrollbar = function () { + var self = this, + options = self.options, + newViewSize = self._computeAvgSize() * options.numItemData, + scrollviewInstance = self._ui.scrollview, + // Get scrollview view element (child) + // @TODO remove fetching first child after createing ui.view property inside Scrollview widget + scrollviewView; + + if (scrollviewInstance) { + scrollviewView = (scrollviewInstance.ui && scrollviewInstance.ui.view) || scrollviewInstance.element.firstElementChild; + if (options.direction === VERTICAL) { + scrollviewView.style.height = newViewSize + "px"; + } else { + scrollviewView.style.width = newViewSize + "px"; + } + } + }; + + /** + * Binds VirtualListview events + * @method _bindEvents + * @protected + * @member ns.widget.mobile.VirtualListview + */ + prototype._bindEvents = function () { + var self = this, + scrollEventBound = _updateList.bind(null, self), + scrollviewClip = self._ui.scrollview && self._ui.scrollview.element; + + if (scrollviewClip) { + scrollviewClip.addEventListener("scroll", scrollEventBound, false); + self._scrollEventBound = scrollEventBound; + } + + parent_bindEvents.call(self, self.element); + }; + + /** + * Cleans widget's resources + * @method _destroy + * @protected + * @member ns.widget.mobile.VirtualListview + */ + prototype._destroy = function () { + var self = this, + scrollview = self._ui.scrollview, + scrollviewClip = scrollview && scrollview.element, + scrollviewParent = scrollviewClip && scrollviewClip.parentElement, + element = self.element, + elementStyle = element.style, + options = self.options, + listItem; + + // Restore start position + elementStyle.position = "static"; + if (options.direction === VERTICAL) { + elementStyle.top = ""; + } else { + elementStyle.left = ""; + } + + if (scrollviewClip) { + scrollviewClip.removeEventListener("scroll", self._scrollEventBound, false); + } + + // In case we have a standalone version move element to parent of scrollview + // call destroy and remove it from DOM + if (options.standalone) { + scrollviewParent.appendChild(self.element); + scrollview.destroy(); + + scrollviewParent.removeChild(scrollviewClip); + + self._ui.scrollview = null; + } + + //Remove li elements. + // @TODO innerHTML = "" could be faster + while (element.firstElementChild) { + listItem = element.firstElementChild; + element.removeChild(listItem); + } + }; + + /** + * Scrolls list to defined index. + * @method scrollToIndex + * @param {number} index Scroll Destination index. + * @member ns.widget.mobile.VirtualListview + */ + prototype.scrollToIndex = function(index) { + if (index < 0) { + index = 0; + } + if (index >= this.options.numItemData) { + index = this.options.numItemData - 1; + } + this._updateScrollInfo(); + _orderElementsByIndex(this, index); }; /** @@ -194,18 +1002,18 @@ * @member ns.widget.mobile.VirtualListview */ prototype.create = function () { - ns.warn("VirtualListview.create() method is deprecated and no more supported. Use draw() method instead."); + this._configureList(arguments); }; - VirtualListview.prototype = prototype; - + // definition ns.widget.mobile.VirtualListview = VirtualListview; - ns.engine.defineWidget( + + engine.defineWidget( "VirtualListview", "[data-role='virtuallistview'],[data-role='virtuallist'], .ui-virtuallistview", - ["draw", "setListItemUpdater", "scrollTo", "scrollToIndex", "create"], + ["create", "scrollToIndex"], VirtualListview, - "tizen" + 'tizen' ); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.widget.mobile.VirtualListview; diff --git a/tau/src/js/profile/tv/config.js b/tau/src/js/profile/tv/config.js index d9d03b26..6eaa3ec4 100644 --- a/tau/src/js/profile/tv/config.js +++ b/tau/src/js/profile/tv/config.js @@ -1,18 +1,7 @@ /*global ns, define*/ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ (function (ns) { "use strict"; diff --git a/tau/src/js/profile/tv/page/design/elements.js b/tau/src/js/profile/tv/page/design/elements.js index 17512df0..ba900849 100644 --- a/tau/src/js/profile/tv/page/design/elements.js +++ b/tau/src/js/profile/tv/page/design/elements.js @@ -1,444 +1,27 @@ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Elements - * - * + Button - * + Drawer - * + Listdivider - * + Listview - * + Page - * + PageContainer - * + Popup - * + Progress - * + Slider - * + TextInput + * ... * * ##Containers of blocks * - * TV profile contains List and VirtualGrid as block containers. - * * ###Lists * - * Default selector for listview widget is *ui-listview* class or *data-role=listview*. - * To add a list widget to the application, use the following code. - * - * #### List with basic items - * - * You can add a basic list widget as follows: - * - * @example - * <ul class="ui-listview"> - * <li>1line</li> - * <li>2line</li> - * <li>3line</li> - * <li>4line</li> - * <li>5line</li> - * </ul> - * - * #### List with link items - * - * You can add a list widget with a link and press effect. It allows the user to click each list item. - * See following code: - * - * @example - * <ul class="ui-listview"> - * <li> - * <a href="#">1line</a> - * </li> - * <li> - * <a href="#">2line</a> - * </li> - * <li> - * <a href="#">3line</a> - * </li> - * <li> - * <a href="#">4line</a> - * </li> - * <li> - * <a href="#">5line</a> - * </li> - * </ul> - * - * #### List with checkboxes - * - * To create list with checkboxes use class *li-has-checkbox* for 'li' tag. - * - * @example - * <ul class="ui-listview"> - * <li class="li-has-checkbox"> - * <a href=""> - * <input type="checkbox" id="checkbox-1"/> - * <label for="checkbox-1">List 01</label> - * </a> - * </li> - * <li class="li-has-checkbox"> - * <a href=""> - * <input type="checkbox" id="checkbox-2"/> - * <label for="checkbox-2">List 02</label> - * </a> - * </li> - * </ul> - * - * #### List with radio buttons - * - * To create list with radio buttons use class *li-has-radio* for 'li' tag. - * - * @example - * <ul class="ui-listview"> - * <li class="li-has-radio"> - * <a href=""> - * <input type="radio" name="radio-sample" checked="checked" id="rd-1"/> - * <label for="rd-1">Radio 01</label> - * </a> - * </li> - * <li class="li-has-radio"> - * <a href=""> - * <input type="radio" name="radio-sample" id="rd-2"/> - * <label for="rd-2">Radio 02</label> - * </a> - * </li> - * </ul> - * - * #### Multiline list - * - * To apply multiline style use *li-has-multiline* and *li-text-sub* classes. See example code. - * - * @example - * <ul class="ui-listview"> - * <li class="li-has-multiline"> - * <a href="#"> - * Wallpaper - * <span class="li-text-sub">Overall size of fonts</span> - * </a> - * </li> - * <li class="li-has-multiline"> - * <a href="#"> - * Wallpaper - * <span class="li-text-sub">Overall size of fonts</span> - * </a> - * </li> - * </ul> - * * ###Grids * - * Widget creates special grid which can contain big number of items. - * Default selector for VirtualGrid widget is *ui-virtualgrid* class. - * To add an items to the VirtualGrid, use the following code. - * - * @example - * <div class="ui-content"> - * <ul id="vlist1" class="ui-virtualgrid"></ul> - * </div> - * <script> - * var JSON_DATA = [ - * {NAME:"Abdelnaby", TEAM_LOGO:"1_raw.jpg"}, - * {NAME:"Abdul-Aziz", TEAM_LOGO:".2_raw.jpg"} - * ], - * vgrid; - * - * document.addEventListener("pageshow", function() { - * var elList = document.getElementById("vlist1"); - * - * if (elList) { - * vgrid = tau.widget.VirtualGrid(elList); - * vgrid.option({ - * dataLength: JSON_DATA.length, - * bufferSize: 40 - * }); - * - * // Update listitem - * vgrid.setListItemUpdater(function (elListItem, newIndex) { - * var data = JSON_DATA[newIndex]; - * - * elListItem.innerHTML = '<a class="grid-thumbnail ' + (newIndex === 2 ? "ui-selected" : "") + '"> <div class="grid-thumbnail-pic-full"><img class="grid-thumbnail-pic-img" src="' + data.TEAM_LOGO + '" /></div><div class="grid-thumbnail-contents"><span class="grid-thumbnail-content">' + data.NAME + '</span></div></a>' - * tau.widget.Button(elListItem.firstElementChild); - * }); - * // Draw child elements - * vgrid.draw(); - * } - * }); - * - * document.addEventListener("pagehide", function() { - * // Remove all children in the vgrid - * if (vgrid) { - * vgrid.destroy(); - * } - * }); - * </script> - * * ##Buttons and icons * - * Button widget changes default browser buttons to special buttons with additional options like icon, corners, shadow. - * - * ###HTML button examples - * - * You can add button widget as following examples. - * - * ####Create simple button from link using data-role - * - * @example - * <a href="#page2" data-role="button">Link button</a> - * - * ####Create simple button from link using class selector - * - * @example - * <a href="#page2" class="ui-btn">Link button</a> - * - * ####Create simple button using button's tag - * - * @example - * <button>Button element</button> - * - * ####Create simple button from input using type - * - * @example - * <input type="button" value="Button" /> - * <input type="submit" value="Submit Button" /> - * <input type="reset" value="Reset Button" /> - * - * ###Button as icon - * - * By default, all icons in buttons are placed to the left of the button text. This default may be overridden using the data-iconpos attribute. - * - * @example - * <a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a> - * - * Possible values of data-iconpos:<br> - * - * - "left" - creates the button with left-aligned icon<br> - * - "right" - creates the button with right-aligned icon<br> - * - "top" - creates the button with icon positioned above the text<br> - * - "bottom" - creates the button with icon positioned below the text<br> - * - * You can also create an icon-only button, by setting the data-iconpos attribute to *notext*. The button plugin will hide the text on-screen, but add it as a title attribute on the link to provide context for screen readers and devices that support tooltips. - * - * @example - * <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a> - * * ##Drawer * - * Container with ability to open and close with an animation. - * You can make the drawer widget as data-role="drawer" with DIV tag. - * - * ###Default selectors - * - * By default all elements with data-role="drawer" or class "ui-drawer" are - * changed to Drawer widget. - * - * ###Placing rule - * - * Drawer HTML element should be placed inside a page (div with data-role="page"), - * but not inside a content (div with data-role="content"). - * - * ###HTML Examples - * - * This paragraph describes how to create and use Drawer widget. - * - * ####Manual constructor - * For manual creation of Drawer widget you can use constructor of widget: - * - * @example - * <!-- Widget structure --> - * <div class="ui-page"> - * <div data-role="drawer" data-position="left" id="drawer"> - * <ul data-role="listview"> - * <li class="ui-drawer-main-list" id="mainItem1"><a href="#">List item 1</a></li> - * <li class="ui-drawer-main-list" id="mainItem2"><a href="#">List item 2</a></li> - * <li class="ui-drawer-sub-list" id="subItem1"><a href="#">Sub item 1</a></li> - * </ul> - * </div> - * </div> - * <script> - * var drawer = document.getElementById("drawer"), - * widget = tau.widget.Drawer(drawer); - * </script> - * - * ####Opening / Closing Drawer. Checking if Drawer is open. - * - * To open / close Drawer one can use open() and close() methods. - * To check if Drawer is open use isOpen method. - * - * @example - * <!-- Widget structure --> - * <div class="ui-page"> - * <div data-role="drawer" data-position="left" id="drawer"> - * <ul data-role="listview"> - * <li class="ui-drawer-main-list" id="mainItem1"><a href="#">List item 1</a></li> - * <li class="ui-drawer-main-list" id="mainItem2"><a href="#">List item 2</a></li> - * <li class="ui-drawer-sub-list" id="subItem1"><a href="#">Sub item 1</a></li> - * </ul> - * </div> - * </div> - * <script> - * var drawer = document.getElementById("drawer"), - * widget = tau.widget.Drawer(drawer); - * // open - * widget.open(); - * alert(widget.isOpen()); - * // close - * widget.close(); - * alert(widget.isOpen()); - * </script> - * - * ####Positioning Drawer left - * - * To position Drawer left set data-position to "left" or do not use this - * attribute (left is default). - * - * @example - * <!-- Widget structure --> - * <div class="ui-page"> - * <div data-role="drawer" data-position="left" id="drawer"> - * <ul data-role="listview"> - * <li class="ui-drawer-main-list" id="mainItem1"><a href="#">List item 1</a></li> - * <li class="ui-drawer-main-list" id="mainItem2"><a href="#">List item 2</a></li> - * <li class="ui-drawer-sub-list" id="subItem1"><a href="#">Sub item 1</a></li> - * </ul> - * </div> - * </div> - * - * @example - * <!-- Widget structure --> - * <div class="ui-page"> - * <div data-role="drawer" id="drawer"> - * <ul data-role="listview"> - * <li class="ui-drawer-main-list" id="mainItem1"><a href="#">List item 1</a></li> - * <li class="ui-drawer-main-list" id="mainItem2"><a href="#">List item 2</a></li> - * <li class="ui-drawer-sub-list" id="subItem1"><a href="#">Sub item 1</a></li> - * </ul> - * </div> - * </div> - * - * ####Positioning Drawer right - * - * To position Drawer right set data-position attribute to "right". - * - * @example - * <!-- Widget structure --> - * <div class="ui-page"> - * <div data-role="drawer" data-position="right" id="drawer"> - * <ul data-role="listview"> - * <li class="ui-drawer-main-list" id="mainItem1"><a href="#">List item 1</a></li> - * <li class="ui-drawer-main-list" id="mainItem2"><a href="#">List item 2</a></li> - * <li class="ui-drawer-sub-list" id="subItem1"><a href="#">Sub item 1</a></li> - * </ul> - * </div> - * </div> - * * ## Screen resolution * - * Default TV resolution is 1920x1080. TV profile uses *vw* and *vh* as way of measuring widgets in CSS. - * They represent percentages of the browser viewport’s width and height. - * 1vw = 1/100 of the current viewport width, i.e. 1% of the width. For example *width: 100vw* is full screen width. For default TV resolution is 1920px. - * 15vh = 15/100 of the viewport’s current height or 15% of the height. - * - * @example - * textarea { - * height: 6.09374999961vw; - * font-size: 1.66666666656vw; - * width: 3.02083333314vw; - * } - * * ##Colors * - * Every widget defines its own set of colors. - * - * ###Button colors - * - * Normal button color: rgb(211, 211, 211) - * Focused button color: rgb(69, 143, 255) - * Button text color: rgb(89, 89, 89) - * Focused button text color: gb(255, 255, 255) - * Icon button color: rgb(255, 255, 255) - * - * ###Checkboxradio colors - * - * Default color: rgb(255, 255, 255) - * - * ###Drawer - * - * Close button background color: rgb(69, 143, 255); - * Drawer buttons color rgb(255, 255, 255) - * Divider color: rgb(42, 50, 64) - * Divider border color: rgb(6, 8, 11) - * Divider buttons color: rgb(211, 211, 211) - * Footer background color: rgb(45, 45, 45) - * - * ###VirtualGrid colors - * - * Button text color: rgb(211, 211, 211) - * Thumbnail background color: rgb(33, 36, 13) - * Thumbnail color: rgb(211, 211, 211) - * - * ###Inputs - * - * Input background color: rgb(255, 255, 255) - * Input text color: rgba(61, 61, 61, 0.5) - * Focused input text color: rgb(61, 61, 61) - * Number input text color: rgb(69, 143, 255) - * Focused number input text color: rgb(255, 255, 255) - * Focused number input background color: rgb(69, 143, 255) - * - * ###Listview - * - * Focused button text color rgb(255, 255, 255) - * Disabled list item text color: rgb(51, 51, 51) - * List background color: rgb(255, 255, 255) - * List subcategory text color: rgb(189, 167, 146) - * List radio/checkbox label color: rgb(89, 89, 89) - * - * ###Popup - * - * Popup title text color: rgb(255, 255, 255) - * Popup background color: rgb(255, 255, 255) - * Popup border color rgb(128, 72, 0) - * Popup header background color: rgb(42,76,130) - * Popup header border color: rgb(67, 67, 67) - * Popup button background color: rgb(72, 65, 60) - * Popup focused button background color: rgb(99, 93, 89) - * Popup text color: rgb(61, 61, 61) - * - * ###Progress - * - * Progress color: rgb(51, 67, 83) - * Progress value color: rgb(65, 91, 254) - * Progress shadow color: rgb(116, 113, 127) - * - * ###Listdivider - * - * Listdivider text color: rgb(66, 87, 144) - * Listdivider line background color: rgb(66, 87, 144) - * * ##Typography * - * This paragraph describes fonts used in TV profile. - * - * ###Font size - * - * TV profile set @font_size_default as 17px. Html font-size is set by WRT base font-size - * Default font size (base font from WRT) - * + small: 13px - * + normal: 17px - * + large: 20px - * - * ####Font family - * - * Tizen, Samsung Sans, Helvetica; - * * @page ns.page.designElements * @seeMore introduction.htm Design guide */ diff --git a/tau/src/js/profile/tv/page/design/introduction.js b/tau/src/js/profile/tv/page/design/introduction.js index a3fc876e..c0ccd24d 100644 --- a/tau/src/js/profile/tv/page/design/introduction.js +++ b/tau/src/js/profile/tv/page/design/introduction.js @@ -1,17 +1,6 @@ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Design diff --git a/tau/src/js/profile/tv/page/design/navigation.js b/tau/src/js/profile/tv/page/design/navigation.js index 060338de..edd17425 100644 --- a/tau/src/js/profile/tv/page/design/navigation.js +++ b/tau/src/js/profile/tv/page/design/navigation.js @@ -1,95 +1,21 @@ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Navigation * - * In TV profile good navigation design is very important. User utilizes remote - * for navigation and can move only to neighborhood's elements. Remote control - * key are homogeneous with keyboard keys. - * - * All provided TV widgets are suited with proper navigation mechanism. + * In TV profile good navigation design is very important. User utilises remote + * for navigation and can move only to neighborhood's elements. * * ##Standard navigation * - * Standard navigation utilizes directional keys for moving focus around and - * OK (Enter on keyboard) for activating widget. - * - * Mechanism finds the closest focusable neighbor by checking element offset. - * When new distinct element is found the current widget is blurred and the new - * one is focused. - * * ###Navigation inside page * - * Standard page utilizes standard navigation settings. - * * ###Navigation inside popup * - * Popup works in two modes: - * - * ####Popup without controls - * - * Should popup have no focusable elements it is shown. It becomes blurred after - * another key is pressed. - * - * ####Popup with selectable elements - * - * Should popup contain selectable elements keyboard support is enabled on - * popup. Second action is disabling keyboard support on popup-invoking page. - * A this point if autoFocus attribute is set on popup the first element in it - * will be focused (otherwise it will be done with first user action). - * * ##Defining own navigation * - * One can define custom navigation for app or widget. - * If You create new widget just omit the following part in constructor: - * - * @example - * Slider = function () { - * //(...) - * BaseKeyboardSupport.call(self); //omit this line - * //(...) - * } - * - * When using existing widgets you must first turn off the default - * navigation code and handle it with your own code. The following - * example shows turning of default navigation for using left/right - * directions to adjust slider value. - * - * @example - * function onKeyup(self, event) { - * var status = self.status; - * if (event.keyCode === KEY_CODES.enter) { - * if (status) { - * self._ui.container.focus(); - * self._pageWidget.enableKeyboardSupport(); - * } else { - * self._ui.handle.focus(); - * showPopup(self); - * self._pageWidget.disableKeyboardSupport(); - * } - * self.status = !status; - * } - * } - * function onKeydown(self, event) { - * if (event.keyCode !== KEY_CODES.enter && !self.status) { - * event.preventDefault(); - * event.stopPropagation(); - * } - * } - * * @page ns.page.designNavigation * @seeMore introduction.htm Design guide - */
\ No newline at end of file + */ diff --git a/tau/src/js/profile/tv/page/design/page.js b/tau/src/js/profile/tv/page/design/page.js index 81977964..dfb766ca 100644 --- a/tau/src/js/profile/tv/page/design/page.js +++ b/tau/src/js/profile/tv/page/design/page.js @@ -1,17 +1,6 @@ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * # Pages diff --git a/tau/src/js/profile/tv/page/differences/introduction.js b/tau/src/js/profile/tv/page/differences/introduction.js index 2a59e692..a527cbb7 100644 --- a/tau/src/js/profile/tv/page/differences/introduction.js +++ b/tau/src/js/profile/tv/page/differences/introduction.js @@ -1,17 +1,6 @@ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Differences in comparison with wearable or mobile profile diff --git a/tau/src/js/profile/tv/router/route/dynamic.js b/tau/src/js/profile/tv/router/route/dynamic.js index c82ae5d3..3f0a96c3 100644 --- a/tau/src/js/profile/tv/router/route/dynamic.js +++ b/tau/src/js/profile/tv/router/route/dynamic.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Route dynamic @@ -101,7 +90,7 @@ /** * Tries to find a popup element matching id and filter (selector). - * Adds data url attribute to found page, sets page = null when nothing found. + * Adds data url attribute to found page, sets page = null when nothing found * @method findPopupAndSetDataUrl * @param {string} id * @param {string} filter @@ -111,14 +100,10 @@ * @static */ function findPopupAndSetDataUrl(id, filter) { - var popup, - hashReg = /^#/; - - id = id.replace(hashReg,''); - popup = document.getElementById(id); + var popup = document.getElementById(path.hashToSelector(id)); if (popup && utilSelector.matchesSelector(popup, filter)) { - DOM.setNSData(popup, 'url', '#' + id); + DOM.setNSData(popup, "url", id); } else { // if we matched any element, but it doesn't match our filter // reset page to null diff --git a/tau/src/js/profile/tv/tv.js b/tau/src/js/profile/tv/tv.js index a1be63f6..9b5243ff 100644 --- a/tau/src/js/profile/tv/tv.js +++ b/tau/src/js/profile/tv/tv.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * # TV Widget Reference diff --git a/tau/src/js/profile/tv/widget/BaseKeyboardSupport.js b/tau/src/js/profile/tv/widget/BaseKeyboardSupport.js index 50c573f7..7251e802 100644 --- a/tau/src/js/profile/tv/widget/BaseKeyboardSupport.js +++ b/tau/src/js/profile/tv/widget/BaseKeyboardSupport.js @@ -1,18 +1,7 @@ /*global window, define, ns, HTMLElement */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Keyboard Support for TV Widgets @@ -26,12 +15,8 @@ [ "../tv", "../../../core/engine", - "../../../core/event", "../../../core/util/object", - "../../../core/util/array", - "../../../core/util/selectors", - "../../../core/util/DOM/css", - "../../../core/widget/BaseWidget" + "../../../core/util/DOM/css" ], function () { @@ -39,42 +24,26 @@ var engine = ns.engine, DOM = ns.util.DOM, object = ns.util.object, - utilArray = ns.util.array, - eventUtils = ns.event, - selectorUtils = ns.util.selectors, - atan2 = Math.atan2, - keyIsPressed = false, - PI = Math.PI, BaseKeyboardSupport = function () { - var self = this; - - object.merge(self, prototype); + object.merge(this, prototype); // prepare selector if (selectorsString === "") { prepareSelector(); } - this._onKeyupHandler = null; - this._onClickHandler = null; - this._focusedElement = null; - // time of keydown event - self.keydownEventTimeStart = null; // [ms] - // flag for keydown event - self.keydownEventRepeated = false; }, prototype = { _supportKeyboard: false }, classes = { focusDisabled: "ui-focus-disabled", - focusEnabled: "ui-focus-enabled" + focusEnabled: "ui-focus-enabled", }, KEY_CODES = { left: 37, up: 38, right: 39, down: 40, - enter: 13, - tab: 9 + enter: 13 }, EVENT_POSITION = { up: "up", @@ -82,39 +51,20 @@ left: "left", right: "right" }, - selectorSuffix = ":not(." + classes.focusDisabled + ")" + - ":not(." + ns.widget.BaseWidget.classes.disable + ")", - // define standard focus selectors - // includeDisabled: false - disabled element will be not focusable - // includeDisabled: true - disabled element will be focusable - // count - number of defined selectors - selectors = [{ - value: "a", - includeDisabled: false, - count: 1 - }, { - value: "." + classes.focusEnabled, - includeDisabled: false, - count: 1 - }, { - value: "[tabindex]", - includeDisabled: false, - count: 1 - }], + selectorSuffix = ":not(." + classes.focusDisabled + ")", + selectors = ["a", "." + classes.focusEnabled, "[tabindex]"], selectorsString = "", /** * @property {Array} Array containing number of registrations of each selector * @member ns.widget.tv.BaseKeyboardSupport * @private */ - currentKeyboardWidget, - previousKeyboardWidgets = [], - ANIMATION_MIN_TIME = 50; + REF_COUNTERS = [1, 1, 1]; BaseKeyboardSupport.KEY_CODES = KEY_CODES; BaseKeyboardSupport.classes = classes; /** - * Get focused element. + * Get focussed element. * @method getFocusedLink * @returns {HTMLElement} * @private @@ -159,96 +109,36 @@ * @member ns.widget.tv.BaseKeyboardSupport */ function prepareSelector() { - var length = selectors.length; - selectorsString = ""; - utilArray.forEach(selectors, function(object, index){ - selectorsString += object.value; - if (!object.includeDisabled) { - selectorsString += selectorSuffix; - } - if (index < length - 1) { - selectorsString += ","; - } - }); + selectorsString = selectors.join(selectorSuffix + ",") + selectorSuffix; } prototype.getActiveSelector = function() { return selectorsString; }; - - /** - * Returns angle between two elements - * @method getRelativeAngle - * @private - * @member ns.widget.tv.BaseKeyboardSupport - * @param {HTMLElement} context - * @param {HTMLElement} referenceElement - * @return {number} - */ - function getRelativeAngle(context, referenceElement) { - var contextRect = context.getBoundingClientRect(), - referenceRect = referenceElement.getBoundingClientRect(); - return atan2(contextRect.top - referenceRect.top, contextRect.left - referenceRect.left) * 180 / PI; - } - - /** - * Returns direction from angle - * @method getDirectionFromAngle - * @private - * @member ns.widget.tv.BaseKeyboardSupport - * @param {number} angle - * @return {string} - */ - function getDirectionFromAngle(angle) { - var a = Math.abs(angle); - if (a >= 0 && a < 45) { // motion right - return EVENT_POSITION.right; - } - - if (a > 135 && a <= 180) { // motion left - return EVENT_POSITION.left; - } - - if (angle < 0) { // negative is motion up - return EVENT_POSITION.up; - } - - return EVENT_POSITION.down; - } - /** * Calculates neighborhood links. - * @method getNeighborhoodLinks - * @param {HTMLElement} element Base element fo find links - * @param {HTMLElement} [currentElement] current focused element - * @param {Object} [options] Options for function - * @param {Function} [options._filterNeighbors] Function used to filtering focusable elements - * @param {"top"|"right"|"bottom"|"left"} [options.direction] direction + * @method _getNeighborhoodLinks * @returns {Object} - * @private - * @static + * @protected * @member ns.widget.tv.BaseKeyboardSupport */ - function getNeighborhoodLinks(element, currentElement, options) { - var offset = DOM.getElementOffset, - links = getFocusableElements(element), - direction = options.direction, - currentLink = currentElement || getFocusedLink(), - customFocus = (currentLink && fetchCustomFocusElement(currentLink, direction, element)), - filterNeighbors = options._filterNeighbors, + prototype._getNeighborhoodLinks = function() { + var self = this, + offset = DOM.getElementOffset, + links = getFocusableElements(self.element), + currentLink = getFocusedLink(), currentLinkOffset, - linksOffset = []; - - if (customFocus) { - return [customFocus]; - } - - if (currentLink && currentLink !== document.body) { + left, + top, + right, + bottom, + linksOffset = [], + result; + + if (currentLink) { currentLinkOffset = offset(currentLink); - linksOffset = links.filter(function(link) { - return link !== currentLink; - }).map(function (link) { + linksOffset = links.map(function (link) { var linkOffset = offset(link), differentX = Math.abs(currentLinkOffset.left - linkOffset.left), differentY = Math.abs(currentLinkOffset.top - linkOffset.top), @@ -263,215 +153,57 @@ xyProportion: xyProportion }; }); - - switch (direction) { - case "up": - return linksOffset.filter(function (linkOffset) { - // filter only element upper in compare with current element - return filterNeighbors ? filterNeighbors("top", linkOffset, currentLink, currentLinkOffset) : (linkOffset.offset.top < currentLinkOffset.top); - }).sort(function (linkOffset1, linkOffset2) { - // sort elements - return (linkOffset1.differentX === linkOffset2.differentX) ? - // if elements have the same top position then on a - // top of list will be element with - ((linkOffset1.offset.top === linkOffset2.offset.top) ? 0 : - (linkOffset1.offset.top > linkOffset2.offset.top ? -1 : 1)) : - (linkOffset1.differentX < linkOffset2.differentX ? -1 : 1) - // sort elements, elements with shortest distance are on top of list - ; - }).map(mapToElement); - case "right": - return linksOffset.filter(function (linkOffset) { - return filterNeighbors ? filterNeighbors("right", linkOffset, currentLink, currentLinkOffset) :(linkOffset.offset.left > currentLinkOffset.left ); - }).sort(function (linkOffset1, linkOffset2) { - return (linkOffset1.differentY === linkOffset2.differentY) ? - (linkOffset1.offset.left === linkOffset2.offset.left ? 0 : - (linkOffset1.offset.left < linkOffset2.offset.left ? -1 : 1)) : - (linkOffset1.differentY < linkOffset2.differentY ? -1 : 1) - ; - }).map(mapToElement); - case "down": - return linksOffset.filter(function (linkOffset) { - return filterNeighbors ? filterNeighbors("bottom", linkOffset, currentLink, currentLinkOffset) : (linkOffset.offset.top > currentLinkOffset.top); - }).sort(function (linkOffset1, linkOffset2) { - return (linkOffset1.differentX === linkOffset2.differentX) ? - (linkOffset1.offset.top === linkOffset2.offset.top ? 0 : - (linkOffset1.offset.top < linkOffset2.offset.top ? -1 : 1)) : - (linkOffset1.differentX < linkOffset2.differentX ? -1 : 1) - ; - }).map(mapToElement); - default: - return linksOffset.filter(function (linkOffset) { - return filterNeighbors ? filterNeighbors("left", linkOffset, currentLink, currentLinkOffset) : (linkOffset.offset.left < currentLinkOffset.left); - }).sort(function (linkOffset1, linkOffset2) { - return (linkOffset1.differentY === linkOffset2.differentY) ? - ((linkOffset1.offset.left === linkOffset2.offset.left) ? 0 : - (linkOffset1.offset.left > linkOffset2.offset.left ? -1 : 1)) : - (linkOffset1.differentY < linkOffset2.differentY ? -1 : 1) - ; - }).map(mapToElement); - } - } - linksOffset = utilArray.map(links, function (link) { - var linkOffset = offset(link); - return { - offset: linkOffset, - element: link, - width: link.offsetWidth, - height: link.offsetHeight - }; - }); - return utilArray.map(linksOffset.sort(function (linkOffset1, linkOffset2) { - // sort elements - return ((linkOffset1.offset.top === linkOffset2.offset.top) ? (linkOffset1.offset.left < linkOffset2.offset.left ? -1 : 1 ) : - (linkOffset1.offset.top < linkOffset2.offset.top ? -1 : 1)) - // sort elements, elements with shortest distance are on top of list - ; - }), mapToElement); - } - - /** - * Method trying to focus on widget or on HTMLElement and blur on active element or widget. - * @method focusOnElement - * @param {?ns.widget.BaseWidget} self - * @param {HTMLElement} element - * @param {Object} [options] - * @return {boolean} Return true if focus finished success - * @static - * @private - * @memberof ns.widget.tv.BaseKeyboardSupport - */ - function focusOnElement(self, element, options) { - var setFocus, - currentElement = (self && self._focusedElement) || getFocusedLink(), - nextElementWidget, - currentWidget; - - options = options || {}; - nextElementWidget = engine.getBinding(element); - - if (nextElementWidget) { - // we call function focus if the element is connected with widget - options.previousElement = currentElement; - setFocus = nextElementWidget.focus(options); - } else { - // or only set focus on element - element.focus(); - options.element = element; - eventUtils.trigger(document, "taufocus", options); - // and blur the previous one - if (currentElement) { - currentWidget = engine.getBinding(currentElement); - if (currentWidget) { - currentWidget.blur(options); - } else { - currentElement.blur(); - options.element = currentElement; - eventUtils.trigger(document, "taublur", options); - } - } - setFocus = true; - } - - if (self) { - self._focusedElement = element; - if (self._openActiveElement) { - self._openActiveElement(element); - } - } - - return setFocus; - } - - function fetchCustomFocusElement(element, direction, queryContext) { - var selector = element.getAttribute("data-focus-" + direction), - eventData = { - selector: selector, - direction: direction, - currentElement: element, - nextElement: null - }, - useQueryContext = element.getAttribute("data-focus-container-context") === "true", - customQueryContextSelector = element.getAttribute("data-focus-context"); - - if (selector) { - // notify observers about custom query for focus element - // observers can catch the event and choose their own elements - // this supports customSelectors like ::virtualgrid-* which - // is implemented in virtualgrid, if the event was not consumed - // assume normal selector - if (eventUtils.trigger(element, "focusquery", eventData, true, true)) { - if (useQueryContext) { - if (customQueryContextSelector) { - queryContext = document.querySelector(customQueryContextSelector); - } - if (queryContext) { - return queryContext.parentNode.querySelector(selector); - } - } - return element.parentNode.querySelector(selector); - } - // if some code managed to fill nextElement use it - if (eventData.nextElement) { - return eventData.nextElement; - } - } - - return null; - } - - function focusOnNeighborhood(self, element, options, currentElement) { - var positionFrom = "", - nextElements = [], - nextElement, - nextNumber = 0, - setFocus = false; - - switch (options.direction) { - case KEY_CODES.left: - positionFrom = EVENT_POSITION.left; - break; - case KEY_CODES.up: - positionFrom = EVENT_POSITION.up; - break; - case KEY_CODES.right: - positionFrom = EVENT_POSITION.right; - break; - case KEY_CODES.down: - positionFrom = EVENT_POSITION.down; - break; - default: - return; - } - options.direction = positionFrom; - nextElement = fetchCustomFocusElement(element, positionFrom); - if (!nextElement) { - nextElements = getNeighborhoodLinks(element, currentElement, options); - nextElement = nextElements[nextNumber]; - } - - options.direction = positionFrom; - - if (options._last) { - // we are looking for element to focus from the farthest to the nearest - nextNumber = nextElements.length - 1; - nextElement = nextElements[nextNumber]; - while (nextElement && !setFocus) { - // if element to focus is found - setFocus = focusOnElement(self, nextElement, options); - nextElement = nextElements[--nextNumber]; - } + top = linksOffset.filter(function (linkOffset) { + // filter only element upper in compare with current element + return (linkOffset.offset.top < currentLinkOffset.top); + }).sort(function (linkOffset1, linkOffset2) { + // sort elements + return (linkOffset1.differentX === linkOffset2.differentX) ? + // if elements have the same top position then on a + // top of list will be element with + (linkOffset1.offset.top > linkOffset2.offset.top ? -1 : 1) : + (linkOffset1.differentX < linkOffset2.differentX ? -1 : 1) + // sort elements, elements with shortest distance are on top of list + ; + }).map(mapToElement); + top = top[0]; + bottom = linksOffset.filter(function (linkOffset) { + return (linkOffset.offset.top > currentLinkOffset.top); + }).sort(function (linkOffset1, linkOffset2) { + return (linkOffset1.differentX === linkOffset2.differentX) ? + (linkOffset1.offset.top < linkOffset2.offset.top ? -1 : 1) : + (linkOffset1.differentX < linkOffset2.differentX ? -1 : 1) + ; + }); + bottom = bottom.map(mapToElement)[0]; + left = linksOffset.filter(function (linkOffset) { + return (linkOffset.offset.left < currentLinkOffset.left); + }).sort(function (linkOffset1, linkOffset2) { + return (linkOffset1.differentY === linkOffset2.differentY) ? + (linkOffset1.offset.left > linkOffset2.offset.left ? -1 : 1) : + (linkOffset1.differentY < linkOffset2.differentY ? -1 : 1) + ; + }).map(mapToElement)[0]; + right = linksOffset.filter(function (linkOffset) { + return (linkOffset.offset.left > currentLinkOffset.left ); + }).sort(function (linkOffset1, linkOffset2) { + return (linkOffset1.differentY === linkOffset2.differentY) ? + (linkOffset1.offset.left < linkOffset2.offset.left ? -1 : 1) : + (linkOffset1.differentY < linkOffset2.differentY ? -1 : 1) + ; + }); + right = right.map(mapToElement)[0]; } else { - // we are looking for element to focus from the nearest - nextNumber = 0; - nextElement = nextElements[nextNumber]; - while (nextElement && !setFocus) { - // if element to focus is found - setFocus = focusOnElement(self, nextElement, options); - nextElement = nextElements[++nextNumber]; - } + top = left = right = bottom = links[0]; } - } + result = { + top: top, + left: left, + bottom: bottom, + right: right + }; + return result; + }; /** * Supports keyboard event. @@ -481,184 +213,60 @@ * @member ns.widget.tv.BaseKeyboardSupport */ prototype._onKeyup = function(event) { - var self = this; - if (self._supportKeyboard) { - if (!self.keydownEventRepeated) { - // short press was detected - self._onShortPress(event); - } - self.keydownEventTimeStart = null; - self.keydownEventRepeated = false; - } - }; - - /** - * Mouse click listener - * @method _onClick - * @protected - * @member ns.widget.tv.BaseKeyboardSupport - */ - prototype._onClick = function(event) { var self = this, - target = event.target, - element = null, - currentElement = self._focusedElement, - fromPosition = EVENT_POSITION.down; + keyCode = event.keyCode, + neighborhoodLinks, + currentLink = getFocusedLink(), + currentLinkWidget, + positionFrom, + nextElement, + nextElementWidget; + if (self._supportKeyboard) { - // check matching or find matching parent - element = selectorUtils.matchesSelector(selectorsString, element) - ? target - : null; - // maybe some parent could be focused - if (!element) { - element = selectorUtils.getClosestBySelector(target, selectorsString); + neighborhoodLinks = self._getNeighborhoodLinks(); + switch (keyCode) { + case KEY_CODES.left: + nextElement = neighborhoodLinks.left; + positionFrom = EVENT_POSITION.left; + break; + case KEY_CODES.up: + nextElement = neighborhoodLinks.top; + positionFrom = EVENT_POSITION.up; + break; + case KEY_CODES.right: + nextElement = neighborhoodLinks.right; + positionFrom = EVENT_POSITION.right; + break; + case KEY_CODES.down: + nextElement = neighborhoodLinks.bottom; + positionFrom = EVENT_POSITION.down; + break; } - if (element) { - if (currentElement) { - fromPosition = getDirectionFromAngle( - getRelativeAngle(element, currentElement) - ); + // if element to focus is found + if (nextElement) { + nextElementWidget = engine.getBinding(nextElement); + if (nextElementWidget) { + // we call function focus if the element is connected with widget + nextElementWidget._focus(positionFrom); + } else { + // or only set focus on element + nextElement.focus(); } - focusOnElement(self, element, fromPosition); - } - } - }; - - /** - * This function is used as a filtering function in function getNeighborhoodLinks. - * @method _onKeyup - * @param {String} direction - * @param {Object} filteredElement Infomation about element, which is being already filtered. - * @param {HTMLElement} element Current element - * @param {Object} [elementOffset] Offset of current element - * @private - * @static - * @member ns.widget.tv.BaseKeyboardSupport - */ - function filterNeighbors(direction, filteredElement, element, elementOffset) { - var filteredElementOffset = filteredElement.offset, - filteredElementHeight = filteredElement.height, - filteredElementWidth = filteredElement.width, - elementHeight = element.offsetHeight, - elementWidth = element.offsetWidth; - elementOffset = elementOffset || DOM.getElementOffset(element); - - switch (direction) { - case "top": - // we are looking for elements, which are above the current element, but - // only in the same column - if (elementOffset.left >= filteredElementOffset.left + filteredElementWidth || - elementOffset.left + elementWidth <= filteredElementOffset.left) { - // if element is on the right or on the left of the current element, - // we remove it from the set - return false; - } - return filteredElementOffset.top < elementOffset.top; - case "bottom": - // we are looking for elements, which are under the current element, but - // only in the same column - if (elementOffset.left >= filteredElementOffset.left + filteredElementWidth || - elementOffset.left + elementWidth <= filteredElementOffset.left) { - return false; - } - return filteredElementOffset.top > elementOffset.top; - case "left": - // we are looking for elements, which are on the left of the current element, but - // only in the same row - if (elementOffset.top >= filteredElementOffset.top + filteredElementHeight || - elementOffset.top + elementHeight <= filteredElementOffset.top) { - return false; - } - return filteredElementOffset.left < elementOffset.left; - case "right": - // we are looking for elements, which are ont the right of the current element, but - // only in the same row - if (elementOffset.top >= filteredElementOffset.top + filteredElementHeight || - elementOffset.top + elementHeight <= filteredElementOffset.top) { - return false; + // and remove focus from previous element if it is possible + if (currentLink) { + currentLinkWidget = engine.getBinding(currentLink); + if (currentLinkWidget) { + currentLinkWidget._blur(positionFrom); + } else { + currentLink.blur(); + } } - return filteredElementOffset.left > elementOffset.left; - } - } - - /** - * Supports keyboard long press event. - * It is called on keydown event, when the long press was not detected. - * @method _onLongPress - * @param {Event} event - * @protected - * @member ns.widget.tv.BaseKeyboardSupport - */ - prototype._onLongPress = function(event) { - var self = this, - delay = ns.getConfig("keyboardLongpressInterval", 100), - options = { - direction: event.keyCode, - // it is repeated event, so we make animation shorter - duration: ((delay - 30) >= ANIMATION_MIN_TIME ? delay - 30 : ANIMATION_MIN_TIME), - _last: true, // option for function focusOnNeighborhood - _filterNeighbors: filterNeighbors // option for function getNeighborhoodLinks - }; - - // set focus on next element - focusOnNeighborhood(self, self.keyboardElement || self.element, options); - }; - - /** - * Supports keyboard short press event. - * It is called on keyup event, when the long press was not detected. - * @method _onShortPress - * @param {Event} event - * @protected - * @member ns.widget.tv.BaseKeyboardSupport - */ - prototype._onShortPress = function(event) { - var self = this; - // set focus on next element - focusOnNeighborhood(self, self.keyboardElement || self.element, { - direction: event.keyCode - }); - }; - - /** - * Supports keyboard event. - * @method _onKeydown - * @param {Event} event - * @protected - * @member ns.widget.tv.BaseKeyboardSupport - */ - prototype._onKeydown = function(event) { - var self = this, - delay = ns.getConfig("keyboardLongpressInterval", 100), - currentTime; - - // if widget supports keyboard's events - if (self._supportKeyboard) { - // stop scrolling - event.preventDefault(); - event.stopPropagation(); - - currentTime = (new Date()).getTime(); - // we check if it is a single event or repeated one - // @note: On TV property .repeat for event is not available, so we have to count time - // between events - if (!self.keydownEventTimeStart || (currentTime - self.keydownEventTimeStart > delay)) { - // stop scrolling - //event.preventDefault(); - //event.stopPropagation(); - // set that this is a long press - keyIsPressed = true; - - // if it is repeated event, we make animation shorter - if (self.keydownEventTimeStart) { - // long press was detected - self._onLongPress(event); - self.keydownEventRepeated = true; + if (self._openActiveElement) { + self._openActiveElement(nextElement); } - self.keydownEventTimeStart = currentTime; } } }; @@ -673,27 +281,8 @@ */ prototype._bindEventKey = function() { var self = this; - if (!self._onKeyupHandler) { - self._onKeyupHandler = self._onKeyup.bind(self); - self._onKeydownHandler = self._onKeydown.bind(self); - document.addEventListener("keyup", self._onKeyupHandler, false); - document.addEventListener("keydown", self._onKeydownHandler, false); - } - }; - - /** - * Adds support for mouse events - * @method _bindEventMouse - * @protected - * @member ns.widget.tv.BaseKeyboardSupport - */ - prototype._bindEventMouse = function () { - var self = this; - if (!self._onClickHandler) { - self._onClickHandler = self._onClick.bind(self); - //we resign from virtual events because of problems with enter event - document.addEventListener("mousedown", self._onClickHandler, false); - } + self._onKeyupHandler = self._onKeyup.bind(self); + document.addEventListener("keyup", self._onKeyupHandler, false); }; /** @@ -705,23 +294,7 @@ * @member ns.widget.tv.BaseKeyboardSupport */ prototype._destroyEventKey = function() { - if (this._onKeyupHandler) { - document.removeEventListener("keyup", this._onKeyupHandler, false); - document.removeEventListener("keydown", this._onKeydownHandler, false); - } - }; - - /** - * Removes support for mouse events - * @method _destroyEventMouse - * @protected - * @member ns.widget.tv.BaseKeyboardSupport - */ - prototype._destroyEventMouse = function () { - if (this._onClickHandler) { - //we resign from virtual events because of problems with enter event - document.removeEventListener("mousedown", this._onClickHandler, false); - } + document.removeEventListener("keyup", this._onKeyupHandler, false); }; /** @@ -731,12 +304,12 @@ * @member ns.widget.tv.BaseKeyboardSupport */ BaseKeyboardSupport.blurAll = function() { - var focusedElement = this._focusedElement || getFocusedLink(), + var focusedElement = getFocusedLink(), focusedElementWidget = focusedElement && engine.getBinding(focusedElement); if (focusedElementWidget) { // call blur on widget - focusedElementWidget.blur(); + focusedElementWidget._blur(); } else if (focusedElement) { // or call blur on element focusedElement.blur(); @@ -745,40 +318,29 @@ /** * Focuses on element. - * @method focusElement + * @method focus * @param {HTMLElement} [element] widget's element - * @param {?HTMLElement|number|boolean|string} [elementToFocus] element to focus - * @param {Object} [options] + * @param {?HTMLElement|number|boolean} [elementToFocus] element to focus * @static * @member ns.widget.tv.BaseKeyboardSupport */ - BaseKeyboardSupport.focusElement = function(element, elementToFocus, options) { - var links, - linksLength, + BaseKeyboardSupport.focusElement = function(element, elementToFocus) { + var links = getFocusableElements(element), + linksLength = links.length, i; - - options = options || {}; - if (elementToFocus instanceof HTMLElement) { - links = getFocusableElements(element); - linksLength = links.length; for (i = 0; i < linksLength; i++) { if (links[i] === elementToFocus) { elementToFocus.focus(); } } } else if (typeof elementToFocus === "number") { - links = getFocusableElements(element); if (links[elementToFocus]) { - focusOnElement(null, links[elementToFocus], options); + links[elementToFocus].focus(); } - } else if (typeof elementToFocus === "string" && KEY_CODES[elementToFocus]) { - options.direction = KEY_CODES[elementToFocus]; - focusOnNeighborhood(null, element, options); } else { - links = getFocusableElements(element); if (links[0]) { - focusOnElement(null, links[0], options); + links[0].focus(); } } }; @@ -790,19 +352,6 @@ */ prototype.enableKeyboardSupport = function() { this._supportKeyboard = true; - currentKeyboardWidget = this; - }; - - /** - * Enables keyboard support on widget. - * @method disableKeyboardSupport - * @member ns.widget.tv.BaseKeyboardSupport - */ - prototype.restoreKeyboardSupport = function() { - var previousKeyboardWidget = previousKeyboardWidgets.pop(); - if (previousKeyboardWidget) { - previousKeyboardWidget.enableKeyboardSupport(); - } }; /** @@ -811,71 +360,32 @@ * @member ns.widget.tv.BaseKeyboardSupport */ prototype.disableKeyboardSupport = function() { - currentKeyboardWidget = null; this._supportKeyboard = false; }; /** - * Disables keyboard support on widget. - * @method disableKeyboardSupport - * @member ns.widget.tv.BaseKeyboardSupport - */ - prototype.saveKeyboardSupport = function() { - if (currentKeyboardWidget) { - previousKeyboardWidgets.push(currentKeyboardWidget); - currentKeyboardWidget.disableKeyboardSupport(); - } - }; - - /** - * Convert selector object to string - * @method getValueOfSelector - * @param {Object} selectorObject - * @static - * @private - * @return {string} - * @member ns.widget.tv.BaseKeyboardSupport - */ - function getValueOfSelector(selectorObject){ - return selectorObject.value; - } - - /** - * Find index in selectors array for given selector - * @method findSelectorIndex - * @param {string} selector - * @static - * @private - * @member ns.widget.tv.BaseKeyboardSupport - */ - function findSelectorIndex(selector) { - return utilArray.map(selectors, getValueOfSelector).indexOf(selector); - } - /** * Registers an active selector. * @param {string} selector - * @param {boolean} includeDisabled * @method registerActiveSelector * @static * @member ns.widget.tv.BaseKeyboardSupport */ - BaseKeyboardSupport.registerActiveSelector = function (selector, includeDisabled) { + BaseKeyboardSupport.registerActiveSelector = function (selector) { var selectorArray = selector.split(","), index; - utilArray.forEach(selectorArray, function(currentSelector){ + selectorArray.forEach(function(currentSelector){ currentSelector = currentSelector.trim(); - index = findSelectorIndex(currentSelector); + index = selectors.indexOf(currentSelector); // check if not registered yet if (index === -1) { - selectors.push({ - value: currentSelector, - includeDisabled: includeDisabled, - count: 1 - }); + selectors.push(currentSelector); + // new selector - create reference counter for it + REF_COUNTERS.push(1); } else { - selectors[index].count++; + // such a selector exist - increment reference counter + ++REF_COUNTERS[index]; } }); @@ -883,7 +393,7 @@ }; /** - * Unregister an active selector. + * Unregisters an active selector. * @param {string} selector * @method unregisterActiveSelector * @static @@ -893,16 +403,17 @@ var selectorArray = selector.split(","), index; - utilArray.forEach(selectorArray, function(currentSelector){ + selectorArray.forEach(function(currentSelector){ currentSelector = currentSelector.trim(); - index = findSelectorIndex(currentSelector); + index = selectors.indexOf(currentSelector); if (index !== -1) { - --selectors[index].count; + --REF_COUNTERS[index]; // check reference counter - if (selectors[index].count === 0) { + if (REF_COUNTERS[index] === 0) { // remove selector selectors.splice(index, 1); + REF_COUNTERS.splice(index, 1); } } }); diff --git a/tau/src/js/profile/tv/widget/Button.js b/tau/src/js/profile/tv/widget/Button.js index e3c1e038..53123944 100644 --- a/tau/src/js/profile/tv/widget/Button.js +++ b/tau/src/js/profile/tv/widget/Button.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** @@ -22,7 +11,6 @@ * @class ns.widget.tv.Button * @extends ns.widget.mobile.Button * @author Piotr Czajka <p.czajka@samsung.com> - * @author Maciej Urbanski m.urbanski@samsung.com */ (function (document, ns) { "use strict"; @@ -32,10 +20,8 @@ "../../../profile/mobile/widget/mobile/Button", "../../../core/engine", "../../../core/util/selectors", - "../../../core/event", "../../../core/theme", "../../../core/util/object", - "../../../core/util/DOM/css", "../tv", "./BaseKeyboardSupport" ], @@ -44,25 +30,14 @@ var BaseButton = ns.widget.mobile.Button, BaseButtonPrototype = BaseButton.prototype, BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, - utils = ns.util, - setPrefixedStyle = utils.DOM.setPrefixedStyle, - getPrefixedStyleValue = utils.DOM.getPrefixedStyleValue, - utilEvent = ns.event, - objectUtils = utils.object, - selectorsUtils = utils.selectors, + objectUtils = ns.util.object, FUNCTION_TYPE = "function", Button = function () { - var self = this; - BaseButton.call(self); - BaseKeyboardSupport.call(self); - self._callbacks = {}; + BaseButton.call(this); + BaseKeyboardSupport.call(this); + this._callbacks = {}; }, engine = ns.engine, - selectors = { - footer: "footer", - icon: "img.ui-li-dynamic-icon-src", - thumb: "img.ui-thumb-src" - }, classes = objectUtils.merge({}, BaseButton.classes, { background: "ui-background", blur: "ui-blur", @@ -70,305 +45,34 @@ up: "up", down: "down", left: "left", - right: "right", - tooltip: "ui-tooltip", - text: "ui-text", - icon: "ui-li-dynamic-footer-icon", - marquee: "ui-marquee", - thumbnail: "thumb", - textType: "ui-button-text" + right: "right" }), prototype = new BaseButton(); Button.events = BaseButton.events; Button.classes = classes; - Button.selectors = selectors; Button.options = prototype.options; Button.prototype = prototype; Button.hoverDelay = 0; // definition ns.widget.tv.Button = Button; - function setMaskFromIcon(icon) { - var styles, - currentMask, - src = icon.style.getPropertyValue("background-image"); - - if (src) { - styles = window.getComputedStyle(icon); - currentMask = getPrefixedStyleValue(styles, "mask-image"); - if (currentMask) { - currentMask += ", " + src; - } else { - currentMask = src; - } - setPrefixedStyle(icon, "mask-image", currentMask); - } - } - - function setMaskFromImage(iconSource, self) { - var styles, - currentMask = "", - icon, - src; - - src = iconSource.getAttribute("src"); - if (src) { - src = "url('" + src + "')"; - icon = document.createElement("span"); - icon.classList.add(classes.icon); - iconSource.parentNode.replaceChild(icon, iconSource); - - styles = window.getComputedStyle(icon); - currentMask = getPrefixedStyleValue(styles, "mask-image"); - if (currentMask) { - currentMask += ", " + src; - } else { - currentMask = src; - } - setPrefixedStyle(icon, "mask-image", currentMask); - - icon.appendChild(iconSource); - self.ui.icon = icon; - } - } - - function findIcon(element, self) { - var iconSource = element.querySelector(selectors.icon), - icon = self.ui.icon; - - // use icon from data-icon attribute as mask-image - if (icon) { - setMaskFromIcon(icon); - } - // use <img>.src attribute as mask-image - if (iconSource) { - setMaskFromImage(iconSource, self); - } - } - - function findThumbnail(element, self) { - var thumbSource = element.querySelector(selectors.thumb), - parent = element.querySelector("." + classes.uiBtnInner), - styles, - thumb; - - if (thumbSource) { - thumb = document.createElement("div"); - thumb.classList.add(classes.thumbnail); - thumbSource.parentNode.removeChild(thumbSource); - - thumb.style.setProperty( - "background-image", - "url('" + thumbSource.getAttribute("src") + "')" - ); - - parent.appendChild(thumb); - thumb.appendChild(thumbSource); - } - } - - function findIconTitle (element, self) { - var iconTitle = element.querySelector(".ui-icon-title"), - styles, - iconStyle, - ui, - icon, - iconWrapper, - currentMask, - src; - - if (iconTitle) { - ui = self.ui; - icon = ui.icon; - iconStyle = icon.style; - src = icon.style.getPropertyValue("background-image"); - iconWrapper = document.createElement("div"); - iconWrapper.classList.add("ui-icon-wrapper"); - iconWrapper.appendChild(icon); - iconWrapper.appendChild(iconTitle); - ui.inner.appendChild(iconWrapper); - - styles = window.getComputedStyle(icon); - - currentMask = getPrefixedStyleValue(iconStyle, "mask-image"); - if (currentMask) { - currentMask += ", " + src; - } else { - currentMask = src; - } - setPrefixedStyle(icon, "mask-image", currentMask); + prototype._build = function (element) { + var backgroundElement; - iconStyle.setProperty( - "background-image", - "" - ); - } - } - function createBackgroundElement(element) { - var backgroundElement = document.createElement("div"); + element = BaseButtonPrototype._build.call(this, element); + backgroundElement = document.createElement("div"); backgroundElement.classList.add(classes.background); + backgroundElement.id = element.id + "-background"; element.insertBefore(backgroundElement, element.firstChild); - return backgroundElement; - } - - /** - * Builds background of button. - * It is used e.g. for animated focus. - * @method _buildBackground - * @param element Element of widget - * @protected - * @member ns.widget.tv.Button - */ - prototype._buildBackground = function (element) { - var backgroundElement; - if (this.options.background) { - backgroundElement = createBackgroundElement(this.ui.container); - backgroundElement.id = element.id + "-background"; - } - }; - - /** - * Builds footer inside widget. - * If element has a footer, the background for it will be created. - * @method _buildFooter - * @param {HTMLElement} element Element of widget - * @protected - * @member ns.widget.tv.Button - */ - prototype._buildFooter = function (element) { - var footer = selectorsUtils.getChildrenBySelector(element, selectors.footer)[0]; - - if (footer && this.options.background) { - createBackgroundElement(footer); - } - }; - - /** - * Builds wrapper for text nodes - * @method _buildTextNodes - * @param element Element of widget - * @protected - * @member ns.widget.tv.Button - */ - prototype._buildTextNodes = function (element) { - var children = element.childNodes, - length = children.length, - content, - newChild, - child, - i; - if (this.options.marquee) { - for (i = 0; i < length; i++) { - child = children[i]; - // the child is a text - if (child.nodeType === 3) { - // we create span and replace textNode - content = child.textContent.trim(); - if (content.length) { - newChild = document.createElement("span"); - newChild.className = classes.text; - newChild.textContent = content; - // replace element - element.replaceChild(newChild, child); - } - } - } - } - }; - - /** - * Builds widget - * @method _build - * @param {HTMLElement} element Element of widget - * @protected - * @member ns.widget.tv.Button - */ - prototype._build = function (element) { - var self = this, - ui = self.ui; - - // build footer - self._buildFooter(element); - // build text nodes - self._buildTextNodes(element); - // build button - element = BaseButtonPrototype._build.call(self, element); - - // build "Button_text", - // @todo: probably all classes from button should be copied to container - if (element.classList.contains(classes.textType)) { - ui.container.classList.add(classes.textType); - } - - // Mark base element for marquee decorator - ui.buttonText.classList.add(classes.marquee); - // create background element for built button - self._buildBackground(element); - - this._buildTooltip(element); - - findThumbnail(element, this); - findIcon(element, this); - findIconTitle(element, this); return element; }; /** - * Creates popup element and appends it container passed as argument - * @method _createPopup - * @return {ns.widget.Popup} reference to new widget instance - * @protected - * @member ns.widget.tv.Button - */ - prototype._createPopup = function (element) { - var pageElement = selectorsUtils.getClosestByClass(element, "ui-page"), - popup = document.createElement("div"), - options = this.options, - popupInstance; - - // Append popup element to page with slider - // Append popup element to page with slider - pageElement.appendChild(popup); - // Create widget instance out of popup element - popupInstance = engine.instanceWidget(popup, "Popup", { - positionTo: "origin", - link: element, // positioned to button's element - transition: "none", - overlay: false, - arrow: options.tooltipArrow, - distance: 22, - content: options.tooltip, - timeout: options.tooltipTimeout, - changeContext: false - }); - popup.classList.add(classes.tooltip); - - return popupInstance; - }; - - /** - * Build tooltip - * @method _buildTooltip - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.tv.Button - */ - prototype._buildTooltip = function (element) { - var self = this; - - if (self.options.tooltip) { - self._popup = self._createPopup(element); - } - }; - - /** * Initializes widget * @method _init - * @param {HTMLElement} element * @protected * @member ns.widget.tv.Button */ @@ -377,191 +81,70 @@ BaseButtonPrototype._init.call(self, element); - self.ui.background = document.getElementById(self.id + "-background"); - - return element; - }; - /** - * Set configuration for widget widget - * @method _configure - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.Button - */ - prototype._configure = function (element) { - var self = this, - options; - - BaseButtonPrototype._configure.call(self, element); - - options = self.options || {}; - /** - * @property {?string} [options.tooltip=null] Text for tooltip - * @property {?string} [options.tooltipArrow="t,b"] Position of arrow in tooltip - * @property {number} [options.tooltipTimeout=3000] Define timeout for tooltip close - * @property {boolean} [options.marquee=true] Marquee on text in button - * @property {boolean} [options.background=true] add background in button - */ - options.tooltip = null; - options.tooltipArrow = "t,b"; - options.tooltipTimeout = 3000; - options.marquee = true; - options.background = true; - - self.options = options; - + self.ui.background = document.getElementById(element.id + "-background"); return element; }; function animationEndCallback(element) { - var classList = element.classList, - backgrounds = element.querySelectorAll("." + classes.background), - length = backgrounds.length, - style, - i; + var classList = element.classList; - // remove classes classList.remove(classes.blur); classList.remove(classes.blurPrefix + classes.up); classList.remove(classes.blurPrefix + classes.down); classList.remove(classes.blurPrefix + classes.right); classList.remove(classes.blurPrefix + classes.left); - - // remove transition - for (i = 0; i < length; i++) { - style = backgrounds[i].style; - style.webkitTransitionDuration = ""; - style.mozTransitionDuration = ""; - style.oTransitionDuration = ""; - style.msTransitionDuration = ""; - style.transitionDuration = ""; - } - } - - function focusCallback(self) { - var router = engine.getRouter(), - options = self.options; - - // if element is not disabled - if (!self.element.classList.contains(classes.uiDisabled)) { - if (options.tooltip) { - router.open(self._popup.id, { - rel: "popup", - history: false - }); - } - } - } - - function blurCallback(self) { - var router = engine.getRouter(), - options = self.options; - - if (options.tooltip) { - router.close(self._popup.id, { - rel: "popup", - history: false - }); - } - } - - /** - * Stopping the event from propagation and default action - * @method disableEvent - * @param {ns.widget.tv.Button} self - * @param {Event} event - * @private - * @static - * @member ns.widget.tv.Button - */ - function disableEvent(self, event) { - if (self.isDisabled()) { - event.preventDefault(); - event.stopImmediatePropagation(); - } - } + }; /** - * Binds events - * @method _bindEvents + * Initializes widget + * @method _init * @protected * @member ns.widget.tv.Button */ prototype._bindEvents = function () { var self = this, - element = self.element, - callbacks = self._callbacks, background = self.ui.background, - eventFunction; + transitionend; BaseButtonPrototype._bindEvents.call(self); - eventFunction = animationEndCallback.bind(null, self.element); - if (background) { - utilEvent.prefixedFastOn(background, "transitionEnd", eventFunction, false); - } - callbacks.transitionend = eventFunction; - - eventFunction = focusCallback.bind(null, self); - element.addEventListener("focus", eventFunction, false); - callbacks.focus = eventFunction; - - eventFunction = blurCallback.bind(null, self); - element.addEventListener("blur", eventFunction, false); - callbacks.blur = eventFunction; - - callbacks.disable = disableEvent.bind(null, self); - - element.addEventListener("vclick", callbacks.disable, true); - element.addEventListener("click", callbacks.disable, false); + transitionend = animationEndCallback.bind(null, self.element); + background.addEventListener("transitionend", transitionend, false); + background.addEventListener("webkitTransitionEnd", transitionend, false); + self._callbacks.transitionend = transitionend; }; /** - * Destroys widget - * @method _destroy + * Initializes widget + * @method _init * @protected * @member ns.widget.tv.Button */ - prototype._destroy = function () { + prototype._destroy = function() { var self = this, - element = self.element, - callbacks = self._callbacks, background = self.ui.background, - eventFunction, + transitionend, BaseButtonPrototype_destroy = BaseButtonPrototype._destroy; - eventFunction = callbacks.transitionend; - if (background) { - utilEvent.prefixedFastOff(background, "transitionEnd", eventFunction, false); - } - eventFunction = callbacks.focus; - element.removeEventListener("focus", eventFunction, false); - - eventFunction = callbacks.blur; - element.removeEventListener("blur", eventFunction, false); + transitionend = self._callbacks.transitionend; + background.removeEventListener("transitionend", transitionend, false); + background.removeEventListener("webkitTransitionEnd", transitionend, false); if (typeof BaseButtonPrototype_destroy === FUNCTION_TYPE) { BaseButtonPrototype_destroy.call(self); } - - element.removeEventListener("vclick", callbacks.disable, true); - element.removeEventListener("click", callbacks.disable, false); }; engine.defineWidget( "Button", - "[data-role='button'], button, [type='button'], [type='submit'], [type='reset'], .ui-button", + "[data-role='button'], button, [type='button'], [type='submit'], [type='reset']", [], Button, "tv", true ); - BaseKeyboardSupport.registerActiveSelector("[data-role='button'], button, [type='button'], [type='submit'], [type='reset'], .ui-button"); - - //register selectors also for disable buttons in Context Popup and Contectual Menu - BaseKeyboardSupport.registerActiveSelector(".ui-ctxpopup [data-role='button'], .ui-ctxpopup button, .ui-ctxpopup [type='button'], .ui-ctxpopup [type='submit'], .ui-ctxpopup [type='reset'], .ui-ctxpopup .ui-button", true); - BaseKeyboardSupport.registerActiveSelector(".ui-contextual-menu [data-role='button'], .ui-contextual-menu button, .ui-contextual-menu [type='button'], .ui-contextual-menu [type='submit'], .ui-contextual-menu [type='reset'], .ui-contextual-menu .ui-button", true); + BaseKeyboardSupport.registerActiveSelector("[data-role='button'], button, [type='button'], [type='submit'], [type='reset']"); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.widget.tv.Button; diff --git a/tau/src/js/profile/tv/widget/Checkboxradio.js b/tau/src/js/profile/tv/widget/Checkboxradio.js index 0a48e877..8ff4e416 100644 --- a/tau/src/js/profile/tv/widget/Checkboxradio.js +++ b/tau/src/js/profile/tv/widget/Checkboxradio.js @@ -1,18 +1,7 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -35,7 +24,6 @@ "../tv", "../../../profile/mobile/widget/mobile/Checkboxradio", "../../../core/engine", - "../../../core/util/selectors", "./BaseKeyboardSupport" ], function () { @@ -61,13 +49,6 @@ */ engine = ns.engine, /** - * {Object} Alias for {@link ns.util.selectors} - * @member ns.widget.tv.Checkboxradio - * @private - * @static - */ - selectorUtils = ns.util.selectors, - /** * {Object} List of classes which can be added to widget`s element * @member ns.widget.tv.Checkboxradio * @private @@ -75,12 +56,7 @@ * @readonly */ classes = { - focused: "ui-focus", - container: "checkboxradio-container", - checkboxradioInListview: "checkboxradio-in-listview", - listItemWithRadio: "li-has-radio", - listItemWithCheckbox: "li-has-checkbox", - background: "ui-background" + focused: "focus" }, /** * {Constant} Constant describing type of functions @@ -91,16 +67,8 @@ */ FUNCTION_TYPE = "function", Checkboxradio = function () { - var self = this; - - MobileCheckboxradio.call(self); - BaseKeyboardSupport.call(self); - /** - * Checkbox radio type - * @property {"radio"|"checkbox"} type - */ - self.type = ""; - self._onKeyDownRadioBound = null; + MobileCheckboxradio.call(this); + BaseKeyboardSupport.call(this); }, /** * {Object} List of remote control / keyboard button key codes @@ -112,62 +80,9 @@ KEY_CODES = { up: 38, down: 40, - left: 37, - right: 39, enter: 13 }, /** - * {string} Class name of checkboxradioInListview - * @member ns.widget.tv.Checkboxradio - * @private - * @static - * @readonly - */ - classInListview = classes.checkboxradioInListview, - /** - * {string} Active selector - for keyboard support - * @member ns.widget.tv.Checkboxradio - * @private - * @static - * @readonly - */ - activeSelector = "input[type='radio']:not([disabled]):not(." + classInListview + "), " - + "[type='checkbox']:not([disabled]):not(." + classInListview + ")", - /** - * {string} Focusable predecessor selector - * @member ns.widget.tv.Checkboxradio - * @private - * @static - * @readonly - */ - focusablePredecessorSelector = "*[tabindex], " - + "." + classes.listItemWithCheckbox + ", " - + "." + classes.listItemWithRadio, - /** - * {string} Checkboxradio selector - * @member ns.widget.tv.Checkboxradio - * @private - * @static - * @readonly - */ - widgetSelector = "input[type='checkbox'], input[type='radio']", - /** - * {string} Listview selector - value filled in runtime - * @member ns.widget.tv.Checkboxradio - * @private - * @static - * @readonly - */ - listViewSelector = "", - /** - * {HTMLElement} Background node clone for memory optimization - * @member ns.widget.tv.Checkboxradio - * @private - * @static - * @readonly - */ - backgroundElement = null, - /** * {Object} Checkboxradio widget prototype * @member ns.widget.tv.Checkboxradio * @private @@ -176,156 +91,98 @@ prototype = new MobileCheckboxradio(); Checkboxradio.prototype = prototype; - Checkboxradio.classes = classes; /** - * Method overrides input behavior on keydown event (radio). - * @method onKeydownRadio - * @param {Event} event - * @private - * @static + * Builds structure of checkboxradio widget + * @method _build + * @param {HTMLInputElement} element + * @return {HTMLInputElement} Built element + * @protected * @member ns.widget.tv.Checkboxradio */ - function onKeydownRadio(event) { - var keyCode = event.keyCode; - - if (keyCode === KEY_CODES.down || - keyCode === KEY_CODES.up || - keyCode === KEY_CODES.left || - keyCode === KEY_CODES.right - ) { - event.preventDefault(); - event.stopPropagation(); - } - } + prototype._build = function(element) { + wrapInput(element); + return element; + }; /** - * Method overrides input behavior on keydown event (radiobutton`s container). - * @method onKeyup - * @param {Event} event - * @param {HTMLInputElement} [input=undefined] - * @private - * @static + * Binds events to widget + * @method _bindEvents + * @param {HTMLInputElement} element Input element + * @protected * @member ns.widget.tv.Checkboxradio */ - function onKeyup(event, input) { - var checkboxradio; - if (event.keyCode === KEY_CODES.enter) { - // event.target is a container - checkboxradio = input || event.target.querySelector(widgetSelector); - if (checkboxradio && (!checkboxradio.disabled)) { - checkboxradio.checked = !checkboxradio.checked; - event.stopPropagation(); - event.preventDefault(); - } + prototype._bindEvents = function(element) { + document.addEventListener("keyup", this, false); + + if (element.type === "radio") { + var parentNode = element.parentNode; + parentNode.addEventListener("keyup", onKeydownContainer, false); + parentNode.addEventListener("focus", onFocusContainer, false); + parentNode.addEventListener("blur", onBlurContainer, false); + } else { + element.addEventListener("keyup", onKeydownCheckbox, false); } - } + }; /** - * Method overrides input behavior on focus event (radiobutton`s container). - * @method onFocus - * @param {Event} event - * @param {HTMLInputElement} [input=undefined] - * @private - * @static + * Cleans widget's resources + * @method _destroy + * @param {HTMLInputElement} element + * @protected * @member ns.widget.tv.Checkboxradio */ - function onFocus(event, input) { - // event.target is a container - var checkboxradio = input || event.target.querySelector(widgetSelector); - if (checkboxradio && (!checkboxradio.disabled)) { - if (input) { - checkboxradio.parentNode.focus(); - } - checkboxradio.classList.add(classes.focused); - checkboxradio.parentNode.classList.add(classes.focused); - event.stopPropagation(); - event.preventDefault(); + prototype._destroy = function(element) { + if (element.type === "radio") { + var parentNode = element.parentNode; + parentNode.removeEventListener("keyup", onKeydownContainer, false); + parentNode.removeEventListener("focus", onFocusContainer, false); + parentNode.removeEventListener("blur", onBlurContainer, false); + } else { + element.removeEventListener("keyup", onKeydownCheckbox, false); } - } + + document.removeEventListener("keyup", this, false); + + }; /** - * Method overrides input behavior on blur event (radiobutton`s container). - * @method onBlur - * @param {Event} event - * @param {HTMLInputElement} [input=undefined] + * Returns label connected to input by htmlFor tag + * @method getLabelForInput + * @param {HTMLElement} parent Input`s parent + * @param {string} id Input`s id + * @return {?HTMLElement} Label or null if not found * @private * @static * @member ns.widget.tv.Checkboxradio */ - function onBlur(event, input) { - // event.target is a container - var checkboxradio = input || event.target.querySelector(widgetSelector); - if (checkboxradio && (!checkboxradio.disabled)) { - if (input) { - checkboxradio.parentNode.blur(); + function getLabelForInput(parent, id) { + var labels = parent.getElementsByTagName("label"), + length = labels.length, + i; + for (i = 0; i < length; i++) { + if (labels[i].htmlFor === id) { + return labels[i]; } - checkboxradio.classList.remove(classes.focused); - checkboxradio.parentNode.classList.remove(classes.focused); } + return null; } /** - * Checks if checkboxradio is in a listview - * @method isInListview - * @param {HTMLElement} Element - * @return {boolean} True if an element is in a listview + * Method adds span to input. + * @method wrapInput + * @param {EventTarget|HTMLElement} element Input element * @private * @static * @member ns.widget.tv.Checkboxradio */ - function isInListview(element) { - if (listViewSelector.length === 0) { - listViewSelector = engine.getWidgetDefinition("Listview").selector; - } - return !!ns.util.selectors.getClosestBySelector(element, listViewSelector); - } - - /** - * Builds and returns input wrapper - * @method _buildWrapper - * @param {HTMLInputElement} element - * @return {HTMLDivElement} - * @protected - * @member ns.widget.tv.Checkboxradio - */ - prototype._buildWrapper = function (element) { - var wrapper; + function wrapInput(element) { + var container = document.createElement("span"), + parent = element.parentNode, + label = getLabelForInput(parent, element.id); - // build wrapper as in profile mobile - wrapper = MobileCheckboxradio.prototype._buildWrapper.call(this, element); - - // add special class - wrapper.classList.add(classes.container); - if (!element.disabled && element.classList.contains(classes.checkboxradioInListview)) { - wrapper.setAttribute("tabindex", 0); - } - - if (!backgroundElement) { - backgroundElement = document.createElement("div"); - backgroundElement.className = classes.background; - } - - if (wrapper.firstChild) { - wrapper.insertBefore(backgroundElement.cloneNode(), element); - } else { - wrapper.appendChild(backgroundElement.cloneNode()); - } - - return wrapper; - }; - - /** - * Builds and returns label element - * @method _buildLabel - * @param {HTMLInputElement} element - * @return {HTMLLabelElement} - * @protected - * @member ns.widget.tv.Checkboxradio - */ - prototype._buildLabel = function (element) { - var label = this._findLabel(element.parentNode, element.id); - // label is not a button as in profile mobile + parent.replaceChild(container, element); + container.appendChild(element); if (label) { label.style.display = "inline-block"; @@ -333,139 +190,133 @@ // make label not focusable (remove button class) label.className = ""; } + container.appendChild(label); } - return label; - }; + + if ((element.type === "radio") && (!element.disabled)) { + container.setAttribute("tabindex", 0); + container.className = "radio-container"; + } + } /** - * Builds structure of checkboxradio widget - * @method _build - * @param {HTMLInputElement} element - * @return {HTMLInputElement} Built element - * @protected + * Method overrides input behavior on keydown event (checkbox). + * @method onKeydownCheckbox + * @param {Event} event + * @private + * @static * @member ns.widget.tv.Checkboxradio */ - prototype._build = function (element) { - // set proper class if element in on the listview - if (isInListview(element)) { - element.classList.add(classInListview); + function onKeydownCheckbox(event) { + var element = event.target; + if (element) { + if (event.keyCode === KEY_CODES.enter) { + element.checked = !element.checked; + event.stopPropagation(); + event.preventDefault(); + } } - // build element - element = MobileCheckboxradio.prototype._build.call(this, element); - - return element; - }; + } /** - * Binds events to widget - * @method _bindEvents - * @param {HTMLInputElement} element Input element - * @protected + * Returns radio button stored in container or null + * @method findRadioInContainer + * @param {HTMLElement} container + * @return {HTMLInputElement} Returns radio button stored in container or null + * @private + * @static * @member ns.widget.tv.Checkboxradio */ - prototype._bindEvents = function (element) { - var focusablePredecessor, - parentNode, - self = this; - - element.addEventListener("focus", self); - element.addEventListener("blur", self); - element.addEventListener("keyup", self); - element.addEventListener("down", self); - - if (element.classList.contains(classInListview)) { - focusablePredecessor = selectorUtils.getClosestBySelector(element, - focusablePredecessorSelector); - if (focusablePredecessor !== null) { - focusablePredecessor.addEventListener("keyup", onKeyup, false); - focusablePredecessor.addEventListener("focus", onFocus, false); - focusablePredecessor.addEventListener("blur", onBlur, false); + function findRadioInContainer (container) { + var children = container.getElementsByTagName("input"), + length = children.length, + child = null, + i; + for (i = 0; i < length; i++) { + child = children[i]; + if (child.type === "radio") { + return child; } - } else if (element.type === "radio") { - parentNode = element.parentNode; - parentNode.addEventListener("keyup", onKeyup, false); - parentNode.addEventListener("keydown", onKeydownRadio, false); - parentNode.addEventListener("focus", onFocus, false); - parentNode.addEventListener("blur", onBlur, false); } - }; + return null; + } /** - * Cleans widget's resources - * @method _destroy - * @param {HTMLInputElement} element - * @protected + * Method overrides input behavior on keydown event (radiobutton`s container). + * @method onKeydownContainer + * @param {Event} event + * @private + * @static * @member ns.widget.tv.Checkboxradio */ - prototype._destroy = function (element) { - var focusablePredecessor, - parentNode, - self = this; - - element.removeEventListener("focus", self); - element.removeEventListener("blur", self); - element.removeEventListener("keyup", self); - element.removeEventListener("keydown", self); - - if (element.classList.contains(classInListview)) { - focusablePredecessor = selectorUtils.getClosestBySelector(element, - focusablePredecessorSelector); - if (focusablePredecessor !== null) { - focusablePredecessor.removeEventListener("keyup", onKeyup, false); - focusablePredecessor.removeEventListener("focus", onFocus, false); - focusablePredecessor.removeEventListener("blur", onBlur, false); + function onKeydownContainer(event) { + var element = event.target, + radio = null; + if (element) { + if (event.keyCode === KEY_CODES.enter) { + radio = findRadioInContainer(element); + if (radio) { + radio.checked = !radio.checked; + event.stopPropagation(); + event.preventDefault(); + } } - } else if (element.type === "radio") { - parentNode = element.parentNode; - parentNode.removeEventListener("keyup", onKeyup, false); - parentNode.removeEventListener("keydown", onKeydownRadio, false); - parentNode.removeEventListener("focus", onFocus, false); - parentNode.removeEventListener("blur", onBlur, false); } - }; + } /** - * Initialize checkbox widget - * @method _init - * @param {HTMLInputElement} element - * @protected + * Method overrides input behavior on focus event (radiobutton`s container). + * @method onFocusContainer + * @param {Event} event + * @private + * @static * @member ns.widget.tv.Checkboxradio */ - prototype._init = function (element) { - this.type = element.type; - }; + function onFocusContainer(event) { + var element = event.target, + radio = null; + if (element) { + radio = findRadioInContainer(element); + if (radio) { + radio.classList.add(classes.focused); + event.stopPropagation(); + event.preventDefault(); + } + } + } /** - * Handles blur/focus events on input + * Method overrides input behavior on blur event (radiobutton`s container). + * @method onBlurContainer * @param {Event} event + * @private + * @static * @member ns.widget.tv.Checkboxradio */ - prototype.handleEvent = function (event) { - switch (event.type) { - case "focus": - return onFocus(event, this.element); - case "blur": - return onBlur(event, this.element); - case "keydown": - return onKeydownRadio(event); - case "keyup": - return onKeyup(event, this.element); + function onBlurContainer(event) { + var element = event.target, + radio = null; + if (element) { + radio = findRadioInContainer(element); + if (radio) { + radio.classList.remove(classes.focused); + } } - }; + } // definition ns.widget.tv.Checkboxradio = Checkboxradio; engine.defineWidget( "Checkboxradio", - widgetSelector, + "input[type='checkbox'], input[type='radio']", [], Checkboxradio, "tv", true ); - BaseKeyboardSupport.registerActiveSelector(activeSelector); + BaseKeyboardSupport.registerActiveSelector("input[type='radio'],[type='checkbox']"); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.widget.tv.Checkboxradio; diff --git a/tau/src/js/profile/tv/widget/ContextualMenu.js b/tau/src/js/profile/tv/widget/ContextualMenu.js deleted file mode 100644 index 8ae6cf1f..00000000 --- a/tau/src/js/profile/tv/widget/ContextualMenu.js +++ /dev/null @@ -1,234 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/** - * # ContextualMenu Widget - * - * Shows a list of block which can be moved after click on box. - * - * - * @class ns.widget.tv.ContextualMenu - * @extends ns.widget.core.BaseWidget - */ -(function (document, tau) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../tv", - "../../../core/widget/BaseWidget", - "../../../core/engine", - "../../../core/util/selectors", - "../../../core/util/array", - "./BaseKeyboardSupport", - "./Button", - "./Listview" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = tau.widget.BaseWidget, - engine = tau.engine, - util = tau.util, - utilArray = util.array, - utilsSelectors = tau.util.selectors, - BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, - ContextualMenu = function () { - var self = this; - BaseWidget.call(self); - BaseKeyboardSupport.call(self); - self._ui = self._ui || {}; - this._isOpen = false; - }, - prototype = new BaseWidget(), - classes = { - contextualMenu: "ui-contextual-menu", - background: "ui-contextual-menu-background", - buttons: "ui-contextual-menu-buttons", - related: "ui-contextual-menu-related", - open: "ui-contextual-menu-open" - }; - - ContextualMenu.classes = classes; - - function initButton (element) { - tau.widget.Button(element, { - inline: true, - marquee: false, - background: false - }); - } - - function createButtons(element) { - var buttonsContainer = utilsSelectors.getChildrenByClass(element, classes.buttons)[0], - buttons = utilsSelectors.getChildrenByTag(buttonsContainer, "a"); - - utilArray.forEach(buttons, initButton); - } - - function initListview (element) { - element.classList.add(tau.widget.tv.Listview.classes.transparent); - tau.widget.Listview(element, {}); - } - - function createListview(element) { - var relatedContainer = utilsSelectors.getChildrenByClass(element, classes.related)[0], - listviews = utilsSelectors.getChildrenByTag(relatedContainer, "ul"); - - utilArray.forEach(listviews, initListview); - } - - function createWidgets(element) { - createButtons(element); - createListview(element); - } - - /** - * Builds structure of widget - * @method _build - * @param {HTMLInputElement} element - * @return {HTMLInputElement} Built element - * @protected - * @member ns.widget.tv.ContextualMenu - */ - prototype._build = function(element) { - this._ui.background = createBackground(this, element); - createWidgets(element); - return element; - }; - - /** - * Helper to create element and set class for it. - * @method createElement - * @param {string} classes classes to set - * @param {string} [tag="div"] tag name of element - * @private - * @static - * @member ns.widget.tv.ContextualMenu - */ - function createElement(classes, tag) { - var div = document.createElement(tag || "div"); - - div.className = classes; - return div; - } - - /** - * Create black background - * @method createBackground - * @param {ns.widget.tv.ContextualMenu} self - * @param {HTMLElement} element - * @private - * @static - * @member ns.widget.tv.ContextualMenu - */ - function createBackground(self, element) { - var background = createElement(classes.background); - background.id = self.id + "-bg"; - element.appendChild(background); - return background; - } - - /** - * Remove edit mode structure - * @method removeBackground - * @param {ns.widget.tv.ContextualMenu} self - * @private - * @static - * @member ns.widget.tv.ContextualMenu - */ - function removeBackground(self) { - var background = self._ui.background; - if (background) { - background.parentNode.removeChild(background); - } - } - - /** - * Open contextual menu - * @method open - * @member ns.widget.tv.ContextualMenu - */ - prototype.open = function() { - var self = this; - self.element.classList.add(classes.open); - self._isOpen = true; - BaseKeyboardSupport.blurAll(); - self.saveKeyboardSupport(); - self.enableKeyboardSupport(); - }; - - /** - * Return status of widget, true if is opened - * @method isOpen - * @return {boolean} - * @member ns.widget.tv.ContextualMenu - */ - prototype.isOpen = function() { - return this._isOpen; - }; - - /** - * Close contextual menu - * @method close - * @member ns.widget.tv.ContextualMenu - */ - prototype.close = function() { - var self = this; - self.element.classList.remove(classes.open); - self._isOpen = false; - BaseKeyboardSupport.blurAll(); - self.disableKeyboardSupport(); - self.restoreKeyboardSupport(); - }; - - /** - * Binds events to widget - * @method _bindEvents - * @protected - * @member ns.widget.tv.ContextualMenu - */ - prototype._bindEvents = function() { - this._bindEventKey(); - }; - - /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.tv.ContextualMenu - */ - prototype._destroy = function() { - this._destroyEventKey(); - removeBackground(this); - }; - - ContextualMenu.prototype = prototype; - tau.widget.tv.ContextualMenu = ContextualMenu; - - engine.defineWidget( - "ContextualMenu", - ".ui-contextual-menu", - [], - ContextualMenu, - "tv" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ContextualMenu; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/tv/widget/ControlGroup.js b/tau/src/js/profile/tv/widget/ControlGroup.js index 17e077d5..400dcb1d 100644 --- a/tau/src/js/profile/tv/widget/ControlGroup.js +++ b/tau/src/js/profile/tv/widget/ControlGroup.js @@ -1,18 +1,7 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** diff --git a/tau/src/js/profile/tv/widget/DateInput.js b/tau/src/js/profile/tv/widget/DateInput.js deleted file mode 100644 index 5b4d6e28..00000000 --- a/tau/src/js/profile/tv/widget/DateInput.js +++ /dev/null @@ -1,608 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/** - * #Time Input Widget - * Decorator for inputs type number elements. - * - * ## Default selectors - * In default elements matches to : - * - * - INPUT with type "number" - * - * ###HTML Examples - * - * ####Create simple spin control on INPUT element - * - * @example - * <form> - * <label for="spin-1">Time Input</label> - * <input type="date" name="date-1" id="date-1" value=""> - * </form> - * - * ## Manual constructor - * For manual creation of DateInput widget you can use constructor of widget - * from **tau** namespace: - * - * @example - * <form> - * <label for="date-2">Time Input:</label> - * <input type="date" name="date-2" id="date-2" value=""> - * </form> - * <script> - * var inputElement = document.getElementById("date-2"), - * dateInput = tau.widget.DateInput(inputElement); - * </script> - * - * Constructor has one require parameter **element** which are base - * **HTMLElement** to create widget. We recommend get this element by method - * *document.getElementById*. - * - * @class ns.widget.tv.DateInput - * @extends ns.widget.core.BaseWidget - * @author Tomasz Lukawski <t.lukawski@samsung.com> - */ -(function (window, document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../tv", - "../../../core/engine", - "../../../core/util/selectors", - "../../../core/util/object", - "../../../core/util/DOM/attributes", - "../../../core/event", - "../../../core/widget/BaseWidget", - "../../../profile/tv/widget/SpinControl", - "./BaseKeyboardSupport" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var widget = ns.widget, - BaseWidget = widget.BaseWidget, - BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, - SpinControl = ns.widget.tv.SpinControl, - engine = ns.engine, - events = ns.event, - utilDOM = ns.util.DOM, - DateInput = function () { - var self = this; - BaseWidget.call(self); - BaseKeyboardSupport.call(self); - self._callbacks = { - onBlur: null - }; - self._ui = { - wrapper: null, - day: null, - month: null, - year: null, - overlay: null, - placeholder: null - }; - self.options = { - showInLightBox: true, - minYear: 1900, - maxYear: 2100, - active: false, - usePlaceholder: true - }; - self._day = null; - self._month = null; - self._year = null; - }, - /** - * Dictionary for textinput related css class names - * @property {Object} classes - * @member ns.widget.tv.DateInput - * @static - */ - classes = { - dateInput: "ui-date-input", - focus: "ui-date-input-focus", - active: "ui-date-input-active", - day: "ui-date-input-day", - month: "ui-date-input-month", - year: "ui-date-input-year", - disabled: "ui-disabled", - placeholder: "ui-date-input-placeholder" - }, - KEY_CODES = BaseKeyboardSupport.KEY_CODES, - prototype = new BaseWidget(), - selector = "input[type='date']", - DATE_REGEXP = /([0-9]{4})-([0-9]{2})-([0-9]{2})/; - - DateInput.classes = classes; - DateInput.prototype = prototype; - DateInput.selector = selector; - - /** - * Method adds span to input. - * @method wrap - * @param {DateInput} self - * @param {EventTarget|HTMLElement} element - * @private - * @static - * @member ns.widget.tv.DateInput - */ - function wrap(self, element) { - var wrapper = document.createElement("div"), - parent = element.parentNode, - day = document.createElement("input"), - month, - placeholder = document.createElement("div"), - year, - currentDate = new Date(), - ui = self._ui; - - utilDOM.setAttributes(day, { - "placeholder": "00", - "type": "number", - "min": 1, - "max": 31, - "step": 1, - "data-loop": true, - "value": currentDate.getDate() - }); - month = day.cloneNode(); - utilDOM.setAttributes(month, { - "max": 12, - "value": currentDate.getMonth() + 1 - }); - year = month.cloneNode(); - utilDOM.setAttributes(year, { - "min": self.options.minYear, - "max": self.options.maxYear, - "value": currentDate.getFullYear() - }); - - day.classList.add(classes.day); - month.classList.add(classes.month); - year.classList.add(classes.year); - - wrapper.classList.add(classes.dateInput); - placeholder.classList.add(classes.placeholder); - - wrapper.setAttribute("tabindex", 0); - if (self.options.usePlaceholder) { - placeholder.appendChild(wrapper); - parent.replaceChild(placeholder, element); - } else { - parent.replaceChild(wrapper, element); - } - - wrapper.appendChild(day); - wrapper.appendChild(month); - wrapper.appendChild(year); - - wrapper.appendChild(element); - - self._day = ns.engine.instanceWidget( - day, "SpinControl", { - deactivateOnExit: false, - showInLightBox: false, - usePlaceholder: false - }); - self._month = ns.engine.instanceWidget( - month, "SpinControl", { - deactivateOnExit: false, - showInLightBox: false, - usePlaceholder: false - }); - self._year = ns.engine.instanceWidget( - year, "SpinControl", { - deactivateOnExit: false, - showInLightBox: false, - usePlaceholder: false - }); - - ui.wrapper = wrapper; - ui.day = day; - ui.month = month; - ui.year = year; - ui.placeholder = placeholder; - } - - function checkDisable(element) { - if (element.hasAttribute("disabled")) { - element.setAttribute("aria-disabled", true); - element.classList.add(classes.disabled); - } else { - element.setAttribute("aria-disabled", false); - } - } - - /** - * Method removes span from input. - * @method unwrap - * @param {ns.widget.tv.DateInput} self - * @private - * @static - * @member ns.widget.tv.DateInput - */ - function unwrap(self) { - var ui = self._ui; - - ui.wrapper.parentNode.replaceChild(self.element, ui.wrapper); - ui.wrapper.innerHTML = ""; - } - - function onFocus(self) { - if (!self.options.active) { - if (!self._ui.wrapper.classList.contains(classes.focus)) { - self._ui.wrapper.classList.add(classes.focus); - } - } - } - - function removeFocus(self) { - if (self._ui.wrapper) { - self._ui.wrapper.classList.remove(classes.focus); - } - } - - function onBlur(self) { - if (!self.options.active) { - removeFocus(self); - } - } - - prototype._exit = function () { - var self = this; - - if (self.options.active) { - self.setActive(false); - } else { - removeFocus(self); - } - }; - - prototype._showOverlay = function () { - var self = this, - ui = self._ui, - overlay = ui.overlay, - parent; - - if (self.options.showInLightBox && overlay === null) { - overlay = SpinControl.prototype._createOverlay.call(this); - parent = self.options.usePlaceholder ? ui.placeholder : ui.wrapper; - parent.parentNode.appendChild(overlay); - self._ui.overlay = overlay; - } - }; - - prototype._onClickOverlay = function () { - this._exit(); - }; - - prototype._hideOverlay = function () { - SpinControl.prototype._hideOverlay.call(this); - }; - - prototype.enablePlaceholder = function () { - SpinControl.prototype.enablePlaceholder.call(this); - }; - - prototype.disablePlaceholder = function () { - SpinControl.prototype.disablePlaceholder.call(this); - }; - - function enable(self) { - var wrapper = self._ui.wrapper; - - wrapper.classList.add(classes.active); - self.saveKeyboardSupport(); - self.disableKeyboardSupport(); - wrapper.removeAttribute("tabindex", 0); - self._showOverlay(); - self._day.enableFocus(); - } - - function disable(self) { - var wrapper = self._ui.wrapper; - - self._hideOverlay(); - wrapper.classList.remove(classes.active); - self.enableKeyboardSupport(); - self.restoreKeyboardSupport(); - self._day.disableFocus(); - self._month.disableFocus(); - self._year.disableFocus(); - wrapper.setAttribute("tabindex", 0); - } - - prototype.setActive = function (active) { - var self = this, - options = self.options; - - if (options.active !== active) { - - if (options.usePlaceholder) { - if (options.active) { - self.disablePlaceholder(); - } else { - self.enablePlaceholder(); - } - } - - self._year.setActive(active); - self._month.setActive(active); - self._day.setActive(active); - - if (active) { - enable(self); - } else { - disable(self); - } - options.active = active; - } - }; - - function onActive(self, ev) { - if (!self.options.active) { - if (event._originalEvent && event._originalEvent.keyCode === KEY_CODES.enter) { - events.stopImmediatePropagation(event); - } - self.setActive(true); - } - } - - function updateVisibleValue(self, value) { - var parsedDate; - - if (typeof value === "string") { - parsedDate = value.match(DATE_REGEXP); - if (parsedDate.length) { - self._day.value(parsedDate[3]); - self._month.value(parsedDate[2]); - self._year.value(parsedDate[1]); - } - } - } - - function onKeyDown(self, event) { - switch (event.keyCode) { - case KEY_CODES.tab: - switch (event.target) { - case self._first._ui.wrapper: - if (event.shiftKey) { - self._exit(); - } - break; - case self._last._ui.wrapper: - if (!event.shiftKey) { - self._exit(); - } - break; - } - break; - } - } - - /** - * Method on keyup event. - * @method onKeyup - * @param {TextInput} self - * @param {Event} event - * @private - * @static - * @member ns.widget.tv.DateInput - */ - function onKeyUp(self, event) { - switch (event.keyCode) { - case KEY_CODES.left: - switch (event.target) { - case self._month._ui.wrapper: - self._day.enableFocus(); - break; - case self._year._ui.wrapper: - self._month.enableFocus(); - break; - } - events.stopImmediatePropagation(event); - break; - case KEY_CODES.right: - switch (event.target) { - case self._day._ui.wrapper: - self._month.enableFocus(); - break; - case self._month._ui.wrapper: - self._year.enableFocus(); - break; - } - events.stopImmediatePropagation(event); - break; - - case KEY_CODES.enter: - if (self.options.active) { - if (!self._day._insertNumberMode && - !self._month._insertNumberMode && - !self._year._insertNumberMode) { - self._exit(); - } - } - break; - } - } - - function onMonthChange(self) { - var numberOfDays = new Date(); - - numberOfDays.setFullYear(self._year.value()); - numberOfDays.setMonth(self._month.value()); // setMonth accept number from 0 (january) to 11 - numberOfDays.setDate(1); - numberOfDays.setHours(12); - numberOfDays.setTime(numberOfDays.getTime() - 16 * 60 * 60 * 1000); // previous day - - self._day.option("max", numberOfDays.getDate()); - } - - prototype._getValue = function () { - return this.element.value; - }; - - prototype._setValue = function (value) { - var element = this.element; - - element.value = value; - updateVisibleValue(this, element.value); - events.trigger(element, "input"); - }; - - /** - * Bind events - * @method _bindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.DateInput - */ - prototype._bindEvents = function() { - var element = this.element, - self = this, - callbacks = this._callbacks, - ui = self._ui, - wrapper = ui.wrapper; - - callbacks.onBlur = onBlur.bind(null, self); - callbacks.onActive = onActive.bind(null, self); - callbacks.onFocus = onFocus.bind(null, self); - callbacks.onKeyUp = onKeyUp.bind(null, self); - callbacks.onKeyDown = onKeyDown.bind(null, self); - callbacks.onMonthChange = onMonthChange.bind(null, self); - - wrapper.addEventListener("blur", callbacks.onBlur, true); - wrapper.addEventListener("vclick", callbacks.onActive, true); - wrapper.addEventListener("focus", callbacks.onFocus, true); - wrapper.addEventListener("keyup", callbacks.onKeyUp, true); - wrapper.addEventListener("keydown", callbacks.onKeyDown, true); - - ui.month.addEventListener("input", callbacks.onMonthChange, true); - ui.year.addEventListener("input", callbacks.onMonthChange, true); - }; - - /** - * Unbind events - * @method _unbindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.DateInput - */ - prototype._unbindEvents = function(element) { - var element = this.element, - self = this, - callbacks = this._callbacks, - ui = self._ui, - wrapper = ui.wrapper; - - wrapper.removeEventListener("focus", callbacks.onFocus); - wrapper.removeEventListener("blur", callbacks.onBlur); - wrapper.removeEventListener("keyup", callbacks.onKeyUp, true); - wrapper.removeEventListener("vclick", callbacks.onActive); - wrapper.removeEventListener("keydown", callbacks.onKeyDown, true); - - ui.month.removeEventListener("input", callbacks.onMonthChange, true); - ui.year.removeEventListener("input", callbacks.onMonthChange, true); - }; - - prototype._build = function (element) { - checkDisable(element); - wrap(this, element); - return element; - }; - - /** - * Init widget - * @method _init - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.DateInput - */ - prototype._init = function(element) { - var self = this, - ui = self._ui, - wrapper; - - element.value = element.getAttribute("placeholder") || - new Date().toISOString().match(DATE_REGEXP)[0]; - - if (ui.wrapper === null) { - ui = self._ui; - // find widget components: html elements - wrapper = self.element.parentElement; - ui.wrapper = wrapper; - ui.day = wrapper.querySelector(classes.day); - ui.month = wrapper.querySelector(classes.month); - ui.year = wrapper.querySelector(classes.year); - // widgets - self._day = ns.engine.instanceWidget( - ui.day, "SpinControl"); - self._month = ns.engine.instanceWidget( - ui.month, "SpinControl"); - self._year = ns.engine.instanceWidget( - ui.year, "SpinControl"); - } - - self._first = self._day; - self._last = self._year; - }; - - /** - * Destroys additional elements created by the widget, - * removes classes and event listeners - * @method _destroy - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.DateInput - */ - prototype._destroy = function(element) { - var self = this; - - self._hideOverlay(); - self._unbindEvents(); - - self._day.destroy(); - self._month.destroy(); - self._year.destroy(); - - self._day = null; - self._month = null; - self._year = null; - self._first = null; - self._last = null; - - unwrap(self); - }; - - widget.tv.DateInput = DateInput; - - engine.defineWidget( - "DateInput", - selector, - [], - DateInput, - "tv" - ); - - BaseKeyboardSupport.registerActiveSelector("." + classes.dateInput); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.tv.DateInput; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); diff --git a/tau/src/js/profile/tv/widget/Drawer.js b/tau/src/js/profile/tv/widget/Drawer.js index 3650f3dd..a32260c4 100644 --- a/tau/src/js/profile/tv/widget/Drawer.js +++ b/tau/src/js/profile/tv/widget/Drawer.js @@ -1,18 +1,7 @@ /*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Drawer Widget @@ -130,7 +119,7 @@ [ "../tv", "../../../core/widget/core/Drawer", - "../../../core/widget/core/Page", + "../../wearable/widget/wearable/Page", "../../../core/engine", "./BaseKeyboardSupport" ], @@ -151,7 +140,19 @@ * @static */ CoreDrawerPrototype = CoreDrawer.prototype, - Page = ns.widget.core.Page, + /** + * {Object} Widget Alias for {@link ns.widget.wearable.Page} + * @member ns.widget.tv.Drawer + * @private + * @static + */ + Page = ns.widget.wearable.Page, + /** + * {Object} Alias for {@link ns.widget.tv.BaseKeyboardSupport} + * @member ns.widget.tv.Drawer + * @private + * @static + */ BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, /** * {Object} Alias for {@link ns.engine} @@ -216,54 +217,48 @@ /** * Opens drawer widget * @method open - * @param {number} [duration] * @member ns.widget.tv.Drawer */ - prototype.open = function(duration) { + prototype.open = function() { var self = this, CorePrototypeOpen = CoreDrawerPrototype.open; if (typeof CorePrototypeOpen === FUNCTION_TYPE) { - CorePrototypeOpen.call(self, duration); + CorePrototypeOpen.call(self); } - self.saveKeyboardSupport(); - self.enableKeyboardSupport(); + self._supportKeyboard = true; + self._pageWidget._supportKeyboard = false; }; /** * Closes drawer widget * @method close - * @param {number} [duration] * @member ns.widget.tv.Drawer */ - prototype.close = function(duration) { + prototype.close = function() { var self = this, CorePrototypeClose = CoreDrawerPrototype.close; if (typeof CorePrototypeClose === FUNCTION_TYPE) { - CorePrototypeClose.call(self, duration); + CorePrototypeClose.call(self); } - self.disableKeyboardSupport(); - self.restoreKeyboardSupport(); + self._supportKeyboard = false; + self._pageWidget._supportKeyboard = true; }; /** * Method implements opening Drawer by focus mechanism * @method _openActiveElement - * @param {HTMLElement} element Link element which show element which should be open - * @param {string?} [id=null] id of element to open * @member ns.widget.tv.Drawer * @protected */ - prototype._openActiveElement = function(element, id) { + prototype._openActiveElement = function(element) { var self = this, + id = element.href, ui = self._ui, dynamicListElement; - if ((element && element.dataset.rel === "dynamic") || id) { + if (element.parentElement.classList.contains(classes.uiBlock)) { if (ui.currentDynamic) { ui.currentDynamic.classList.remove(classes.uiDynamicBoxActive); } - if (!id) { - id = element.href; - } if (id) { dynamicListElement = document.getElementById(id.split("#")[1]); } @@ -278,42 +273,6 @@ }; /** - * Method implements opening Drawer by focus mechanism - * @method _closeActiveElement - * @member ns.widget.tv.Drawer - * @protected - */ - prototype._closeActiveElement = function() { - var self = this, - ui = self._ui; - if (ui.currentDynamic) { - ui.currentDynamic.classList.remove(classes.uiDynamicBoxActive); - } - self.option("width", NARROW_SIZE); - }; - - /** - * Close dynamic box and ser size od drawer to narrow - * @method _closeActiveElement - * @member ns.widget.tv.Drawer - * @protected - */ - prototype.closeDynamic = function() { - this._closeActiveElement(); - }; - - /** - * Open dynamic box and ser size of drawer to wide. - * @method openDynamic - * @param {string} id - * @member ns.widget.tv.Drawer - * @protected - */ - prototype.openDynamic = function(id) { - this._openActiveElement(null, id); - }; - - /** * Refresh of Drawer widget * @method _refresh * @protected @@ -340,6 +299,20 @@ }; /** + * Initializes Drawer widget + * @method _init + * @member ns.widget.tv.Drawer + * @protected + */ + prototype._init = function(element) { + var CorePrototypeInit = CoreDrawerPrototype._init; + if (typeof CorePrototypeInit === FUNCTION_TYPE) { + CorePrototypeInit.call(this, element); + } + this._pageWidget = engine.instanceWidget(element.parentElement, "page"); + }; + + /** * Binds events to Drawer widget * @method _bindEvents * @member ns.widget.tv.Drawer diff --git a/tau/src/js/profile/tv/widget/HomeBar.js b/tau/src/js/profile/tv/widget/HomeBar.js deleted file mode 100644 index 3a18584e..00000000 --- a/tau/src/js/profile/tv/widget/HomeBar.js +++ /dev/null @@ -1,775 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/** - * # HomeBar Widget - * - * Shows a list of block which can be moved after click on box. - * - * ## Default selectors - * - * Default selector for HomeBar widget is class *ui-home-bar*. - * - * ## HTML Examples - * - * To add a list widget to the application, use the following code. - * - * ### HomeBar with basic items - * - * You can add a basic HomeBar widget as follows: - * - * @example - * <ul class="ui-home-bar"> - * <li><a>Andrew</a></li> - * <li><a>Live</a></li> - * <li><a>Movies</a></li> - * <li><a>Apps</a></li> - * <li><a>Source</a></li> - * </ul> - * - * ### HomeBar with icons items - * - * You can add a HomeBar widget with icons as follows: - * - * @example - * <ul class="ui-home-bar"> - * <li><a data-icon="source" data-iconpos="top">Andrew</a></li> - * <li><a data-icon="live" data-iconpos="top">Live</a></li> - * <li><a data-icon="movie" data-iconpos="top">Movies</a></li> - * <li><a data-icon="app" data-iconpos="top">Apps</a></li> - * <li><a data-icon="source" data-iconpos="top">Source</a></li> - * </ul> - * - * ### HomeBar with icons items and button add - * - * You can add a HomeBar widget with icons and button add as follows: - * - * @example - * <ul class="ui-home-bar"> - * <li><a data-icon="source" data-iconpos="top">Andrew</a></li> - * <li><a data-icon="live" data-iconpos="top">Live</a></li> - * <li><a data-icon="movie" data-iconpos="top">Movies</a></li> - * <li><a data-icon="app" data-iconpos="top">Apps</a></li> - * <li><a data-icon="source" data-iconpos="top">Source</a></li> - * <li class="ui-home-bar-move-disabled"> - * <a href="#add" data-rel="popup" data-icon="add" - * data-iconpos="top">pin</a></li> - * </ul> - * - * ### Additional classes - * - * HomeBar has two additional classes which you can add to li elements - * - * - _ui-home-bar-move-disabled_ - elements with this class can't be moved - * - _ui-home-bar-header_ - mark elements which can will be in header and can't be scrolled - * - * @class ns.widget.tv.HomeBar - * @extends ns.widget.core.BaseWidget - */ -(function (document, tau) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../tv", - "../../../core/widget/BaseWidget", - "../../../core/widget/core/PageContainer", - "../../../core/engine", - "../../../core/util/selectors", - "../../../core/util/DOM", - "../../../core/util/array", - "../../../core/event", - "./BaseKeyboardSupport", - "./Drawer" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = tau.widget.BaseWidget, - Drawer = tau.widget.tv.Drawer, - drawerClasses = Drawer.classes, - pageContainerClasses = tau.widget.core.PageContainer.classes, - engine = tau.engine, - util = tau.util, - utilDOM = util.DOM, - utilArray = util.array, - utilsSelectors = tau.util.selectors, - tauEvent = tau.event, - BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, - HomeBar = function () { - var self = this; - BaseWidget.call(self); - BaseKeyboardSupport.call(self); - self._ui = self._ui || {}; - self._listeners = self._listeners || {}; - self._editMode = false; - self._pageWidget = null; - }, - prototype = new BaseWidget(), - events = { - add: "homebaradd", - move: "homebarmove", - remove: "homebarremove" - }, - classes = { - homebar: "ui-home-bar-main", - background: "ui-home-bar-background", - backgroundActive: "ui-home-bar-background-active", - editContainer: "ui-home-bar-container", - editButtonUp: "ui-home-bar-button-up", - editButtonDown: "ui-home-bar-button-down", - editButtonClose: "ui-home-bar-button-close", - editBox: "ui-home-bar-box", - disableMove: "ui-home-bar-move-disabled", - block: "ui-block", - header: "ui-home-bar-header", - headerBox: "ui-home-bar-header-box", - focus: "ui-focus" - }, - KEY_CODES = BaseKeyboardSupport.KEY_CODES; - - HomeBar.events = events; - HomeBar.classes = classes; - - /** - * Set position style attribute to absolute and set top to given value - * @param {HTMLElement} element - * @param {number} top - * @static - * @private - * @memberof ns.widget.tv.HomeBar - */ - function setAbsolutePositionTop(element, top) { - var style = element.style; - style.top = top + "px"; - style.position = "absolute"; - } - - /** - * Move headers elements to top and create another UL tag to place - * header LIs. - * @param {HTMLElement} element - * @static - * @private - * @memberof ns.widget.tv.HomeBar - */ - function buildHeaders(element) { - var headers = utilsSelectors.getChildrenByClass(element, classes.header), - headerUL = createElement(classes.headerBox, "ul"), - headerULStyle = headerUL.style, - elementStyle = element.style, - container = createElement(""), - top = 0; - - if (headers.length) { - utilArray.forEach(headers, function(li) { - headerUL.appendChild(li); - }); - container.appendChild(headerUL); - element.parentNode.insertBefore(container, element); - container.appendChild(element); - container.classList.add(classes.homebar); - headerULStyle.top = 0; - headerULStyle.position = "absolute"; - utilArray.forEach(headers, function(li) { - var height = utilDOM.getElementHeight(li); - li.classList.add(classes.block); - engine.instanceWidget(li.firstElementChild, "Button"); - setAbsolutePositionTop(li, top); - top += Math.ceil(height); - }); - - headerULStyle.height = top + "px"; - elementStyle.top = top + "px"; - elementStyle.bottom = 0; - elementStyle.position = "absolute"; - } else { - element.classList.add(classes.homebar); - } - } - - /** - * Set absolute position to all li element which are not in header. - * Absolute position is set to support moving animation. - * @param {HTMLElement} element - * @static - * @private - * @memberof ns.widget.tv.HomeBar - */ - function positionElements(element) { - var children = utilsSelectors.getChildrenByTag(element, "li"), - top = 0; - - utilArray.forEach(children, function(li) { - var height = utilDOM.getElementHeight(li); - li.classList.add(classes.block); - engine.instanceWidget(li.firstElementChild, "Button"); - setAbsolutePositionTop(li, top); - top += Math.ceil(height); - }); - } - - /** - * Builds structure of widget - * @method _build - * @param {HTMLInputElement} element - * @return {HTMLInputElement} Built element - * @protected - * @member ns.widget.tv.HomeBar - */ - prototype._build = function(element) { - buildHeaders(element); - positionElements(element); - return element; - }; - - /** - * Refresh structure of widget - * @method _build - * @protected - * @member ns.widget.tv.HomeBar - */ - prototype._refresh = function() { - positionElements(this.element); - }; - - /** - * Init structure of widget - * @method _init - * @param {HTMLInputElement} element - * @protected - * @member ns.widget.tv.HomeBar - */ - prototype._init = function(element) { - var drawerElement = utilsSelectors.getClosestByClass(element, drawerClasses.drawer); - this._drawerWidget = engine.instanceWidget(drawerElement, "Drawer"); - return element; - }; - - /** - * Helper to create element and set class for it. - * @method createElement - * @param {string} classes classes to set - * @param {string} [tag="div"] tag name of element - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function createElement(classes, tag) { - var div = document.createElement(tag || "div"); - - div.className = classes; - return div; - } - - /** - * Callback to click event, which enable edit mode - * @method activateOnClick - * @param {ns.widget.tv.HomeBar} self - * @param {Event} event - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function activateOnClick(self, event) { - var clickedElement = utilsSelectors.getClosestByTag(event.target, "li"), - pageWidget = self._drawerWidget; - if (!self._editMode && - !clickedElement.classList.contains(classes.disableMove) && - self._drawerWidget.isOpen()) { - // enable edit mode - self._editMode = true; - - //show background layer - showBackground(self); - - //set active element which are edited - self._ui.clickedElement = clickedElement; - - // set proper position of box - positionBox(self); - - //support keyboard - BaseKeyboardSupport.blurAll(); - self.saveKeyboardSupport(); - self.disableKeyboardSupport(); - pageWidget.closeDynamic(); - - //block event - tauEvent.preventDefault(event); - tauEvent.stopImmediatePropagation(event); - } - } - - /** - * Callback to click event, which disable edit mode - * @method hideOnClick - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function hideOnClick(self) { - self._editMode = false; - self._confirmDelete = false; - hideBackground(self); - clearBox(self); - self.disableKeyboardSupport(); - self.restoreKeyboardSupport(); - } - - /** - * Method move current element one position up - * @method moveUpOnClick - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function moveUpOnClick(self) { - var clickedElement = self._ui.clickedElement, - previous = clickedElement.previousElementSibling; - if (previous && !previous.classList.contains(classes.disableMove)) { - self._confirmDelete = false; - self.element.insertBefore(clickedElement, previous); - positionElements(self.element); - moveBox(self, -1, previous); - self.trigger(events.move, { - listElement: clickedElement - }); - } - } - - /** - * Method move current element one position down - * @method moveDownOnClick - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function moveDownOnClick(self) { - var clickedElement = self._ui.clickedElement, - next = clickedElement.nextElementSibling; - if (next && !next.classList.contains(classes.disableMove)) { - self._confirmDelete = false; - self.element.insertBefore(clickedElement, next.nextElementSibling); - positionElements(self.element); - moveBox(self, 1, next); - self.trigger(events.move, { - listElement: clickedElement - }); - } - } - - /** - * Confirm delete of current element - * @method deleteElement - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function deleteElement(self) { - var clickedElement = self._ui.clickedElement, - nextElement; - if (clickedElement) { - nextElement = clickedElement.nextElementSibling ? clickedElement.nextElementSibling.firstElementChild : - clickedElement.previousElementSibling ? clickedElement.previousElementSibling.firstElementChild : null; - self.element.removeChild(clickedElement); - hideOnClick(self); - positionElements(self.element); - self.trigger(events.remove, { - listElement: clickedElement - }); - if (nextElement) { - // Focus on next element on list, because current operation is doing inside event we have to wait untils keydow/keyup event will be finished - tauEvent.one(document, "keyup", BaseKeyboardSupport.focusElement.bind(BaseKeyboardSupport, self.element, nextElement)); - } - } - } - - /** - * Set state of widget as "delete to confirm" - * @method confirmDeleteElement - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function confirmDeleteElement(self) { - self._ui.close.classList.add(classes.focus); - self._confirmDelete = true; - } - - /** - * Method remove current - * @method cancelConfirmDeleteElement - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function cancelConfirmDeleteElement(self) { - self._ui.close.classList.remove(classes.focus); - self._confirmDelete = false; - } - - /** - * Helper to find the closest PageContainer element - * @method findPageContainer - * @param {HTMLElement} element - * @return {HTMLElement} element - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function findPageContainer(element) { - return utilsSelectors.getClosestByClass(element, pageContainerClasses.pagecontainer) || document.body; - } - - /** - * Create black background - * @method createBackground - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function createBackground(self) { - var background = createElement(classes.background), - parent = findPageContainer(self.element); - background.id = self.id + "-bg"; - parent.appendChild(background); - self._ui.background = background; - createBox(self); - return background; - } - - /** - * Remove edit mode structure - * @method removeBackground - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function removeBackground(self) { - var background = self._ui.background; - if (background) { - background.parentNode.removeChild(background); - } - } - /** - * Show edit mode structure - * @method showBackground - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function showBackground(self) { - var background = self._ui.background || createBackground(self); - background.classList.add(classes.backgroundActive); - } - - /** - * Hide edit mode structure - * @method hideBackground - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function hideBackground(self) { - if (self._ui.background) { - self._ui.background.classList.remove(classes.backgroundActive); - } - } - - /** - * Create box with current element in edit mode - * @method createBox - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function createBox(self) { - var ui = self._ui, - container = createElement(classes.editContainer), - buttonUp = createElement(classes.editButtonUp), - buttonDown = createElement(classes.editButtonDown), - buttonClose = createElement(classes.editButtonClose), - box = createElement(classes.editBox, "ul"); - container.id = self.id + "edit"; - container.appendChild(buttonUp); - container.appendChild(buttonDown); - container.appendChild(buttonClose); - container.appendChild(box); - ui.background.appendChild(container); - ui.editContainer = container; - ui.editBox = box; - ui.buttonUp = buttonUp; - ui.close = buttonClose; - buttonClose.addEventListener("vclick", self._listeners.close, false); - } - - /** - * Update position of box with current element in edit mode - * @method positionBox - * @param {ns.widget.tv.HomeBar} self - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function positionBox(self) { - var element = self.element, - ui = self._ui, - container = ui.editContainer, - clickedElement = ui.clickedElement, - box = ui.editBox, - containerStyle, - boxStyle, - offsetElement, - offsetClickedElement, - width, - height, - clonedElement, - buttonSize, - newTop; - if (self._editMode) { - boxStyle = box.style, - containerStyle = container.style; - offsetElement = utilDOM.getElementOffset(element); - offsetClickedElement = utilDOM.getElementOffset(clickedElement); - width = utilDOM.getElementWidth(element); - height = utilDOM.getElementHeight(clickedElement); - buttonSize = utilDOM.getElementHeight(ui.buttonUp); - clonedElement = clickedElement.cloneNode(true); - newTop = (offsetClickedElement.top - buttonSize - element.scrollTop); - if (newTop + buttonSize < offsetElement.top ) { - element.scrollTop += newTop + buttonSize - offsetElement.top; - newTop = (offsetClickedElement.top - buttonSize - element.scrollTop); - } - containerStyle.left = offsetClickedElement.left + "px"; - containerStyle.top = newTop + "px"; - containerStyle.width = (width + buttonSize) + "px"; - containerStyle.height = (height + 2 * buttonSize) + "px"; - boxStyle.width = width + "px"; - boxStyle.height = height + "px"; - box.innerHTML = ""; - box.appendChild(clonedElement); - clonedElement.style.top = 0; - clonedElement.firstElementChild.classList.add(classes.focus); - } - } - - function clearBox(self) { - if (self._ui.editBox) { - self._ui.editBox.innerHTML = ""; - } - } - - /** - * Move box with current element in edit mode. - * We cannot use positionBox method because elements in list are animated - * and we can't calculate position. We temporary move by +/- 1 * height - * and after transition end we recalculate position. - * @method moveBox - * @param {ns.widget.tv.HomeBar} self - * @param {-1|1} direction Direction of move - * @param {HTMLElement} siblingElement previous or next element in list - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function moveBox(self, direction, siblingElement) { - var container = self._ui.editContainer, - containerStyle, - offsetContainerElement, - height; - if (container) { - containerStyle = container.style; - offsetContainerElement = utilDOM.getElementOffset(container); - height = utilDOM.getElementHeight(siblingElement); - containerStyle.top = (offsetContainerElement.top + direction * height) + "px"; - } - } - - /** - * Keydown event-handling method. - * @method onKeydown - * @param {ns.widget.tv.HomeBar} self - * @param {Event} event - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function onKeydown(self, event) { - if (self._editMode) { - switch (event.keyCode) { - case KEY_CODES.up: - cancelConfirmDeleteElement(self); - moveUpOnClick(self); - break; - case KEY_CODES.down: - cancelConfirmDeleteElement(self); - moveDownOnClick(self); - break; - case KEY_CODES.left: - cancelConfirmDeleteElement(self); - break; - case KEY_CODES.right: - confirmDeleteElement(self); - break; - case KEY_CODES.enter: - if (self._confirmDelete) { - deleteElement(self); - } else { - hideOnClick(self); - } - cancelConfirmDeleteElement(self); - } - tauEvent.preventDefault(event); - tauEvent.stopImmediatePropagation(event); - } - } - - /** - * Find last li element which can be moving to place after them new - * li element - * @method placeToAdd - * @param {HTMLElement} element Base element of widget - * @private - * @static - * @member ns.widget.tv.HomeBar - */ - function placeToAdd(element) { - return element.querySelector("." + classes.disableMove); - } - - /** - * Add element after last li element which can be moving - * @method add - * @param {HTMLLIElement} liElement Element to add - * @member ns.widget.tv.HomeBar - */ - prototype.add = function(liElement) { - var element = this.element; - element.insertBefore(liElement, placeToAdd(element)); - liElement.classList.add(classes.block); - engine.instanceWidget(liElement.firstElementChild, "Button", { - corners: false - }); - this.trigger(events.add, { - listElement: liElement - }); - positionElements(element); - }; - - /** - * Remove li element from list - * @method remove - * @param {HTMLLIElement} liElement Element to remove - * @member ns.widget.tv.HomeBar - */ - prototype.remove = function(liElement) { - if (liElement) { - this._ui.clickedElement = liElement; - deleteElement(this); - } - }; - - /** - * Move up li element on list - * @method moveUp - * @param {HTMLLIElement} liElement Element to move - * @member ns.widget.tv.HomeBar - */ - prototype.moveUp = function(liElement) { - if (liElement) { - this._ui.clickedElement = liElement; - moveUpOnClick(this); - } - }; - - /** - * Move down li element on list - * @method moveDown - * @param {HTMLLIElement} liElement Element to move - * @member ns.widget.tv.HomeBar - */ - prototype.moveDown = function(liElement) { - if (liElement) { - this._ui.clickedElement = liElement; - moveDownOnClick(this); - } - }; - - /** - * Binds events to widget - * @method _bindEvents - * @protected - * @member ns.widget.tv.HomeBar - */ - prototype._bindEvents = function() { - var self = this, - element = self.element, - listeners = self._listeners; - listeners.click = activateOnClick.bind(null, self); - listeners.onKeydown = onKeydown.bind(null, self); - listeners.transitionend = positionBox.bind(null, self); - - element.addEventListener("vclick", listeners.click, false); - tauEvent.prefixedFastOn(element, "transitionEnd", listeners.transitionend, false); - document.addEventListener("keydown", listeners.onKeydown, true); - }; - - /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.tv.HomeBar - */ - prototype._destroy = function(element) { - var self = this, - listeners = self._listeners; - element.removeEventListener("vclick", listeners.click, false); - document.removeEventListener("keydown", listeners.onKeydown, true); - tauEvent.prefixedFastOff(element, "transitionEnd", listeners.transitionend, false); - if (self._ui.close) { - self._ui.close.removeEventListener("vclick", self._listeners.close, false); - } - removeBackground(self); - }; - - HomeBar.prototype = prototype; - tau.widget.tv.HomeBar = HomeBar; - - engine.defineWidget( - "HomeBar", - ".ui-home-bar", - [], - HomeBar, - "tv" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return HomeBar; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/tv/widget/Listdivider.js b/tau/src/js/profile/tv/widget/Listdivider.js index 29a881e2..475edf51 100644 --- a/tau/src/js/profile/tv/widget/Listdivider.js +++ b/tau/src/js/profile/tv/widget/Listdivider.js @@ -1,18 +1,7 @@ /*global ns, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** diff --git a/tau/src/js/profile/tv/widget/Listview.js b/tau/src/js/profile/tv/widget/Listview.js index 2b73b7c8..c4e87555 100644 --- a/tau/src/js/profile/tv/widget/Listview.js +++ b/tau/src/js/profile/tv/widget/Listview.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** @@ -138,23 +127,19 @@ [ "../tv", "../../../core/widget/core/Listview", - "../../../core/util/object", "../../../core/engine" ], function () { //>>excludeEnd("tauBuildExclude"); var CoreListview = ns.widget.core.Listview, engine = ns.engine, - utilObject = ns.util.object, Listview = function () { CoreListview.call(this); }, prototype = new CoreListview(); Listview.events = CoreListview.events; - Listview.classes = utilObject.merge({}, CoreListview.classes, { - transparent: "ui-listview-transparent" - }); + Listview.classes = CoreListview.classes; Listview.prototype = prototype; ns.widget.tv.Listview = Listview; diff --git a/tau/src/js/profile/tv/widget/Page.js b/tau/src/js/profile/tv/widget/Page.js index c6d9cae1..5dd78f7d 100644 --- a/tau/src/js/profile/tv/widget/Page.js +++ b/tau/src/js/profile/tv/widget/Page.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -94,13 +83,12 @@ define( [ "../tv", - "../../../core/widget/core/Page", + "../../../profile/wearable/widget/wearable/Page", "../../../core/engine", "../../../core/util/DOM/css", "../../../core/util/DOM/attributes", "../../../core/util/selectors", - "./BaseKeyboardSupport", - "./Button" + "./BaseKeyboardSupport" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -111,7 +99,7 @@ * @private * @static */ - var WearablePage = ns.widget.core.Page, + var WearablePage = ns.widget.wearable.Page, WearablePagePrototype = WearablePage.prototype, /** * Alias for {@link ns.widget.tv.BaseKeyboardSupport} @@ -182,10 +170,8 @@ * @member ns.widget.tv.Page */ prototype.onShow = function() { - var self = this; - self.saveKeyboardSupport(); - self.enableKeyboardSupport(); - WearablePagePrototype.onShow.call(self); + WearablePagePrototype.onShow.call(this); + this._supportKeyboard = true; }; /** @@ -194,10 +180,8 @@ * @member ns.widget.tv.Page */ prototype.onHide = function() { - var self = this; - self.disableKeyboardSupport(); - self.restoreKeyboardSupport(); - WearablePagePrototype.onHide.call(self); + WearablePagePrototype.onHide.call(this); + this._supportKeyboard = false; }; /** @@ -212,9 +196,7 @@ headerButtonsLength = headerButtons.length, i; for (i = 0; i < headerButtonsLength; i++) { - engine.instanceWidget(headerButtons[i], "Button", { - inline: true - }); + DOM.setNSData(headerButtons[i], "inline", "true"); } }; @@ -242,17 +224,17 @@ */ prototype._buildHeader = function(element) { var self = this, - header; - - WearablePagePrototype._buildHeader.call(self, element); - header = self._ui.header; + header = utilSelectors.getChildrenBySelector(element, "header,[data-role='header'],." + classes.uiHeader)[0]; + // add class if header does not exist if (!header) { element.classList.add(classes.uiHeaderEmpty); } else { + header.classList.add(classes.uiHeader); self._buildButtonsInHeader(header); self._buildTitleInHeader(header); } + self._ui.header = header; }; /** @@ -263,11 +245,65 @@ * @member ns.widget.tv.Page */ prototype._buildFooter = function(element) { - WearablePagePrototype._buildFooter.call(this, element); + var footer = utilSelectors.getChildrenBySelector(element, "footer,[data-role='footer'],." + classes.uiFooter)[0]; - if (!this._ui.footer) { + // add class if footer does not exist + if (!footer) { element.classList.add(classes.uiFooterEmpty); + } else { + footer.classList.add(classes.uiFooter); + } + this._ui.footer = footer; + }; + + /** + * Method creates empty page footer. + * @method _buildContent + * @param {HTMLElement} element + * @protected + * @member ns.widget.tv.Page + */ + prototype._buildContent = function(element) { + var content = utilSelectors.getChildrenByClass(element, classes.uiContent)[0], + next, + child = element.firstChild, + ui = this._ui; + if (!content) { + content = document.createElement("div"); + while (child) { + next = child.nextSibling; + if (child !== ui.footer && child !== ui.header) { + content.appendChild(child); + } + child = next; + } } + + element.insertBefore(content, ui.footer); + content.classList.add(classes.uiContent); + ui.content = content; + }; + + /** + * Build page + * @method _build + * @param {HTMLElement} element + * @return {HTMLElement} + * @protected + * @member ns.widget.tv.Page + */ + prototype._build = function(element) { + var self = this; + + if (typeof WearablePagePrototype._build === FUNCTION_TYPE) { + WearablePagePrototype._build.call(self, element); + } + + self._buildHeader(element); + self._buildFooter(element); + self._buildContent(element); + + return element; }; /** @@ -349,7 +385,6 @@ prototype._bindEvents = function(element) { WearablePagePrototype._bindEvents.call(this, element); this._bindEventKey(); - this._bindEventMouse(); }; /** @@ -360,7 +395,6 @@ */ prototype._destroy = function() { this._destroyEventKey(); - this._destroyEventMouse(); WearablePagePrototype._destroy.call(this); }; @@ -385,7 +419,7 @@ ns.widget.tv.Page = Page; engine.defineWidget( - "Page", + "page", "[data-role=page],.ui-page", ["onBeforeShow", "onShow", "onBeforeHide", "onHide", "setActive"], Page, diff --git a/tau/src/js/profile/tv/widget/PageContainer.js b/tau/src/js/profile/tv/widget/PageContainer.js index c50fd100..bbffad3a 100644 --- a/tau/src/js/profile/tv/widget/PageContainer.js +++ b/tau/src/js/profile/tv/widget/PageContainer.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -29,7 +18,7 @@ * * * @class ns.widget.tv.PageContainer - * @extends ns.widget.core.PageContainer + * @extends ns.widget.wearable.PageContainer * @author Maciej Urbanski <m.urbanski@samsung.com> */ (function (document, ns) { @@ -38,21 +27,19 @@ define( [ "../tv", - "../../../core/widget/core/PageContainer", + "../../../profile/wearable/widget/wearable/PageContainer", "../../../core/engine" ], function () { //>>excludeEnd("tauBuildExclude"); - var CorePageContainer = ns.widget.core.PageContainer, - CorePageContainerPrototype = CorePageContainer.prototype, + var WearablePageContainer = ns.widget.wearable.PageContainer, + WearablePageContainerPrototype = WearablePageContainer.prototype, PageContainer = function () { }, engine = ns.engine, - prototype = new CorePageContainer(), - classes = CorePageContainer.classes; + prototype = new WearablePageContainer(); - PageContainer.events = CorePageContainer.events; - PageContainer.classes = CorePageContainer.classes; + PageContainer.events = WearablePageContainer.events; /** * Build structure of PageContainer widget @@ -64,8 +51,8 @@ */ prototype._build = function ( element ) { var optionsBackground = this.options.background; - if (CorePageContainerPrototype._build) { - element = CorePageContainerPrototype._build(element); + if (WearablePageContainerPrototype._build) { + element = WearablePageContainerPrototype._build(element); } if (optionsBackground) { diff --git a/tau/src/js/profile/tv/widget/Popup.js b/tau/src/js/profile/tv/widget/Popup.js index 078195b1..c28908c4 100644 --- a/tau/src/js/profile/tv/widget/Popup.js +++ b/tau/src/js/profile/tv/widget/Popup.js @@ -1,38 +1,17 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** * # Popup Widget * Shows a pop-up window. * - * ## Toast popup - * Toast popups are displayed as a short message on the screen bottom. Toasts usually do not require any user - * interaction. - * To create a toast popup add `ui-popup-toast` class to popup markup. - * - * ## Notification popup - * Notification popups are popups shown for a specific period of time. - * To create a notification popup, developer needs to add an additional class `ui-popup-notification`. * - * * @class ns.widget.tv.Popup * @extends ns.widget.core.ContextPopup * @author Maciej Urbanski <m.urbanski@samsung.com> * @author Jadwiga Sosnowska <j.sosnowska@samsung.com> - * @author Piotr Karny <p.karny@samsung.com> */ (function (document, ns) { "use strict"; @@ -45,17 +24,15 @@ "../../../core/event", "../../../core/util/selectors", "../../../core/util/object", - "../../../core/util/DOM" + "./Page" ], function () { //>>excludeEnd("tauBuildExclude"); var engine = ns.engine, utilSelectors = ns.util.selectors, objectUtils = ns.util.object, - DOM = ns.util.DOM, CorePopup = ns.widget.core.ContextPopup, CorePopupPrototype = CorePopup.prototype, - Page = ns.widget.tv.Page, BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, Popup = function () { var self = this; @@ -65,62 +42,16 @@ self.options = objectUtils.merge(self.options, defaults); self.selectors = selectors; - - self._nearestLinkForArrow = null; - - self._timers = { - notification: null - }; }, - /** - * Default properties for TV implementation of Popup - * @property {Object} defaults - * @property {string} defaults.arrow="t,b,l,r" - * @property {number} defaults.distance=10 - * @property {string|null} defaults.headerIcon=null - * @property {string|null} defaults.mainColor=null - * @property {number|HTMLElement|boolean|null} [autofocus=0] define element which should be focused after open popup - * @property {boolean} [changeContext=true] define if context should be changed after opening popup. - * If value of this property is true, it means that after opening popup, the focus will be set only - * inside the popup's container and if popup does not have any focusable elements, the enter will cause - * closing popup. - * @property {number|null} defaults.timeout=null time after what popup will close itself. `.timeout` <= 0 turns off the delayed close - * @member ns.widget.tv.Popup - */ defaults = objectUtils.merge({}, CorePopup.defaults, { arrow: "t,b,l,r", - distance: 16, - positionTo: "window", - positionOriginCenter: true, - headerIcon: null, - mainColor: null, - autofocus: 0, - changeContext: true, - timeout: null + distance: 10 }), - /** - * Default values for notification popup type. - * @property {Object} notificationDefaults - * @property {number} notificationDefaults.actionTimeout=60000 default timeout for closing action popup - * @property {number} notificationDefaults.timeout=5000 default timeout for closing normal popup - * @member ns.widget.tv.Popup - */ - notificationDefaults = { - actionTimeout: 60000, - timeout: 5000 - }, classes = objectUtils.merge({}, CorePopup.classes, { toast: "ui-popup-toast", - toastOverlay: "ui-popup-toast-overlay", headerEmpty: "ui-header-empty", footerEmpty: "ui-footer-empty", - content: "ui-popup-content", - custom: "ui-popup-custom", - notification: "ui-popup-notification", - ticker: "ui-popup-ticker", - headerIcon: "ui-popup-header-icon", - focus: "ui-focus", - uiPage: Page.classes.uiPage + content: "ui-popup-content" }), selectors = { header: "header", @@ -140,65 +71,6 @@ Popup.prototype = prototype; /** - * Sets header icon based on options - * @param {ns.widget.tv.Popup} self - * @param {HTMLElement} element - */ - function setHeaderIcon(self, element) { - var ui = self._ui, - uiHeader = ui.header, - headerIconElement, - headerText; - - // Prepend header icon if was given as option - if (uiHeader && self.options.headerIcon) { - element = element || self.element; - - headerIconElement = element.querySelector("." + classes.headerIcon); - - if (!headerIconElement) { - headerIconElement = document.createElement("img"); - headerIconElement.classList.add(classes.headerIcon); - headerText = uiHeader.firstChild; - - // Remove spaces inside blocks for keeping constant space between icon and text - headerText.textContent = headerText.textContent.trim(); - - // Insert before first child (first child should be a text node) - uiHeader.insertBefore(headerIconElement, headerText); - } - - headerIconElement.src = self.options.headerIcon; - ui.headerIcon = headerIconElement; - - // Add custom flag to make sure CSS props will work - element.classList.add(classes.custom); - } - } - - /** - * Sets custom colors for widget elements if defined in options - * @param {ns.widget.tv.Popup} self - * @param {HTMLElement} [element] - */ - function setCustomPopupColors(self, element) { - var options = self.options; - - element = element || self.element; - - if (options.mainColor) { - if (self._ui.header) { - self._ui.header.style.backgroundColor = options.mainColor; - } else { - element.style.borderTopColor = options.mainColor; - } - - // Add custom flag to make sure CSS props will work - element.classList.add(classes.custom); - } - } - - /** * Build the popup DOM tree * @method _build * @protected @@ -207,11 +79,10 @@ * @member ns.widget.tv.Popup */ prototype._build = function (element) { - var self = this, - ui = self._ui; + var ui = this._ui; if (typeof CorePopupPrototype._build === FUNCTION_TYPE) { - CorePopupPrototype._build.apply(self, arguments); + CorePopupPrototype._build.apply(this, arguments); } if (!ui.header) { @@ -222,68 +93,20 @@ element.classList.add(classes.footerEmpty); } - // build notification popup - // if timeout is set, it means that it is a notification popup - if (self.options.timeout !== null) { - element.classList.add(classes.notification); - } - - // Settings for customized popups - setHeaderIcon(self, element); - return element; }; - /** - * If popup contains any input or button-like element it's considered as action popup. - * This method tests if a popup is an 'action' popup. - * @method _isActionPopup - * @return {boolean} - * @protected - * @member ns.widget.tv.Popup - */ - prototype._isActionPopup = function () { - return !!this.element.querySelector(this.getActiveSelector()); - }; - - prototype._initTimeout = function () { - var self = this, - options = self.options, - isActionPopup = self._isActionPopup(); - - // if popup is a notification message, the timeout is set - if (self.element.classList.contains(classes.notification)) { - // The default values for timeout must be defined here because the same `timeout` property - // is used for both types of popup (normal and action), but default value of that property - // is different depending on type - if (options.timeout === null) { - // Action popup has different timeout than normal popup - options.timeout = isActionPopup ? notificationDefaults.actionTimeout : notificationDefaults.timeout; - } - } else { - options.timeout = null; - } - }; - prototype._init = function(element) { - var self = this, - ui = self._ui; + var page; if (typeof CorePopupPrototype._init === FUNCTION_TYPE) { CorePopupPrototype._init.call(this, element); } - - // init toast popup if (element.classList.contains(classes.toast)) { - ui.container.classList.add(classes.toast); - ui.overlay.classList.add(classes.toastOverlay); + this._ui.container.classList.add(classes.toast); } - - // set value of timeout for notification popup - self._initTimeout(); - - // Add reference when running without _build method - ui.headerIcon = ui.headerIcon || element.querySelector("." + classes.headerIcon); + page = utilSelectors.getClosestByClass(element, ns.widget.tv.Page.classes.uiPage); + this._pageWidget = engine.getBinding(page, "page"); }; function onKeydownClosing(self, event) { @@ -297,15 +120,11 @@ } function closingOnKeydown(self, added) { - if (added) { - // if elements inside popup are not focusable, we enabled closing on keyup - if (!self._isActionPopup()) { + if (self.element.classList.contains(classes.toast)) { + if (added) { self._onKeydownClosing = onKeydownClosing.bind(null, self); document.addEventListener("keydown", self._onKeydownClosing, false); - } - } else { - // if listener was added, we remove it - if (self._onKeydownClosing) { + } else { document.removeEventListener("keydown", self._onKeydownClosing, false); } } @@ -314,22 +133,24 @@ prototype._setKeyboardSupport = function (options) { var self = this, element = self.element, - autoFocus = options.autofocus; + autoFocus = options.autofocus, + page = self._pageWidget, + toastPopup = element.classList.contains(classes.toast), + selector = self.getActiveSelector(); - // if popup is not connected with slider, we change context - if (options.changeContext) { - self.saveKeyboardSupport(); + if (toastPopup || (selector && element.querySelector(selector))) { // if there are links inside popup, we enable keyboard support on page // and enable in popup self.enableKeyboardSupport(); BaseKeyboardSupport.blurAll(); + page.disableKeyboardSupport(); if (autoFocus || autoFocus === 0) { BaseKeyboardSupport.focusElement(element, autoFocus); } - - closingOnKeydown(self, true); } + + closingOnKeydown(self, true); }; prototype._placementCoordsWindow = function(element) { @@ -357,120 +178,23 @@ CorePopupPrototype.open.apply(self, arguments); } - self._setArrowFocus(); - self._setKeyboardSupport(objectUtils.merge({}, options || {}, self.options)); + self._setKeyboardSupport(options || {}); } }; - /** - * Close popup - * @method close - * @protected - * @member ns.widget.tv.Popup - */ prototype.close = function() { - var self = this, - activeElement, - popupElement; - - if (self._isOpened()) { + if (this._isOpened()) { if (typeof CorePopupPrototype.close === FUNCTION_TYPE) { - CorePopupPrototype.close.apply(self, arguments); - } - - self._cleanArrowFocus(); - self.disableKeyboardSupport(); - self.restoreKeyboardSupport(); - - // remove listener on keydown in case of popup without focusable elements - closingOnKeydown(self, false); - - //checking that current focused element is inside this popup - activeElement = document.activeElement; - popupElement = utilSelectors.getClosestByClass(activeElement, classes.popup); - if (popupElement) { - // blur any focused elements - activeElement.blur(); + CorePopupPrototype.close.apply(this, arguments); } - } - }; - - prototype._cleanArrowFocus = function () { - var self = this, - nearestLinkForArrow = self._nearestLinkForArrow, - callbacks = self._callbacks; - self._ui.arrow.classList.remove(classes.focus); - if (nearestLinkForArrow) { - nearestLinkForArrow.removeEventListener("focus", callbacks._onFocusArrow, false); - nearestLinkForArrow.removeEventListener("blur", callbacks._onBlurArrow, false); - } - }; + this.disableKeyboardSupport(); + this._pageWidget.enableKeyboardSupport(); - prototype._setArrowFocus = function () { - var self = this, - element = self.element, - callbacks = self._callbacks, - arrow = self._ui.arrow, - arrowHeight = arrow.offsetHeight, - arrowTop = DOM.getElementOffset(arrow).top, - links = element.querySelectorAll(self.getActiveSelector()), - linksLength = links.length, - link, - linkTop, - nearestLinkForArrow, - i = 0; - - if (element.classList.contains(classes.context)) { - switch (arrow.getAttribute("type")) { - case "l": - case "r": - while (!nearestLinkForArrow && i < linksLength) { - link = links[i]; - linkTop = DOM.getElementOffset(link).top; - if (linkTop + link.offsetHeight > arrowTop && linkTop < arrowTop) { - nearestLinkForArrow = link; - } - i++; - } - break; - case "t": - while (!nearestLinkForArrow && i < linksLength) { - link = links[i]; - if (DOM.getElementOffset(link).top < arrowTop + arrowHeight) { - nearestLinkForArrow = link; - } - i++; - } - break; - case "b": - while (!nearestLinkForArrow && i < linksLength) { - link = links[i]; - if (DOM.getElementOffset(link).top + link.offsetHeight > arrowTop) { - nearestLinkForArrow = link; - } - i++; - } - break; - } - if (nearestLinkForArrow) { - callbacks._onFocusArrow = onFocusArrow.bind(null, arrow); - callbacks._onBlurArrow = onBlurArrow.bind(null, arrow); - nearestLinkForArrow.addEventListener("focus", callbacks._onFocusArrow, false); - nearestLinkForArrow.addEventListener("blur", callbacks._onBlurArrow, false); - self._nearestLinkForArrow = nearestLinkForArrow; - } + closingOnKeydown(this, false); } }; - function onFocusArrow(arrow) { - arrow.classList.add(classes.focus); - } - - function onBlurArrow(arrow) { - arrow.classList.remove(classes.focus); - } - prototype._bindEvents = function(element) { if (typeof CorePopupPrototype._bindEvents === FUNCTION_TYPE) { CorePopupPrototype._bindEvents.call(this, element); @@ -478,101 +202,10 @@ this._bindEventKey(); }; - /** - * Refresh popup settings and body. - * This method sets header icon and custom popup colors in case custom popup is used. - * @method _refresh - * @protected - * @member ns.widget.tv.Popup - */ - prototype._refresh = function() { - var self = this, - element = self.element; - - if (typeof CorePopupPrototype._refresh === FUNCTION_TYPE) { - CorePopupPrototype._refresh.call(self); - } - - setHeaderIcon(self, element); - setCustomPopupColors(self); - self._initTimeout(); - }; - - /** - * Show popup. - * @method _onShow - * @protected - * @member ns.widget.tv.Popup - */ - prototype._onShow = function () { - var self = this, - options = self.options; - - setCustomPopupColors(self); - - if (typeof CorePopupPrototype._onShow === FUNCTION_TYPE) { - CorePopupPrototype._onShow.call(self); - } - - // Auto-close popup after a defined timeout if it is a notification popup - if (self.element.classList.contains(classes.notification)) { - self._timers.notification = setTimeout(self.close.bind(self), options.timeout); - } - }; - - /** - * Clears notification timeout in case it was set - * @method _clearNotificationTimeout - * @param {ns.widget.tv.Popup} self - * @private - * @member ns.widget.tv.Popup - */ - function clearNotificationTimeout(self) { - if (self._timers.notification) { - clearTimeout(self._timers.notification); - self._timers.notification = null; - } - } - - /** - * On popup hide. - * @method _onHide - * @protected - * @member ns.widget.tv.Popup - */ - prototype._onHide = function () { - var self = this; - - if (typeof CorePopupPrototype._onHide === FUNCTION_TYPE) { - CorePopupPrototype._onHide.call(self); - } - - clearNotificationTimeout(self); - }; - - /** - * Destroys the widget, removes the header icon if was created before - * @method _destroy - * @protected - * @member ns.widget.tv.Popup - */ prototype._destroy = function() { - var self = this, - ui = this._ui; - - if (ui.headerIcon) { - ui.headerIcon.parentElement.removeChild(ui.headerIcon); - ui.headerIcon = null; - } - - // Clear timeout in case the destroy was triggered before closing popup - clearNotificationTimeout(self); - - // @TODO reset styles to base - - self._destroyEventKey(); + this._destroyEventKey(); if (typeof CorePopupPrototype._destroy === FUNCTION_TYPE) { - CorePopupPrototype._destroy.call(self); + CorePopupPrototype._destroy.call(this); } }; diff --git a/tau/src/js/profile/tv/widget/Progress.js b/tau/src/js/profile/tv/widget/Progress.js index e154b68e..3e45999a 100644 --- a/tau/src/js/profile/tv/widget/Progress.js +++ b/tau/src/js/profile/tv/widget/Progress.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** @@ -115,7 +104,7 @@ * @protected * @member ns.widget.tv.Progress */ - prototype._setValue = function (element, value) { + prototype._setValue = function (value) { var self = this, options = self.options; if ((typeof value === "number") && (value !== options.value) && (value >= options.min) && (value <= options.max)) { diff --git a/tau/src/js/profile/tv/widget/ScrollHandler.js b/tau/src/js/profile/tv/widget/ScrollHandler.js deleted file mode 100644 index 98ea9dc9..00000000 --- a/tau/src/js/profile/tv/widget/ScrollHandler.js +++ /dev/null @@ -1,245 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/** - * # ScrollHandler Widget - * - * @class ns.widget.tv.ScrollHandler - * @extends ns.widget.mobile.ScrollHandler - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../tv", - "../../../core/engine", - "../../../core/util/object", - "../../../core/util/DOM/css", - "../../../core/widget/core/Scrollview", - "../../../profile/mobile/widget/mobile/ScrollHandler" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var engine = ns.engine, - objectUtils = ns.util.object, - BaseScrollHandler = ns.widget.mobile.ScrollHandler, - CSSUtils = ns.util.DOM, - Scrollview = ns.widget.core.Scrollview, - BaseScrollHandlerPrototype = BaseScrollHandler.prototype, - ScrollHandler = function () { - var self = this; - self._callbacks = {}; - BaseScrollHandler.call(self); - self.options = objectUtils.merge(self.options, defaults); - }, - classes = BaseScrollHandler.classes, - defaults = objectUtils.merge({}, BaseScrollHandler.defaults, { - delay: 5000, - scrollIndicator: true - }), - FUNCTION_TYPE = "function", - prototype = new BaseScrollHandler(), - min = Math.min, - floor = Math.floor; - - ScrollHandler.events = BaseScrollHandler.events; - ScrollHandler.classes = classes; - ScrollHandler.prototype = prototype; - - /** - * Translates objects position to a new position - * @param {ns.widget.tv.ScrollHandler} self - * @param {number} xOffset - * @param {number} yOffset - * @member ns.widget.tv.ScrollHandler - * @private - * @static - */ - function translate(self, xOffset, yOffset) { - var style = null, - translateString = null; - - if (self.options.handler) { - translateString = "translate3d(" + (xOffset || 0) + "px, " + (yOffset || 0) + "px, 0px)"; - CSSUtils.setPrefixedStyle(self.ui.handle, "transform", translateString); - } - } - - /** - * Sets handler position according to scrollviews position - * @param {ns.widget.tv.ScrollHandler} self - * @member ns.widget.tv.ScrollHandler - * @private - * @static - */ - function syncHandleWithScroll(self) { - var position = self.getScrollPosition(), - offsets = self._offsets, - direction = self.options.direction, - x = floor(min(position.x, self._availableOffsetX) / self._availableOffsetX * offsets.maxX), - y = floor(min(position.y, self._availableOffsetY) / self._availableOffsetY * offsets.maxY); - - if (isNaN(x) === true) { - x = offsets.x; - } - - if (isNaN(y) === true) { - y = offsets.y; - } - - translate( - self, - direction === "y" ? 0 : x, - direction === "x" ? 0 : y - ); - - offsets.x = x; - offsets.y = y; - } - - /** - * Handles Focus on elements - * Focus will show scrollhandler when an element from container has been focused - * @param {ns.widget.tv.ScrollHandler} - * @param {MouseEvent|TouchEvent} - * @member ns.widget.tv.ScrollHandler - * @private - * @static - */ - function handleFocus(self, event) { - var element = self.element, - handler = self.ui.handler, - view = element.querySelector("." + Scrollview.classes.view), - viewHeight = CSSUtils.getElementHeight(view, "inner", true), - clipHeight = CSSUtils.getElementHeight(element, "inner", true); - - if (self._dragging === false && clipHeight <= viewHeight) { - syncHandleWithScroll(self); - if (self._hideTimer) { - clearTimeout(self._hideTimer); - } - handler.classList.add(classes.visible); - self._hideTimer = setTimeout(function () { - handler.classList.remove(classes.visible); - }, self.options.delay); - } - } - - /** - * Builds widget - * @method _build - * @param {HTMLElement} element Element of widget - * @return {HTMLElement} - * @protected - * @member ns.widget.tv.ScrollHandler - */ - prototype._build = function (element) { - element = BaseScrollHandlerPrototype._build.call(this, element); - element.style.minWidth = ""; - - return element; - }; - - /** - * Corects view width and paddings - * @member ns.widget.tv.ScrollHandler - * @private - * @static - */ - prototype._setProperWidth = function () { - var self = this, - element = self.element, - view = self._ui.view, - contentStyle = window.getComputedStyle(element), - width = parseFloat(contentStyle.width), - paddingLeft = parseFloat(contentStyle.paddingLeft), - paddingRight = parseFloat(contentStyle.paddingRight); - view.style.width = Math.floor(width - paddingLeft - paddingRight) + "px"; - }; - - /** - * Init the scrollhander and scrollview - * @param {HTMLElement} element - * @method _init - * @protected - * @member ns.widget.tv.ScrollHandler - */ - prototype._init = function (element) { - element = BaseScrollHandlerPrototype._init.call(this, element); - this._setProperWidth(); - return element; - }; - - /** - * Binds the scrollhander and scrollview events - * @param {HTMLElement} element - * @method _bindEvents - * @protected - * @member ns.widget.tv.ScrollHandler - */ - prototype._bindEvents = function (element) { - var self = this, - callbacks = self._callbacks; - - BaseScrollHandlerPrototype._bindEvents.call(self, element); - - callbacks.focus = handleFocus.bind(null, self); - - element.addEventListener("focus", callbacks.focus, true); - }; - - /** - * Destroys the scrollhander and scrollview DOM - * @method _destroy - * @protected - * @member ns.widget.tv.ScrollHandler - */ - prototype._destroy = function (element) { - var callbacks = this._callbacks; - if (typeof BaseScrollHandlerPrototype._destroy === FUNCTION_TYPE) { - BaseScrollHandlerPrototype._destroy.call(this); - } - element.removeEventListener("focus", callbacks.focus, true); - }; - - // definition - ns.widget.tv.ScrollHandler = ScrollHandler; - - engine.defineWidget( - "ScrollHandler", - ".ui-content:not([data-scroll='none']):not(.ui-scrollview-clip):not(.ui-scrolllistview),[data-handler='true'], .ui-scrollhandler", - [ - "enableHandler", - "scrollTo", - "ensureElementIsVisible", - "centerToElement", - "getScrollPosition", - "skipDragging", - "translateTo" - ], - ScrollHandler, - "tv", - true - ); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.tv.ScrollHandler; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns));
\ No newline at end of file diff --git a/tau/src/js/profile/tv/widget/SearchBar.js b/tau/src/js/profile/tv/widget/SearchBar.js deleted file mode 100644 index 39033e1b..00000000 --- a/tau/src/js/profile/tv/widget/SearchBar.js +++ /dev/null @@ -1,368 +0,0 @@ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*global window, define, ns */ -/** - * # Search Bar Widget - * The search filter bar widget is used to search for page content. - * - * This widget can be placed in the header or page content. - * - * For more information please read documentation of parent widget. - * #Search Bar Widget - * @class ns.widget.tv.SearchBar - * @extends ns.widget.mobile.SearchBar - */ -(function (document, ns) { - "use strict"; -//>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../profile/mobile/widget/mobile/SearchBar", - "../../../core/engine", - "../../../core/util/object", - "./BaseKeyboardSupport", - "../tv" - ], - function () { -//>>excludeEnd("tauBuildExclude"); - var BaseSearchBar = ns.widget.mobile.SearchBar, - BaseSearchBarPrototype = BaseSearchBar.prototype, - BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, - KEY_CODES = BaseKeyboardSupport.KEY_CODES, - engine = ns.engine, - initialScreenHeight = window.innerHeight, - objectUtils = ns.util.object, - elementIsFocused = false, - SearchBar = function() { - var self = this; - - BaseSearchBar.call(self); - self._callbacks = {}; - BaseKeyboardSupport.call(self); - self._previousCharPosition = 0; - }, - /** - * Dictionary for SearchBar related css class names - * @property {Object} classes - * @member ns.widget.tv.SearchBar - * @static - */ - classes = objectUtils.merge({}, BaseSearchBar.classes, { - iconBox: "ui-search-bar-icon-box", - highlight: "ui-highlight" - }), - prototype = new BaseSearchBar(); - - SearchBar.prototype = prototype; - SearchBar.classes = classes; - - /** - * Build icon with loop on Search Bar - * @method _buildIcon - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.SearchBar - */ - prototype._buildIcon = function(element) { - var icon = document.createElement("span"); - - icon.classList.add(classes.iconBox); - element.parentNode.appendChild(icon); - // this element has set tabindex, so it will be focusable by BaseKeyboardSupport - element.parentNode.parentNode.setAttribute("tabindex", 0); - }; - - /** - * Change default value of options - * @method _configure - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.SearchBar - */ - prototype._configure = function(element) { - BaseSearchBarPrototype._configure.call(this, element); - this.options.clearButton = false; - }; - - /** - * Build widget - * @method _build - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.SearchBar - */ - prototype._build = function(element) { - BaseSearchBarPrototype._build.call(this, element); - this._buildIcon(element); - return element; - }; - - - /** - * Method overrides Textarea behavior on keyup event. - * @method onKeyUp - * @param {SearchBar} self - * @param {Event} event - * @private - * @static - * @member ns.widget.tv.SearchBar - */ - function onKeyUp(self, event) { - var textarea = self.element, - value = textarea.value, - charCount = value.length, - currentCharPosition = textarea.selectionStart; - - switch (event.keyCode) { - case KEY_CODES.left: - if (currentCharPosition > 0 || self._previousCharPosition !== charCount) { - // we do not jump to other element - event.stopImmediatePropagation(); - } - break; - case KEY_CODES.right: - if (currentCharPosition < charCount || self._previousCharPosition !== charCount) { - // we do not jump to other element - event.stopImmediatePropagation(); - } - break; - } - - self._previousCharPosition = charCount; - } - - - /** - * Enable or disable keyboard support after resize od screen (open - * virtual keyboard) - * @method onResize - * @param {ns.widget.tv.SearchBar} self - * @private - * @static - * @member ns.widget.tv.SearchBar - */ - function onResize(self) { - if (window.innerHeight < initialScreenHeight) { - self.saveKeyboardSupport(); - self.enableKeyboardSupport(); - } else { - self.disableKeyboardSupport(); - self.restoreKeyboardSupport(); - } - } - - /** - * Callback enable/disbale focus on input element - * @method onKeyupInput - * @param {TextInput} self - * @param {Event} event - * @private - * @static - * @member ns.widget.tv.SearchBar - */ - function onKeyupInputContainer(self, event) { - var element = self.element - - switch (event.keyCode) { - case KEY_CODES.enter: - //when the keyboard is on - if (window.innerHeight < initialScreenHeight) { - self.saveKeyboardSupport(); - self.disableKeyboardSupport(); - } else { - if (elementIsFocused) { - element.blur(); - element.parentElement.parentElement.focus(); - } else { - // input is highlighted - element.focus(); - } - } - break; - } - } - - /** - * Callback for focus event on input - * @method searchbarFocus - * @param {ns.widget.tv.SearchBar} self - * @static - * @private - * @member ns.widget.tv.SearchBar - */ - function searchbarFocus(self) { - var searchbar = self.element; - - elementIsFocused = true; - if (!searchbar.getAttribute("disabled")) { - searchbar.classList.add(classes.highlight); - searchbar.parentElement.parentElement.classList.add(classes.uiFocus); - } - self.saveKeyboardSupport(); - self.disableKeyboardSupport(); - } - - /** - * Callback for focus event on container of input - * @method searchbarContainerFocus - * @param {ns.widget.tv.SearchBar} self - * @static - * @private - * @member ns.widget.tv.SearchBar - */ - function searchbarContainerFocus(self) { - var searchbar = self.element; - - if (!searchbar.getAttribute("disabled")) { - searchbar.parentElement.parentElement.classList.add(classes.uiFocus); - } - } - - /** - * Callback for blur event on input - * @method searchbarBlur - * @param {ns.widget.tv.SearchBar} self - * @static - * @private - * @member ns.widget.tv.SearchBar - */ - function searchbarBlur(self) { - var searchbar = self.element; - - elementIsFocused = false; - searchbar.classList.remove(classes.highlight); - searchbar.parentElement.parentElement.classList.remove(classes.uiFocus); - self.restoreKeyboardSupport(); - } - - /** - * Callback for blur event on container of input - * @method searchbarContainerBlur - * @param {ns.widget.tv.SearchBar} self - * @static - * @private - * @member ns.widget.tv.SearchBar - */ - function searchbarContainerBlur(self, event) { - self.element.parentElement.parentElement.classList.remove(classes.uiFocus); - } - - /** - * Callback to prevent key movement inside input - * @method onKeyupInput - * @param {ns.widget.tv.SearchBar} self - * @param {Event} event - * @static - * @private - * @member ns.widget.tv.SearchBar - */ - function onKeyupInput(self, event) { - switch (event.keyCode) { - case KEY_CODES.up: - case KEY_CODES.down: - case KEY_CODES.left: - case KEY_CODES.right: - // when we are focused on input element, prevent actions on arrows - event.stopImmediatePropagation(); - break; - } - } - - /** - * Bind events to widget - * @method _bindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.SearchBar - */ - prototype._bindEvents = function(element) { - var self = this, - callbacks = self._callbacks, - inputBox = element.parentElement.parentElement; - - BaseSearchBarPrototype._bindEvents.call(self, element), - - self._bindEventKey(); - - callbacks.onKeyup = onKeyUp.bind(null, self); - callbacks.onResize = onResize.bind(null, self); - - element.addEventListener("keyup", callbacks.onKeyup, false); - window.addEventListener("resize", callbacks.onResize, false); - - callbacks.searchbarFocus = searchbarFocus.bind(null, self); - callbacks.searchbarBlur = searchbarBlur.bind(null, self); - callbacks.searchbarContainerFocus = searchbarContainerFocus.bind(null, self); - callbacks.searchbarContainerBlur = searchbarContainerBlur.bind(null, self); - callbacks.onKeyupInputContainer = onKeyupInputContainer.bind(null, self); - callbacks.onKeyupInput = onKeyupInput.bind(null, self); - - element.addEventListener("keyup", callbacks.onKeyupInput, false); - - inputBox.addEventListener("keyup", callbacks.onKeyupInputContainer, false); - - inputBox.addEventListener("focus", callbacks.searchbarContainerFocus, false); - inputBox.addEventListener("blur", callbacks.searchbarContainerBlur, false); - element.addEventListener("focus", callbacks.searchbarFocus, false); - element.addEventListener("blur", callbacks.searchbarBlur, false); - - }; - - /** - * Destroy widget - * @method _destroy - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.SearchBar - */ - prototype._destroy = function(element) { - var self = this, - callbacks = self._callbacks, - inputBox = element.parentElement.parentElement; - - BaseSearchBarPrototype._destroy.call(self, element); - - self._destroyEventKey(); - - element.removeEventListener("keyup", callbacks.onKeyup, false); - window.removeEventListener("resize", callbacks.onResize, false); - - element.removeEventListener("keyup", callbacks.onKeyupInput, false); - inputBox.removeEventListener("keyup", callbacks.onKeyupInputContainer, false); - - inputBox.removeEventListener("focus", callbacks.searchbarContainerFocus, false); - inputBox.removeEventListener("blur", callbacks.searchbarContainerBlur, false); - element.removeEventListener("focus", callbacks.searchbarFocus, false); - element.removeEventListener("blur", callbacks.searchbarBlur, false); - }; - - engine.defineWidget( - "SearchBar", - "input[type='search'], [data-type='search'], [data-type='tizen-search'], .ui-searchbar", - [], - SearchBar, - "tv", - true - ); - - ns.widget.tv.SearchBar = SearchBar; - -//>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return SearchBar; - } - ); -//>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/tv/widget/SelectMenu.js b/tau/src/js/profile/tv/widget/SelectMenu.js deleted file mode 100644 index f27e2033..00000000 --- a/tau/src/js/profile/tv/widget/SelectMenu.js +++ /dev/null @@ -1,274 +0,0 @@ -/*global window, ns*/ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #SelectMenu Widget - * SelectMenu widget provide creating SelectMenu widget in the form of dropdown list and managing its operation. - * - * ##Default selector - * In default all select elements with _data-role=select_ or with class .ui-select-menu - * are changed to Tizen WebUI SelectMenu. Additionally elements with - * _data-native-menu=false_ will use custom popups for option selection - * - * ### HTML Examples - * - * #### Create SelectMenu - * Default value of data-native-menu attribute is true and it makes native SelectMenu. - * This widget also offers the possibility of having custom SelectMenu. - * - * @example - * <select> - * <option value="1">Item1</option> - * <option value="2">Item2</option> - * <option value="3">Item3</option> - * <option value="4">Item4</option> - * </select> - * - * ## Manual constructor - * For manual creation of SelectMenu widget you can use constructor of widget. - * - * @example - * <select id="selectmenu"> - * <option value="1">Item1</option> - * <option value="2">Item2</option> - * <option value="3">Item3</option> - * <option value="4">Item4</option> - * </select> - * <script> - * var element = document.getElementById("selectmenu"), - * widget = tau.widget.SelectMenu(element); - * </script> - * - * ##Sort type - * You can declare to the type of SelectMenu manually. - * If you set data-label attribute to true(Default is false.), SelectMenu has sort type. - * - * @example - * <div style="width:300px; height:150px;"> - * <select id="selectmenu" data-sort="true"> - * <option value="1">Item1</option> - * <option value="2">Item2</option> - * <option value="3">Item3</option> - * <option value="4">Item4</option> - * </select> - * </div> - * - * ##Methods - * To call method on widget you can use one of existing API: - * - * First API is from tau namespace: RECOMMEND - * - * @example - * var element = document.getElementById("selectmenu"), - * widget = tau.widget.SelectMenu(element); - * widget.methodName(methodArgument1, methodArgument2, ...); - * - * - * - "open" - SelectMenu open - * - * @example - * var elSelectMenu = document.getElementById("selectmenu"), - * widget = tau.widget.SelectMenu(elSelectMenu); - * widget.open(); - * - * - "close" - SelectMenu close - * - * @example - * var elSelectMenu = document.getElementById("selectmenu"), - * widget = tau.widget.SelectMenu(elSelectMenu); - * widget.close(); - * - * - "refresh" - This method refreshs the SelectMenu widget. - * - * @example - * var elSelectMenu = document.getElementById("selectmenu"), - * widget = tau.widget.SelectMenu(elSelectMenu); - * widget.refresh(); - * - * @class ns.widget.tv.SelectMenu - * @extends ns.widget.mobile.SelectMenu - * @author Maciej Moczulski <m.moczulski@samsung.com> - * @author Maciej Urbanski <m.urbanski@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../profile/mobile/widget/mobile/SelectMenu", - "../../../core/engine", - "../../../core/theme", - "../../../core/util/selectors", - "../../../core/event", - "../../../core/util/DOM/manipulation", - "../../../core/util/object", - "../tv", - "./BaseKeyboardSupport" - ], - - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseSelectMenu = ns.widget.mobile.SelectMenu, - BaseSelectMenuPrototype = BaseSelectMenu.prototype, - BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, - engine = ns.engine, - objectUtils = ns.util.object, - selectors = ns.util.selectors, - KEY_CODES = BaseKeyboardSupport.KEY_CODES, - slice = Array.prototype.slice, - SelectMenu = function () { - var self = this; - - BaseSelectMenu.call(self); - self._callbacks = {}; - BaseKeyboardSupport.call(self); - - /** - * @property {Object} options Object with default options - * @property {boolean} [options.nativeMenu=false] Sets the SelectMenu widget as native/custom type. - * @property {boolean} [options.sort=false] Sets the SelectMenu widget with sorting possibility. - * @member ns.widget.tv.SelectMenu - */ - self.options = { - nativeMenu: false, - inline: false, - sort: false - }; - }, - /** - * Dictionary for SelectMenu related css class names - * @property {Object} classes - * @member ns.widget.tv.SelectMenu - * @static - */ - classes = objectUtils.merge({}, BaseSelectMenu.classes, { - }), - FUNCTION_TYPE = "function", - prototype = new BaseSelectMenu(); - - SelectMenu.prototype = prototype; - SelectMenu.classes = classes; - - prototype._configure = function () { - /** - * @property {boolean} [options.backgroundLayer=false] Enable or disable background layer which close select menu after click - */ - this.options.backgroundLayer = false; - }; - - /** - * Calculate position of list after open - * @method _coordinateOption - * @return {String} - * @protected - * @member ns.widget.tv.SelectMenu - */ - prototype._coordinateOption = function () { - var self = this, - ui = self._ui, - offsetTop, - optionStyle, - width; - - width = ui.elSelectWrapper.offsetWidth; - optionStyle = BaseSelectMenuPrototype._coordinateOption.call(self); - offsetTop = self._offset.top + ui.elSelectWrapper.offsetHeight; - optionStyle = optionStyle.replace(/top: (\d+\.?\d*)px/i, "top:" + offsetTop + "px"); - optionStyle = optionStyle.replace(/width: (\d+\.?\d*)px/i, "width: " + width + "px"); - - return optionStyle; - }; - - /** - * Init widget - * @method _init - * @protected - * @member ns.widget.tv.SelectMenu - */ - prototype._init = function(element) { - var self= this, - ui = self._ui; - - BaseSelectMenuPrototype._init.call(self, element); - - //change base element for keyboard support - self.keyboardElement = ui.elOptionContainer; - }; - - /** - * Init widget - * @method _bindEvents - * @protected - * @member ns.widget.tv.SelectMenu - */ - prototype._bindEvents = function(element) { - var self= this, - ui = self._ui; - - BaseSelectMenuPrototype._bindEvents.call(self, element); - - self._bindEventKey(); - }; - - /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.tv.SelectMenu - */ - prototype._destroy = function(element) { - var self= this, - ui = self._ui; - - BaseSelectMenuPrototype._destroy.call(self, element); - - self._destroyEventKey(); - }; - - /** - * Open and Close Option List - * @method _toggleSelect - * @protected - * @member ns.widget.tv.SelectMenu - */ - prototype._toggleSelect = function (){ - var self = this; - if (self._isOpen) { - self.disableKeyboardSupport(); - self.restoreKeyboardSupport(); - } else { - self.saveKeyboardSupport(); - self.enableKeyboardSupport(); - } - BaseSelectMenuPrototype._toggleSelect.call(self); - }; - - engine.defineWidget( - "SelectMenu", - "select:not([data-role='slider']):not([data-role='range']):not([data-role='toggleswitch']):not(.ui-toggleswitch):not(.ui-slider)" + - ", select.ui-select-menu:not([data-role='slider']):not([data-role='range']):not([data-role='toggleswitch'])", - ["open", "close"], - SelectMenu, - "tv", - true - ); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.tv.SelectMenu = SelectMenu; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns));
\ No newline at end of file diff --git a/tau/src/js/profile/tv/widget/Slider.js b/tau/src/js/profile/tv/widget/Slider.js index 2b60c9fc..681d3b80 100644 --- a/tau/src/js/profile/tv/widget/Slider.js +++ b/tau/src/js/profile/tv/widget/Slider.js @@ -1,18 +1,7 @@ -/*global ns */ +/*global window, define, ns */ /* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /* @@ -103,6 +92,7 @@ BaseKeyboardSupport.call(self); self._pageWidget = null; self._callbacks = {}; + self.status = false; }, engine = ns.engine, selectors = ns.util.selectors, @@ -110,8 +100,7 @@ // Slider inherits TizenSlider classes with additional // "ui-focus". classes = objectUtils.merge({}, BaseSlider.classes, { - focus: "ui-focus", - disabled: ns.widget.BaseWidget.classes.disable + focus: "ui-focus" }), FUNCTION_TYPE = "function", prototype = new BaseSlider(), @@ -145,19 +134,34 @@ * @member ns.widget.tv.Slider */ function onKeyup(self, event) { - var keyCode = event.keyCode; - - switch (keyCode) { - case KEY_CODES.up: - case KEY_CODES.down: - self.saveKeyboardSupport(); - self.disableKeyboardSupport(); - break; - case KEY_CODES.left: - case KEY_CODES.right: - self.enableKeyboardSupport(); - self.restoreKeyboardSupport(); - break; + var status = self.status; + + if (event.keyCode === KEY_CODES.enter) { + if (status) { + self._ui.container.focus(); + self._pageWidget.enableKeyboardSupport(); + } else { + self._ui.handle.focus(); + showPopup(self); + self._pageWidget.disableKeyboardSupport(); + } + self.status = !status; + } + } + + /** + * Keydown event-handling method. + * @method onKeydown + * @param {ns.widget.tv.Slider} self + * @param {Event} event + * @private + * @static + * @member ns.widget.tv.Slider + */ + function onKeydown(self, event) { + if (event.keyCode !== KEY_CODES.enter && !self.status) { + event.preventDefault(); + event.stopPropagation(); } } @@ -170,11 +174,7 @@ * @member ns.widget.tv.Slider */ function onFocus(self) { - if (!self.isDisabled()) { - self.enableKeyboardSupport(); - self._ui.container.classList.add(classes.focus); - showPopup(self); - } + self._ui.container.classList.add("ui-focus"); } /** @@ -186,33 +186,10 @@ * @member ns.widget.tv.Slider */ function onBlur(self) { - if (!self.isDisabled()) { - self._ui.container.classList.remove(classes.focus); - self._hidePopup(); - } + self._ui.container.classList.remove("ui-focus"); } /** - * Configure slider widget - * @method _configure - * @param {HTMLInputElement|HTMLSelectElement} element - * @protected - * @member ns.widget.tv.Slider - */ - prototype._configure = function(element) { - var options; - BaseSliderPrototype._configure.call(this, element); - - options = this.options; - options.popup = true; - - if (options.textLeft === null && options.textRight === null) { - options.textLeft = element.getAttribute("min"); - options.textRight = element.getAttribute("max"); - } - }; - - /** * Build structure of slider widget * @method _build * @param {HTMLInputElement|HTMLSelectElement} element @@ -226,11 +203,10 @@ container, containerStyle, handler; - this._pageWidget = engine.getBinding(pageElement, "Page"); + this._pageWidget = engine.getBinding(pageElement, "page"); element = BaseSliderPrototype._build.call(this, element); - // focus is enabled only on container, because the position of whole slider (not only handler) - // is important for setting focus by BaseKeyboardSupport + // focus is enabled only on container container = ui.container; container.classList.add(BaseKeyboardSupport.classes.focusEnabled); container.setAttribute("tabindex", 0); @@ -266,40 +242,7 @@ BaseSliderPrototype._init.call(this, element); this.enableKeyboardSupport(); - this._pageWidget = this._pageWidget || engine.getBinding(pageElement, "Page"); - }; - - /** - * Enable slider - * @method _enable - * @param {HTMLInputElement|HTMLSelectElement} element - * @protected - * @member ns.widget.tv.Slider - */ - prototype._enable = function (element) { - var self = this, - container = self._ui.container; - - BaseSliderPrototype._enable.call(self, element); - container.classList.remove(classes.disabled); - container.setAttribute("aria-disabled", false); - }; - - /** - * Disable slider - * @method _disable - * @param {HTMLInputElement|HTMLSelectElement} element - * @protected - * @member ns.widget.tv.Slider - */ - prototype._disable = function (element) { - var self = this, - container = self._ui.container; - - BaseSliderPrototype._disable.call(self, element); - // set disability on container - container.classList.add(classes.disabled); - container.setAttribute("aria-disabled", true); + this._pageWidget = this._pageWidget || engine.getBinding(pageElement, "page"); }; /** @@ -316,12 +259,14 @@ BaseSliderPrototype._bindEvents.call(this, element); callbacks.onKeyup = onKeyup.bind(null, this); + callbacks.onKeydown = onKeydown.bind(null, this); callbacks.onFocus = onFocus.bind(null, this); callbacks.onBlur = onBlur.bind(null, this); this._bindEventKey(); - container.addEventListener("keyup", callbacks.onKeyup, true); + container.addEventListener("keyup", callbacks.onKeyup, false); + container.addEventListener("keydown", callbacks.onKeydown, true); container.addEventListener("focus", callbacks.onFocus, true); container.addEventListener("blur", callbacks.onBlur, true); }; @@ -344,16 +289,16 @@ popup = document.createElement("div"); pageElement = (this._pageWidget && this._pageWidget.element) || document.body; pageElement.appendChild(popup); - popup.classList.add(classes.uiSliderPopup); // Create widget instance out of popup element popupInstance = engine.instanceWidget(popup, "Popup", { - positionTo: "origin", - link: this._ui.handle.id, // positioned to slider's element + positionTo: "#" + this._ui.handle.id, // positioned to slider's element transition: "none", overlay: false, arrow: "b,t", - changeContext: false + distance: 10, + specialContainerClass: classes.uiSliderPopupContainer }); + popup.classList.add(classes.uiSliderPopup); return popupInstance; }; @@ -398,7 +343,7 @@ self.trigger("update", newValue); } else { - // If text doesn"t change reposition only popup + // If text doesn't change reposition only popup // no need to run full refresh if (self._popup) { self._popup.reposition(); @@ -419,6 +364,7 @@ this._destroyEventKey(); container.removeEventListener("keyup", callbacks.onKeyup, false); + container.removeEventListener("keydown", callbacks.onKeydown, false); ui.handle.removeEventListener("focus", callbacks.onFocus, true); container.removeEventListener("blur", callbacks.onBlur, true); diff --git a/tau/src/js/profile/tv/widget/SpinControl.js b/tau/src/js/profile/tv/widget/SpinControl.js deleted file mode 100644 index 7afbd7d0..00000000 --- a/tau/src/js/profile/tv/widget/SpinControl.js +++ /dev/null @@ -1,777 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/** - * #Spin Control Widget - * Decorator for inputs type number elements. - * - * ## Default selectors - * In default elements matches to : - * - * - INPUT with type "number" - * - * ###HTML Examples - * - * ####Create simple spin control on INPUT element - * - * @example - * <form> - * <label for="spin-1">Spin Control:</label> - * <input type="number" name="spin-1" id="spin-1" value=""> - * </form> - * - * ## Manual constructor - * For manual creation of SpinControl widget you can use constructor of widget - * from **tau** namespace: - * - * @example - * <form> - * <label for="spin-2">Spin Control:</label> - * <input type="number" name="spin-2" id="spin-2" value=""> - * </form> - * <script> - * var inputElement = document.getElementById("spin-2"), - * spinControl = tau.widget.SpinControl(inputElement); - * </script> - * - * Constructor has one require parameter **element** which are base - * **HTMLElement** to create widget. We recommend get this element by method - * *document.getElementById*. - * - * @class ns.widget.tv.SpinControl - * @extends ns.widget.core.BaseWidget - * @author Tomasz Lukawski <t.lukawski@samsung.com> - */ -(function (window, document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../tv", - "../../../core/engine", - "../../../core/util/selectors", - "../../../core/util/object", - "../../../core/event", - "../../../core/widget/BaseWidget", - "../../../core/widget/core/Popup", - "../../../profile/mobile/widget/mobile/Button", - "./BaseKeyboardSupport" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var widget = ns.widget, - BaseWidget = widget.BaseWidget, - BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, - engine = ns.engine, - events = ns.event, - SpinControl = function () { - var self = this; - BaseWidget.call(self); - - self._callbacks = { - onFocus: null, - onActive: null, - onExit: null - }; - self._ui = { - wrapper: null, - number: null, - up: null, - down: null, - overlay: null, - placeholder: null - }; - self.options = { - loop: false, - active: false, - deactivateOnExit: true, - showInLightBox: true, - max: null, - usePlaceholder: true, - numberOfDigits: 0 // number of digits, default: -1 (input.max length) - }; - self._temporaryValue = 0; - self._insertNumberMode = false; - }, - /** - * Dictionary for textinput related css class names - * @property {Object} classes - * @member ns.widget.tv.SpinControl - * @static - */ - classes = { - disabled: widget.mobile.Button.classes.uiDisabled, - spinControl: "ui-spin-control", - focus: "ui-spin-control-focus", - active: "ui-spin-control-active", - overlay: "ui-spin-control-overlay", - number: "ui-spin-control-number", - placeholder: "ui-spin-control-placeholder", - up: "up", - down: "down" - }, - KEY_CODES = BaseKeyboardSupport.KEY_CODES, - NUMBER_PLACEHOLDER_CHAR = "_", - firstCharRegExp = /[0-9]/, - placeholderCharRegExp = /[0-9]/, - prototype = new BaseWidget(), - selector = "input[type='number']"; - - firstCharRegExp.compile("^" + NUMBER_PLACEHOLDER_CHAR); - placeholderCharRegExp.compile(NUMBER_PLACEHOLDER_CHAR, "g"); - - SpinControl.classes = classes; - SpinControl.prototype = prototype; - SpinControl.selector = selector; - - /** - * Method adds span to input. - * @method wrap - * @param {SpinControl} self - * @param {EventTarget|HTMLElement} element - * @private - * @static - * @member ns.widget.tv.SpinControl - */ - function wrap(self, element) { - var focusableInputFrame = document.createElement("div"), - parent = element.parentNode, - up = document.createElement("div"), - down = document.createElement("div"), - number = document.createElement("div"), - placeholder = document.createElement("div"), - ui = self._ui; - - up.classList.add(classes.up); - down.classList.add(classes.down); - number.classList.add(classes.number); - focusableInputFrame.classList.add(classes.spinControl); - placeholder.classList.add(classes.placeholder); - - focusableInputFrame.setAttribute("tabindex", 0); - - if (self.options.usePlaceholder) { - placeholder.appendChild(focusableInputFrame); - parent.replaceChild(placeholder, element); - } else { - parent.replaceChild(focusableInputFrame, element); - } - - focusableInputFrame.appendChild(up); - focusableInputFrame.appendChild(number); - focusableInputFrame.appendChild(element); - focusableInputFrame.appendChild(down); - - ui.wrapper = focusableInputFrame; - ui.number = number; - ui.up = up; - ui.down = down; - ui.placeholder = placeholder; - } - - /** - * Method removes span from input. - * @method unwrap - * @param {ns.widget.tv.SpinControl} self - * @private - * @static - * @member ns.widget.tv.SpinControl - */ - function unwrap(self) { - var ui = self._ui, - wrapper = self.options.usePlaceholder ? ui.placeholder : ui.wrapper; - - wrapper.parentNode.replaceChild(self.element, wrapper); - wrapper.innerHTML = ""; - } - - function onFocus(self) { - if (!self.element.hasAttribute("disabled")) { - self.addFocusClass(); - } - } - - function onExit(self) { - self._exit(); - } - - function onClickOverlay(self) { - self._onClickOverlay(); - } - - /** - * Handler on overlay click - * @method _onClickOverlay - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._onClickOverlay = function () { - this._hideOverlay(); - }; - - /** - * Exit from widget opposite of setActive - * @method _exit - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._exit = function () { - var self = this; - - disableInsertDigit(self); - - if (self.options.deactivateOnExit) { - self.setActive(false); - } - if (document.activeElement !== self._ui.wrapper) { - self.disableFocus(); - } - }; - - /** - * Sets max limit of value - * @method _createOverlay - * @param {HTMLInputElement} element - * @param {number|string} value - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._setMax = function (element, value) { - var min = parseInt(element.getAttribute("min")); - - if (min < value) { - element.setAttribute("max", value); - - if (element.value > value) { - element.value = value; - } - this.options.numberOfDigits = value.toFixed().length; - - this._updateVisibleValue(element.value, "0"); - } - }; - - /** - * Create overlay below widget - * @method _createOverlay - * @protected - * @member ns.widget.tv.SpinControl - * @return {HTMLElement} overlay - */ - prototype._createOverlay = function () { - var overlay; - - overlay = document.createElement("div"); - overlay.classList.add(classes.overlay); - overlay.addEventListener("vclick", onClickOverlay.bind(null, this)); - - return overlay; - }; - - /** - * Shows overlay below widget - * @method _showOverlay - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._showOverlay = function() { - var self = this, - ui = self._ui, - options = self.options, - wrapper; - - if (options.showInLightBox && ui.overlay === null) { - ui.overlay = self._createOverlay(); - wrapper = options.usePlaceholder ? ui.placeholder : ui.wrapper; - wrapper.parentElement.appendChild(ui.overlay); - } - }; - - /** - * Hide overlay below widget - * @method _hideOverlay - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._hideOverlay = function () { - var self = this, - overlay = self._ui.overlay; - - if (overlay !== null && overlay.parentNode) { - overlay.parentNode.removeChild(overlay); - self._ui.overlay = null; - } - }; - - /** - * Enables focus on widget - * @method disableFocus - * @member ns.widget.tv.SpinControl - */ - prototype.addFocusClass = function () { - this._ui.wrapper.classList.add(classes.focus); - }; - - /** - * Remove focus classes from element - * @method removeFocusClass - * @member ns.widget.tv.SpinControl - */ - prototype.removeFocusClass = function () { - var wrapper = this._ui.wrapper; - - if (wrapper) { - wrapper.classList.remove(classes.focus); - } - }; - - /** - * Enables focus on widget - * @method enableFocus - * @member ns.widget.tv.SpinControl - */ - prototype.enableFocus = function () { - this.addFocusClass(); - this._ui.wrapper.focus(); - }; - - /** - * Remove focus from widget - * @method disableFocus - * @member ns.widget.tv.SpinControl - */ - prototype.disableFocus = function () { - this.removeFocusClass(); - }; - - prototype.enablePlaceholder = function () { - var wrapper = this._ui.wrapper, - style = this._ui.placeholder.style; - - style.width = wrapper.offsetWidth + 1 + "px"; - style.height = wrapper.offsetHeight + "px"; - }; - - prototype.disablePlaceholder = function () { - var style = this._ui.placeholder.style; - - style.width = null; - style.height = null; - }; - - /** - * Activates widget - * @method setActive - * @param {boolean} active - * @member ns.widget.tv.SpinControl - */ - prototype.setActive = function (active) { - var self = this, - options = self.options; - - if (options.active !== active) { - if (options.usePlaceholder) { - if (options.active) { - self.disablePlaceholder(); - } else { - self.enablePlaceholder(); - } - } - if (active) { - self._ui.wrapper.classList.add(classes.active); - if (document.activeElement === self._ui.wrapper) { - self.addFocusClass(); - } - self._showOverlay(); - } else { - self._hideOverlay(); - self._ui.wrapper.classList.remove(classes.active); - } - options.active = active; - } - }; - - function onActive(self, event) { - if (!self.options.active) { - if (event._originalEvent && event._originalEvent.keyCode === KEY_CODES.enter) { - events.stopImmediatePropagation(event); - } - self.setActive(true); - } - } - - /** - * Update visible value of widget - * @method _updateVisibleValue - * @param {*} value - * @param {string} emptyChar - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._updateVisibleValue = function (value, emptyChar) { - var number = this._ui.number, - size = this.options.numberOfDigits; - - value = typeof value === "number" ? - value : value === "" ? - 0 : parseInt(value); - emptyChar = emptyChar || "0"; - - number.innerHTML = new Array(size - value.toFixed().length + 1).join(emptyChar) + value; - }; - - /** - * Handler for click on increase number value - * @method onUp - * @param {ns.widget.tv.SpinControl} self - * @private - * @member ns.widget.tv.SpinControl - */ - function onUp(self) { - var element = self.element; - - if (element.value === element.max) { - if (self.options.loop) { - element.value = element.min; - } - } else { - element.stepUp(); - } - - self._updateVisibleValue(element.value, "0"); - events.trigger(element, "input"); - } - - /** - * Handler for click on decrease number value - * @method onDown - * @param {ns.widget.tv.SpinControl} self - * @private - * @member ns.widget.tv.SpinControl - */ - function onDown(self) { - var element = self.element; - - if (element.value === element.min) { - if (self.options.loop) { - element.value = element.max; - } - } else { - element.stepDown(); - } - - self._updateVisibleValue(element.value, "0"); - events.trigger(element, "input"); - } - - /** - * Validate value entered from number keyboard - * @method insertDigitValidation - * @param {ns.widget.tv.SpinControl} self - * @private - * @member ns.widget.tv.SpinControl - * @return {boolean} - */ - function insertDigitValidation(self) { - var element = self.element, - value = parseInt(self._temporaryValue.replace(placeholderCharRegExp, "")); - - return parseInt(element.max, 10) >= value && parseInt(element.min, 10) <= value; - } - - /** - * Confirmation of value entered from number keyboard - * @method insertDigitValidation - * @param {ns.widget.tv.SpinControl} self - * @private - * @member ns.widget.tv.SpinControl - */ - function insertDigitConfirm(self) { - var element = self.element; - - if (insertDigitValidation(self)) { - element.value = parseInt(self._temporaryValue.replace(placeholderCharRegExp, "")); - events.trigger(element, "input"); - } - disableInsertDigit(self); - } - - /** - * Handler on insert number value from number keyboard - * @method insertDigitValidation - * @param {ns.widget.tv.SpinControl} self - * @private - * @member ns.widget.tv.SpinControl - */ - function insertDigit(self, digit) { - self._insertNumberMode = true; - - if (self._temporaryValue.replace(placeholderCharRegExp, "").length >= self.options.numberOfDigits) { - self._temporaryValue = new Array(self.options.numberOfDigits + 1).join(NUMBER_PLACEHOLDER_CHAR); - } - self._temporaryValue = self._temporaryValue.replace(firstCharRegExp, "") + digit; - - self._updateVisibleValue(self._temporaryValue.replace(placeholderCharRegExp, ""), NUMBER_PLACEHOLDER_CHAR); - } - - /** - * Disables the number keyboard insert mode - * @method disableInsertDigit - * @param {ns.widget.tv.SpinControl} self - * @private - * @member ns.widget.tv.SpinControl - */ - function disableInsertDigit(self) { - var element = self.element; - - if (self._insertNumberMode) { - self._updateVisibleValue(element.value, "0"); - self._temporaryValue = new Array(self.options.numberOfDigits + 1).join(NUMBER_PLACEHOLDER_CHAR); - self._insertNumberMode = false; - } - } - - /** - * Method on keyup event. - * @method onKeyup - * @param {TextInput} self - * @param {Event} event - * @private - * @static - * @member ns.widget.tv.SpinControl - */ - function onKeyup(self, event) { - var keyCode = event.keyCode; - - if (self.options.active) { - switch (keyCode) { - case KEY_CODES.up: - disableInsertDigit(self); - onUp(self, event); - // we do not jump to other element - events.stopImmediatePropagation(event); - events.preventDefault(event); - break; - case KEY_CODES.down: - disableInsertDigit(self); - onDown(self, event); - // we do not jump to other element - events.stopImmediatePropagation(event); - events.preventDefault(event); - break; - case KEY_CODES.left: - case KEY_CODES.right: - if (self._insertNumberMode) { - disableInsertDigit(self); - } - // we do not jump to other element - events.stopImmediatePropagation(event); - break; - case KEY_CODES.enter: - if (self._insertNumberMode) { - insertDigitConfirm(self); - events.preventDefault(event); - } else if (self.options.active) { - self._exit(); - } - break; - default : - // check num pad - if (keyCode >= 48 && keyCode <= 57) { - insertDigit(self, keyCode - 48); - events.stopImmediatePropagation(event); - events.preventDefault(event); - } - if (keyCode >= 96 && keyCode <= 105) { - insertDigit(self, keyCode - 96); - events.stopImmediatePropagation(event); - events.preventDefault(event); - } - } - } - } - - /** - * Gets widget value - * @method _getValue - * @protected - * @member ns.widget.tv.SpinControl - * @returns {string} - */ - prototype._getValue = function () { - return this.element.value; - }; - - /** - * Sets widget value - * @method _setValue - * @param {*} value - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._setValue = function (value) { - var element = this.element; - - element.value = parseInt(value); - this._updateVisibleValue(element.value); - events.trigger(element, "input"); - }; - - /** - * Bind events - * @method _bindEvents - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._bindEvents = function() { - var element = this.element, - self = this, - callbacks = this._callbacks, - ui = self._ui, - wrapper = ui.wrapper; - - callbacks.onFocus = onFocus.bind(null, self); - callbacks.onExit = onExit.bind(null, self); - callbacks.onActive = onActive.bind(null, self); - callbacks.onUp = onUp.bind(null, self); - callbacks.onDown = onDown.bind(null, self); - callbacks.onKeyup = onKeyup.bind(null, self); - - wrapper.addEventListener("focus", callbacks.onFocus); - wrapper.addEventListener("blur", callbacks.onExit); - wrapper.addEventListener("keyup", callbacks.onKeyup, true); - wrapper.addEventListener("vclick", callbacks.onActive, true); - ui.up.addEventListener("vclick", callbacks.onUp); - ui.down.addEventListener("vclick", callbacks.onDown); - }; - - /** - * Unbind events - * @method _unbindEvents - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._unbindEvents = function() { - var element = this.element, - self = this, - callbacks = this._callbacks, - ui = self._ui, - wrapper = ui.wrapper; - - wrapper.removeEventListener("focus", callbacks.onFocus); - wrapper.removeEventListener("blur", callbacks.onExit); - wrapper.removeEventListener("keyup", callbacks.onKeyup, true); - wrapper.removeEventListener("vclick", callbacks.onActive, true); - ui.up.removeEventListener("vclick", callbacks.onUp); - ui.down.removeEventListener("vclick", callbacks.onDown); - }; - - function checkDisable(element) { - if (element.hasAttribute("disabled")) { - element.setAttribute("aria-disabled", true); - element.classList.add("ui-disabled"); - } else { - element.setAttribute("aria-disabled", false); - } - } - - /** - * Build widget - * @method _build - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._build = function (element) { - var self = this; - - element.value = element.value || - element.getAttribute("min") || - element.getAttribute("placeholder") || - 0; - - checkDisable(element); - wrap(self, element); - - return element; - }; - - /** - * Init widget - * @method _init - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._init = function(element) { - var self = this; - - element.step = element.step || 1; - self.options.numberOfDigits = self.options.numberOfDigits || - (element.getAttribute("max") && element.getAttribute("max").length) || - 2; - - self._temporaryValue = new Array(self.options.numberOfDigits + 1).join(NUMBER_PLACEHOLDER_CHAR); - - self._updateVisibleValue( - element.value || - element.getAttribute("placeholder") - ); - }; - - /** - * Destroys additional elements created by the widget, - * removes classes and event listeners - * @method _destroy - * @protected - * @member ns.widget.tv.SpinControl - */ - prototype._destroy = function() { - var self = this, - ui = self._ui; - - self._hideOverlay(); - self._unbindEvents(); - - unwrap(self); - - ui.wrapper = null; - ui.number = null; - ui.up = null; - ui.down = null; - ui.overlay = null; - ui.placeholder = null; - }; - - widget.tv.SpinControl = SpinControl; - - engine.defineWidget( - "SpinControl", - selector, - [], - SpinControl, - "tv" - ); - - BaseKeyboardSupport.registerActiveSelector("." + classes.spinControl); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.tv.SpinControl; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); diff --git a/tau/src/js/profile/tv/widget/TextInput.js b/tau/src/js/profile/tv/widget/TextInput.js index e88fa559..8789d3df 100644 --- a/tau/src/js/profile/tv/widget/TextInput.js +++ b/tau/src/js/profile/tv/widget/TextInput.js @@ -1,18 +1,7 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* + * Copyright (c) 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -22,7 +11,7 @@ * ## Default selectors * In default elements matches to : * - * - INPUT with type "text" or "password" or "email" or "url" or + * - INPUT with type "text" or "number" or "password" or "email" or "url" or * "tel" or "month" or "week" or "datetime-local" or "color" or without any * type * - TEXTAREA @@ -76,7 +65,7 @@ * @extends ns.widget.mobile.TextInput * @author Lukasz Zajaczkowski <l.zajaczkows@samsung.com> */ -(function (window, document, ns) { +(function (document, ns) { "use strict"; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( @@ -85,15 +74,11 @@ "../../../profile/mobile/widget/mobile/Textinput", "../../../profile/mobile/widget/mobile/Button", "../../../core/engine", - "../../../core/util/selectors", - "../../../core/util/object", - "./Page", "./BaseKeyboardSupport" ], function () { //>>excludeEnd("tauBuildExclude"); - var widget = ns.widget, - MobileTextInput = widget.mobile.TextInput, + var MobileTextInput = ns.widget.mobile.TextInput, MobileTextInputPrototype = MobileTextInput.prototype, BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, /** @@ -103,16 +88,14 @@ * @static * @private */ - utilSelectors = ns.util.selectors, - utilObject = ns.util.object, engine = ns.engine, + FUNCTION_TYPE = "function", TextInput = function () { - var self = this; - MobileTextInput.call(self); - BaseKeyboardSupport.call(self); + MobileTextInput.call(this); + BaseKeyboardSupport.call(this); - self._callbacks = {}; - self._lastEventLineNumber = 0; + this._callbacks = {}; + this._lastEventLineNumber = 0; }, /** * Dictionary for textinput related css class names @@ -120,170 +103,61 @@ * @member ns.widget.tv.TextInput * @static */ - classes = utilObject.merge({}, MobileTextInput.classes, { - uiDisabled: widget.mobile.Button.classes.uiDisabled, - uiFocus: "ui-focus", - uiInputBox: "input-box", - highlight: "ui-highlight" - }), + classes = { + uiDisabled: ns.widget.mobile.Button.classes.uiDisabled, + uiNumberInput: "ui-number-input" + }, KEY_CODES = BaseKeyboardSupport.KEY_CODES, - prototype = new MobileTextInput(), - // for detect keyboard open/hide - initialScreenHeight = window.innerHeight, - //state check if user enter input inside container or leaves it - elementIsFocused = false, - selector = "input[type='text'], " + - "input[type='password'], input[type='email'], " + - "input[type='url'], input[type='tel'], textarea, " + - "input[type='month'], input[type='week'], " + - "input[type='datetime-local'], input[type='color'], " + - "input:not([type]), " + - "." +classes.uiTextinput + ":not([type='number'])"; + prototype = new MobileTextInput(); TextInput.events = MobileTextInput.events; - TextInput.classes = classes; + TextInput.classes = MobileTextInput.classes; TextInput.prototype = prototype; - TextInput.selector = selector; - - function wrapInput(element, self) { - var inputBox = document.createElement("div"), - parentElement = element.parentNode; - - inputBox.classList.add(classes.uiInputBox); - inputBox.setAttribute("tabindex", 0); - parentElement.replaceChild(inputBox, element); - - inputBox.appendChild(element); - self._ui.inputBox = inputBox; - } /** - * Init widget - * @method _bindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.TextInput - */ - prototype._build = function(element) { - var self = this; - element = MobileTextInputPrototype._build.call(self, element); - wrapInput(element, self); - - return element; - }; - - /** - * Method finds label tag for element. - * @method _findLabel - * @param {HTMLElement} element - * @member ns.widget.tv.TextInput - * @return {HTMLElement} - * @protected - */ - prototype._findLabel = function (element) { - return element.parentNode.parentNode.querySelector("label[for='" + element.id + "']"); - }; - - /** - * Callback for focus event on input - * @method inputFocus - * @param {ns.widget.tv.TextInput} self - * @static - * @private - * @member ns.widget.tv.TextInput - */ - function inputFocus(self) { - var input = self.element; - - elementIsFocused = true; - if (!input.getAttribute("disabled")) { - input.classList.add(classes.highlight); - input.parentElement.classList.add(classes.uiFocus); + * Init TextInput Widget + * @method _init + * @param {HTMLElement} element + * @member ns.widget.tv.TextInput + * @protected + */ + prototype._init = function(element) { + if (typeof MobileTextInputPrototype._init === FUNCTION_TYPE) { + MobileTextInputPrototype._init.call(this, element); } - self.saveKeyboardSupport(); - self.disableKeyboardSupport(); - } - /** - * Callback for focus event on container of input - * @method inputContainerFocus - * @param {ns.widget.tv.TextInput} self - * @static - * @private - * @member ns.widget.tv.TextInput - */ - function inputContainerFocus(self) { - var input = self.element; - - if (!input.getAttribute("disabled")) { - input.parentElement.classList.add(classes.uiFocus); + switch (element.type) { + case "number": + wrapInputNumber(element); + break; } - } - - /** - * Callback for blur event on input - * @method inputBlur - * @param {ns.widget.tv.TextInput} self - * @static - * @private - * @member ns.widget.tv.TextInput - */ - function inputBlur(self, event) { - var input = self.element; - - elementIsFocused = false; - input.classList.remove(classes.highlight); - input.parentElement.classList.remove(classes.uiFocus); - self.restoreKeyboardSupport(); - } - - /** - * Callback for blur event on container of input - * @method inputContainerBlur - * @param {ns.widget.tv.TextInput} self - * @static - * @private - * @member ns.widget.tv.TextInput - */ - function inputContainerBlur(self, event) { - self.element.parentElement.classList.remove(classes.uiFocus); - } + }; /** - * Init widget - * @method _bindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.TextInput - */ + * Bind events to widget + * @method _bindEvents + * @param {HTMLElement} element + * @protected + * @member ns.widget.tv.TextInput + */ prototype._bindEvents = function(element) { - var self = this, - callbacks = self._callbacks, - parentElement = element.parentElement; - - callbacks.inputFocus = inputFocus.bind(null, self); - callbacks.inputBlur = inputBlur.bind(null, self); - callbacks.inputContainerFocus = inputContainerFocus.bind(null, self); - callbacks.inputContainerBlur = inputContainerBlur.bind(null, self); + var callbacks = this._callbacks; - parentElement.addEventListener("focus", callbacks.inputContainerFocus, false); - parentElement.addEventListener("blur", callbacks.inputContainerBlur, false); - - element.addEventListener("focus", callbacks.inputFocus, false); - element.addEventListener("blur", callbacks.inputBlur, false); - - MobileTextInputPrototype._bindEvents.call(self, element); - - self._bindEventKey(); - - callbacks.onKeyupElementContainer = onKeyupElementContainer.bind(null, self); + if (typeof MobileTextInputPrototype._bindEvents === FUNCTION_TYPE) { + MobileTextInputPrototype._bindEvents.call(this, element); + } - callbacks.onResize = onResize.bind(null, self); + this._bindEventKey(); - element.addEventListener("keyup", onKeyupElement, false); - parentElement.addEventListener("keyup", callbacks.onKeyupElementContainer, false); + callbacks.onKeyupTextarea = onKeyupTextarea.bind(null, this); - window.addEventListener("resize", callbacks.onResize, false); + switch (element.type) { + case "number": + element.addEventListener("keyup", onKeydownInput, false); + break; + case "textarea": + element.addEventListener("keyup", callbacks.onKeyupTextarea, false); + } }; /** @@ -295,109 +169,83 @@ * @member ns.widget.tv.TextInput */ prototype._destroy = function(element) { - var self = this, - callbacks = self._callbacks, - parentElement = element.parentElement; - - parentElement.removeEventListener("focus", callbacks.inputContainerFocus, false); - parentElement.removeEventListener("blur", callbacks.inputContainerBlur, false); - - element.removeEventListener("focus", callbacks.inputFocus, false); - element.removeEventListener("blur", callbacks.inputBlur, false); + var callbacks = this._callbacks; - element.removeEventListener("keyup", onKeyupElement, false); - parentElement.removeEventListener("keyup", callbacks.onKeyupElementContainer, false); - - element.removeEventListener("keyup", callbacks.onKeyupElementContainer, false); - - self._destroyEventKey(); + switch (element.type) { + case "number": + element.removeEventListener("keyup", onKeydownInput, false); + break; + case "textarea": + element.removeEventListener("keyup", callbacks.onKeyupTextarea, false); + } - MobileTextInputPrototype._destroy.call(self, element); + this._destroyEventKey(); - window.removeEventListener("resize", callbacks.onResize, false); + if (typeof MobileTextInputPrototype._destroy === FUNCTION_TYPE) { + MobileTextInputPrototype._destroy.call(this, element); + } }; /** - * Callback enable/disbale focus on input element - * @method onKeyupElementContaine - * @param {ns.widget.tv.TextInput} self + * Method overrides Textarea behavior on keyup event. + * @method onKeyupTextarea + * @param {TextInput} self * @param {Event} event * @private * @static * @member ns.widget.tv.TextInput */ - function onKeyupElementContainer(self, event) { - var element = self.element, - elementTypeName = element.tagName.toLowerCase(), - eventTarget = event.target; + function onKeyupTextarea(self, event) { + var textarea = self.element, + value = textarea.value, + linesNumber = value.split("\n").length, + currentLineNumber = value.substr(0, textarea.selectionStart).split("\n").length; switch (event.keyCode) { - case KEY_CODES.enter: - //when the keyboard is on - if (window.innerHeight < initialScreenHeight) { - self.saveKeyboardSupport(); - self.disableKeyboardSupport(); - } else { - if (elementIsFocused) { - //check if enter to the input or textarea and get focus - if (elementTypeName !== "textarea") { - element.blur(); - element.parentElement.focus(); - } - // @todo: add support for exit - } else { - // input is highlighted - element.focus(); - } + case KEY_CODES.up: + // if cursor is not at the first line + // or the previous event was not in the first line + if (currentLineNumber > 1 || self._lastEventLineNumber !== 1) { + // we do not jump to other element + event.preventDefault(); + event.stopPropagation(); } break; - } - } - - /** - * Callback to prevent key movement inside input - * @method onKeyupElement - * @param {Event} event - * @static - * @private - * @member ns.widget.tv.TextInput - */ - function onKeyupElement(event) { - switch (event.keyCode) { - case KEY_CODES.up: case KEY_CODES.down: + // if cursor is not at the last line + // or the previous event was not in the last line + if (currentLineNumber < linesNumber || self._lastEventLineNumber !== linesNumber) { + // we do not jump to other element + event.preventDefault(); + event.stopPropagation(); + } + break; case KEY_CODES.left: case KEY_CODES.right: - // when we are focused on input element, prevent actions on arrows - event.stopImmediatePropagation(); + // we do not jump to other element + event.preventDefault(); + event.stopPropagation(); break; } + self._lastEventLineNumber = currentLineNumber; } /** - * Enable or disable keyboard support after resize od screen (open - * virtual keyboard) - * @method onResize - * @param {ns.widget.tv.TextInput} self + * Method adds span to input. + * @method wrapInputNumber + * @param {EventTarget|HTMLElement} element * @private * @static * @member ns.widget.tv.TextInput */ - function onResize(self) { - var elem; - - if (window.innerHeight < initialScreenHeight) { - self.saveKeyboardSupport(); - self.enableKeyboardSupport(); - } else { - self.disableKeyboardSupport(); - self.restoreKeyboardSupport(); - //when textarea after closing the keyboard has focus then change focus to container - elem = document.querySelector("textarea.ui-focus"); - if (elem) { - elem.parentNode.focus(); - } - } + function wrapInputNumber(element) { + var focusableInputFrame = document.createElement("span"), + parent = element.parentNode; + + focusableInputFrame.setAttribute("tabindex", 0); + parent.replaceChild(focusableInputFrame, element); + focusableInputFrame.appendChild(element); + focusableInputFrame.classList.add(classes.uiNumberInput); } /** @@ -411,26 +259,50 @@ * @member ns.widget.tv.TextInput */ function isEnabledTextInput(element) { - return element && element.classList.contains(MobileTextInput.classes.uiInputText) && - !element.classList.contains(classes.uiDisabled) && !element.disabled; + if (element.classList.contains(TextInput.classes.uiInputText) && + !element.classList.contains(classes.uiDisabled)) { + return element; + } + return null; + } + + /** + * Method overrides input behavior on keydown event. + * @method onKeydownInput + * @param {Event} event + * @private + * @static + * @member ns.widget.tv.TextInput + */ + function onKeydownInput(event) { + var element = isEnabledTextInput(event.target), + parent = element.parentNode; + + if(element) { + event.stopPropagation(); + event.preventDefault(); + if (event.keyCode !== KEY_CODES.up && event.keyCode !== KEY_CODES.down) { + parent.focus(); + } + } } - widget.tv.TextInput = TextInput; + ns.widget.tv.TextInput = TextInput; engine.defineWidget( "TextInput", - selector, + "input[type='text'], input[type='number'], input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='month'], input[type='week'], input[type='datetime-local'], input[type='color'], input:not([type]), .ui-textinput", [], TextInput, "tv", true ); - BaseKeyboardSupport.registerActiveSelector("." + classes.uiInputBox); + BaseKeyboardSupport.registerActiveSelector(".ui-input-text"); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return ns.widget.tv.TextInput; } ); //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); +}(window.document, ns)); diff --git a/tau/src/js/profile/tv/widget/TimeInput.js b/tau/src/js/profile/tv/widget/TimeInput.js deleted file mode 100644 index 230b7502..00000000 --- a/tau/src/js/profile/tv/widget/TimeInput.js +++ /dev/null @@ -1,593 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/** - * #Time Input Widget - * Decorator for inputs type number elements. - * - * ## Default selectors - * In default elements matches to : - * - * - INPUT with type "number" - * - * ###HTML Examples - * - * ####Create simple spin control on INPUT element - * - * @example - * <form> - * <label for="spin-1">Time Input</label> - * <input type="time" name="time-1" id="time-1" value=""> - * </form> - * - * ## Manual constructor - * For manual creation of TimeInput widget you can use constructor of widget - * from **tau** namespace: - * - * @example - * <form> - * <label for="time-2">Time Input:</label> - * <input type="time" name="time-2" id="time-2" value=""> - * </form> - * <script> - * var inputElement = document.getElementById("time-2"), - * timeInput = tau.widget.TimeInput(inputElement); - * </script> - * - * Constructor has one require parameter **element** which are base - * **HTMLElement** to create widget. We recommend get this element by method - * *document.getElementById*. - * - * @class ns.widget.tv.TimeInput - * @extends ns.widget.core.BaseWidget - * @author Tomasz Lukawski <t.lukawski@samsung.com> - */ -(function (window, document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../tv", - "../../../core/engine", - "../../../core/util/selectors", - "../../../core/util/object", - "../../../core/util/DOM/attributes", - "../../../core/event", - "../../../core/widget/BaseWidget", - "../../../profile/tv/widget/SpinControl", - "./BaseKeyboardSupport" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var widget = ns.widget, - BaseWidget = widget.BaseWidget, - BaseKeyboardSupport = ns.widget.tv.BaseKeyboardSupport, - SpinControl = ns.widget.tv.SpinControl, - engine = ns.engine, - events = ns.event, - utilDOM = ns.util.DOM, - TimeInput = function () { - var self = this; - BaseWidget.call(self); - BaseKeyboardSupport.call(self); - self._callbacks = { - onBlur: null - }; - self._ui = { - wrapper: null, - hours: null, - minutes: null, - seconds: null, - overlay: null, - placeholder: null - }; - self.options = { - showInLightBox: true, - active: false, - usePlaceholder: true - }; - self._hours = null; - self._minutes = null; - self._seconds = null; - self._first = null; - self._last = null; - }, - /** - * Dictionary for textinput related css class names - * @property {Object} classes - * @member ns.widget.tv.TimeInput - * @static - */ - classes = { - timeInput: "ui-time-input", - focus: "ui-time-input-focus", - active: "ui-time-input-active", - hours: "ui-time-input-hours", - minutes: "ui-time-input-minutes", - seconds: "ui-time-input-seconds", - disabled: "ui-disabled", - placeholder: "ui-time-input-placeholder" - }, - KEY_CODES = BaseKeyboardSupport.KEY_CODES, - prototype = new BaseWidget(), - selector = "input[type='time']", - TIME_REGEXP = /[0-9]{2}:[0-9]{2}:[0-9]{2}/; - - //TimeInput.events = MobileTextInput.events; - TimeInput.classes = classes; - TimeInput.prototype = prototype; - TimeInput.selector = selector; - - /** - * Method adds span to input. - * @method wrap - * @param {TimeInput} self - * @param {EventTarget|HTMLElement} element - * @private - * @static - * @member ns.widget.tv.TimeInput - */ - function wrap(self, element) { - var wrapper = document.createElement("div"), - parent = element.parentNode, - hours = document.createElement("input"), - minutes, - placeholder = document.createElement("div"), - ui = self._ui, - currentTime = new Date(), - seconds; - - utilDOM.setAttributes(hours, { - "placeholder": "00", - "type": "number", - "min": 0, - "max": 23, - "step": 1, - "data-loop": true, - "value": element.getAttribute("placeholder") || - currentTime.getHours() - }); - minutes = hours.cloneNode(false); - utilDOM.setAttributes(minutes, { - "max": 59, - "value": element.getAttribute("placeholder") || - currentTime.getMinutes() - }); - seconds = minutes.cloneNode(false); - utilDOM.setAttributes(seconds, { - "value": element.getAttribute("placeholder") || - currentTime.getSeconds() - }); - - hours.classList.add(classes.hours); - minutes.classList.add(classes.minutes); - seconds.classList.add(classes.seconds); - - wrapper.classList.add(classes.timeInput); - placeholder.classList.add(classes.placeholder); - - wrapper.setAttribute("tabindex", 0); - if (self.options.usePlaceholder) { - placeholder.appendChild(wrapper); - parent.replaceChild(placeholder, element); - } else { - parent.replaceChild(wrapper, element); - } - - wrapper.appendChild(hours); - wrapper.appendChild(minutes); - wrapper.appendChild(seconds); - - wrapper.appendChild(element); - - self._hours = ns.engine.instanceWidget( - hours, "SpinControl", { - deactivateOnExit: false, - showInLightBox: false, - usePlaceholder: false - }); - self._minutes = ns.engine.instanceWidget( - minutes, "SpinControl", { - deactivateOnExit: false, - showInLightBox: false, - usePlaceholder: false - }); - self._seconds = ns.engine.instanceWidget( - seconds, "SpinControl", { - deactivateOnExit: false, - showInLightBox: false, - usePlaceholder: false - }); - - ui.wrapper = wrapper; - ui.hours = hours; - ui.minutes = minutes; - ui.seconds = seconds; - ui.placeholder = placeholder; - } - - function checkDisable(element) { - if (element.hasAttribute("disabled")) { - element.setAttribute("aria-disabled", true); - element.classList.add(classes.disabled); - } else { - element.setAttribute("aria-disabled", false); - } - } - - /** - * Method removes span from input. - * @method unwrap - * @param {ns.widget.tv.TimeInput} self - * @private - * @static - * @member ns.widget.tv.TimeInput - */ - function unwrap(self) { - var ui = self._ui, - wrapper = ui.wrapper; - - wrapper.parentNode.replaceChild(self.element, ui.wrapper); - wrapper.innerHTML = ""; - } - - function onFocus(self, ev) { - if (!self.options.active) { - if (!self._ui.wrapper.classList.contains(classes.focus)) { - self._ui.wrapper.classList.add(classes.focus); - } - } - } - - function removeFocus(self) { - if (self._ui.wrapper) { - self._ui.wrapper.classList.remove(classes.focus); - } - } - - function onBlur(self) { - if (!self.options.active) { - removeFocus(self); - } - } - - prototype._exit = function () { - var self = this; - - if (self.options.active) { - self.setActive(false); - } else { - removeFocus(self); - } - }; - - prototype._showOverlay = function () { - var self = this, - ui = self._ui, - overlay = ui.overlay, - parent; - - if (self.options.showInLightBox && overlay === null) { - overlay = SpinControl.prototype._createOverlay.call(this); - parent = self.options.usePlaceholder ? ui.placeholder : ui.wrapper; - parent.parentNode.appendChild(overlay); - self._ui.overlay = overlay; - } - }; - - prototype._onClickOverlay = function () { - this._exit(); - }; - - prototype._hideOverlay = function () { - SpinControl.prototype._hideOverlay.call(this); - }; - - prototype.enablePlaceholder = function () { - SpinControl.prototype.enablePlaceholder.call(this); - }; - - prototype.disablePlaceholder = function () { - SpinControl.prototype.disablePlaceholder.call(this); - }; - - function enable(self) { - var wrapper = self._ui.wrapper; - - self.saveKeyboardSupport(); - self.disableKeyboardSupport(); - wrapper.classList.add(classes.active); - wrapper.removeAttribute("tabindex"); - self._showOverlay(); - self._hours.enableFocus(); - } - - function disable(self) { - var wrapper = self._ui.wrapper; - - self.enableKeyboardSupport(); - self.restoreKeyboardSupport(); - self._hideOverlay(); - wrapper.classList.remove(classes.active); - self._hours.disableFocus(); - self._minutes.disableFocus(); - self._seconds.disableFocus(); - wrapper.setAttribute("tabindex", 0); - } - - prototype.setActive = function (active) { - var self = this, - options = self.options; - - if (options.active !== active) { - - if (options.usePlaceholder) { - if (options.active) { - self.disablePlaceholder(); - } else { - self.enablePlaceholder(); - } - } - - self._seconds.setActive(active); - self._minutes.setActive(active); - self._hours.setActive(active); - - if (active) { - enable(self); - } else { - disable(self); - } - options.active = active; - } - }; - - function onActive(self) { - if (!self.options.active) { - if (event._originalEvent && event._originalEvent.keyCode === KEY_CODES.enter) { - events.stopImmediatePropagation(event); - } - self.setActive(true); - } - } - - function updateVisibleValue(self, value) { - var parsedTime; - - if (typeof value === "string") { - parsedTime = value.match(TIME_REGEXP); - if (parsedTime.length) { - self._hours.value(parsedTime[1]); - self._minutes.value(parsedTime[2]); - self._seconds.value(parsedTime[3]); - } - } - } - - function onKeyDown(self, event) { - switch (event.keyCode) { - case KEY_CODES.tab: - switch (event.target) { - case self._first._ui.wrapper: - if (event.shiftKey) { - events.stopImmediatePropagation(event); - self._exit(); - } - break; - case self._last._ui.wrapper: - if (!event.shiftKey) { - events.stopImmediatePropagation(event); - self._exit(); - } - break; - } - break; - } - } - - /** - * Method on keyup event. - * @method onKeyup - * @param {TextInput} self - * @param {Event} event - * @private - * @static - * @member ns.widget.tv.TimeInput - */ - function onKeyUp(self, event) { - switch (event.keyCode) { - - case KEY_CODES.left: - switch (event.target) { - case self._minutes._ui.wrapper: - self._hours.enableFocus(); - break; - case self._seconds._ui.wrapper: - self._minutes.enableFocus(); - break; - } - break; - case KEY_CODES.right: - switch (event.target) { - case self._hours._ui.wrapper: - self._minutes.enableFocus(); - break; - case self._minutes._ui.wrapper: - self._seconds.enableFocus(); - break; - } - events.stopImmediatePropagation(event); - break; - - case KEY_CODES.enter: - if (self.options.active) { - if (!self._hours._insertNumberMode && - !self._minutes._insertNumberMode && - !self._seconds._insertNumberMode) { - self._exit(); - } - } - break; - } - } - - prototype._getValue = function () { - return this.element.value; - }; - - prototype._setValue = function (value) { - var element = this.element; - - element.value = value; - updateVisibleValue(this, element.value); - events.trigger(element, "input"); - }; - - /** - * Bind events - * @method _bindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.TimeInput - */ - prototype._bindEvents = function() { - var element = this.element, - self = this, - callbacks = this._callbacks, - ui = self._ui, - wrapper = ui.wrapper; - - callbacks.onBlur = onBlur.bind(null, self); - callbacks.onActive = onActive.bind(null, self); - callbacks.onFocus = onFocus.bind(null, self); - callbacks.onKeyUp = onKeyUp.bind(null, self); - callbacks.onKeyDown = onKeyDown.bind(null, self); - - wrapper.addEventListener("blur", callbacks.onBlur, true); - wrapper.addEventListener("vclick", callbacks.onActive, true); - wrapper.addEventListener("focus", callbacks.onFocus, true); - wrapper.addEventListener("keyup", callbacks.onKeyUp, true); - wrapper.addEventListener("keydown", callbacks.onKeyDown, true); - }; - - /** - * Unbind events - * @method _unbindEvents - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.TimeInput - */ - prototype._unbindEvents = function() { - var element = this.element, - self = this, - callbacks = this._callbacks, - ui = self._ui, - wrapper = ui.wrapper; - - wrapper.removeEventListener("blur", callbacks.onBlur, true); - wrapper.removeEventListener("vclick", callbacks.onActive, true); - wrapper.removeEventListener("focus", callbacks.onFocus, true); - wrapper.removeEventListener("keyup", callbacks.onKeyUp, true); - wrapper.removeEventListener("keydown", callbacks.onKeyDown, true); - }; - - prototype._build = function (element) { - checkDisable(element); - wrap(this, element); - return element; - }; - - /** - * Init widget - * @method _init - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.TimeInput - */ - prototype._init = function(element) { - var self = this, - ui = self._ui, - wrapper; - - element.value = element.getAttribute("placeholder") || - new Date().toTimeString().match(TIME_REGEXP)[0]; - - if (ui.wrapper === null) { - // find widget components: html elements - wrapper = self.element.parentElement; - ui.wrapper = wrapper; - ui.hours = wrapper.querySelector("." + classes.hours); - ui.minutes = wrapper.querySelector("." + classes.minutes); - ui.seconds = wrapper.querySelector("." + classes.seconds); - // widgets - self._hours = ns.engine.instanceWidget( - ui.hours, "SpinControl"); - self._minutes = ns.engine.instanceWidget( - ui.minutes, "SpinControl"); - self._seconds = ns.engine.instanceWidget( - ui.seconds, "SpinControl"); - } - - self._first = self._hours; - self._last = self._seconds; - }; - - /** - * Destroys additional elements created by the widget, - * removes classes and event listeners - * @method _destroy - * @param {HTMLElement} element - * @protected - * @member ns.widget.tv.TimeInput - */ - prototype._destroy = function(element) { - var self = this; - - self._hideOverlay(); - self._unbindEvents(); - - self._hours.destroy(); - self._minutes.destroy(); - self._seconds.destroy(); - - self._hours = null; - self._minutes = null; - self._seconds = null; - self._first = null; - self._last = null; - - unwrap(self, element); - }; - - widget.tv.TimeInput = TimeInput; - - engine.defineWidget( - "TimeInput", - selector, - [], - TimeInput, - "tv" - ); - - BaseKeyboardSupport.registerActiveSelector("." + classes.timeInput); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.tv.TimeInput; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); diff --git a/tau/src/js/profile/wearable/backward.js b/tau/src/js/profile/wearable/backward.js index 116985fe..71036ebd 100644 --- a/tau/src/js/profile/wearable/backward.js +++ b/tau/src/js/profile/wearable/backward.js @@ -4,7 +4,7 @@ define( [ "../../core/engine", - "./widget/wearable/IndexScrollbar", + "./widget/wearable/indexscrollbar/IndexScrollbar", "./widget/wearable/SectionChanger", "./widget/wearable/SwipeList", "./widget/wearable/VirtualListview", diff --git a/tau/src/js/profile/wearable/config.js b/tau/src/js/profile/wearable/config.js index d61c572f..f7a4985f 100644 --- a/tau/src/js/profile/wearable/config.js +++ b/tau/src/js/profile/wearable/config.js @@ -1,18 +1,6 @@ /*global window, define*/ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint bitwise: true */ /* @@ -23,27 +11,14 @@ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( [ - "../../core/core", - "../../core/support/tizen" + "../../core/core" ], function () { //>>excludeEnd("tauBuildExclude"); - // Default configuration properties for wearable - ns.setConfig("autoBuildOnPageChange", false, true); - if(ns.support.shape.circle) { - ns.setConfig("pageTransition", "pop"); - ns.setConfig("popupTransition", "slideup"); - - ns.setConfig("popupFullSize", true); - ns.setConfig("scrollEndEffectArea", "screen"); - ns.setConfig("enablePageScroll", true); - ns.setConfig("enablePopupScroll", true); - } else { - ns.setConfig("popupTransition", "slideup"); - ns.setConfig("enablePageScroll", false); - ns.setConfig("enablePopupScroll", false); - } + // Default configuration properties for wearable + ns.setConfig('autoBuildOnPageChange', false, true); + ns.setConfig('popupTransition', 'slideup'); // .. other possible options // ns.setConfig('autoInitializePage', true); // ns.setConfig('pageContainer', document.body); // defining application container for wearable diff --git a/tau/src/js/profile/wearable/defaults.js b/tau/src/js/profile/wearable/defaults.js new file mode 100644 index 00000000..d38ee774 --- /dev/null +++ b/tau/src/js/profile/wearable/defaults.js @@ -0,0 +1,64 @@ +/*global window, define, ns */ +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 + */ +/*jslint plusplus: true, nomen: true */ +// * @TODO add support of $.mobile.buttonMarkup.hoverDelay +/* + * Defaults settings object + * @author Maciej Urbanski <m.urbanski@samsung.com> + * @class ns.defaults + */ +(function (ns) { + "use strict"; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + define( + [ + "../../core/core" + ], + function () { + //>>excludeEnd("tauBuildExclude"); + + ns.defaults = {}; + + Object.defineProperty(ns.defaults, "autoInitializePage", { + get: function(){ + return ns.getConfig("autoInitializePage", true); + }, + set: function(value){ + return ns.setConfig("autoInitializePage", value); + } + }); + + Object.defineProperty(ns.defaults, "dynamicBaseEnabled", { + get: function(){ + return ns.getConfig("dynamicBaseEnabled", true); + }, + set: function(value){ + return ns.setConfig("dynamicBaseEnabled", value); + } + }); + + Object.defineProperty(ns.defaults, "pageTransition", { + get: function(){ + return ns.getConfig("pageTransition", "none"); + }, + set: function(value){ + return ns.setConfig("pageTransition", value); + } + }); + + Object.defineProperty(ns.defaults, "popupTransition", { + get: function(){ + return ns.getConfig("popupTransition", "none"); + }, + set: function(value){ + return ns.setConfig("popupTransition", value); + } + }); + + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + } + ); + //>>excludeEnd("tauBuildExclude"); +}(ns)); diff --git a/tau/src/js/profile/wearable/expose.js b/tau/src/js/profile/wearable/expose.js index bd472d9e..b0ecd149 100644 --- a/tau/src/js/profile/wearable/expose.js +++ b/tau/src/js/profile/wearable/expose.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint plusplus: true, nomen: true */ /** @@ -27,9 +15,9 @@ [ "../../core/core", "../../core/engine", - "../../core/widget/core/Page", - "../../core/router/route", - "../../core/router/history" + "./router/route", + "./router/history", + "./widget/wearable/Page" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -40,10 +28,11 @@ document.addEventListener("routerinit", function (evt) { var router = evt.detail, - routePage = router.getRoute("page"), history = ns.router.history, + navigator, back = history.back.bind(router), - classes = ns.widget.core.Page.classes, + rule = ns.router.route, + classes = ns.widget.wearable.Page.classes, pageActiveClass = classes.uiPageActive; /** * @method changePage @@ -67,13 +56,6 @@ */ ns.firstPage = router.getFirstPage(); /** - * Returns active page element - * @inheritdoc ns.router.Router#getActivePageElement - * @method getActivePage - * @member tau - */ - ns.getActivePage = routePage.getActiveElement.bind(routePage); - /** * @inheritdoc ns.router.history#back * @method back * @member tau diff --git a/tau/src/js/profile/wearable/helper.js b/tau/src/js/profile/wearable/helper.js deleted file mode 100644 index a550290b..00000000 --- a/tau/src/js/profile/wearable/helper.js +++ /dev/null @@ -1,37 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint plusplus: true, nomen: true */ -/** - * @class tau.helper - * @author Heeju Joo <heeju.joo@samsung.com> - */ -(function (ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../wearable" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - ns.helper = ns.helper || {}; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.helper; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(ns));
\ No newline at end of file diff --git a/tau/src/js/profile/wearable/helper/DrawerMoreStyle.js b/tau/src/js/profile/wearable/helper/DrawerMoreStyle.js deleted file mode 100644 index dc839a61..00000000 --- a/tau/src/js/profile/wearable/helper/DrawerMoreStyle.js +++ /dev/null @@ -1,152 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #DrawerMoreStyle Helper Script - * Helper script using drawer, sectionChanger. - * @class ns.helper.DrawerMoreStyle - * @author Hyeoncheol Choi <hc7.choi@samsung.com> - */ -(function (document, window, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../helper", - "../../../core/event", - "../../../core/engine", - "../../../core/util/object", - "../../../core/util/selectors", - "../widget/wearable/Drawer", - "../widget/wearable/Selector" - ], - function () {//>>excludeEnd("tauBuildExclude"); - var engine = ns.engine, - objectUtils = ns.util.object, - events = ns.event, - selectors = ns.util.selectors, - Drawer = ns.widget.wearable.Drawer, - Selector = ns.widget.wearable.Selector, - defaults = { - more: ".ui-more", - selector: ".ui-selector" - }, - classes = { - page: "ui-page" - }, - - DrawerMoreStyle = function (element, options) { - var self = this; - - self.options = objectUtils.merge({}, defaults); - self._drawerWidget = null; - self._handlerElement = null; - self._selectorWidget = null; - - self.init(element, options); - }, - - prototype = DrawerMoreStyle.prototype; - - function bindDragEvents(element) { - - events.on(element, "touchstart touchend mousedown mouseup" , this, false); - } - - function unBindDragEvents(element) { - - events.off(element, "touchstart touchend mousedown mouseup" , this, false); - } - - prototype.handleEvent = function(event) { - var self = this; - switch (event.type) { - case "touchstart": - case "mousedown": - self._onTouchStart(event); - break; - case "touchend": - case "mouseup": - self._onTouchEnd(event); - break; - } - }; - - prototype._onTouchStart = function(event) { - event.preventDefault(); - event.stopPropagation(); - }; - - prototype._onTouchEnd = function(event) { - this._drawerWidget.close(); - }; - - prototype.init = function(element, options) { - var self = this, - pageElement = selectors.getClosestByClass(element, classes.page), - handlerElement, - selectorElement; - - objectUtils.fastMerge(self.options, options); - - handlerElement = pageElement.querySelector(self.options.handler); - selectorElement = element.querySelector(self.options.selector); - - self._drawerWidget = engine.instanceWidget(element, "Drawer"); - if (handlerElement) { - self._drawerWidget.setDragHandler(handlerElement); - self._handlerElement = handlerElement; - self._bindEvents(); - } - if (selectorElement) { - self._selectorWidget = engine.instanceWidget(selectorElement, "Selector"); - } - }; - - prototype._bindEvents = function() { - var self = this; - - bindDragEvents.call(self, self._handlerElement); - }; - - prototype._unbindEvents = function() { - var self = this; - - unBindDragEvents.call(self, self._handlerElement); - }; - - prototype.destroy = function() { - var self = this; - - if (self._handlerElement) { - self._unbindEvents(); - } - self._drawerWidget = null; - self._handlerElement = null; - self._selectorWidget = null; - }; - - DrawerMoreStyle.create = function(element, options) { - return new DrawerMoreStyle(element, options); - }; - - ns.helper.DrawerMoreStyle = DrawerMoreStyle; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return DrawerMoreStyle; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(document, window, ns)); diff --git a/tau/src/js/profile/wearable/helper/SnapListMarqueeStyle.js b/tau/src/js/profile/wearable/helper/SnapListMarqueeStyle.js deleted file mode 100644 index 732d8f47..00000000 --- a/tau/src/js/profile/wearable/helper/SnapListMarqueeStyle.js +++ /dev/null @@ -1,139 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #SnapListMarqueeStyle Helper Script - * Helper script using SnapListview and Marquee. - * @class ns.helper.SnapListMarqueeStyle - * @author Heeju Joo <heeju.joo@samsung.com> - */ -(function (document, window, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "./SnapListStyle", - "../helper", - "../../../core/engine", - "../../../core/util/object" - ], - function () {//>>excludeEnd("tauBuildExclude"); - var engine = ns.engine, - objectUtils = ns.util.object, - defaults = { - marqueeDelay: 0 - }, - - SnapListMarqueeStyle = function (listDomElement, options) { - var self = this; - - self.options = objectUtils.merge({}, defaults); - self._snapListStyleHelper = null; - self._selectedMarqueeWidget = null; - self._callbacks = {}; - - self.init(listDomElement, options); - }, - - prototype = SnapListMarqueeStyle.prototype; - - function destroyMarqueeWidget(self) { - if (self._selectedMarqueeWidget) { - self._selectedMarqueeWidget.destroy(); - self._selectedMarqueeWidget = null; - } - } - - function touchStartHandler() { - destroyMarqueeWidget(this); - } - - function selectedHandler(e) { - var self = this, - marquee = e.target.querySelector(".ui-marquee"); - - destroyMarqueeWidget(self); - - if (marquee) { - self._selectedMarqueeWidget = engine.instanceWidget(marquee, "Marquee", { - delay: self.options.marqueeDelay, - autoRun: false - }); - self._selectedMarqueeWidget.start(); - } - } - - prototype.init = function(listDomElement, options) { - var self = this; - - objectUtils.fastMerge(self.options, options); - - self.bindEvents(); - // create SnapListStyle helper - self._snapListStyleHelper = tau.helper.SnapListStyle.create(listDomElement); - }; - - prototype.bindEvents = function() { - var self = this, - touchStartCallback, - selectedCallback; - - touchStartCallback = touchStartHandler.bind(self); - selectedCallback = selectedHandler.bind(self); - - self._callbacks.touchStart = touchStartCallback; - self._callbacks.selected = selectedCallback; - - document.addEventListener("touchstart", touchStartCallback, false); - document.addEventListener("rotarydetent", touchStartCallback, false); - document.addEventListener("selected", selectedCallback, false); - }; - - prototype.unbindEvents = function() { - var self = this; - - document.removeEventListener("touchstart", self._callbacks.touchStart, false); - document.removeEventListener("rotarydetent", self._callbacks.touchStart, false); - document.removeEventListener("selected", self._callbacks.selected, false); - - self._callbacks.touchStart = null; - self._callbacks.selected = null; - }; - - prototype.destroy = function() { - var self = this; - - self.unbindEvents(); - destroyMarqueeWidget(self); - self._snapListStyleHelper.destroy(); - - self.options = null; - self._snapListStyleHelper = null; - self._selectedMarqueeWidget = null; - self._callbacks = null; - }; - - SnapListMarqueeStyle.create = function(listDomElement, options) { - return new SnapListMarqueeStyle(listDomElement, options); - }; - - ns.helper.SnapListMarqueeStyle = SnapListMarqueeStyle; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return SnapListMarqueeStyle; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(document, window, ns)); diff --git a/tau/src/js/profile/wearable/helper/SnapListStyle.js b/tau/src/js/profile/wearable/helper/SnapListStyle.js deleted file mode 100644 index 68aa8067..00000000 --- a/tau/src/js/profile/wearable/helper/SnapListStyle.js +++ /dev/null @@ -1,111 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #SnapListStyle Helper Script - * Helper script using SnapListview. - * @class ns.helper.SnapListStyle - * @author Junyoung Park <jy-.park@samsung.com> - */ -(function (document, window, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../helper", - "../../../core/engine", - "../../../core/util/object", - "../../../core/util/selectors" - ], - function () {//>>excludeEnd("tauBuildExclude"); - var engine = ns.engine, - objectUtils = ns.util.object, - selectors = ns.util.selectors, - - SnapListStyle = function (listDomElement, options) { - var self = this; - - self._snapListviewWidget = null; - self._callbacks = {}; - self.init(listDomElement, options); - }, - - prototype = SnapListStyle.prototype; - - function rotaryDetentHandler(e) { - var snapListviewWidget = this._snapListviewWidget, - selectedIndex = snapListviewWidget.getSelectedIndex(), - direction = e.detail.direction; - - if (direction === "CW" && selectedIndex !== null) { - snapListviewWidget.scrollToPosition(++selectedIndex); - } else if (direction === "CCW" && selectedIndex !== null) { - snapListviewWidget.scrollToPosition(--selectedIndex); - } - } - - prototype.init = function(listDomElement, options) { - var self = this; - - // create SnapListview widget - self._snapListviewWidget = engine.instanceWidget(listDomElement, "SnapListview", options); - self.bindEvents(); - }; - - prototype.bindEvents = function() { - var self = this, - rotaryDetentCallback; - - rotaryDetentCallback = rotaryDetentHandler.bind(self); - - self._callbacks.rotarydetent = rotaryDetentCallback; - - window.addEventListener("rotarydetent", rotaryDetentCallback); - }; - - prototype.unbindEvents = function() { - var self = this; - - window.removeEventListener("rotarydetent", self._callbacks.rotarydetent); - - self._callbacks.rotarydetent = null; - }; - - prototype.destroy = function() { - var self = this; - - self.unbindEvents(); - self._snapListviewWidget.destroy(); - - self._snapListviewWidget = null; - self._callbacks = null; - }; - - prototype.getSnapList = function() { - return this._snapListviewWidget; - }; - - SnapListStyle.create = function(listDomElement, options) { - return new SnapListStyle(listDomElement, options); - }; - - ns.helper.SnapListStyle = SnapListStyle; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return SnapListStyle; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(document, window, ns)); diff --git a/tau/src/js/core/router/Router.js b/tau/src/js/profile/wearable/router/Router.js index 35729515..4dc22e9d 100644 --- a/tau/src/js/core/router/Router.js +++ b/tau/src/js/profile/wearable/router/Router.js @@ -1,19 +1,7 @@ -/*global window, define, XMLHttpRequest, Node, HTMLElement, ns */ +/*global window, define, XMLHttpRequest */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Router @@ -29,17 +17,18 @@ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( [ - "../engine", - "../event", - "../util/DOM/attributes", - "../util/selectors", - "../util/path", - "../util/object", - "../router", + "../../../core/engine", + "../../../core/router", "./route", // fetch namespace "./history", - "../widget/core/Page", - "../widget/core/PageContainer" + "../../../core/event", + "../../../core/event/vmouse", + "../../../core/util/DOM/attributes", + "../../../core/util/selectors", + "../../../core/util/path", + "../../../core/util/object", + "../widget/wearable/Page", + "../widget/wearable/PageContainer" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -100,24 +89,24 @@ */ engine = ns.engine, /** - * Local alias for ns.router - * @property {Object} routerMicro Alias for namespace ns.router + * Local alias for ns.router.wearable + * @property {Object} routerMicro Alias for namespace ns.router.wearable * @member ns.router.Router * @static * @private */ routerMicro = ns.router, /** - * Local alias for ns.router.history - * @property {Object} history Alias for {@link ns.router.history} + * Local alias for ns.router.wearable.history + * @property {Object} history Alias for {@link ns.router.wearable.history} * @member ns.router.Router * @static * @private */ history = routerMicro.history, /** - * Local alias for ns.router.route - * @property {Object} route Alias for namespace ns.router.route + * Local alias for ns.router.wearable.route + * @property {Object} route Alias for namespace ns.router.wearable.route * @member ns.router.Router * @static * @private @@ -148,7 +137,7 @@ */ _isLock = false, - Page = ns.widget.core.Page, + Page = ns.widget.wearable.Page, Router = function () { var self = this; @@ -161,7 +150,7 @@ self.firstPage = null; /** * The container of widget. - * @property {?ns.widget.core.PageContainer} [container] + * @property {?ns.widget.wearable.PageContainer} [container] * @member ns.router.Router */ self.container = null; @@ -230,6 +219,7 @@ useDefaultUrlHandling = (link.getAttribute("rel") === "external") || link.hasAttribute("target"); if (!useDefaultUrlHandling) { options = DOM.getData(link); + options.link = link.id; router.open(href, options, event); eventUtils.preventDefault(event); } @@ -276,7 +266,7 @@ url = path.getLocation(); for (ruleKey in rules) { - if (rules.hasOwnProperty(ruleKey) && rules[ruleKey].onHashChange(url, options, prevState.stateUrl)) { + if (rules.hasOwnProperty(ruleKey) && rules[ruleKey].onHashChange(url, options)) { isContinue = false; } } @@ -286,36 +276,10 @@ if (isContinue) { router.open(to, options); } - } else { - url = path.getLocation(); - if (prevState) { - if (prevState.absUrl !== url && prevState.stateUrl !== url) { - history.enableVolatileRecord(); - router.open(url); - } - } } } /** - * Detect rel attribute from HTMLElement - * @param {HTMLElement} to - * @member ns.router.Router - * @method detectRel - */ - Router.prototype.detectRel = function (to) { - var rule, - i; - - for (i in route) { - rule = route[i]; - if (selectors.matchesSelector(to, rule.filter)) { - return i; - } - } - }; - - /** * Change page to page given in parameter "to". * @method open * @param {string|HTMLElement} to Id of page or file url or HTMLElement of page @@ -332,17 +296,12 @@ * @member ns.router.Router */ Router.prototype.open = function (to, options, event) { - var rel, - rule, + var rel = ((options && options.rel) || "page"), + rule = route[rel], deferred = {}, filter, - stringId, - toElement, self = this; - to = getHTMLElement(to); - rel = ((options && options.rel) || (to instanceof HTMLElement && this.detectRel(to)) || "page"); - rule = route[rel]; if (_isLock) { return; } @@ -397,21 +356,15 @@ firstPage, pages, activePages, - ruleKey, - rules = routerMicro.route, location = window.location, PageClasses = Page.classes, + uiPageClass = PageClasses.uiPage, uiPageActiveClass = PageClasses.uiPageActive, - pageDefinition = ns.engine.getWidgetDefinition("Page"), - pageSelector = pageDefinition.selector, self = this; body = document.body; containerElement = ns.getConfig("pageContainer") || body; - pages = slice.call(containerElement.querySelectorAll(pageSelector)); - if (!ns.getConfig("pageContainerBody", false)) { - containerElement = pages.length ? pages[0].parentNode : containerElement; - } + pages = slice.call(containerElement.querySelectorAll("." + uiPageClass)); self.justBuild = justBuild; if (ns.getConfig("autoInitializePage", true)) { @@ -425,22 +378,7 @@ slice.call(activePages).forEach(function (page) { page.classList.remove("." + uiPageActiveClass); }); - } - - if (location.hash) { - //simple check to determine if we should show firstPage or other - page = document.getElementById(location.hash.replace("#", "")); - if (page && selectors.matchesSelector(page, pageSelector)) { - firstPage = page; - } - } - - if (!firstPage && ns.getConfig("addPageIfNotExist", true)) { - firstPage = Page.createEmptyElement(); - while(containerElement.firstChild) { - firstPage.appendChild(containerElement.firstChild); - } - containerElement.appendChild(firstPage); + containerElement = firstPage.parentNode; } if (justBuild) { @@ -454,14 +392,22 @@ } return; } - } - for (ruleKey in rules) { - if (rules.hasOwnProperty(ruleKey) && rules[ruleKey].init) { - rules[ruleKey].init(); + if (location.hash) { + //simple check to determine if we should show firstPage or other + page = document.getElementById(location.hash.replace("#", "")); + if (page && selectors.matchesSelector(page, "." + uiPageClass)) { + firstPage = page; + } } } + pages.forEach(function (page) { + if (!DOM.getNSData(page, "url")) { + DOM.setNSData(page, "url", page.id || location.pathname + location.search); + } + }); + container = engine.instanceWidget(containerElement, "pagecontainer"); self.register(container, firstPage); }; @@ -475,7 +421,7 @@ var self = this; window.removeEventListener("popstate", self.popStateHandler, false); if (body) { - body.removeEventListener("pagebeforechange", self.pagebeforechangeHandler, false); + body.removeEventListener("pagebeforechange", this.pagebeforechangeHandler, false); body.removeEventListener("vclick", self.linkClickHandler, false); } }; @@ -483,7 +429,7 @@ /** * Method sets container. * @method setContainer - * @param {ns.widget.core.PageContainer} container + * @param {ns.widget.wearable.PageContainer} container * @member ns.router.Router */ Router.prototype.setContainer = function (container) { @@ -493,7 +439,7 @@ /** * Method returns container. * @method getContainer - * @return {ns.widget.core.PageContainer} container of widget + * @return {ns.widget.wearable.PageContainer} container of widget * @member ns.router.Router */ Router.prototype.getContainer = function () { @@ -513,7 +459,7 @@ /** * Method registers page container and the first page. * @method register - * @param {ns.widget.core.PageContainer} container + * @param {ns.widget.wearable.PageContainer} container * @param {HTMLElement} firstPage * @member ns.router.Router */ @@ -528,62 +474,10 @@ document.addEventListener("vclick", self.linkClickHandler, false); window.addEventListener("popstate", self.popStateHandler, false); - eventUtils.trigger(document, "themeinit", self); - - if (ns.getConfig("loader", false)) { - container.element.appendChild(self.getLoader().element); - } history.enableVolatileRecord(); if (firstPage) { self.open(firstPage, { transition: "none" }); } - this.getRoute("popup").setActive(null); - }; - - /** - * Convert string id to HTMLElement or return HTMLElement if is given - * @method getHTMLElement - * @param {string|HTMLElement} idOrElement - * @returns {HTMLElement} - */ - function getHTMLElement(idOrElement) { - var stringId, - toElement; - if (typeof idOrElement === "string") { - if (idOrElement[0] === "#") { - stringId = idOrElement.substr(1); - } else { - stringId = idOrElement; - } - toElement = document.getElementById(stringId); - if (toElement) { - idOrElement = toElement; - } - } - return idOrElement; - } - - /* - * Method close route element, eg page or popup. - * @method close - * @param {string|HTMLElement} to Id of page or file url or HTMLElement of page - * @param {Object} [options] - * @param {"page"|"popup"|"external"} [options.rel = "page"] Represents kind of link as "page" or "popup" or "external" for linking to another domain - * @member ns.router.Router - */ - Router.prototype.close = function (to, options) { - var rel = (options && options.rel) || "back", - rule = route[rel]; - - if (rel === "back") { - history.back(); - } else { - if (rule) { - rule.close(getHTMLElement(to), options); - } else { - throw new Error("Not defined router rule [" + rel + "]"); - } - } }; /** @@ -658,12 +552,6 @@ detail = {}, self = this; - // If the caller provided data append the data to the URL. - if (options.data) { - absUrl = path.addSearchParams(absUrl, options.data); - options.data = undefined; - } - content = rule.find(absUrl); if (!content && path.isEmbedded(absUrl)) { @@ -844,24 +732,6 @@ return route[type]; }; - - /** - * Returns loader widget - * @return {ns.widget.mobile.Loader} - * @member ns.router.Page - * @method getLoader - */ - Router.prototype.getLoader = function () { - var loaderElement = document.querySelector("[data-role=loader],.ui-loader"); - - if (!loaderElement) { - loaderElement = document.createElement("div"); - DOM.setNSData(loaderElement, "role", "loader"); - } - - return engine.instanceWidget(loaderElement, "Loader"); - }; - routerMicro.Router = Router; engine.initRouter(Router); diff --git a/tau/src/js/core/router/history.js b/tau/src/js/profile/wearable/router/history.js index ddd80800..970e89e0 100644 --- a/tau/src/js/core/router/history.js +++ b/tau/src/js/profile/wearable/router/history.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #History @@ -26,8 +14,8 @@ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( [ - "../router", - "../util/object" + "../../../core/router", + "../../../core/util/object" ], function () { //>>excludeEnd("tauBuildExclude"); diff --git a/tau/src/js/profile/wearable/router/route.js b/tau/src/js/profile/wearable/router/route.js new file mode 100644 index 00000000..f680999d --- /dev/null +++ b/tau/src/js/profile/wearable/router/route.js @@ -0,0 +1,28 @@ +/*global window, define, ns */ +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 + */ +/** + * #Route Namespace + * Object contains rules for router. + * + * @class ns.router.route + */ +/* + * @author Maciej Urbanski <m.urbanski@samsung.com> + */ +(function (ns) { + "use strict"; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + define( + [ + "../../../core/router" + ], + function () { + //>>excludeEnd("tauBuildExclude"); + ns.router.route = ns.router.route || {}; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + } + ); + //>>excludeEnd("tauBuildExclude"); +}(ns)); diff --git a/tau/src/js/profile/wearable/router/route/circularindexscrollbar.js b/tau/src/js/profile/wearable/router/route/circularindexscrollbar.js deleted file mode 100644 index e6f561af..00000000 --- a/tau/src/js/profile/wearable/router/route/circularindexscrollbar.js +++ /dev/null @@ -1,165 +0,0 @@ -/*global window, define */ -/*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Route CircularIndexScrollbar - * Support class for router to control circularindexscrollbar widget in profile Wearable. - * @class ns.router.route.circularindexscrollbar - * @author Junyoung Park <jy-.park@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/engine", - "../../../../core/util/DOM/attributes", - "../../../../core/util/path", - "../../../../core/util/selectors", - "../../../../core/util/object", - "../../../../core/router/route", - "../../../../core/router/history", - "../../widget/wearable/CircularIndexScrollbar" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var CircularIndexScrollbar = ns.widget.wearable.CircularIndexScrollbar, - CircularIndexScrollbarPrototype = CircularIndexScrollbar.prototype, - util = ns.util, - path = util.path, - DOM = util.DOM, - object = util.object, - utilSelector = util.selectors, - history = ns.router.history, - engine = ns.engine, - slice = [].slice, - routeCircularIndexScrollbar = {}, - circularindexscrollbarHashKey = "circularindexscrollbar=true", - circularindexscrollbarHashKeyReg = /([&|\?]circularindexscrollbar=true)/, - INDEXSCROLLBAR_SELECTOR = ".ui-circularindexscrollbar"; - - /** - * Property defining selector for filtering only circularIndexScrollbar elements - * @property {string} filter - * @member ns.router.route.circularindexscrollbar - * @static - */ - routeCircularIndexScrollbar.filter = INDEXSCROLLBAR_SELECTOR; - - /** - * Returns default route options used inside Router. - * But, circularindexscrollbar router has not options. - * @method option - * @static - * @member ns.router.route.circularindexscrollbar - * @return null - */ - routeCircularIndexScrollbar.option = function () { - return null; - }; - - /** - * This method opens the circularindexscrollbar. - * @method open - * @param {HTMLElement} element - * @param {Object} [options] - * @member ns.router.route.circularindexscrollbar - */ - routeCircularIndexScrollbar.open = function (element, options) { - return null; - }; - - /** - * This method determines target circularIndexScrollbar to open. - * @method find - * @param {string} absUrl Absolute path to opened circularIndexScrollbar widget - * @member ns.router.route.circularindexscrollbar - * @return {?HTMLElement} circularIndexScrollbarElement - */ - routeCircularIndexScrollbar.find = function (absUrl) { - var self = this, - dataUrl = path.convertUrlToDataUrl(absUrl), - activePage = engine.getRouter().getContainer().getActivePage(), - circularIndexScrollbar; - - circularIndexScrollbar = activePage.element.querySelector("#" + dataUrl); - - return circularIndexScrollbar; - }; - - /** - * This method parses HTML and runs scripts from parsed code. - * But, circularIndexScrollbar router doesn't need to that. - * @method parse - * @param {string} html HTML code to parse - * @param {string} absUrl Absolute url for parsed page - * @member ns.router.route.circularindexscrollbar - * @return {?HTMLElement} Element of page in parsed document. - */ - routeCircularIndexScrollbar.parse = function (html, absUrl) { - return null; - }; - - /** - * This method sets active circularIndexScrollbar and manages history. - * @method setActive - * @param {Object} activeWidget - * @member ns.router.route.circularindexscrollbar - * @static - */ - routeCircularIndexScrollbar.setActive = function (activeWidget) { - var url, - pathLocation = path.getLocation(), - documentUrl = pathLocation.replace(circularindexscrollbarHashKeyReg, ""); - - this._activeWidget = activeWidget; - - if(activeWidget) { - url = path.addHashSearchParams(documentUrl, circularindexscrollbarHashKey); - history.replace({}, "", url); - } else if (pathLocation !== documentUrl) { - history.back(); - } - }; - - /** - * This method handles hash change. - * @method onHashChange - * @param {String} url - * @param {Object} options - * @static - * @member ns.router.route.circularindexscrollbar - * @return {null} - */ - routeCircularIndexScrollbar.onHashChange = function (url, options, prev) { - var self = this, - activeWidget = self._activeWidget; - - if (activeWidget && prev.search(circularindexscrollbarHashKey) > 0 && url.search(circularindexscrollbarHashKey) < 0) { - activeWidget.hide(options); - } - return null; - }; - - ns.router.route.circularindexscrollbar = routeCircularIndexScrollbar; - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return routeCircularIndexScrollbar; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/core/router/route/page.js b/tau/src/js/profile/wearable/router/route/page.js index 337c4b89..86f21d93 100644 --- a/tau/src/js/core/router/route/page.js +++ b/tau/src/js/profile/wearable/router/route/page.js @@ -1,23 +1,11 @@ /*global window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Route Page - * Support class for router to control changing pages. + * Support class for router to control changing pages in profile Wearable. * @class ns.router.route.page * @author Maciej Urbanski <m.urbanski@samsung.com> */ @@ -26,12 +14,12 @@ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( [ - "../../engine", - "../../util/DOM/attributes", - "../../util/path", - "../../util/selectors", - "../../util/object", - "../../widget/core/Page", + "../../../../core/engine", + "../../../../core/util/DOM/attributes", + "../../../../core/util/path", + "../../../../core/util/selectors", + "../../../../core/util/object", + "../../widget/wearable/Page", "../route", "../history" ], @@ -44,8 +32,9 @@ utilSelector = util.selectors, history = ns.router.history, engine = ns.engine, - Page = ns.widget.core.Page, + Page = ns.widget.wearable.Page, baseElement, + slice = [].slice, routePage = {}, head; @@ -53,24 +42,18 @@ * Tries to find a page element matching id and filter (selector). * Adds data url attribute to found page, sets page = null when nothing found * @method findPageAndSetDataUrl - * @param {string} dataUrl DataUrl of searching element + * @param {string} id Id of searching element * @param {string} filter Query selector for searching page * @return {?HTMLElement} * @private * @static * @member ns.router.route.page */ - function findPageAndSetDataUrl(dataUrl, filter) { - var id = path.stripQueryParams(dataUrl).replace("#", ""), - page = document.getElementById(id); + function findPageAndSetDataUrl(id, filter) { + var page = document.getElementById(id); if (page && utilSelector.matchesSelector(page, filter)) { - if (dataUrl === id) { - DOM.setNSData(page, "url", "#" + id); - } else { - DOM.setNSData(page, "url", dataUrl); - } - + DOM.setNSData(page, "url", id); } else { // if we matched any element, but it doesn't match our filter // reset page to null @@ -99,7 +82,7 @@ * @member ns.router.route.page * @static */ - routePage.filter = engine.getWidgetDefinition("Page").selector; + routePage.filter = "." + Page.classes.uiPage; /** * Returns default route options used inside Router. @@ -114,15 +97,6 @@ return defaults; }; - routePage.init = function() { - var pages = [].slice.call(document.querySelectorAll(this.filter)); - pages.forEach(function (page) { - if (!DOM.getNSData(page, "url")) { - DOM.setNSData(page, "url", (page.id && "#" + page.id) || location.pathname + location.search); - } - }); - }; - /** * This method changes page. It sets history and opens page passed as a parameter. * @method open @@ -138,7 +112,7 @@ state = {}, router = engine.getRouter(); - if (toPage === router.getFirstPage() && !options.dataUrl) { + if (toPage === router.firstPage && !options.dataUrl) { url = path.documentUrl.hrefNoHash; } else { url = DOM.getNSData(toPage, "url"); @@ -170,7 +144,7 @@ //set page title document.title = pageTitle; - this.getContainer().change(toPage, options); + router.container.change(toPage, options); }; /** @@ -206,7 +180,6 @@ // injected by a developer, in which case it would be lacking a // data-url attribute and in need of enhancement. if (!page && dataUrl && !path.isPath(dataUrl)) { - //Remove search data page = findPageAndSetDataUrl(dataUrl, self.filter); } @@ -218,7 +191,8 @@ // an id falling through to the non-existent embedded page error case. if (!page && path.isFirstPageUrl(dataUrl) && - initialContent) { + initialContent && + initialContent.parentNode) { page = initialContent; } @@ -337,38 +311,6 @@ } }; - /** - * Returns container of pages - * @method getContainer - * @return {?ns.widget.core.Page} - * @member ns.router.route.page - * @static - */ - routePage.getContainer = function () { - return engine.getRouter().getContainer(); - }; - - /** - * Returns active page. - * @method getActive - * @return {?ns.widget.core.Page} - * @member ns.router.route.page - * @static - */ - routePage.getActive = function () { - return this.getContainer().getActivePage(); - }; - - /** - * Returns element of active page. - * @method getActiveElement - * @return {HTMLElement} - * @member ns.router.route.page - * @static - */ - routePage.getActiveElement = function () { - return this.getActive().element; - }; ns.router.route.page = routePage; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); diff --git a/tau/src/js/core/router/route/popup.js b/tau/src/js/profile/wearable/router/route/popup.js index d951a2aa..a83db165 100644 --- a/tau/src/js/core/router/route/popup.js +++ b/tau/src/js/profile/wearable/router/route/popup.js @@ -1,23 +1,11 @@ -/*global window, define, ns */ +/*global window, define */ /*jslint nomen: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Route Popup - * Support class for router to control changing pupups. + * Support class for router to control changing pupups in profile Wearable. * @class ns.router.route.popup * @author Maciej Urbanski <m.urbanski@samsung.com> * @author Damian Osipiuk <d.osipiuk@samsung.com> @@ -27,11 +15,11 @@ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( [ - "../../engine", - "../../util/path", - "../../util/DOM/attributes", - "../../util/object", - "../../widget/core/Popup", + "../../../../core/engine", + "../../../../core/util/path", + "../../../../core/util/DOM/attributes", + "../../../../core/util/object", + "../../../../core/widget/core/Popup", "../history", "../route" ], @@ -45,7 +33,7 @@ * @static */ Popup = ns.widget.core.Popup, - util = ns.util, + routePopup = { /** * Object with default options @@ -57,7 +45,7 @@ * @static */ defaults: { - transition: "none", + transition: 'none', container: null, volatileRecord: true }, @@ -127,6 +115,14 @@ */ DOM = ns.util.DOM, /** + * Alias for array slice method + * @method slice + * @member ns.router.route.popup + * @private + * @static + */ + slice = [].slice, + /** * Alias for Object utils * @method slice * @member ns.router.route.popup @@ -163,14 +159,10 @@ * @static */ function findPopupAndSetDataUrl(id, filter) { - var popup, - hashReg = /^#/; - - id = id.replace(hashReg,""); - popup = document.getElementById(id); + var popup = document.getElementById(path.hashToSelector(id)); if (popup && utilSelector.matchesSelector(popup, filter)) { - DOM.setNSData(popup, "url", "#" + id); + DOM.setNSData(popup, 'url', id); } else { // if we matched any element, but it doesn't match our filter // reset page to null @@ -191,14 +183,14 @@ */ routePopup.option = function () { var defaults = object.merge({}, routePopup.defaults); - defaults.transition = ns.getConfig("popupTransition", defaults.transition); + defaults.transition = ns.getConfig('popupTransition', defaults.transition); return defaults; }; /** * This method sets active popup and manages history. * @method setActive - * @param {?ns.widget.core.popup} activePopup + * @param {?ns.widget.wearable.popup} activePopup * @param {Object} options * @member ns.router.route.popup * @static @@ -247,14 +239,13 @@ * @static */ routePopup.open = function (toPopup, options, event) { - var self = this, - popup, + var popup, router = engine.getRouter(), - events = self.events, + events = routePopup.events, removePopup = function () { document.removeEventListener(events.POPUP_HIDE, removePopup, false); toPopup.parentNode.removeChild(toPopup); - self.activePopup = null; + routePopup.activePopup = null; }, openPopup = function () { var positionTo = options["position-to"]; @@ -273,22 +264,20 @@ document.removeEventListener(events.POPUP_HIDE, openPopup, false); popup = engine.instanceWidget(toPopup, "Popup", options); popup.open(options); - self.activePopup = popup; + routePopup.activePopup = popup; }, activePage = router.container.getActivePage(), container; if (DOM.getNSData(toPopup, "external") === true) { container = options.container ? activePage.element.querySelector(options.container) : activePage.element; - if (toPopup.parentNode !== container) { - toPopup = util.importEvaluateAndAppendElement(toPopup, container); - } + container.appendChild(toPopup); document.addEventListener(routePopup.events.POPUP_HIDE, removePopup, false); } - if (self.hasActive()) { - document.addEventListener(events.POPUP_HIDE, openPopup, false); - self.close(); + if (routePopup.hasActive()) { + document.addEventListener(routePopup.events.POPUP_HIDE, openPopup, false); + routePopup.close(); } else { openPopup(); } @@ -297,7 +286,7 @@ /** * This method closes active popup. * @method close - * @param {ns.widget.core.Popup} [activePopup] + * @param {ns.widget.wearable.Popup} [activePopup] * @param {string=} [options.transition] * @param {string=} [options.ext= in ui-pre-in] options.ext * @param {Object} options @@ -306,43 +295,17 @@ * @static */ routePopup.close = function (activePopup, options) { - var popupOptions, - pathLocation = path.getLocation(), - documentUrl = pathLocation.replace(popupHashKeyReg, ""); - - options = options || {}; - - if (activePopup && !(activePopup instanceof Popup)) { - activePopup = engine.instanceWidget(activePopup, "Popup", options); - } activePopup = activePopup || this.activePopup; - // if popup is active if (activePopup) { - popupOptions = activePopup.options; - // we check if it changed the history - if (popupOptions.history && pathLocation !== documentUrl) { - // and then set new options for popup - popupOptions.transition = options.transition || popupOptions.transition; - popupOptions.ext = options.ext || popupOptions.ext; - // unlock the router if it was locked - if (!popupOptions.dismissible) { - engine.getRouter().unlock(); - } - // and call history.back() - history.back(); - } else { - // if popup did not change the history, we close it normally - activePopup.close(options || {}); - } - return true; + // Close and clean up + activePopup.close(options || {}); } - return false; }; /** * This method handles hash change. - * It closes opened popup. + * It closes active popup. * @method onHashChange * @param {string} url * @param {object} options @@ -354,7 +317,7 @@ var activePopup = this.activePopup; if (activePopup) { - activePopup.close(options); + routePopup.close(activePopup, options); // Default routing setting cause to rewrite further window history // even if popup has been closed // To prevent this onHashChange after closing popup we need to change @@ -451,7 +414,7 @@ /** * Returns active popup. * @method getActive - * @return {?ns.widget.core.Popup} + * @return {?ns.widget.wearable.Popup} * @member ns.router.route.popup * @static */ @@ -459,18 +422,6 @@ return this.activePopup; }; - /** - * Returns element of active popup. - * @method getActiveElement - * @return {HTMLElement} - * @member ns.router.route.popup - * @static - */ - routePopup.getActiveElement = function () { - var active = this.getActive(); - return active && active.element; - }; - ns.router.route.popup = routePopup; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); diff --git a/tau/src/js/profile/wearable/widget/wearable.js b/tau/src/js/profile/wearable/widget/wearable.js index bdb3969f..c48a8a91 100644 --- a/tau/src/js/profile/wearable/widget/wearable.js +++ b/tau/src/js/profile/wearable/widget/wearable.js @@ -1,18 +1,6 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** diff --git a/tau/src/js/profile/wearable/widget/wearable/Button.js b/tau/src/js/profile/wearable/widget/wearable/Button.js index a8a796d0..7b734a64 100644 --- a/tau/src/js/profile/wearable/widget/wearable/Button.js +++ b/tau/src/js/profile/wearable/widget/wearable/Button.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** diff --git a/tau/src/js/profile/wearable/widget/wearable/CircleProgressBar.js b/tau/src/js/profile/wearable/widget/wearable/CircleProgressBar.js deleted file mode 100644 index 0850a329..00000000 --- a/tau/src/js/profile/wearable/widget/wearable/CircleProgressBar.js +++ /dev/null @@ -1,419 +0,0 @@ -/*global window, ns, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/** - * # Circle Progress Widget - * Shows a control that indicates the progress percentage of an on-going operation by circular shape. - * - * The circle progress widget shows a control that indicates the progress percentage of an on-going operation. This widget can be scaled to be fit inside a parent container. - * - * ### Simple progress bar - * If you don't make any widget "circleprogress" with <progress> element, you can show default progress style. - * To add a circular shape(page size) progressbar in your application, you have to declare <progress> tag in "ui-page" element. - * To add a CircleProgressBar widget to the application, use the following code: - * - * @example - * <div class="ui-page" id="pageCircleProgressBar"> - * <header class="ui-header"></header> - * <div class="ui-content"></div> - * <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress> - * </div> - * <script> - * (function(){ - * - * var page = document.getElementById( "pageCircleProgressBar" ), - * progressBar = document.getElementById("circleprogress"), - * progressBarWidget; - * - * page.addEventListener( "pageshow", function() { - * var i=0; - * // make Circle Progressbar object - * progressBarWidget = new tau.widget.CircleProgressBar(progressBar); - * - * }); - * - * page.addEventListener( "pagehide", function() { - * // release object - * progressBarWidget.destroy(); - * }); - * }()); - * </script> - * - * - * @class ns.widget.wearable.CircleProgressBar - * @since 2.3 - * @extends ns.widget.BaseWidget - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/engine", - "../../../../core/event", - "../../../../core/util/DOM", - "../../../../core/widget/BaseWidget", - "../wearable" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = ns.widget.BaseWidget, - engine = ns.engine, - utilEvent = ns.event, - doms = ns.util.DOM, - - eventType = { - /** - * Triggered when the section is changed. - * @event progresschange - * @member ns.widget.wearable.CircleProgressBar - */ - CHANGE: "progresschange" - }, - - CircleProgressBar = function () { - var self = this, - ui = {}; - - ui.progressContainer = null; - ui.progressValue = null; - ui.progressValueLeft = null; - ui.progressValueRight = null; - ui.progressValueBg = null; - - self.options = {}; - self._ui = ui; - - self._maxValue = null; - self._value = null; - - }, - - prototype = new BaseWidget(), - - CLASSES_PREFIX = "ui-progressbar", - - classes = { - uiProgressbar: CLASSES_PREFIX, - uiProgressbarBg: CLASSES_PREFIX + "-bg", - uiProgressbarValue: CLASSES_PREFIX + "-value", - uiProgressbarValueLeft: CLASSES_PREFIX + "-value-left", - uiProgressbarValueRight: CLASSES_PREFIX + "-value-right", - uiProgressbarHalf: CLASSES_PREFIX + "-half" - }, - - selectors = { - progressContainer: "." + classes.uiProgressbar, - progressBg: "." + classes.uiProgressbarBg, - progressValue: "." + classes.uiProgressbarValue, - progressValueLeft: "." + classes.uiProgressbarValueLeft, - progressValueRight: "." + classes.uiProgressbarValueRight - }, - - size = { - FULL: "full", - LARGE: "large", - MEDIUM: "medium", - SMALL: "small" - }; - - CircleProgressBar.classes = classes; - - /* make widget refresh with new value */ - function refreshProgressBar (self, value) { - var percentValue = value / self._maxValue * 100, - rotateValue, - ui = self._ui; - - if (percentValue >= 50) { - ui.progressValue.classList.add(classes.uiProgressbarHalf); - } else { - ui.progressValue.classList.remove(classes.uiProgressbarHalf); - } - - rotateValue = 360 * (percentValue/100); - ui.progressValueLeft.style.webkitTransform = "rotate(" + rotateValue + "deg)"; - } - - function setThicknessStyle (self, value) { - var ui = self._ui; - - ui.progressValueLeft.style.borderWidth = value +"px"; - ui.progressValueRight.style.borderWidth = value +"px"; - ui.progressValueBg.style.borderWidth = value +"px"; - } - - function setProgressBarSize (self, progressSize) { - var sizeToNumber = parseFloat(progressSize), - ui = self._ui; - - if (!isNaN(sizeToNumber)) { - ui.progressContainer.style.fontSize = progressSize + "px"; - ui.progressContainer.style.width = progressSize + "px"; - ui.progressContainer.style.height = progressSize + "px"; - } else { - switch(progressSize) { - case size.FULL: - case size.LARGE: - case size.MEDIUM: - case size.SMALL: - ui.progressContainer.classList.add(CLASSES_PREFIX + "-" + progressSize); - break; - } - ui.progressContainer.style.fontSize = doms.getCSSProperty(ui.progressContainer, "width", 0, "float") + "px"; - } - } - - function checkOptions (self, option) { - if (option.thickness) { - setThicknessStyle(self, option.thickness); - } - - if (option.size) { - setProgressBarSize(self, option.size); - } - - if (option.containerClassName) { - self._ui.progressContainer.classList.add(option.containerClassName); - } - } - - prototype._configure = function () { - /** - * Options for widget - * @property {Object} options Options for widget - * @property {number} [options.thickness=null] Sets the border width of CircleProgressBar. - * @property {number|"full"|"large"|"medium"|"small"} [options.size="full"] Sets the size of CircleProgressBar. - * @property {string} [options.containerClassName=null] Sets the class name of CircleProgressBar container. - * @member ns.widget.wearable.CircleProgressBar - */ - this.options = { - thickness: null, - size: size.MEDIUM, - containerClassName: null - }; - }; - /** - * Build CircleProgressBar - * @method _build - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.wearable.CircleProgressBar - */ - prototype._build = function (element) { - var self = this, - ui = self._ui, - progressElement = element, - progressbarContainer, progressbarBg, progressbarValue, progressbarValueLeft, progressbarValueRight; - - ui.progressContainer = progressbarContainer = document.createElement("div"), - ui.progressValueBg = progressbarBg = document.createElement("div"), - ui.progressValue = progressbarValue = document.createElement("div"), - ui.progressValueLeft = progressbarValueLeft = document.createElement("div"), - ui.progressValueRight = progressbarValueRight = document.createElement("div"); - - // set classNames of progressbar DOMs. - progressbarContainer.className = classes.uiProgressbar; - progressbarBg.className = classes.uiProgressbarBg; - progressbarValue.className = classes.uiProgressbarValue; - progressbarValueLeft.className = classes.uiProgressbarValueLeft; - progressbarValueRight.className = classes.uiProgressbarValueRight; - - // set id for progress container using "container" prefix - progressbarContainer.id = progressElement.id? progressElement.id + "-container" : ""; - - progressbarValue.appendChild(progressbarValueLeft); - progressbarValue.appendChild(progressbarValueRight); - progressbarContainer.appendChild(progressbarValue); - progressbarContainer.appendChild(progressbarBg); - progressElement.parentNode.appendChild(progressbarContainer); - progressElement.parentNode.insertBefore(progressElement, progressbarContainer); - - return element; - }; - /** - * Init CircleProgressBar - * @method _init - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.wearable.CircleProgressBar - */ - prototype._init = function (element) { - var self = this, - ui = self._ui, - progressElement = element, - elementParent = element.parentNode, - options = self.options; - - ui.progressContainer = ui.progressContainer || elementParent.querySelector(selectors.progressContainer); - ui.progressValueBg = ui.progressValueBg || elementParent.querySelector(selectors.progressValueBg); - ui.progressValue = ui.progressValue || elementParent.querySelector(selectors.progressValue); - ui.progressValueLeft = ui.progressValueLeft || elementParent.querySelector(selectors.progressValueLeft); - ui.progressValueRight = ui.progressValueRight || elementParent.querySelector(selectors.progressValueRight); - - self._maxValue = doms.getNumberFromAttribute(progressElement, "max", null, 100); - - // max value must be positive number bigger than 0 - if (self._maxValue <= 0) { - ns.error("max value of progress must be positive number that bigger than zero!"); - self._maxValue = 100; - } - - self._value = doms.getNumberFromAttribute(progressElement, "value", null, 50); - - checkOptions(self, options); - refreshProgressBar(self, self._value); - - return element; - }; - - /** - * Get or Set value of the widget - * - * Return element value or set the value - * - * @example - * <progress class="ui-circle-progress" id="circleprogress" max="20" value="2"></progress> - * <script> - * var progressbar = document.getElementById("circleprogress"), - progressbarWidget = tau.widget.CircleProgressBar(progressbar), - * // return value in progress tag - * value = progressbarWidget.value(); - * // sets the value for the progress - * progressbarWidget.value("15"); - * </script> - * @method value - * return {string} In get mode return element value - * @since 2.3 - * @member ns.widget.wearable.CircleProgressBar - */ - - /** - * Get value of Circle Progressbar - * @method _getValue - * @protected - * @memeber ns.widget.wearable.CircleProgressBar - */ - prototype._getValue = function () { - return this.element.getAttribute("value"); - }; - /** - * Set value of Circle Progressbar - * @method _setValue - * @param {string} value - * @protected - * @member ns.widget.wearable.CircleProgressBar - */ - prototype._setValue = function (inputValue) { - var self = this, - value, - selfElementValue; - - if (inputValue > self._maxValue) { - value = self._maxValue; - } else if (inputValue < 0) { - value = 0; - } else if (isNaN(inputValue)) { - value = 0; - } else { - value = inputValue; - } - - doms.setAttribute(self.element, "value", value); - - if (self._value !== value) { - self._value = value; - utilEvent.trigger(self.element, eventType.CHANGE); - refreshProgressBar(self, value); - } - }; - - /** - * Refresh structure - * @method _refresh - * @protected - * @member ns.widget.wearable.CircleProgressBar - */ - prototype._refresh = function () { - var self = this; - - self._reset(); - checkOptions(self, self.options); - refreshProgressBar(self, self._getValue()); - return null; - }; - - /** - * Reset style of Value elements - * @method _reset - * @protected - * @member ns.widget.wearable.CircleProgressBar - */ - prototype._reset = function () { - var self = this, - ui = self._ui; - - ui.progressValue.classList.remove(classes.uiProgressbarHalf); - ui.progressValueLeft.style.webkitTransform = ""; - if (self.options.thickness) { - ui.progressValueLeft.style.borderWidth = ""; - ui.progressValueRight.style.borderWidth = ""; - ui.progressValueBg.style.borderWidth = ""; - } - }; - - /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.wearable.CircleProgressBar - */ - prototype._destroy = function () { - var self = this; - - self._reset(); - - // remove doms - self.element.parentNode.removeChild(self._ui.progressContainer); - - // clear variables - self.element = null; - self._ui = null; - self._maxValue = null; - self._value = null; - - return null; - }; - - CircleProgressBar.prototype = prototype; - ns.widget.wearable.CircleProgressBar = CircleProgressBar; - - engine.defineWidget( - "CircleProgressBar", - ".ui-circle-progress", - [], - CircleProgressBar, - "wearable" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return CircleProgressBar; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/wearable/widget/wearable/CircularIndexScrollbar.js b/tau/src/js/profile/wearable/widget/wearable/CircularIndexScrollbar.js deleted file mode 100644 index abe1742d..00000000 --- a/tau/src/js/profile/wearable/widget/wearable/CircularIndexScrollbar.js +++ /dev/null @@ -1,552 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * # CircularIndexScrollbar UI Component - * Shows a circularindexscrollbar with indices, usually for the list. - * - * The circularindexscrollbar component shows on the screen a circularscrollbar with indices. - * The indices can be selected by moving the rotary. - * And it fires a select event when the index characters are selected. - * - * ## Manual constructor - * For manual creation of UI Component you can use constructor of component from **tau** namespace: - * - * @example - * var circularindexElement = document.getElementById('circularindex'), - * circularindexscrollbar = tau.widget.CircularIndexScrollbar(circularindexElement, {index: "A,B,C"}); - * - * Constructor has one require parameter **element** which are base **HTMLElement** to create component. - * We recommend get this element by method *document.getElementById*. Second parameter is **options** - * and it is a object with options for component. - * - * To add an CircularIndexScrollbar component to the application, use the following code: - * - * @example - * <div id="foo" class="ui-circularindexscrollbar" data-index="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"></div> - * <script> - * (function() { - * var elem = document.getElementById("foo"); - * tau.widget.CircularIndexScrollbar(elem); - * elem.addEventListener("select", function( event ) { - * var index = event.detail.index; - * console.log(index); - * }); - * }()); - * </script> - * - * The index value can be retrieved by accessing event.detail.index property. - * - * In the following example, the list scrolls to the position of the list item defined using - * the li-divider class, selected by the circularindexscrollbar: - * - * @example - * <div id="pageCircularIndexScrollbar" class="ui-page"> - * <header class="ui-header"> - * <h2 class="ui-title">CircularIndexScrollbar</h2> - * </header> - * <div id="circularindexscrollbar"class="ui-circularindexscrollbar" data-index="A,B,C,D,E"></div> - * <section class="ui-content"> - * <ul class="ui-listview" id="list1"> - * <li class="li-divider">A</li> - * <li>Anton</li> - * <li>Arabella</li> - * <li>Art</li> - * <li class="li-divider">B</li> - * <li>Barry</li> - * <li>Bibi</li> - * <li>Billy</li> - * <li>Bob</li> - * <li class="li-divider">D</li> - * <li>Daisy</li> - * <li>Derek</li> - * <li>Desmond</li> - * </ul> - * </section> - * <script> - * (function () { - * var page = document.getElementById("pageIndexScrollbar"), - circularindexscrollbar; - * page.addEventListener("pagecreate", function () { - * var elisb = document.getElementById("circularindexscrollbar"), // CircularIndexscrollbar element - * elList = document.getElementById("list1"), // List element - * elDividers = elList.getElementsByClassName("li-divider"), // List items (dividers) - * elScroller = elList.parentElement, // List's parent item - * dividers = {}, // Collection of list dividers - * indices = [], // List of index - * elDivider, - * i, idx; - * - * // For all list dividers - * for (i = 0; i < elDividers.length; i++) { - * // Add the list divider elements to the collection - * elDivider = elDividers[i]; - * // li element having the li-divider class - * idx = elDivider.innerText; - * // Get a text (index value) - * dividers[idx] = elDivider; - * // Remember the element - * - * // Add the index to the index list - * indices.push(idx); - * } - * - * // Create CircularIndexScrollbar - * circularindexscrollbar = new tau.widget.CircularIndexScrollbar(elisb, {index: indices}); - * - * // Bind the select callback - * elisb.addEventListener("select", function (ev) { - * var elDivider, - * idx = ev.detail.index; - * elDivider = dividers[idx]; - * if (elDivider) { - * // Scroll to the li-divider element - * elScroller.scrollTop = elDivider.offsetTop - elScroller.offsetTop; - * } - * }); - * }); - * }()); - * </script> - * </div> - * - * @author Junyoung Park <jy-.park@samsung.com> - * @author Hagun Kim <hagun.kim@samsung.com> - * @class ns.widget.wearable.CircularIndexScrollbar - * @extends ns.widget.BaseWidget - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/engine", - "../../../../core/event", - "../../../../core/event/gesture", - "../../../../core/widget/BaseWidget" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = ns.widget.BaseWidget, - engine = ns.engine, - utilsEvents = ns.event, - eventTrigger = utilsEvents.trigger, - prototype = new BaseWidget(), - - CircularIndexScrollbar = function() { - this._phase = null; - this._tid = { - phaseOne: 0, - phaseThree: 0 - }; - this._detent = { - phaseOne: 0 - }; - this.options = {}; - this._activeIndex = 0; - }, - - rotaryDirection = { - // right rotary direction - CW: "CW", - // left rotary direction - CCW: "CCW" - }, - - EventType = { - /** - * Event triggered after select index by user - * @event select - * @member ns.widget.wearable.CircularIndexScrollbar - */ - SELECT: "select" - }, - - classes = { - INDEXSCROLLBAR: "ui-circularindexscrollbar", - INDICATOR: "ui-circularindexscrollbar-indicator", - INDICATOR_TEXT: "ui-circularindexscrollbar-indicator-text", - SHOW: "ui-circularindexscrollbar-show" - }; - - CircularIndexScrollbar.prototype = prototype; - - /** - * This method configure component. - * @method _configure - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._configure = function() { - /** - * All possible component options - * @property {Object} options - * @property {string} [options.delimiter=","] delimiter in index - * @property {string|Array} [options.index=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","1"]] indices list - * String with list of letters separate be delimiter or array of letters - * @property {number} [options.maxVisibleIndex=30] maximum length of visible indices - * @property {number} [options.duration=500] duration of show/hide animation time - * @member ns.widget.wearable.CircularIndexScrollbar - */ - this.options = { - delimiter: ",", - index: [ - "A", "B", "C", "D", "E", "F", "G", "H", - "I", "J", "K", "L", "M", "N", "O", "P", "Q", - "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1" - ] - }; - }; - - /** - * This method build component. - * @method _build - * @protected - * @param {HTMLElement} element - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._build = function(element) { - var indicator, - indicatorText; - - indicator = document.createElement("div"); - indicator.classList.add(classes.INDICATOR); - indicatorText = document.createElement("span"); - indicatorText.classList.add(classes.INDICATOR_TEXT); - indicator.appendChild(indicatorText); - element.appendChild(indicator); - element.classList.add(classes.INDEXSCROLLBAR); - - return element; - }; - - /** - * This method inits component. - * @method _init - * @protected - * @param {HTMLElement} element - * @return {HTMLElement} - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._init = function(element) { - var self = this, - options = self.options; - - self._phase = 1; - - self._setIndices(options.index); - self._setValueByPosition(self._activeIndex, true); - - return element; - }; - - /** - * This method set indices prepared from parameter - * or index of component. - * @method _setIndices - * @param {string} [value] Indices to prepared - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._setIndices = function(value) { - var self = this, - options = self.options; - - if (value === null) { - ns.warn("CircularIndexScrollbar must have indices."); - options.index = null; - return; - } - - if (typeof value === "string") { - value = value.split(options.delimiter); // delimiter - } - - options.index = value; - }; - - /** - * This method select the index - * @method _setValueByPosition - * @protected - * @param {string} index index number - * @param {boolean} isFireEvent whether "select" event is fired or not - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._setValueByPosition = function(index, isFireEvent) { - var self = this, - indicatorText; - - if (!self.options.index) { - return; - } - - indicatorText = self.element.querySelector("." + classes.INDICATOR_TEXT); - - self._activeIndex = index; - indicatorText.innerHTML = self.options.index[index]; - if (isFireEvent) { - eventTrigger(self.element, EventType.SELECT, {index: self.options.index[index]}); - } - }; - - /** - * This method select next index - * @method _nextIndex - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._nextIndex = function() { - var self = this, - activeIndex = self._activeIndex, - indexLen = self.options.index.length, - nextIndex; - - if (activeIndex < indexLen -1 ) { - nextIndex = activeIndex + 1; - } else { - return; - } - self._setValueByPosition(nextIndex, true); - }; - - /** - * This method select previos index - * @method _prevIndex - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._prevIndex = function() { - var self = this, - activeIndex = self._activeIndex, - prevIndex; - - if (activeIndex > 0) { - prevIndex = activeIndex - 1; - } else { - return; - } - - self._setValueByPosition(prevIndex, true); - }; - - /** - * Get or Set index of the CircularIndexScrollbar - * - * Return current index or set the index - * - * @example - * <progress class="ui-circularindexscrollbar" id="circularindexscrollbar"></progress> - * <script> - * var circularindexElement = document.getElementById("circularindex"), - * circularIndexScrollbar = tau.widget.CircleProgressBar(circularindexElement), - * // return current index value - * value = circularIndexScrollbar.value(); - * // sets the index value - * circularIndexScrollbar.value("C"); - * </script> - * @method value - * return {string} In get mode return current index value - * @member ns.widget.wearable.CircularIndexScrollbar - */ - /** - * This method select the index - * @method _setValue - * @protected - * @param {string} value of index - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._setValue = function(value) { - var self = this, - index = self.options.index, - indexNumber; - - if (index && (indexNumber = index.indexOf(value)) >= 0) { - self._setValueByPosition(indexNumber, false); - } - }; - - /** - * This method gets current index - * @method _getValue - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._getValue = function() { - var self = this, - index = self.options.index; - - if (index) { - return index[self._activeIndex]; - } else { - return null; - } - }; - - /** - * This method is a "rotarydetent" event handler - * @method _rotary - * @protected - * @param {Event} event Event - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._rotary = function(event) { - var self = this, - direction = event.detail.direction; - - if (!self.options.index) { - return; - } - - if (self._phase === 1) { - self._rotaryPhaseOne(); - } else if (self._phase === 3) { - event.stopPropagation(); - self._rotaryPhaseThree(direction); - } - }; - - /** - * This method is for phase 1 operation. - * @method _rotaryPhaseOne - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._rotaryPhaseOne = function() { - var self = this; - clearTimeout(self._tid.phaseOne); - self._tid.phaseOne = setTimeout(function(){ - if (self._phase === 1) { - self._detent.phaseOne = 0; - } - }, 100); - - if (self._detent.phaseOne > 3) { - self._phase = 3; - clearTimeout(self._tid.phaseOne); - self._detent.phaseOne = 0; - } else { - self._detent.phaseOne++; - } - }; - - /** - * This method is for phase 3 operation. - * @method _rotaryPhaseThree - * @protected - * @param {string} direction direction of rotarydetent event - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._rotaryPhaseThree = function(direction) { - var self = this; - clearTimeout(self._tid.phaseThree); - self._tid.phaseThree = setTimeout(function(){ - self.element.classList.remove(classes.SHOW); - self._phase = 1; - }, 1000); - - if(self._phase === 3) { - self.element.classList.add(classes.SHOW); - if (direction === rotaryDirection.CW) { - self._nextIndex(); - } else { - self._prevIndex(); - } - } - }; - - /** - * This method handles events - * @method handleEvent - * @public - * @param {Event} event Event - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype.handleEvent = function(event) { - var self = this; - - switch (event.type) { - case "rotarydetent": - self._rotary(event); - break; - } - }; - - /** - * This method binds events to component. - * method _bindEvents - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._bindEvents = function() { - var self = this; - - utilsEvents.on(document, "rotarydetent", self); - }; - - /** - * This method unbinds events to component. - * method _unbindEvents - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._unbindEvents = function() { - var self = this; - - utilsEvents.off(document, "rotarydetent", self); - }; - - /** - * This method refreshes component. - * @method _refresh - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._refresh = function() { - var self = this, - options = self.options; - - self._unbindEvents(); - self._setIndices(options.index); - self._setValueByPosition(self._activeIndex, true); - self._bindEvents(); - }; - - /** - * This method detroys component. - * @method _destroy - * @protected - * @member ns.widget.wearable.CircularIndexScrollbar - */ - prototype._destroy = function() { - var self = this; - self._unbindEvents(); - }; - - // definition - ns.widget.wearable.CircularIndexScrollbar = CircularIndexScrollbar; - engine.defineWidget( - "CircularIndexScrollbar", - ".ui-circularindexscrollbar", - [], - CircularIndexScrollbar, - "wearable" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return CircularIndexScrollbar; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/wearable/widget/wearable/Datetimepicker.js b/tau/src/js/profile/wearable/widget/wearable/Datetimepicker.js index 255e68bb..68722310 100644 --- a/tau/src/js/profile/wearable/widget/wearable/Datetimepicker.js +++ b/tau/src/js/profile/wearable/widget/wearable/Datetimepicker.js @@ -1,19 +1,7 @@ /*global window, define */ /*jslint nomen: true, plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * @class ns.widget.wearable.Datetimepicker diff --git a/tau/src/js/profile/wearable/widget/wearable/Drawer.js b/tau/src/js/profile/wearable/widget/wearable/Drawer.js deleted file mode 100644 index 2fe1ffcb..00000000 --- a/tau/src/js/profile/wearable/widget/wearable/Drawer.js +++ /dev/null @@ -1,332 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #Drawer Widget in Wearable - * The drawer component is a panel that the application's sub layout on the left or right edge of the screen. - * This component is hidden most of the time, but user can be opened as swipe gesture from the edge of the screen or click the element that is added event handler, - * handler has drawer.open() method. - * - * Note! - * We recommend to make handler element. - * Because if you didn't set the handler, handler was set page element automatically. - * If you really want to make handler as the page element, you should notice data-drag-edge or dragEdge option value - * because default value, '1', is whole area of handler element. - * - * ## HTML Examples - * - * @example - * <div id="drawerPage" class="ui-page"> - * <header id="contentHeader" class="ui-header"> - * <h2 class="ui-title">Drawer</h2> - * </header> - * <div id = "content" class="ui-content"> - * Drawer - * </div> - * - * <!-- Drawer Handler --> - * <a id="drawerHandler" href="#Drawer" class="drawer-handler">Drawer Button</a> - * <!-- Drawer Widget --> - * <div id="drawer" class="ui-drawer" data-drawer-target="#drawerPage" data-position="left" data-enable="true" data-drag-edge="1"> - * <header class="ui-header"> - * <h2 class="ui-title">Left Drawer</h2> - * </header> - * <div class="ui-content"> - * <p>CONTENT</p> - * </div> - * </div> - * </div> - * - * ## Manual constructor - * - * @example - * (function() { - * var handler = document.getElementById("drawerHandler"), - * page = document.getElementById("drawerPage"), - * drawerElement = document.querySelector(handler.getAttribute("href")), - * drawer = tau.widget.Drawer(drawerElement); - * - * page.addEventListener( "pagebeforeshow", function() { - * drawer.setDragHandler(handler); - * tau.event.on(handler, "mousedown touchstart", function(e) { - * switch (e.type) { - * case "touchstart": - * case "mousedown": - * // open drawer - * drawer.transition(60); - * } - * }, false); - * })(); - * - * ##Drawer state - * Drawer has four state type. - * - "closed" - Drawer closed state. - * - "opened" - Drawer opened state. - * - "sliding" - Drawer is sliding state. This state does not mean that will operate open or close. - * - "settling" - drawer is settling state. 'Settle' means open or close status. So, this state means that drawer is animating for opened or closed state. - * - * ##Drawer positioning - * You can declare to drawer position manually. (Default is left) - * - * If you implement data-position attributes value is 'left', drawer appear from left side. - * - * @example - * <div class="ui-drawer" data-position="left" id="leftdrawer"> - * - * - "left" - drawer appear from left side - * - "right" - drawer appear from right side - * - * ##Drawer targeting - * You can declare to drawer target manually. (Default is Page) - * - * If you implement data-drawer-target attribute value at CSS selector type, drawer widget will be appended to target. - * - * @example - * <div class="ui-drawer" data-drawer-target="#drawerPage"> - * - * ##Drawer enable - * You can declare for whether drawer gesture used or not. (Default is true) - * - * If you implement data-enable attribute value is 'true', you can use the drawer widget. - * This option can be changed by 'enable' or 'disable' method. - * - * @example - * <div class="ui-drawer" data-enable="true"> - * - * ##Drawer drag gesture start point - * You can declare to drag gesture start point. (Default is 1) - * - * If you implement data-drag-edge attribute value is '0.5', you can drag gesture start in target width * 0.5 width area. - * - * @example - * <div class="ui-drawer" data-drag-edge="1"> - * - * @class ns.widget.wearable.Drawer - * @author Hyeoncheol Choi <hc7.choi@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/widget/core/Drawer", - "../../../../core/engine", - "../../../../core/util/object" - ], - - function () { - //>>excludeEnd("tauBuildExclude"); - var CoreDrawer = ns.widget.core.Drawer, - engine = ns.engine, - object = ns.util.object, - Drawer = function () { - var self = this; - CoreDrawer.call(self); - }, - prototype = new CoreDrawer(); - - Drawer.prototype = prototype; - - /** - * Configure Drawer widget - * @method _configure - * @protected - * @param {HTMLElement} element - * @member ns.widget.wearable.Drawer - */ - prototype._configure = function() { - var self = this; - /** - * Widget options - * @property {number} [options.width=0] If you set width is 0, drawer width will set as the css style. - */ - self.options.width = 0; - }; - /** - * Set Drawer drag handler. - * If developer use handler, drag event is bound at handler only. - * - * #####Running example in pure JavaScript: - * - * @example - * <!-- Drawer Handlers --> - * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a> - * - * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> - * <header class="ui-header"> - * <h2 class="ui-title">Left Drawer</h2> - * </header> - * <div id="leftClose" class="ui-content"> - * <p>Click Close</p> - * </div> - * </div> - * - * <script> - * var handler = document.getElementById("leftDrawerHandler"), - * drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")); - * - * drawer.setDragHandler(handler); - * </script> - * - * @method setDragHandler - * @public - * @param {Element} element - * @member ns.widget.wearable.Drawer - */ - - /** - * Transition Drawer widget. - * This method use only positive integer number. - * - * #####Running example in pure JavaScript: - * - * @example - * <!-- Drawer Handlers --> - * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a> - * - * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> - * <header class="ui-header"> - * <h2 class="ui-title">Left Drawer</h2> - * </header> - * <div id="leftClose" class="ui-content"> - * <p>Click Close</p> - * </div> - * </div> - * - * <script> - * var handler = document.getElementById("leftDrawerHandler"), - * drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")); - * - * drawer.Transition(60); - * </script> - * - * @method transition - * @public - * @param {Integer} position - * @member ns.widget.wearable.Drawer - */ - /** - * Open Drawer widget. - * - * #####Running example in pure JavaScript: - * - * @example - * <!-- Drawer Handlers --> - * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a> - * - * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> - * <header class="ui-header"> - * <h2 class="ui-title">Left Drawer</h2> - * </header> - * <div id="leftClose" class="ui-content"> - * <p>Click Close</p> - * </div> - * </div> - * - * <script> - * var handler = document.getElementById("leftDrawerHandler"), - * drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")); - * - * drawer.open(); - * </script> - * - * @method open - * @public - * @member ns.widget.wearable.Drawer - */ - /** - * Close Drawer widget. - * - * @example - * <!-- Drawer Handlers --> - * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a> - * - * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> - * <header class="ui-header"> - * <h2 class="ui-title">Left Drawer</h2> - * </header> - * <div id="leftClose" class="ui-content"> - * <p>Click Close</p> - * </div> - * </div> - * - * <script> - * var handler = document.getElementById("leftDrawerHandler"), - * drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")); - * - * drawer.close(); - * </script> - * - * @method close - * @public - * @member ns.widget.wearable.Drawer - */ - /** - * Refresh Drawer widget. - * @method refresh - * @protected - * @member ns.widget.wearable.Drawer - */ - /** - * Get state of Drawer widget. - * - * @example - * <!-- Drawer Handlers --> - * <a id="leftDrawerHandler" href="#leftDrawer" class="drawer-handler">Left Handler</a> - * - * <div id="leftDrawer" class="ui-drawer" data-drawer-target="#drawerSinglePage" data-position="left" data-enable="true" data-drag-edge="1"> - * <header class="ui-header"> - * <h2 class="ui-title">Left Drawer</h2> - * </header> - * <div id="leftClose" class="ui-content"> - * <p>Click Close</p> - * </div> - * </div> - * - * <script> - * var handler = document.getElementById("leftDrawerHandler"), - * drawer = tau.widget.Drawer(document.querySelector(handler.getAttribute("href")), - * state; - * - * state = drawer.getState(); - * </script> - * @method getState - * @return {String} Drawer state {"closed"|"opened"|"sliding"|"settling"} - * @public - * @member ns.widget.wearable.Drawer - */ - ns.widget.wearable.Drawer = Drawer; - engine.defineWidget( - "Drawer", - ".ui-drawer", - [ - "transition", - "setDragHandler", - "open", - "close", - "isOpen", - "getState" - ], - Drawer, - "wearable" - ); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.wearable.Drawer; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/wearable/widget/wearable/IndexScrollbar.js b/tau/src/js/profile/wearable/widget/wearable/IndexScrollbar.js deleted file mode 100644 index f055563f..00000000 --- a/tau/src/js/profile/wearable/widget/wearable/IndexScrollbar.js +++ /dev/null @@ -1,59 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ -/* - * - * @class ns.widget.wearable.IndexScrollbar - * @extends ns.widget.core.IndexScrollbar - * @since 2.0 - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/widget/core/indexscrollbar/IndexScrollbar", - "../wearable" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var engine = ns.engine, - CoreIndexScrollbar = ns.widget.core.IndexScrollbar, - prototype = new CoreIndexScrollbar(), - IndexScrollbar = function () { - CoreIndexScrollbar.call(this); - }; - - // definition - IndexScrollbar.prototype = prototype; - ns.widget.wearable.IndexScrollbar = IndexScrollbar; - - engine.defineWidget( - "IndexScrollbar", - ".ui-indexscrollbar", - [], - IndexScrollbar, - "wearable" - ); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.wearable.IndexScrollbar; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/wearable/widget/wearable/Listview.js b/tau/src/js/profile/wearable/widget/wearable/Listview.js index bbfeb8f6..cb8f7c4f 100644 --- a/tau/src/js/profile/wearable/widget/wearable/Listview.js +++ b/tau/src/js/profile/wearable/widget/wearable/Listview.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** diff --git a/tau/src/js/profile/wearable/widget/wearable/Page.js b/tau/src/js/profile/wearable/widget/wearable/Page.js index 7e4e880d..59cecedd 100644 --- a/tau/src/js/profile/wearable/widget/wearable/Page.js +++ b/tau/src/js/profile/wearable/widget/wearable/Page.js @@ -1,18 +1,6 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/*global window, define */ +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** @@ -20,11 +8,11 @@ * Page is main element of application's structure. * * ## Default selectors - * In the Tizen Web UI framework the application page structure is based on a header, content and footer elements: + * In the Tizen Wearable Web UI framework the application page structure is based on a header, content and footer elements: * * - **The header** is placed at the top, and displays the page title and optionally buttons. * - **The content** is the section below the header, showing the main content of the page. - * - **The footer** is a bottom part of page which can display for example buttons + * - **The footer** is abottom part of page which can display for example buttons * * The following table describes the specific information for each section. * @@ -56,7 +44,9 @@ * <td>Header</td> * <td>ui-header</td> * <td>No</td> - * <td>Defines the element as a header.</td> + * <td>Defines the element as a header. + * + * As the Tizen Wearable device screen size is small, avoid using the header element.</td> * </tr> * <tr> * <td>Content</td> @@ -147,7 +137,7 @@ * * When changing the active page, you can use a page transition. * - * Tizen Web UI Framework does not apply transitions by default. To set a custom transition effect, you must add the data-transition attribute to a link: + * Tizen Wearable Web UI framework does not apply transitions by default. To set a custom transition effect, you must add the data-transition attribute to a link: * * @example * <a href="index.html" data-transition="slideup">I'll slide up</a> @@ -213,8 +203,10 @@ * page.methodName(methodArgument1, methodArgument2, ...); * * @class ns.widget.wearable.Page - * @extends ns.widget.core.Page - * @author hyunkook cho <hk0713.cho@samsung.com> + * @extends ns.widget.BaseWidget + * @author Maciej Urbanski <m.urbanski@samsung.com> + * @author Piotr Karny <p.karny@samsung.com> + * @author Damian Osipiuk <d.osipiuk@samsung.com> */ (function (document, ns) { "use strict"; @@ -223,25 +215,19 @@ [ "../../../../core/engine", "../../../../core/util/DOM/css", - "../../../../core/util/object", - "../../../../core/util/selectors", - "../../../../core/util/DOM/attributes", - "../../../../core/util/DOM/manipulation", - "../../../../core/event", - "../../../../core/event/gesture", - "../../../../core/widget/core/Page", - "../wearable" + "../wearable", + "../../../../core/widget/BaseWidget" ], function () { //>>excludeEnd("tauBuildExclude"); /** * Alias for {@link ns.widget.BaseWidget} * @property {Object} BaseWidget - * @member ns.widget.core.Page + * @member ns.widget.wearable.Page * @private * @static */ - var CorePage = ns.widget.core.Page, + var BaseWidget = ns.widget.BaseWidget, /** * Alias for {@link ns.util} * @property {Object} util @@ -259,38 +245,6 @@ */ doms = util.DOM, /** - * Alias for {@link ns.util.selectors} - * @property {Object} selectors - * @member ns.widget.wearable.Page - * @private - * @static - */ - selectors = util.selectors, - /** - * Alias for {@link ns.util.object} - * @property {Object} object - * @member ns.widget.wearable.Page - * @private - * @static - */ - object = ns.util.object, - /** - * Alias for {@link ns.event} - * @property {Object} object - * @member ns.widget.wearable.Page - * @private - * @static - */ - utilsEvents = ns.event, - /** - * Alias for {@link ns.event.gesture} - * @property {Object} object - * @member ns.widget.wearable.Page - * @private - * @static - */ - Gesture = utilsEvents.gesture, - /** * Alias for {@link ns.engine} * @property {Object} engine * @member ns.widget.wearable.Page @@ -301,35 +255,94 @@ Page = function () { var self = this; - CorePage.call(self); - self._contentStyleAttributes = ["height", "width", "minHeight", "marginTop", "marginBottom"]; + /** + * Callback on resize + * @property {?Function} contentFillAfterResizeCallback + * @private + * @member ns.widget.wearable.Page + */ + self.contentFillAfterResizeCallback = null; + /** + * Options for widget. + * It is empty object, because widget Page does not have any options. + * @property {Object} options + * @member ns.widget.wearable.Page + */ + self.options = {}; + }, + /** + * Dictionary for page related event types + * @property {Object} EventType + * @member ns.widget.wearable.Page + * @static + */ + EventType = { + /** + * Triggered on the page we are transitioning to, + * after the transition animation has completed. + * @event pageshow + * @member ns.widget.wearable.Page + */ + SHOW: "pageshow", + /** + * Triggered on the page we are transitioning away from, + * after the transition animation has completed. + * @event pagehide + * @member ns.widget.wearable.Page + */ + HIDE: "pagehide", + /** + * Triggered when the page has been created in the DOM + * (for example, through Ajax) but before all widgets + * have had an opportunity to enhance the contained markup. + * @event pagecreate + * @member ns.widget.wearable.Page + */ + CREATE: "pagecreate", + /** + * Triggered when the page is being initialized, + * before most plugin auto-initialization occurs. + * @event pagebeforecreate + * @member ns.widget.wearable.Page + */ + BEFORE_CREATE: "pagebeforecreate", + /** + * Triggered on the page we are transitioning to, + * before the actual transition animation is kicked off. + * @event pagebeforeshow + * @member ns.widget.wearable.Page + */ + BEFORE_SHOW: "pagebeforeshow", + /** + * Triggered on the page we are transitioning away from, + * before the actual transition animation is kicked off. + * @event pagebeforehide + * @member ns.widget.wearable.Page + */ + BEFORE_HIDE: "pagebeforehide" }, /** * Dictionary for page related css class names * @property {Object} classes - * @member ns.widget.core.Page + * @member ns.widget.wearable.Page * @static * @readonly */ - classes = object.merge({ + classes = { + uiPage: "ui-page", + uiPageActive: "ui-page-active", + uiSection: "ui-section", uiHeader: "ui-header", - uiPageScroll: "ui-scroll-on", - uiScroller: "ui-scroller", - uiFixed: "ui-fixed" - }, CorePage.classes), + uiFooter: "ui-footer", + uiContent: "ui-content", + uiPageScroll: "ui-page-scroll" + }, + prototype = new BaseWidget(); - prototype = new CorePage(); + Page.classes = classes; + Page.events = EventType; /** - * Configure Page Widget - * @method _configure - * @member ns.widget.wearable.Page - */ - prototype._configure = function () { - CorePage.prototype._configure.call(this); - this.options.enablePageScroll = ns.getConfig("enablePageScroll"); - }; - /** * Sets top-bottom css attributes for content element * to allow it to fill the page dynamically * @method _contentFill @@ -337,46 +350,173 @@ */ prototype._contentFill = function () { var self = this, - option = self.options, element = self.element, screenWidth = window.innerWidth, screenHeight = window.innerHeight, - pageScrollSelector = classes.uiPageScroll, + contentSelector = classes.uiContent, + headerSelector = classes.uiHeader, + footerSelector = classes.uiFooter, + extraHeight = 0, children = [].slice.call(element.children), + childrenLength = children.length, elementStyle = element.style, - scroller, - fragment, - firstChild; + i, + node, + contentStyle, + marginTop, + marginBottom, + nodeStyle; elementStyle.width = screenWidth + "px"; elementStyle.height = screenHeight + "px"; - if (option.enablePageScroll === true && !element.querySelector("." + classes.uiScroller)) { - element.classList.add(pageScrollSelector); - scroller = document.createElement("div"); - scroller.classList.add(classes.uiScroller); - fragment = document.createDocumentFragment(); - - children.forEach( function(value) { - if ( selectors.matchesSelector(value, ".ui-header:not(.ui-fixed), .ui-content, .ui-footer:not(.ui-fixed)")) { - fragment.appendChild(value); - } - }); - - if (element.children.length > 0 && element.children[0].classList.contains(classes.uiHeader)) { - doms.insertNodeAfter(element.children[0], scroller); - } else { - element.insertBefore(scroller, element.firstChild); + for (i = 0; i < childrenLength; i++) { + node = children[i]; + if (node.classList.contains(headerSelector) || + node.classList.contains(footerSelector)) { + extraHeight += doms.getElementHeight(node); + } + } + for (i = 0; i < childrenLength; i++) { + node = children[i]; + nodeStyle = node.style; + if (node.classList.contains(contentSelector)) { + contentStyle = window.getComputedStyle(node); + marginTop = parseFloat(contentStyle.marginTop); + marginBottom = parseFloat(contentStyle.marginBottom); + nodeStyle.height = (screenHeight - extraHeight - marginTop - marginBottom) + "px"; + nodeStyle.width = screenWidth + "px"; } + } + }; - firstChild = fragment.firstChild; + /** + * Build page + * @method _build + * @param {HTMLElement} element + * @return {HTMLElement} + * @protected + * @member ns.widget.wearable.Page + */ + prototype._build = function (element) { + element.classList.add(classes.uiPage); + return element; + }; - scroller.appendChild(fragment); + /** + * This method sets page active or inactive. + * It sets ui-overlay-... class on `body` depending on current theme. + * @method setActive + * @param {boolean} value If true, then page will be active. + * Otherwise, page will be inactive. + * @member ns.widget.wearable.Page + */ + prototype.setActive = function (value) { + var elementClassList = this.element.classList; + if (value) { + elementClassList.add(classes.uiPageActive); + } else { + elementClassList.remove(classes.uiPageActive); } }; + /** + * Return current status of page. + * @method isActive + * @member ns.widget.wearable.Page + * @instance + */ + prototype.isActive = function () { + return this.element.classList.contains(classes.uiPageActive); + }; + + /** + * Bind events to widget + * @method _bindEvents + * @param {HTMLElement} element + * @protected + * @member ns.widget.wearable.Page + */ + prototype._bindEvents = function (element) { + var self = this; + self.contentFillAfterResizeCallback = self._contentFill.bind(self); + window.addEventListener("resize", self.contentFillAfterResizeCallback, false); + }; + + /** + * Refresh widget structure + * @method _refresh + * @protected + * @member ns.widget.wearable.Page + */ + prototype._refresh = function () { + this._contentFill(); + }; + + /** + * Layouting page structure + * @method layout + * @member ns.widget.wearable.Page + */ + prototype.layout = function () { + this._contentFill(); + }; + + /** + * This method triggers BEFORE_SHOW event. + * @method onBeforeShow + * @member ns.widget.wearable.Page + */ + prototype.onBeforeShow = function () { + this.trigger(EventType.BEFORE_SHOW); + }; + + /** + * This method triggers SHOW event. + * @method onShow + * @member ns.widget.wearable.Page + */ + prototype.onShow = function () { + this.trigger(EventType.SHOW); + }; + + /** + * This method triggers BEFORE_HIDE event. + * @method onBeforeHide + * @member ns.widget.wearable.Page + */ + prototype.onBeforeHide = function () { + this.trigger(EventType.BEFORE_HIDE); + }; + + /** + * This method triggers HIDE event. + * @method onHide + * @member ns.widget.wearable.Page + */ + prototype.onHide = function () { + this.trigger(EventType.HIDE); + }; + + /** + * Destroy widget + * @method _destroy + * @protected + * @member ns.widget.wearable.Page + */ prototype._destroy = function () { - CorePage.prototype._destroy.call(this); + var self = this, + element = self.element; + + element = element || self.element; + //>>excludeStart("tauDebug", pragmas.tauDebug); + ns.log("Called _destroy in ns.widget.wearable.Page"); + //>>excludeEnd("tauDebug"); + + window.removeEventListener("resize", self.contentFillAfterResizeCallback, false); + + // destroy widgets on children + engine.destroyAllWidgets(element, true); }; Page.prototype = prototype; @@ -384,22 +524,13 @@ // definition ns.widget.wearable.Page = Page; engine.defineWidget( - "Page", + "page", "[data-role=page],.ui-page", - [ - "layout", - "focus", - "blur", - "setActive", - "isActive" - ], + ["onBeforeShow", "onShow", "onBeforeHide", "onHide", "setActive", "layout"], Page, - "wearable", - true + "wearable" ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return Page; } ); //>>excludeEnd("tauBuildExclude"); diff --git a/tau/src/js/core/widget/core/PageContainer.js b/tau/src/js/profile/wearable/widget/wearable/PageContainer.js index ca498e7e..a63928e2 100644 --- a/tau/src/js/core/widget/core/PageContainer.js +++ b/tau/src/js/profile/wearable/widget/wearable/PageContainer.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -21,7 +9,7 @@ * * It allows for adding new pages, switching between them and displaying progress bars indicating loading process. * - * @class ns.widget.core.PageContainer + * @class ns.widget.wearable.PageContainer * @extends ns.widget.BaseWidget * @author Maciej Urbanski <m.urbanski@samsung.com> * @author Piotr Karny <p.karny@samsung.com> @@ -32,60 +20,48 @@ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( [ - "../../engine", - "../../event", - "../../util/DOM/attributes", - "../BaseWidget", - "../core", + "../../../../core/engine", + "../../../../core/event", + "../../../../core/util/DOM/attributes", + "../../../../core/widget/BaseWidget", + "../wearable", "./Page" ], function () { //>>excludeEnd("tauBuildExclude"); var BaseWidget = ns.widget.BaseWidget, - Page = ns.widget.core.Page, + Page = ns.widget.wearable.Page, util = ns.util, eventUtils = ns.event, DOM = util.DOM, engine = ns.engine, classes = { - pageContainer: "ui-page-container", uiViewportTransitioning: "ui-viewport-transitioning", out: "out", in: "in", - reverse: "reverse", uiPreIn: "ui-pre-in", uiBuild: "ui-page-build" }, PageContainer = function () { /** * Active page. - * @property {ns.widget.core.Page} [activePage] - * @member ns.widget.core.PageContainer + * @property {ns.widget.wearable.Page} [activePage] + * @member ns.widget.wearable.PageContainer */ this.activePage = null; }, EventType = { /** - * Triggered before the changePage() request - * has started loading the page into the DOM. - * @event pagebeforechange - * @member ns.widget.core.PageContainer - */ - PAGE_BEFORE_CHANGE: "pagebeforechange", - /** * Triggered after the changePage() request * has finished loading the page into the DOM and * all page transition animations have completed. * @event pagechange - * @member ns.widget.core.PageContainer + * @member ns.widget.wearable.PageContainer */ PAGE_CHANGE: "pagechange" }, animationend = "animationend", webkitAnimationEnd = "webkitAnimationEnd", - mozAnimationEnd = "mozAnimationEnd", - msAnimationEnd = "msAnimationEnd", - oAnimationEnd = "oAnimationEnd", prototype = new BaseWidget(); /** @@ -100,7 +76,7 @@ /** * Dictionary for PageContainer related css class names * @property {Object} classes - * @member ns.widget.core.Page + * @member ns.widget.wearable.Page * @static * @readonly */ @@ -113,7 +89,7 @@ * @param {Object} [options] Additional options for the transition * @param {string} [options.transition=none] Specifies the type of transition * @param {boolean} [options.reverse=false] Specifies the direction of transition - * @member ns.widget.core.PageContainer + * @member ns.widget.wearable.PageContainer */ prototype.change = function (toPage, options) { var self = this, @@ -121,7 +97,6 @@ toPageWidget; options = options || {}; - options.widget = options.widget || "Page"; // The change should be made only if no active page exists // or active page is changed to another one. @@ -130,11 +105,9 @@ toPage = self._include(toPage); } - self.trigger(EventType.PAGE_BEFORE_CHANGE); - toPage.classList.add(classes.uiBuild); - toPageWidget = engine.instanceWidget(toPage, options.widget); + toPageWidget = engine.instanceWidget(toPage, "page"); // set sizes of page for correct display toPageWidget.layout(); @@ -157,14 +130,7 @@ self._removeExternalPage(fromPageWidget, options); } toPageWidget.onShow(); - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - window.tauPerf.get("framework", "Trigger: pagechange"); - //>>excludeEnd("tauPerformance"); self.trigger(EventType.PAGE_CHANGE); - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - window.tauPerf.get("framework", "After trigger: pagechange"); - window.tauPerf.finish(); - //>>excludeEnd("tauPerformance"); } }; self._transition(toPageWidget, fromPageWidget, options); @@ -174,13 +140,13 @@ /** * This method performs transition between the old and a new page. * @method _transition - * @param {ns.widget.core.Page} toPageWidget The new page - * @param {ns.widget.core.Page} fromPageWidget The page to be replaced + * @param {ns.widget.wearable.Page} toPageWidget The new page + * @param {ns.widget.wearable.Page} fromPageWidget The page to be replaced * @param {Object} [options] Additional options for the transition * @param {string} [options.transition=none] The type of transition * @param {boolean} [options.reverse=false] Specifies transition direction * @param {Object} [options.deferred] Deferred object - * @member ns.widget.core.PageContainer + * @member ns.widget.wearable.PageContainer * @protected */ prototype._transition = function (toPageWidget, fromPageWidget, options) { @@ -189,28 +155,25 @@ elementClassList = element.classList, transition = !fromPageWidget || !options.transition ? "none" : options.transition, deferred = options.deferred, + reverse = "reverse", clearClasses = [classes.in, classes.out, classes.uiPreIn, transition], oldDeferredResolve, classlist, + classParam, oneEvent; if (options.reverse) { - clearClasses.push(classes.reverse); + clearClasses.push(reverse); } elementClassList.add(classes.uiViewportTransitioning); oldDeferredResolve = deferred.resolve; deferred.resolve = function () { var fromPageWidgetClassList = fromPageWidget && fromPageWidget.element.classList, toPageWidgetClassList = toPageWidget.element.classList; - elementClassList.remove(classes.uiViewportTransitioning); - clearClasses.forEach(function (className) { - toPageWidgetClassList.remove(className); - }); + toPageWidgetClassList.remove.apply(toPageWidgetClassList, clearClasses); if (fromPageWidgetClassList) { - clearClasses.forEach(function (className) { - fromPageWidgetClassList.remove(className); - }); + fromPageWidgetClassList.remove.apply(fromPageWidgetClassList, clearClasses); } self._setActivePage(toPageWidget); oldDeferredResolve(); @@ -218,49 +181,28 @@ if (transition !== "none") { oneEvent = function () { - eventUtils.off( - toPageWidget.element, - [ - animationend, - webkitAnimationEnd, - mozAnimationEnd, - msAnimationEnd, - oAnimationEnd - ], - oneEvent, - false - ); + eventUtils.off(toPageWidget.element, [animationend, webkitAnimationEnd], oneEvent, false); deferred.resolve(); }; - eventUtils.on( - toPageWidget.element, - [ - animationend, - webkitAnimationEnd, - mozAnimationEnd, - msAnimationEnd, - oAnimationEnd - ], - oneEvent, - false - ); + eventUtils.one(toPageWidget.element, [animationend, webkitAnimationEnd], oneEvent, false); if (fromPageWidget) { - classlist = fromPageWidget.element.classList; - classlist.add(transition); - classlist.add(classes.out); + classParam = []; + classParam.push(transition, classes.out); if (options.reverse) { - classlist.add(classes.reverse); + classParam.push(reverse); } + classlist = fromPageWidget.element.classList; + classlist.add.apply(classlist ,classParam); } classlist = toPageWidget.element.classList; - classlist.add(transition); - classlist.add(classes.in); - classlist.add(classes.uiPreIn); + classParam = []; + classParam.push(transition, classes.in, classes.uiPreIn); if (options.reverse) { - classlist.add(classes.reverse); + classParam.push(reverse); } + classlist.add.apply(classlist, classParam); } else { window.setTimeout(deferred.resolve, 0); } @@ -269,8 +211,8 @@ * This method adds an element as a page. * @method _include * @param {HTMLElement} page an element to add + * @member ns.widget.wearable.PageContainer * @return {HTMLElement} - * @member ns.widget.core.PageContainer * @protected */ prototype._include = function (page) { @@ -283,8 +225,8 @@ /** * This method sets currently active page. * @method _setActivePage - * @param {ns.widget.core.Page} page a widget to set as the active page - * @member ns.widget.core.PageContainer + * @param {ns.widget.wearable.Page} page a widget to set as the active page + * @member ns.widget.wearable.PageContainer * @protected */ prototype._setActivePage = function (page) { @@ -298,8 +240,8 @@ /** * This method returns active page widget. * @method getActivePage - * @member ns.widget.core.PageContainer - * @return {ns.widget.core.Page} Currently active page + * @member ns.widget.wearable.PageContainer + * @return {ns.widget.wearable.Page} Currently active page */ prototype.getActivePage = function () { return this.activePage; @@ -308,7 +250,7 @@ /** * This method displays a progress bar indicating loading process. * @method showLoading - * @member ns.widget.core.PageContainer + * @member ns.widget.wearable.PageContainer * @return {null} */ prototype.showLoading = function () { @@ -320,7 +262,7 @@ /** * This method hides any active progress bar. * @method hideLoading - * @member ns.widget.core.PageContainer + * @member ns.widget.wearable.PageContainer * @return {null} */ prototype.hideLoading = function () { @@ -332,10 +274,10 @@ /** * This method removes page element from the given widget and destroys it. * @method _removeExternalPage - * @param {ns.widget.core.Page} fromPageWidget the widget to destroy + * @param {ns.widget.wearable.Page} fromPageWidget the widget to destroy * @param {Object} [options] transition options * @param {boolean} [options.reverse=false] specifies transition direction - * @member ns.widget.core.PageContainer + * @member ns.widget.wearable.PageContainer * @protected */ prototype._removeExternalPage = function ( fromPageWidget, options) { @@ -352,14 +294,14 @@ PageContainer.prototype = prototype; // definition - ns.widget.core.PageContainer = PageContainer; + ns.widget.wearable.PageContainer = PageContainer; engine.defineWidget( "pagecontainer", "", ["change", "getActivePage", "showLoading", "hideLoading"], PageContainer, - "core" + "wearable" ); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); } diff --git a/tau/src/js/profile/wearable/widget/wearable/PageIndicator.js b/tau/src/js/profile/wearable/widget/wearable/PageIndicator.js deleted file mode 100644 index ffd80402..00000000 --- a/tau/src/js/profile/wearable/widget/wearable/PageIndicator.js +++ /dev/null @@ -1,285 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * #PageIndicator Widget - * Widget create dots page indicator. - * @class ns.widget.wearable.PageIndicator - * @extends ns.widget.BaseWidget - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/engine", - "../../../../core/widget/BaseWidget", - "../wearable" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = ns.widget.BaseWidget, - engine = ns.engine, - - PageIndicator = function () { - var self = this; - self._activeIndex = null; - self.options = {}; - }, - classes = { - indicator: "ui-page-indicator", - indicatorActive: "ui-page-indicator-active", - indicatorItem: "ui-page-indicator-item", - linearIndicator: "ui-page-indicator-linear", - circularIndicator: "ui-page-indicator-circular" - }, - maxDots = { - IN_CIRCLE: 60, - IN_LINEAR: 5 - }, - layoutType = { - LINEAR: "linear", - CIRCULAR: "circular" - }, - DISTANCE_FROM_EDGE = 15, - - prototype = new BaseWidget(); - - PageIndicator.classes = classes; - - prototype._configure = function () { - /** - * Options for widget. - * @property {Object} options - * @property {number} [options.maxPage=null] Maximum number of dots(pages) in indicator. - * @property {number} [options.numberOfPages=null] Number of pages to be linked to PageIndicator. - * @property {string} [options.layout="linear"] Layout type of page indicator. - * @property {number} [options.intervalAngle=6] angle between each dot in page indicator. - * @member ns.widget.wearable.PageIndicator - */ - this.options = { - maxPage: null, - numberOfPages: null, - layout: "linear", - intervalAngle: 6 - }; - }; - - /** - * Build PageIndicator - * @method _build - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.wearable.PageIndicator - */ - prototype._build = function (element) { - var self = this; - self._createIndicator(element); - if (self.options.layout === layoutType.CIRCULAR) { - self._circularPositioning(element); - } - return element; - }; - - /** - * Create HTML elements for PageIndicator - * @method _createIndicator - * @param {HTMLElement} element - * @protected - * @member ns.widget.wearable.PageIndicator - */ - prototype._createIndicator = function (element) { - var self = this, - i, - len, - maxPage, - span, - numberOfPages = self.options.numberOfPages; - - if(numberOfPages === null) { - ns.error("build error: numberOfPages is null"); - return; - } - - self.options.layout = self.options.layout.toLowerCase(); - - if (self.options.layout === layoutType.CIRCULAR) { - element.classList.remove(classes.linearIndicator); - element.classList.add(classes.circularIndicator); - } else { - element.classList.remove(classes.circularIndicator); - element.classList.add(classes.linearIndicator); - } - - maxPage = self._getMaxPage(); - - len = numberOfPages < maxPage ? numberOfPages : maxPage; - - for(i = 0; i < len; i++) { - span = document.createElement("span"); - span.classList.add(classes.indicatorItem); - - element.appendChild(span); - } - }; - - /** - * Make circular positioned indicator - * @method _circularPositioning - * @param {HTMLElement} element - * @protected - * @member ns.widget.wearable.PageIndicator - */ - prototype._circularPositioning = function (element) { - var self = this, - items = element.children, - numberOfDots = items.length, - intervalAngle = self.options.intervalAngle - "0", - translatePixel, - style, - i; - - translatePixel = element.offsetWidth / 2 - DISTANCE_FROM_EDGE; - - for(i=0;i<numberOfDots;i++) { - style = "rotate(" + (i * intervalAngle - 90 - (numberOfDots-1) * intervalAngle * 0.5) + "deg) translate(" + - translatePixel + "px) "; - - items[i].style.transform = style; - } - - }; - - /** - * Return maximum number of dots(pages) in indicator - * @method _getMaxPage - * @protected - * @member ns.widget.wearable.PageIndicator - */ - prototype._getMaxPage = function() { - var self = this, - options = self.options, - maxPage; - if (options.layout === layoutType.CIRCULAR) { - maxPage = options.maxPage || maxDots.IN_CIRCLE; - } else { - maxPage = options.maxPage || maxDots.IN_LINEAR; - } - return maxPage; - }; - - /** - * Remove contents of HTML elements for PageIndicator - * @method _removeIndicator - * @param {HTMLElement} element - * @protected - * @member ns.widget.wearable.PageIndicator - */ - prototype._removeIndicator = function (element) { - element.textContent = ""; - }; - - /** - * This method sets a dot to active state. - * @method setActive - * @param {number} position index to be active state. - * @member ns.widget.wearable.PageIndicator - */ - prototype.setActive = function (position) { - var self = this, - dotIndex = position, - elPageIndicatorItems = self.element.children, - maxPage, - numberOfPages = self.options.numberOfPages, - middle, - numberOfCentralDotPages = 0, - indicatorActive = classes.indicatorActive, - previousActive; - - if(position === null || position === undefined) { - return; - } - - self._activeIndex = position; - maxPage = self._getMaxPage(); - middle = window.parseInt(maxPage/2, 10); - - if(numberOfPages > maxPage) { - numberOfCentralDotPages = numberOfPages - maxPage; - } else if(numberOfPages === null) { - ns.error("setActive error: numberOfPages is null"); - return; - } else if(numberOfPages === 0) { - return; - } - - previousActive = self.element.querySelector("." + indicatorActive); - if(previousActive) { - previousActive.classList.remove(indicatorActive); - } - - if ((middle < position) && (position <= (middle + numberOfCentralDotPages))) { - dotIndex = middle; - } else if (position > (middle + numberOfCentralDotPages)) { - dotIndex = position - numberOfCentralDotPages; - } - - elPageIndicatorItems[dotIndex].classList.add(indicatorActive); - }; - - /** - * Refresh widget structure - * @method _refresh - * @protected - * @member ns.widget.wearable.PageIndicator - */ - prototype._refresh = function () { - var self = this, - element = self.element; - self._removeIndicator(element); - self._createIndicator(element); - if (self.options.layout === layoutType.CIRCULAR) { - self._circularPositioning(element); - } - }; - - /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.wearable.PageIndicator - */ - prototype._destroy = function () { - this._removeIndicator(this.element); - }; - - PageIndicator.prototype = prototype; - - // definition - ns.widget.wearable.PageIndicator = PageIndicator; - engine.defineWidget( - "PageIndicator", - ".ui-page-indicator", - ["setActive"], - PageIndicator, - "wearable" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/wearable/widget/wearable/Popup.js b/tau/src/js/profile/wearable/widget/wearable/Popup.js deleted file mode 100644 index 22c416b0..00000000 --- a/tau/src/js/profile/wearable/widget/wearable/Popup.js +++ /dev/null @@ -1,419 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2013 - 2014 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true, plusplus: true */ - -/** - * # Popup Widget - * Shows a pop-up window. - * - * The popup widget shows in the middle of the screen a list of items in a pop-up window. It automatically optimizes the pop-up window size within the screen. The following table describes the supported popup classes. - * - * ## Default selectors - * All elements with class *ui-popup* will be become popup widgets. - * - * The pop-up window can contain a header, content, and footer area like the page element. - * - * To open a pop-up window from a link, use the data-rel attribute in HTML markup as in the following code: - * - * @example - * <a href="#popup" class="ui-btn" data-rel="popup">Open popup when clicking this element.</a> - * - * The following table shows examples of various types of popups. - * - * The popup contains header, content and footer area - * - * ###HTML Examples - * - * #### Basic popup with header, content, footer - * - * @example - * <div class="ui-page"> - * <div class="ui-popup"> - * <div class="ui-popup-header">Power saving mode</div> - * <div class="ui-popup-content"> - * Turning on Power - * saving mode will - * limit the maximum - * per - * </div> - * <div class="ui-popup-footer"> - * <button id="cancel" class="ui-btn">Cancel</button> - * </div> - * </div> - * </div> - * - * #### Popup with 2 buttons in the footer - * - * @example - * <div id="2btnPopup" class="ui-popup"> - * <div class="ui-popup-header">Delete</div> - * <div class="ui-popup-content"> - * Delete the image? - * </div> - * <div class="ui-popup-footer ui-grid-col-2"> - * <button id="2btnPopup-cancel" class="ui-btn">Cancel</button> - * <button id="2btnPopup-ok" class="ui-btn">OK</button> - * </div> - * </div> - * - * #### Popup with checkbox/radio - * - * If you want make popup with list checkbox(or radio) just include checkbox (radio) to popup and add class *ui-popup-checkbox-label* to popup element. - * - * @example - * <div id="listBoxPopup" class="ui-popup"> - * <div class="ui-popup-header">When?</div> - * <div class="ui-popup-content" style="height:243px; overflow-y:scroll"> - * <ul class="ui-listview"> - * <li> - * <label for="check-1" class="ui-popup-checkbox-label">Yesterday</label> - * <input type="checkbox" name="checkset" id="check-1" /> - * </li> - * <li> - * <label for="check-2" class="ui-popup-checkbox-label">Today</label> - * <input type="checkbox" name="checkset" id="check-2" /> - * </li> - * <li> - * <label for="check-3" class="ui-popup-checkbox-label">Tomorrow</label> - * <input type="checkbox" name="checkset" id="check-3" /> - * </li> - * </ul> - * <ul class="ui-listview"> - * <li> - * <label for="radio-1" class="ui-popup-radio-label">Mandatory</label> - * <input type="radio" name="radioset" id="radio-1" /> - * </li> - * <li> - * <label for="radio-2" class="ui-popup-radio-label">Optional</label> - * <input type="radio" name="radioset" id="radio-2" /> - * </li> - * </ul> - * </div> - * <div class="ui-popup-footer"> - * <button id="listBoxPopup-close" class="ui-btn">Close</button> - * </div> - * </div> - * </div> - * - * #### Popup with no header and footer - * - * @example - * <div id="listNoTitleNoBtnPopup" class="ui-popup"> - * <div class="ui-popup-content" style="height:294px; overflow-y:scroll"> - * <ul class="ui-listview"> - * <li><a href="">Ringtones 1</a></li> - * <li><a href="">Ringtones 2</a></li> - * <li><a href="">Ringtones 3</a></li> - * </ul> - * </div> - * </div> - * - * #### Toast popup - * - * @example - * <div id="PopupToast" class="ui-popup ui-popup-toast"> - * <div class="ui-popup-content">Saving contacts to sim on Samsung</div> - * </div> - * - * ### Create Option popup - * - * Popup inherits value of option positionTo from property data-position-to set in link. - * - * @example - * <!--definition of link, which opens popup and sets its position--> - * <a href="#popupOptionText" data-rel="popup" data-position-to="origin">Text</a> - * <!--definition of popup, which inherites property position from link--> - * <div id="popupOptionText" class="ui-popup"> - * <div class="ui-popup-content"> - * <ul class="ui-listview"> - * <li><a href="#">Option 1</a></li> - * <li><a href="#">Option 2</a></li> - * <li><a href="#">Option 3</a></li> - * <li><a href="#">Option 4</a></li> - * </ul> - * </div> - * </div> - * - * ### Opening and closing popup - * - * To open popup from "a" link using html markup, use the following code: - * - * @example - * <div class="ui-page"> - * <header class="ui-header"> - * <h2 class="ui-title">Call menu</h2> - * </header> - * <div class="ui-content"> - * <a href="#popup" class="ui-btn" data-rel="popup" >Open Popup</a> - * </div> - * - * <div id="popup" class="ui-popup"> - * <div class="ui-popup-header">Power saving mode</div> - * <div class="ui-popup-content"> - * Turning on Power - * saving mode will - * limit the maximum - * per - * </div> - * <div class="ui-popup-footer"> - * <button id="cancel" class="ui-btn">Cancel</button> - * </div> - * </div> - * - * To open the popup widget from JavaScript use method *tau.openPopup(to)* - * - * @example - * tau.openPopup("popup") - * - * To close the popup widget from JavaScript use method *tau.openPopup(to)* - * - * @example - * tau.closePopup("popup") - * - * To find the currently active popup, use the ui-popup-active class. - * - * To bind the popup to a button, use the following code: - * - * @example - * <!--HTML code--> - * <div id="1btnPopup" class="ui-popup"> - * <div class="ui-popup-header">Power saving mode</div> - * <div class="ui-popup-content"> - * </div> - * <div class="ui-popup-footer"> - * <button id="1btnPopup-cancel" class="ui-btn">Cancel</button> - * </div> - * </div> - * <script> - * // Popup opens with button click - * var button = document.getElementById("button"); - * button.addEventListener("click", function() { - * tau.openPopup("#1btnPopup"); - * }); - * - * // Popup closes with Cancel button click - * document.getElementById("1btnPopup-cancel").addEventListener("click", function() { - * tau.closePopup(); - * }); - * </script> - * - * ## Manual constructor - * For manual creation of popup widget you can use constructor of widget from **tau** namespace: - * - * @example - * var popupElement = document.getElementById("popup"), - * popup = tau.widget.popup(buttonElement); - * - * Constructor has one require parameter **element** which are base **HTMLElement** to create widget. We recommend get this element by method *document.getElementById*. - * - * ## Options for Popup Widget - * - * Options for widget can be defined as _data-..._ attributes or give as parameter in constructor. - * - * You can change option for widget using method **option**. - * - * ## Methods - * - * To call method on widget you can use tau API: - * - * @example - * var popupElement = document.getElementById("popup"), - * popup = tau.widget.popup(buttonElement); - * - * popup.methodName(methodArgument1, methodArgument2, ...); - * - * ## Transitions - * - * By default, the framework doesn't apply transition. To set a custom transition effect, add the data-transition attribute to the link. - * - * @example - * <a href="index.html" data-rel="popup" data-transition="slideup">I'll slide up</a> - * - * Global configuration: - * - * @example - * gear.ui.defaults.popupTransition = "slideup"; - * - * ### Transitions list - * - * - **none** Default value, no transition. - * - **slideup** Makes the content of the pop-up slide up. - * - * ## Handling Popup Events - * - * To use popup events, use the following code: - * - * @example - * <!--Popup html code--> - * <div id="popup" class="ui-popup"> - * <div class="ui-popup-header"></div> - * <div class="ui-popup-content"></div> - * </div> - * </div> - * <script> - * // Use popup events - * var popup = document.getElementById("popup"); - * popup.addEventListener("popupbeforecreate", function() { - * // Implement code for popupbeforecreate event - * }); - * </script> - * - * Full list of available events is in [events list section](#events-list). - * - * @author Hyunkook Cho <hk0713.cho@samsung.com> - * @class ns.widget.core.Popup - * @extends ns.widget.core.ContextPopup - */ -(function (window, document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/engine", - "../../../../core/util/object", - "../../../../core/util/DOM/css", - "../../../../core/widget/core/ContextPopup" - ], - function () { - //>>excludeEnd("tauBuildExclude"); - - var CorePopup = ns.widget.core.ContextPopup, - - CorePopupPrototype = CorePopup.prototype, - - engine = ns.engine, - - objectUtils = ns.util.object, - - domUtils = ns.util.DOM, - - defaults = { - fullSize: false, - enablePopupScroll: false - }, - - classes = objectUtils.merge({}, CorePopup.classes, { - popupScroll: "ui-scroll-on", - fixed: "ui-fixed", - sideButton: "ui-side-button", - hasSideButtons: "ui-has-side-buttons", - toast: "ui-popup-toast", - ctx: "ui-ctxpopup" - }), - - Popup = function () { - var self = this; - - CorePopup.call(self); - self.options = objectUtils.merge(self.options, { - fullSize: ns.getConfig("popupFullSize", defaults.fullSize), - enablePopupScroll: ns.getConfig("enablePopupScroll", defaults.enablePopupScroll) - }); - }, - - prototype = new CorePopup(); - - /** - * Layouting popup structure - * @method layout - * @member ns.widget.wearable.Popup - */ - prototype._layout = function (element) { - var self = this, - elementClassList = element.classList, - ui = self._ui, - wrapper = ui.wrapper, - header = ui.header, - footer = ui.footer, - content = ui.content, - headerHeight = 0, - footerHeight = 0; - - CorePopupPrototype._layout.call(self, element); - - if (self.options.enablePopupScroll === true) { - element.classList.add(classes.popupScroll); - } else { - element.classList.remove(classes.popupScroll); - } - - if (elementClassList.contains(classes.popupScroll)) { - elementClassList.add(classes.build); - - if (header) { - headerHeight = header.offsetHeight; - if (header.classList.contains(classes.fixed)) { - content.style.marginTop = headerHeight + "px"; - } - } - if (footer) { - footerHeight = footer.offsetHeight; - if (footer.classList.contains(classes.fixed)) { - content.style.marginBottom = footerHeight + "px"; - } - if (footer.classList.contains(classes.sideButton)) { - elementClassList.add(classes.hasSideButtons); - } - } - - wrapper.style.height = Math.min(content.offsetHeight + headerHeight + footerHeight, element.offsetHeight) + "px"; - - elementClassList.remove(classes.build); - } - - if (self.options.fullSize && !elementClassList.contains(classes.toast) && !elementClassList.contains(classes.ctx)) { - wrapper.style.height = window.innerHeight + "px"; - } - }; - - /** - * Hide popup. - * @method _onHide - * @protected - * @member ns.widget.wearable.Popup - */ - prototype._onHide = function() { - var self = this, - ui = self._ui, - wrapper = ui.wrapper; - - wrapper.removeAttribute("style"); - CorePopupPrototype._onHide.call(self); - }; - - Popup.prototype = prototype; - ns.widget.wearable.Popup = Popup; - - engine.defineWidget( - "Popup", - "[data-role='popup'], .ui-popup", - [ - "open", - "close", - "reposition" - ], - Popup, - "wearable", - true - ); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return Popup; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window, window.document, ns)); diff --git a/tau/src/js/profile/wearable/widget/wearable/Progress.js b/tau/src/js/profile/wearable/widget/wearable/Progress.js index 9901554d..9e8e8276 100644 --- a/tau/src/js/profile/wearable/widget/wearable/Progress.js +++ b/tau/src/js/profile/wearable/widget/wearable/Progress.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** diff --git a/tau/src/js/profile/wearable/widget/wearable/Progressing.js b/tau/src/js/profile/wearable/widget/wearable/Progressing.js index 281246bc..936c1f54 100644 --- a/tau/src/js/profile/wearable/widget/wearable/Progressing.js +++ b/tau/src/js/profile/wearable/widget/wearable/Progressing.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** diff --git a/tau/src/js/profile/wearable/widget/wearable/SectionChanger.js b/tau/src/js/profile/wearable/widget/wearable/SectionChanger.js index a15546c4..c36ba6fb 100644 --- a/tau/src/js/profile/wearable/widget/wearable/SectionChanger.js +++ b/tau/src/js/profile/wearable/widget/wearable/SectionChanger.js @@ -1,18 +1,6 @@ /*global window, define, Event, console */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -111,30 +99,12 @@ * @member ns.widget.wearable.SectionChanger */ CHANGE: "sectionchange" - }, - classes = { - uiSectionChanger: "ui-section-changer" }; - function SectionChanger() { this.options = {}; } - function calculateCustomLayout(direction, elements, lastIndex) { - var len = lastIndex !== undefined ? lastIndex : elements.length, - result = 0, - i; - for (i = 0; i < len; i++) { - result += direction === Scroller.Orientation.HORIZONTAL ? elements[i].offsetWidth : elements[i].offsetHeight; - } - return result; - } - function calculateCenter(direction, elements, index) { - var result = calculateCustomLayout(direction, elements, index + 1); - result -= direction === Scroller.Orientation.HORIZONTAL ? elements[index].offsetWidth / 2 : elements[index].offsetHeight / 2; - return result; - } utilsObject.inherit(SectionChanger, Scroller, { _build: function (element) { @@ -148,7 +118,6 @@ this.beforeIndex = 0; this._super(element); - element.classList.add(classes.uiSectionChanger); return element; }, @@ -162,42 +131,32 @@ * @property {boolean} [options.useBouncingEffect=false] Shows a scroll end effect on the scroll edge. * @property {string} [options.items="section"] Defines the section element selector. * @property {string} [options.activeClass="ui-section-active"] Specifies the CSS classes which define the active section element. Add the specified class (ui-section-active) to a *section* element to indicate which section must be shown first. By default, the first section is shown first. - * @property {boolean} [options.fillContent=true] declare to section tag width to fill content or not. * @member ns.widget.wearable.SectionChanger */ - this.options = utilsObject.merge(this.options, { - items: "section", - activeClass: "ui-section-active", - circular: false, - animate: true, - animateDuration: 100, - orientation: "horizontal", - changeThreshold: -1, - useTab: false, - fillContent: true - }); + var options = this.options; + options.items = "section"; + options.activeClass = "ui-section-active"; + options.circular = false; + options.animate = true; + options.animateDuration = 100; + options.orientation = "horizontal"; + options.changeThreshold = -1; + options.useTab = false; }, _init: function (element) { var o = this.options, - scroller = this.scroller, sectionLength, i, className; - scroller.style.position = "absolute"; - this._sectionChangerWidth = element.offsetWidth; - this._sectionChangerHeight = element.offsetHeight; - this._sectionChangerHalfWidth = this._sectionChangerWidth / 2; - this._sectionChangerHalfHeight = this._sectionChangerHeight / 2; - this.orientation = o.orientation === "horizontal" ? Scroller.Orientation.HORIZONTAL : Scroller.Orientation.VERTICAL; - if (o.scrollbar === "tab") { o.scrollbar = false; o.useTab = true; } this.sections = typeof o.items === "string" ? - scroller.querySelectorAll(o.items) : + this.scroller.querySelectorAll(o.items) : o.items; + sectionLength = this.sections.length; if (o.circular && sectionLength < 3) { @@ -217,18 +176,18 @@ this.sectionPositions[i] = i; } + this.setActiveSection(this.activeIndex); + this._prepareLayout(); - this._initLayout(); this._super(); this._repositionSections(true); - this.setActiveSection(this.activeIndex); // set corret options values. if (!o.animate) { o.animateDuration = 0; } if (o.changeThreshold < 0) { - o.changeThreshold = this._sectionChangerHalfWidth; + o.changeThreshold = this.width / 2; } if (this.enabled && sectionLength > 1) { @@ -242,52 +201,47 @@ _prepareLayout: function () { var o = this.options, sectionLength = this.sections.length, - width = this._sectionChangerWidth, - height = this._sectionChangerHeight, - orientation = this.orientation, + width = this.element.offsetWidth, + height = this.element.offsetHeight, + orientation = o.orientation === "horizontal" ? Scroller.Orientation.HORIZONTAL : Scroller.Orientation.VERTICAL, scrollerStyle = this.scroller.style, tabHeight; if (o.useTab) { this._initTabIndicator(); tabHeight = this.tabIndicatorElement.offsetHeight; + this.element.style.height = (height - tabHeight) + "px"; height -= tabHeight; - this._sectionChangerHalfHeight = height / 2; - this.element.style.height = height + "px"; - this._sectionChangerHeight = height; } if (orientation === Scroller.Orientation.HORIZONTAL) { - scrollerStyle.width = (o.fillContent ? width * sectionLength : calculateCustomLayout(orientation, this.sections)) + "px"; + scrollerStyle.width = width * sectionLength + "px"; //set Scroller width scrollerStyle.height = height + "px"; //set Scroller width } else { scrollerStyle.width = width + "px"; //set Scroller width - scrollerStyle.height = (o.fillContent ? height * sectionLength : calculateCustomLayout(orientation, this.sections)) + "px"; + scrollerStyle.height = height * sectionLength + "px"; //set Scroller width } - }, _initLayout: function () { var sectionStyle = this.sections.style, - left = 0, - top = 0, - i, sectionLength; + width = this.width, + height = this.height, + i, sectionLength, top, left; //section element has absolute position for (i = 0, sectionLength = this.sections.length; i < sectionLength; i++) { //Each section set initialize left position sectionStyle = this.sections[i].style; - sectionStyle.position = "absolute"; - if (this.options.fillContent) { - sectionStyle.width = this._sectionChangerWidth + "px"; - sectionStyle.height = this._sectionChangerHeight + "px"; - } + sectionStyle.position = "absolute"; + sectionStyle.width = width + "px"; + sectionStyle.height = height + "px"; if (this.orientation === Scroller.Orientation.HORIZONTAL) { top = 0; - left = calculateCustomLayout(this.orientation, this.sections, i); + left = width * i; } else { - top = calculateCustomLayout(this.orientation, this.sections, i); + top = height * i; left = 0; } @@ -295,6 +249,7 @@ sectionStyle.left = left + "px"; } + this._super(); }, _initBouncingEffect: function () { @@ -305,30 +260,32 @@ }, _translateScrollbar: function (x, y, duration, autoHidden) { - var offset; + var standard = this.orientation === Scroller.Orientation.HORIZONTAL ? this.width : this.height, + preOffset = this.sectionPositions[this.activeIndex] * standard, + offset = this.activeIndex * standard, + fixedOffset = offset - preOffset; if (!this.scrollbar) { return; } if (this.orientation === Scroller.Orientation.HORIZONTAL) { - offset = (-x + this.minScrollX); + offset = -x + fixedOffset; } else { - offset = (-y + this.minScrollY); + offset = -y + fixedOffset; } this.scrollbar.translate(offset, duration, autoHidden); }, _translateScrollbarWithPageIndex: function (pageIndex, duration) { - var offset; + var standard = this.orientation === Scroller.Orientation.HORIZONTAL ? this.width : this.height, + offset = pageIndex * standard; if (!this.scrollbar) { return; } - offset = calculateCustomLayout(this.orientation, this.sections, this.activeIndex); - this.scrollbar.translate(offset, duration); }, @@ -391,8 +348,7 @@ }) ); - utilsEvents.on(this.scroller, - "swipe transitionEnd webkitTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd", this); + utilsEvents.on(this.scroller, "swipe webkitTransitionEnd", this); }, _unbindEvents: function () { @@ -400,8 +356,7 @@ if (this.scroller) { ns.event.disableGesture(this.scroller); - utilsEvents.off(this.scroller, - "swipe transitionEnd webkitTransitionEnd mozTransitionEnd msTransitionEnd oTransitionEnd", this); + utilsEvents.off(this.scroller, "swipe webkitTransitionEnd", this); } }, @@ -419,10 +374,6 @@ this._swipe(event); break; case "webkitTransitionEnd": - case "mozTransitionEnd": - case "msTransitionEnd": - case "oTransitionEnd": - case "transitionEnd": this._endScroll(); break; } @@ -459,14 +410,12 @@ scrollbarDuration = duration, oldActiveIndex = this.activeIndex, newX=0, - newY= 0, - centerX = 0, - centerY = 0; + newY=0; if (this.orientation === Scroller.Orientation.HORIZONTAL) { - newX = -calculateCenter(this.orientation, this.sections, position); + newX = -this.width * position; } else { - newY = -calculateCenter(this.orientation, this.sections, position); + newY = -this.height * position; } if (this.beforeIndex - index > 1 || this.beforeIndex - index < -1) { @@ -477,13 +426,7 @@ this.beforeIndex = this.activeIndex; if (newX !== this.scrollerOffsetX || newY !== this.scrollerOffsetY) { - if (this.orientation === Scroller.Orientation.HORIZONTAL) { - centerX = this._sectionChangerHalfWidth + newX; - } else { - centerY = this._sectionChangerHalfHeight + newY; - } - - this._translate(centerX, centerY, duration); + this._translate(newX, newY, duration); this._translateScrollbarWithPageIndex(index, scrollbarDuration); } else { this._endScroll(); @@ -591,28 +534,21 @@ curPosition = this.sectionPositions[this.activeIndex], centerPosition = window.parseInt(sectionLength/2, 10), circular = this.options.circular, - centerX = 0, - centerY = 0, i, sectionStyle, sIdx, top, left, newX, newY; if (this.orientation === Scroller.Orientation.HORIZONTAL) { - newX = -(calculateCenter(this.orientation, this.sections, (circular ? centerPosition : this.activeIndex))); + newX = -(this.width * (circular ? centerPosition : this.activeIndex)); newY = 0; } else { newX = 0; - newY = -(calculateCenter(this.orientation, this.sections, (circular ? centerPosition : this.activeIndex))); + newY = -(this.height * (circular ? centerPosition : this.activeIndex)); } this._translateScrollbarWithPageIndex(this.activeIndex); if (init || (curPosition === 0 || curPosition === sectionLength - 1)) { - if (this.orientation === Scroller.Orientation.HORIZONTAL) { - centerX = this._sectionChangerHalfWidth + newX; - } else { - centerY = this._sectionChangerHalfHeight + newY; - } - this._translate(centerX, centerY); + this._translate(newX, newY); if (circular) { for (i = 0; i < sectionLength; i++) { @@ -623,9 +559,9 @@ if (this.orientation === Scroller.Orientation.HORIZONTAL) { top = 0; - left = calculateCustomLayout(this.orientation, this.sections, i); + left = this.width * i; } else { - top = calculateCustomLayout(this.orientation, this.sections, i); + top = this.height * i; left = 0; } diff --git a/tau/src/js/profile/wearable/widget/wearable/Selector.js b/tau/src/js/profile/wearable/widget/wearable/Selector.js deleted file mode 100644 index 08d21748..00000000 --- a/tau/src/js/profile/wearable/widget/wearable/Selector.js +++ /dev/null @@ -1,938 +0,0 @@ -/*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/** - * # Selector Component - * - * Selector component is special component that has unique UX of Tizen wearable profile. - * Selector component has been used in more options commonly but If you want to use other situation then you can use - * this component as standalone component in everywhere. - * Selector component was consisted as selector element and item elements. You can set the item selector, each items locate degree and radius. - * Selector component has made layers automatically. Layer has items and you can set items number on one layer. - * Indicator is indicator that located center of Selector. We provide default indicator style and function. - * But, If you want to change indicator style and function, you can make the custom indicator and set your indicator for operate with Selector. - * Indicator arrow is special indicator style that has the arrow. That was used for provide more correct indicate information for user. - * Also, you can make the custom indicator arrow and set your custom indicator arrow for operate with Selector. - * Selector provide to control for arrow indicate active item position. - * - * ## HTML example - * - * @example - * <div class="ui-page ui-page-active" id="main"> - * <div id="selector" class="ui-selector"> - * <div class="ui-item ui-show-icon" data-title="Show"></div> - * <div class="ui-item ui-human-icon" data-title="Human"></div> - * <div class="ui-item ui-delete-icon" data-title="Delete"></div> - * <div class="ui-item ui-show-icon" data-title="Show"></div> - * <div class="ui-item ui-human-icon" data-title="Human"></div> - * <div class="ui-item ui-delete-icon" data-title="Delete"></div> - * <div class="ui-item ui-x-icon" data-title="X Icon"></div> - * <div class="ui-item ui-fail-icon" data-title="Fail"></div> - * <div class="ui-item ui-show-icon" data-title="Show"></div> - * <div class="ui-item ui-human-icon" data-title="Human"></div> - * <div class="ui-item ui-delete-icon" data-title="Delete"></div> - * </div> - * </div> - * - * ## Manual constructor - * - * @example - * (function() { - * var page = document.getElementById("selectorPage"), - * selector = document.getElementById("selector"), - * clickBound; - * - * function onClick(event) { - * var activeItem = selector.querySelector(".ui-item-active"); - * //console.log(activeItem.getAttribute("data-title")); - * } - * page.addEventListener("pagebeforeshow", function() { - * clickBound = onClick.bind(null); - * tau.widget.Selector(selector); - * selector.addEventListener("click", clickBound, false); - * }); - * page.addEventListener("pagebeforehide", function() { - * selector.removeEventListener("click", clickBound, false); - * }); - * })(); - * - * ## Options - * Selector component options - * - * {String} itemSelector [options.itemSelector=".ui-item"] or You can set attribute on tag [data-item-selector=".ui-item] Selector item selector that style is css selector. - * {String} indicatorSelector [options.indicatorSelector=".ui-selector-indicator"] or You can set attribute on tag [data-indicator-selector=".ui-selector-indicator"] Selector indicator selector that style is css selector. - * {String} indicatorArrowSelector [options.indicatorArrowSelector=".ui-selector-indicator-arrow"] or You can set attribute on tag [data-indicator-arrow-selector=".ui-selector-indicator-arrow"] Selector indicator arrow selector that style is css style. - * {Number} itemDegree [options.itemDegree=30] or You can set attribute on tag [data-item-degree=30] Items degree each other. - * {Number} itemRadius [options.itemRadius=140] or You can set attribute on tag [data-item-radius=140] Items radius between center and it. - * {Number} maxItemNumber [options.maxItemNumber=11] or You can set attribute on tag [data-max-item-number=11] Max item number on one layer. If you change the itemDegree, we recommend to consider to modify this value for fit your Selector layout. - * {boolean} indicatorAutoControl [options.indicatorAutoControl=true] or You can set attribute on tag [data-indicator-auto-control=true] Indicator auto control switch. If you want to control your indicator manually, change this options to false. - * - * @class ns.widget.wearable.Selector - * @author Hyeoncheol Choi <hc7.choi@samsung.com> - */ -(function (document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/engine", - "../../../../core/util/DOM", - "../../../../core/util/selectors", - "../../../../core/util/object", - "../../../../core/widget/BaseWidget", - "../../../../core/event", - "../../../../core/event/gesture", - "../wearable" - ], - - function () { - //>>excludeEnd("tauBuildExclude"); - var engine = ns.engine, - utilDom = ns.util.DOM, - Gesture = ns.event.gesture, - events = ns.event, - utilsObject = ns.util.object, - Selector = function () { - var self = this; - self._ui = {}; - self.options = {}; - }, - classes = { - SELECTOR: "ui-selector", - LAYER: "ui-layer", - LAYER_ACTIVE: "ui-layer-active", - LAYER_PREV: "ui-layer-prev", - LAYER_PREV_PREV: "ui-layer-prev-prev", - LAYER_NEXT: "ui-layer-next", - LAYER_NEXT_NEXT: "ui-layer-next-next", - LAYER_HIDE: "ui-layer-hide", - ITEM: "ui-item", - ITEM_ACTIVE: "ui-item-active", - INDICATOR: "ui-selector-indicator", - INDICATOR_NEXT_END: "ui-selector-indicator-next-end", - INDICATOR_PREV_END: "ui-selector-indicator-prev-end", - INDICATOR_ARROW: "ui-selector-indicator-arrow" - }, - STATIC = { - RADIUS_RATIO: 0.78 - }, - DEFAULT = { - ITEM_SELECTOR: "."+ classes.ITEM, - INDICATOR_SELECTOR: "." + classes.INDICATOR, - INDICATOR_ARROW_SELECTOR: "." + classes.INDICATOR_ARROW, - ITEM_DEGREE: 30, - MAX_ITEM_NUMBER: 11, - ITEM_RADIUS: -1, - ITEM_START_DEGREE: 30, - ITEM_END_DEGREE: 330, - ITEM_NORMAL_SCALE: "scale(1)", - ITEM_ACTIVE_SCALE: "scale(1.18)" - }, - EVENT_TYPE = { - /** - * Triggered when the active item is changed. Target is active item element. - * This event has detail information. - * - layer: Layer element on active item - * - layerIndex: Layer's index on active item - * - index: Item index on layer. - * - title: If Item has 'data-title' attribute, this value is that. - * @event selectoritemchange - * @member ns.widget.wearable.Selector - */ - ITEM_CHANGE: "selectoritemchange", - /** - * Triggered when the active layer is changed. Target is active layer element. - * This event has detail information. - * - index: Layer index. - * @event selectorlayerchange - * @member ns.widget.wearable.Selector - */ - LAYER_CHANGE: "selectorlayerchange" - }, - BaseWidget = ns.widget.BaseWidget, - prototype = new BaseWidget(); - - Selector.prototype = prototype; - - function buildLayers(element, items, options) { - var layers = [], - layer, - i, len; - - removeLayers(element, options); - len = items.length; - for (i = 0; i < len; i++) { - if (!(i % options.maxItemNumber)) { - layer = document.createElement("div"); - layer.classList.add(classes.LAYER); - element.appendChild(layer); - layers.push(layer); - } - items[i].classList.add(classes.ITEM); - layer.appendChild(items[i]); - if (utilDom.getNSData(items[i], "active")) { - items[i].classList.add(classes.ITEM_ACTIVE); - layer.classList.add(classes.LAYER_ACTIVE); - } - } - return layers; - } - - function removeLayers(element, options) { - var layers = element.getElementsByClassName(classes.LAYER), - items, - i, len, j, itemLength; - if (layers.length) { - // Delete legacy layers - len = layers.length; - for (i = 0; i < len; i++) { - items = layers[0].querySelectorAll(options.itemSelector); - itemLength = items.length; - for (j = 0; j < itemLength; j++) { - element.appendChild(items[j]); - } - element.removeChild(layers[0]); - } - } - } - - /** - * Bind events - * @method bindEvents - * @param {Object} self - * @private - * @member ns.widget.wearable.Selector - */ - function bindEvents(self) { - var element= self.element; - events.enableGesture( - element, - - new Gesture.Drag() - ); - events.on(document, "rotarydetent", self, false); - events.on(element, "dragstart drag dragend click", self, false); - } - - /** - * Unbind events - * @method bindEvents - * @param {Object} self - * @private - * @member ns.widget.wearable.Selector - */ - function unbindEvents(self) { - var element= self.element; - events.disableGesture( - element - ); - events.off(document, "rotarydetent", self, false); - events.off(element, "dragstart drag dragend click", self, false); - } - /** - * Remove ordering classes of layers base on parameter. - * @method removeLayerClasses - * @param {HTMLElement} activeLayer - * @private - * @member ns.widget.wearable.Selector - */ - function removeLayerClasses(activeLayer) { - var activePrevLayer = activeLayer.previousElementSibling, - activeNextLayer = activeLayer.nextElementSibling, - ppLayer, nnLayer; - - if (activePrevLayer) { - activePrevLayer.classList.remove(classes.LAYER_PREV); - ppLayer = activePrevLayer.previousElementSibling; - ppLayer && ppLayer.classList.remove(classes.LAYER_PREV_PREV); - } - if (activeNextLayer) { - activeNextLayer.classList.remove(classes.LAYER_NEXT); - nnLayer = activeNextLayer.nextElementSibling; - nnLayer && nnLayer.classList.remove(classes.LAYER_NEXT_NEXT); - } - activeLayer.classList.remove(classes.LAYER_ACTIVE); - } - - /** - * Add ordering classes of layers base on parameter. - * @method addLayerClasses - * @param {HTMLElement} activeLayer - * @private - * @member ns.widget.wearable.Selector - */ - function addLayerClasses(self, validLayer) { - var options = self.options, - validPrevLayer = validLayer.previousElementSibling, - validNextLayer = validLayer.nextElementSibling, - radius = options.itemRadius, - prevLayerDeg, ppLayerDeg, nextLayerDeg, nnLayerDeg, - ppLayer, nnLayer; - - if (validPrevLayer && validPrevLayer.classList.contains(classes.LAYER)) { - validPrevLayer.classList.add(classes.LAYER_PREV); - prevLayerDeg = DEFAULT.ITEM_END_DEGREE + DEFAULT.ITEM_DEGREE / 6; - setItemTransform(validPrevLayer, prevLayerDeg, radius, -prevLayerDeg, DEFAULT.ITEM_NORMAL_SCALE); - ppLayer = validPrevLayer.previousElementSibling; - ppLayerDeg = DEFAULT.ITEM_END_DEGREE + DEFAULT.ITEM_DEGREE / 4; - if (ppLayer && ppLayer.classList.contains(classes.LAYER)) { - ppLayer.classList.add(classes.LAYER_PREV_PREV); - setItemTransform(ppLayer, ppLayerDeg, radius, -ppLayerDeg, DEFAULT.ITEM_NORMAL_SCALE); - } - } - - if (validNextLayer && validNextLayer.classList.contains(classes.LAYER)) { - validNextLayer.classList.add(classes.LAYER_NEXT); - nextLayerDeg = DEFAULT.ITEM_START_DEGREE - DEFAULT.ITEM_DEGREE / 6; - setItemTransform(validNextLayer, nextLayerDeg, radius, -nextLayerDeg, DEFAULT.ITEM_NORMAL_SCALE); - nnLayer = validNextLayer.nextElementSibling; - nnLayerDeg = DEFAULT.ITEM_START_DEGREE - DEFAULT.ITEM_DEGREE / 4; - if (nnLayer && nnLayer.classList.contains(classes.LAYER)) { - nnLayer.classList.add(classes.LAYER_NEXT_NEXT); - setItemTransform(nnLayer, nnLayerDeg, radius, -nnLayerDeg, DEFAULT.ITEM_NORMAL_SCALE); - } - } - validLayer.classList.add(classes.LAYER_ACTIVE); - validLayer.style.transform = "none"; - } - - function setItemTransform(element, degree, radius, selfDegree, scale) { - element.style.transform = "rotate(" + degree + "deg) " + - "translate3d(0, " + -radius + "px, 0) " + - "rotate(" + selfDegree + "deg) " + - scale; - } - - function setIndicatorTransform(element, selfDegree) { - element.style.transform = "rotate(" + selfDegree + "deg) "; - element.style.transition = "transform 300ms"; - } - - prototype._configure = function() { - var self = this; - /** - * Selector component options - * @property {string} itemSelector [options.itemSelector=".ui-item"] Selector item selector that style is css selector. - * @property {string} indicatorSelector [options.indicatorSelector=".ui-selector-indicator"] Selector indicator selector that style is css selector. - * @property {string} indicatorArrowSelector [options.indicatorArrowSelector=".ui-selector-indicator-arrow"] Selector indicator arrow selector that style is css style. - * @property {Number} itemDegree [options.itemDegree=30] Each items locate degree. - * @property {Number} itemRadius [options.itemRadius=-1] Items locate radius between center to it. Default value is determined by Selector element layout. - * @property {Number} maxItemNumber [options.maxItemNumber=11] Max item number on one layer. If you change the itemDegree, we recommend to consider to modify this value for fit your Selector layout. - * @property {boolean} indicatorAutoControl [options.indicatorAutoControl=true] Indicator auto control switch. If you want to control your indicator manually, change this options to false. - */ - self.options = utilsObject.merge(self.options, { - itemSelector: DEFAULT.ITEM_SELECTOR, - indicatorSelector: DEFAULT.INDICATOR_SELECTOR, - indicatorArrowSelector: DEFAULT.INDICATOR_ARROW_SELECTOR, - itemDegree: DEFAULT.ITEM_DEGREE, - itemRadius: DEFAULT.ITEM_RADIUS, - maxItemNumber: DEFAULT.MAX_ITEM_NUMBER, - indicatorAutoControl: true - }); - }; - - /** - * Build Selector component - * @method _build - * @param {HTMLElement} element - * @return {HTMLElement} element - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._build = function(element) { - var self = this, - ui = self._ui, - options = self.options, - items = element.querySelectorAll(self.options.itemSelector), - indicator, - indicatorArrow, - queryIndicator, - queryIndicatorArrow, - layers; - - if (items && items.length) { - - layers = buildLayers(element, items, options); - element.classList.add(classes.SELECTOR); - - if (options.indicatorAutoControl) { - queryIndicator = element.querySelector(options.indicatorSelector); - queryIndicatorArrow = element.querySelector(options.indicatorArrowSelector); - - if (queryIndicator) { - ui.indicator = queryIndicator; - } else { - indicator = document.createElement("div"); - indicator.classList.add(classes.INDICATOR); - ui.indicator = indicator; - element.appendChild(ui.indicator); - } - if (queryIndicatorArrow) { - ui.indicatorArrow = queryIndicatorArrow; - } else { - indicatorArrow = document.createElement("div"); - indicatorArrow.classList.add(classes.INDICATOR_ARROW); - ui.indicatorArrow = indicatorArrow; - element.appendChild(ui.indicatorArrow); - } - } - ui.items = items; - ui.layers = layers; - } else { - console.warn("Please check your item selector option. Default value is '.ui-item'"); - return; - } - - return element; - }; - - /** - * Init Selector component - * @method _init - * @param {HTMLElement} element - * @return {HTMLElement} element - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._init = function(element) { - var self = this, - options = self.options, - items = self._ui.items, - activeLayerIndex = self._getActiveLayer(), - activeItemIndex = self._getActiveItem(), - validLayout = element.offsetWidth > element.offsetHeight ? element.offsetHeight : element.offsetWidth, - i, len; - - self._started = false; - self._enabled = true; - self._activeItemIndex = activeItemIndex === null ? 0 : activeItemIndex; - options.itemRadius = options.itemRadius < 0 ? validLayout / 2 * STATIC.RADIUS_RATIO : options.itemRadius; - len = items.length; - for (i = 0; i < len; i++) { - utilDom.setNSData(items[i], "index", i); - setItemTransform(items[i], DEFAULT.ITEM_END_DEGREE, options.itemRadius, -DEFAULT.ITEM_END_DEGREE, DEFAULT.ITEM_NORMAL_SCALE); - } - if (activeLayerIndex === null) { - self._activeLayerIndex = 0; - self._setActiveLayer(0); - } else { - self._activeLayerIndex = activeLayerIndex; - self._setActiveLayer(activeLayerIndex); - } - return element; - }; - - /** - * Init items on layer - * @method _initItems - * @param {HTMLElement} layer - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._initItems = function(layer) { - var self = this, - options = self.options, - items = layer.querySelectorAll(options.itemSelector), - degree, - i, len; - - len = items.length > options.maxItemNumber ? options.maxItemNumber : items.length; - for (i = 0; i < len; i++) { - degree = DEFAULT.ITEM_START_DEGREE + (options.itemDegree * i); - setItemTransform(items[i], degree, options.itemRadius, -degree, DEFAULT.ITEM_NORMAL_SCALE); - } - - self._setActiveItem(self._activeItemIndex); - }; - - /** - * Bind events on Selector component - * @method _bindEvents - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._bindEvents = function() { - bindEvents(this); - }; - - /** - * Handle events on Selector component - * @method handleEvent - * @param {Event} event - * @public - * @member ns.widget.wearable.Selector - */ - prototype.handleEvent = function(event) { - var self = this; - switch (event.type) { - case "dragstart": - self._onDragstart(event); - break; - case "drag": - self._onDrag(event); - break; - case "dragend": - self._onDragend(event); - break; - case "click": - self._onClick(event); - break; - case "rotarydetent": - self._onRotary(event); - break; - } - }; - - /** - * Get the active layer - * @method _getActiveLayer - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._getActiveLayer = function() { - var self = this, - ui = self._ui, - i, len; - - len = ui.layers.length; - for (i = 0; i < len; i++) { - if (ui.layers[i].classList.contains(classes.LAYER_ACTIVE)) { - return i; - } - } - return null; - }; - - /** - * Set the active layer - * @method _setActiveLayer - * @param {Number} index - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._setActiveLayer = function(index) { - var self = this, - ui = self._ui, - active = self._activeLayerIndex, - activeLayer = ui.layers[active], - validLayer = ui.layers[index]; - if (activeLayer) { - removeLayerClasses(activeLayer); - } - if (validLayer) { - addLayerClasses(self, validLayer); - } - self._activeLayerIndex = index; - self._initItems(validLayer); - events.trigger(validLayer, EVENT_TYPE, { - index: index - }) - }; - - /** - * Get the active item - * @method _getActiveItem - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._getActiveItem = function() { - var self = this, - ui = self._ui, - i, len; - - len = ui.items.length; - for (i = 0; i < len; i++) { - if (ui.items[i].classList.contains(classes.ITEM_ACTIVE)) { - return i; - } - } - return null; - }; - - /** - * Set the active item - * @method _setActiveItem - * @param {Number} index - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._setActiveItem = function(index) { - var self = this, - element = self.element, - ui = self._ui, - options = self.options, - items = ui.items, - index = index !== undefined ? index : 0, - active = element.querySelector("." + classes.ITEM_ACTIVE); - - if (active) { - active.style.transform = active.style.transform.replace(DEFAULT.ITEM_ACTIVE_SCALE, DEFAULT.ITEM_NORMAL_SCALE); - active.classList.remove(classes.ITEM_ACTIVE); - } - if (items.length) { - items[index].classList.add(classes.ITEM_ACTIVE); - items[index].style.transform = items[index].style.transform.replace(DEFAULT.ITEM_NORMAL_SCALE, DEFAULT.ITEM_ACTIVE_SCALE); - if (self.options.indicatorAutoControl) { - self._setIndicatorIndex(index); - } - self._activeItemIndex = index; - events.trigger(items[index], EVENT_TYPE.ITEM_CHANGE, { - layer: ui.layers[self._activeLayerIndex], - layerIndex: self._activeLayerIndex, - index: index, - title: utilDom.getNSData(items[index], "title") - }); - } - }; - - /** - * Set indicator index. Handler direction was set by index value. - * @method _setIndicatorIndex - * @param {Number} index - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._setIndicatorIndex = function(index) { - var self = this, - ui = self._ui, - item = ui.items[index], - title = utilDom.getNSData(item, "title"), - indicator = ui.indicator, - indicatorArrow = ui.indicatorArrow, - idcIndex = index % self.options.maxItemNumber; - - if (indicator.children.length === 0) { - indicator.textContent = title ? title : "ITEM"; - } - - utilDom.setNSData(indicator, "index", index); - - setIndicatorTransform(indicatorArrow, DEFAULT.ITEM_START_DEGREE + self.options.itemDegree * idcIndex); - }; - - /** - * Dragstart event handler - * @method _onDragstart - * @param {Event} event - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._onDragstart = function(event) { - this._started = true; - }; - - /** - * Drag event handler - * @method _onDrag - * @param {Event} event - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._onDrag = function(event) { - var self = this, - ex = event.detail.estimatedX, - ey = event.detail.estimatedY, - pointedElement = document.elementFromPoint(ex, ey), - index; - - if (this._started) { - if (pointedElement && pointedElement.classList.contains(classes.ITEM)) { - index = parseInt(utilDom.getNSData(pointedElement, "index"), 10); - self._setActiveItem(index); - } - } - }; - - /** - * Dragend event handler - * @method _onDragend - * @param {Event} event - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._onDragend = function(event) { - var self = this, - ex = event.detail.estimatedX, - ey = event.detail.estimatedY, - pointedElement = document.elementFromPoint(ex, ey), - index; - - if (pointedElement && pointedElement.classList.contains(classes.ITEM)) { - index = parseInt(utilDom.getNSData(pointedElement, "index"), 10); - self._setActiveItem(index); - } - - this._started = false; - }; - - /** - * Click event handler - * @method _onClick - * @param {Event} event - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._onClick = function(event) { - var self = this, - pointedElement = document.elementFromPoint(event.pageX, event.pageY), - index; - - if (!self._enabled) { - return; - } - if (pointedElement && pointedElement.classList.contains(classes.ITEM)) { - index = parseInt(utilDom.getNSData(pointedElement, "index"), 10); - self._setActiveItem(index); - } - }; - - /** - * Rotary event handler - * @method _onRotary - * @param {Event} event - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._onRotary = function(event) { - var self = this, - ui = self._ui, - options = self.options, - direction = event.detail.direction, - activeLayer = ui.layers[self._activeLayerIndex], - activeLayerItemsLength = activeLayer.querySelectorAll(options.itemSelector).length, - prevLayer = activeLayer.previousElementSibling, - nextLayer = activeLayer.nextElementSibling, - bounceDegree; - - if (!options.indicatorAutoControl || !self._enabled) { - return; - } - event.stopPropagation(); - - if (direction === "CW") { - // check length - if (self._activeItemIndex === (activeLayerItemsLength + self._activeLayerIndex * options.maxItemNumber) - 1) { - if (prevLayer && prevLayer.classList.contains(classes.LAYER_PREV)) { - self._activeItemIndex = self._activeItemIndex - activeLayerItemsLength - prevLayer.querySelectorAll(options.itemSelector).length + 1; - self._changeLayer(self._activeLayerIndex - 1); - } else { - bounceDegree = DEFAULT.ITEM_START_DEGREE + options.itemDegree * (self._activeItemIndex % options.maxItemNumber); - setIndicatorTransform(ui.indicatorArrow, bounceDegree + options.itemDegree / 3); - //setIndicatorTransform(ui.indicatorArrow, options.itemDegree * self._activeItemIndex + options.itemDegree / 3); - setTimeout(function() { - setIndicatorTransform(ui.indicatorArrow, bounceDegree); - }, 100) - } - } else { - self._changeItem(self._activeItemIndex + 1); - } - } else { - // check 0 - if (self._activeItemIndex % options.maxItemNumber === 0) { - if (nextLayer && nextLayer.classList.contains(classes.LAYER_NEXT)) { - self._activeItemIndex = self._activeItemIndex + activeLayerItemsLength + nextLayer.querySelectorAll(options.itemSelector).length - 1; - self._changeLayer(self._activeLayerIndex + 1); - } else { - setIndicatorTransform(ui.indicatorArrow, DEFAULT.ITEM_START_DEGREE - DEFAULT.ITEM_START_DEGREE / 3); - setTimeout(function() { - setIndicatorTransform(ui.indicatorArrow, DEFAULT.ITEM_START_DEGREE); - }, 100) - } - } else { - self._changeItem(self._activeItemIndex - 1); - } - } - }; - - /** - * Hide items on layer - * @method _hideItems - * @param {HTMLElement} layer - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._hideItems = function(layer) { - var self = this, - options = self.options, - items = layer.getElementsByClassName(classes.ITEM), - i, len; - layer.classList.add(classes.LAYER_HIDE); - len = items.length; - for (i = 0; i < len; i++) { - setItemTransform(items[i], DEFAULT.ITEM_START_DEGREE, self.options.itemRadius, -DEFAULT.ITEM_START_DEGREE, DEFAULT.ITEM_NORMAL_SCALE); - } - - setTimeout(function() { - len = items.length; - for (i = 0; i < len; i++) { - setItemTransform(items[i], DEFAULT.ITEM_END_DEGREE, self.options.itemRadius, -DEFAULT.ITEM_END_DEGREE, DEFAULT.ITEM_NORMAL_SCALE); - } - layer.classList.remove(classes.LAYER_HIDE); - }, 150); - }; - - /** - * Refresh Selector component - * @method _refresh - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._refresh = function() { - var self = this, - ui = self._ui, - options = self.options, - element = self.element; - - ui.layers = buildLayers(element, ui.items, options); - self._setActiveLayer(self._activeLayerIndex); - }; - - /** - * Change active layer - * @method _changeLayer - * @param {Number} index - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._changeLayer = function(index) { - var self = this, - layers = self._ui.layers, - activeLayer = layers[self._activeLayerIndex]; - - if (index < 0 || index > layers.length - 1) { - console.warn("Please insert index between 0 to layers number"); - return; - } - self._enabled = false; - self._hideItems(activeLayer); - setTimeout(function() { - self._setActiveLayer(index); - self._enabled = true; - }, 150); - - }; - - /** - * Change active item on active layer - * @method _changeItem - * @param {Number} index - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._changeItem = function(index) { - this._setActiveItem(index); - }; - - /** - * Change active item on active layer - * @method changeItem - * @param {Number} index - * @public - * @member ns.widget.wearable.Selector - */ - prototype.changeItem = function(index) { - this._changeItem(index); - }; - - /** - * Add new item - * @method addItem - * @param {HTMLElement} item - * @param {Number} index - * @public - * @member ns.widget.wearable.Selector - */ - prototype.addItem = function(item, index) { - var self = this, - element = self.element, - items = element.querySelectorAll(self.options.itemSelector), - ui = self._ui; - - removeLayers(self.element, self.options); - if (index >= 0 && index < ui.items.length) { - element.insertBefore(item, items[index]); - } else { - element.appendChild(item); - } - ui.items = element.querySelectorAll(self.options.itemSelector); - self._refresh(); - }; - - /** - * Remove item on specific layer - * @method removeItem - * @param {Number} index - * @public - * @member ns.widget.wearable.Selector - */ - prototype.removeItem = function(index) { - var self = this, - ui = self._ui, - element = self.element; - - removeLayers(self.element, self.options); - element.removeChild(ui.items[index]); - ui.items = element.querySelectorAll(self.options.itemSelector); - self._refresh(); - }; - - prototype._destroy = function() { - var self = this; - unbindEvents(self); - self._ui = null; - }; - - /** - * Disable Selector - * @method _disable - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._disable = function() { - this._enabled = false; - }; - - /** - * Enable Selector - * @method _enable - * @protected - * @member ns.widget.wearable.Selector - */ - prototype._enable = function() { - this._enabled = true; - }; - - ns.widget.wearable.Selector = Selector; - engine.defineWidget( - "Selector", - ".ui-selector", - [ - "changeItem", - "addItem", - "removeItem", - "enable", - "disable" - ], - Selector, - "wearable" - ); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return ns.widget.wearable.Selector; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/wearable/widget/wearable/SnapListview.js b/tau/src/js/profile/wearable/widget/wearable/SnapListview.js deleted file mode 100644 index 667638a1..00000000 --- a/tau/src/js/profile/wearable/widget/wearable/SnapListview.js +++ /dev/null @@ -1,539 +0,0 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -/*jslint nomen: true */ -/** - * # SnapListview Widget - * Shows a snap list view. - * It detects center-positioned list item when scroll end. When scroll event started, SnapListview trigger *scrollstart* event, and scroll event ended, it trigger *scrollend* event. - * When scroll ended and it attach class to detected item. - * - * ## Default selectors - * - * Default selector for snap listview widget is class *ui-snap-listview*. - * - * To add a list widget to the application, use the following code: - * - * ### List with basic items - * - * You can add a basic list widget as follows: - * - * @example - * <ul class="ui-listview ui-snap-listview"> - * <li>1line</li> - * <li>2line</li> - * <li>3line</li> - * <li>4line</li> - * <li>5line</li> - * </ul> - * - * ## JavaScript API - * - * There is no JavaScript API. - * - * @author Heeju Joo <heeju.joo@samsung.com> - * @class ns.widget.wearable.SnapListview - * @extends ns.widget.BaseWidget - */ -(function(document, ns) { - "use strict"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define( - [ - "../../../../core/engine", - "../../../../core/event", - "../../../../core/util/DOM", - "../../../../core/util/selectors", - "../../../../core/widget/BaseWidget", - "../wearable" - ], - function() { - //>>excludeEnd("tauBuildExclude"); - var BaseWidget = ns.widget.BaseWidget, - /** - * Alias for class ns.engine - * @property {ns.engine} engine - * @member ns.widget.wearable.SnapListview - * @private - */ - engine = ns.engine, - /** - * Alias for class ns.event - * @property {ns.event} utilEvent - * @member ns.widget.wearable.SnapListview - * @private - */ - utilEvent = ns.event, - /** - * Alias for class ns.util.DOM - * @property {ns.util.DOM} doms - * @member ns.widget.wearable.SnapListview - * @private - */ - doms = ns.util.DOM, - /** - * Alias for class ns.util.selectors - * @property {ns.util.selectors} utilSelector - * @member ns.widget.wearable.SnapListview - * @private - */ - utilSelector = ns.util.selectors, - - - eventType = { - /** - * Dictionary for SnapListview related events. - * @event scrollstart - * @event scrollend - * @event selected - * @member ns.widget.wearable.SnapListview - */ - SCROLL_START: "scrollstart", - SCROLL_END: "scrollend", - SELECTED: "selected" - }, - - animationTimer = null, - - SnapListview = function() { - var self = this; - - self._ui = { - page: null, - scrollableParent: { - element: null, - height: 0 - }, - childItems: {} - }; - - self.options = { - selector: "li:not(.ui-listview-divider)", - animate: "none", - scale: { - from: 0.77, - to: 1 - }, - opacity: { - from: 0.7, - to: 1 - } - }; - - self._listItems = []; - self._callbacks = {}; - self._scrollEndTimeoutId = null; - self._isScrollStarted = false; - self._selectedIndex = null; - self._enabled = true; - }, - - prototype = new BaseWidget(), - - CLASSES_PREFIX = "ui-snap-listview", - - classes = { - SNAP_CONTAINER: "ui-snap-container", - SNAP_DISABLED: "ui-snap-disabled", - SNAP_LISTVIEW: CLASSES_PREFIX, - SNAP_LISTVIEW_SELECTED: CLASSES_PREFIX + "-selected", - SNAP_LISTVIEW_ITEM: CLASSES_PREFIX + "-item" - }, - - // time threshold for detect scroll end - SCROLL_END_TIME_THRESHOLD = 100; - - SnapListview.classes = classes; - - SnapListview.ListItem = function(element, visiableOffset) { - var offsetTop = element.offsetTop, - height = element.offsetHeight; - - this.element = element; - this.rate = -1; - - this.coord = { - top: offsetTop, - height: height - }; - - this.position = { - begin: offsetTop - visiableOffset, - start: offsetTop - visiableOffset + height, - stop: offsetTop, - end: offsetTop + height - }; - - element.classList.add(classes.SNAP_LISTVIEW_ITEM); - }; - - SnapListview.ListItem.prototype = { - animate: function(offset, callback) { - var element = this.element, - p = this.position, - begin = p.begin, - end = p.end, - start = p.start, - stop = p.stop, - rate; - - if (offset >= start && offset <= stop) { - rate = Math.min(1, Math.abs((offset - start) / (stop - start))); - } else if ((offset > begin && offset < start) || (offset < end && offset > stop)) { - rate = 0; - } else { - rate = -1; - } - - if (this.rate !== rate) { - callback(element, rate); - this.rate = rate; - } - } - }; - - function removeSelectedClass(self) { - var selectedIndex = self._selectedIndex; - - if (selectedIndex !== null) { - self._listItems[selectedIndex].element.classList.remove(classes.SNAP_LISTVIEW_SELECTED); - } - } - - function setSelection(self) { - var ui = self._ui, - listItems = self._listItems, - scrollableParent = ui.scrollableParent, - scrollCenter = scrollableParent.element.scrollTop + scrollableParent.height / 2, - listItemLength = listItems.length, - tempListItem, tempListItemCoord, i; - - for (i=0 ; i < listItemLength; i++) { - tempListItem = listItems[i]; - tempListItemCoord = tempListItem.coord; - - if ((tempListItemCoord.top < scrollCenter) && (tempListItemCoord.top + tempListItemCoord.height >= scrollCenter)) { - removeSelectedClass(self); - self._selectedIndex = i; - tempListItem.element.classList.add(classes.SNAP_LISTVIEW_SELECTED); - utilEvent.trigger(tempListItem.element, eventType.SELECTED); - return; - } - } - - } - - function listItemAnimate(self) { - var anim = self.options.animate, - animateCallback = self._callbacks[anim], - scrollPosition; - - if (animateCallback) { - scrollPosition = self._ui.scrollableParent.element.scrollTop; - self._listItems.forEach(function(item) { - item.animate(scrollPosition, animateCallback); - }); - } - } - - function scrollEndCallback(self) { - self._isScrollStarted = false; - - // trigger "scrollend" event - utilEvent.trigger(self.element, eventType.SCROLL_END); - - setSelection(self); - } - - function scrollHandler(self) { - var callbacks = self._callbacks, - scrollEndCallback = callbacks.scrollEnd; - - if (!self._isScrollStarted) { - self._isScrollStarted = true; - removeSelectedClass(self); - utilEvent.trigger(self.element, eventType.SCROLL_START); - } - - listItemAnimate(self); - - window.clearTimeout(self._scrollEndTimeoutId); - self._scrollEndTimeoutId = window.setTimeout(scrollEndCallback, SCROLL_END_TIME_THRESHOLD); - } - - function getScrollableParent(element) { - var overflow; - - while (element !== document.body) { - overflow = doms.getCSSProperty(element, "overflow-y"); - if (overflow === "scroll" || (overflow === "auto" && element.scrollHeight > element.clientHeight)) { - return element; - } - element = element.parentNode; - } - - return null; - } - - function initSnapListview(listview) { - var self = this, - ui = self._ui, - options = self.options, - listItems = [], - scroller, visiableOffset; - - - ui.page = utilSelector.getClosestByClass(listview, "ui-page") || window; - scroller = getScrollableParent(listview) || ui.page; - scroller.classList.add(classes.SNAP_CONTAINER); - visiableOffset = scroller.clientHeight || ui.page.offsetHeight; - - ui.scrollableParent.element = scroller; - ui.scrollableParent.height = visiableOffset; - - [].slice.call(listview.querySelectorAll(options.selector)).forEach(function(element) { - listItems.push(new SnapListview.ListItem(element, visiableOffset)); - }); - - self._listItems = listItems; - listItemAnimate(self); - } - - prototype._build = function(element) { - if (!element.classList.contains(classes.SNAP_LISTVIEW)) { - element.classList.add(classes.SNAP_LISTVIEW); - } - - return element; - }; - - /** - * Init SnapListview - * @method _init - * @param {HTMLElement} element - * @return {HTMLElement} - * @protected - * @member ns.widget.wearable.SnapListview - */ - prototype._init = function(element) { - var self = this, - options = this.options, - scaleForm = options.scale.from, - scaleTo = options.scale.to, - opacityForm = options.opacity.from, - opacityTo = options.opacity.to; - - self._callbacks = { - scroll: scrollHandler.bind(null, self), - scrollEnd: scrollEndCallback.bind(null, self), - scale : function(listItemElement, rate) { - var scale = 1, - opacity = 1; - - if (rate < 0) { - listItemElement.style.webkitTransform = ""; - listItemElement.style.opacity = ""; - return; - } - - rate = rate > 0.5 ? 1 - rate : rate; - - scale = scaleForm + ((scaleTo - scaleForm) * rate*2); - opacity = opacityForm + ((opacityTo - opacityForm) * rate*2); - - listItemElement.style.webkitTransform = "scale3d("+scale+","+scale+","+scale+")"; - listItemElement.style.opacity = opacity; - } - }; - - initSnapListview.call(self, element); - setSelection(self); - - return element; - }; - - /** - * Refresh structure - * @method _refresh - * @protected - * @member ns.widget.wearable.SnapListview - */ - prototype._refresh = function() { - var self = this, - element = self.element; - - self._unbindEvents(); - - initSnapListview.call(self, element); - setSelection(self); - - self._bindEvents(); - - return null; - }; - - prototype._bindEvents = function() { - var element = this._ui.scrollableParent.element; - if (element) { - utilEvent.on(element, "scroll", this._callbacks.scroll, false); - } - }; - - prototype._unbindEvents = function() { - var element = this._ui.scrollableParent.element; - if (element) { - utilEvent.off(element, "scroll", this._callbacks.scroll, false); - } - }; - - /** - * Destroy widget - * @method _destroy - * @protected - * @member ns.widget.wearable.SnapListview - */ - prototype._destroy = function() { - var self = this; - - self._unbindEvents(); - - self._ui = null; - self._callbacks = null; - self._listItems = null; - self._isScrollStarted = null; - - if (self._scrollEndTimeoutId) { - window.clearTimeout(self._scrollEndTimeoutId); - } - self._scrollEndTimeoutId = null; - self._selectedIndex = null; - - return null; - }; - - prototype._enable = function() { - var self = this, - scrollableParent = self._ui.scrollableParent.element; - - scrollableParent.classList.remove(classes.SNAP_DISABLED); - if (!self._enabled) { - self._enabled = true; - self._refresh(); - } - }; - - prototype._disable = function() { - var self = this, - scrollableParent = self._ui.scrollableParent.element; - - scrollableParent.classList.add(classes.SNAP_DISABLED); - self._enabled = false; - }; - - /** - * Get selectedIndex - * @method getSelectedIndex - * @return {number} index - * @public - * @member ns.widget.wearable.SnapListview - */ - prototype.getSelectedIndex = function() { - return this._selectedIndex; - }; - - /** - * Scroll SnapList by index - * @method scrollToPosition - * @param {number} index - * @public - * @member ns.widget.wearable.SnapListview - */ - prototype.scrollToPosition = function(index) { - var self = this, - ui = self._ui, - enabled = self._enabled, - listItems = self._listItems, - scrollableParent = ui.scrollableParent, - listItemLength = listItems.length, - indexItem, - dest; - - if (!enabled || index < 0 || index >= listItemLength) { - return; - } - - removeSelectedClass(self); - - indexItem = listItems[index].coord; - dest = indexItem.top - scrollableParent.height / 2 + indexItem.height / 2; - - self._selectedIndex = index; - - if(animationTimer !== null) { - window.cancelAnimationFrame(animationTimer); - animationTimer = null; - } - scrollAnimation(scrollableParent.element, scrollableParent.element.scrollTop, dest, 450); - }; - - function cubicBezier (x1, y1, x2, y2) { - return function (t) { - var rp = 1 - t, rp3 = 3 * rp, p2 = t * t, p3 = p2 * t, a1 = rp3 * t * rp, a2 = rp3 * p2; - return a1 * y1 + a2 * y2 + p3; - }; - } - - function scrollAnimation(element, from, to, duration) { - var easeOut = cubicBezier(0.25, 0.46, 0.45, 1), - startTime = 0, - currentTime = 0, - progress = 0, - easeProgress = 0, - distance = to - from, - scrollTop = element.scrollTop; - - startTime = window.performance.now(); - animationTimer = window.requestAnimationFrame(function animation() { - var gap; - currentTime = window.performance.now(); - progress = (currentTime - startTime) / duration; - easeProgress = easeOut(progress); - gap = distance * easeProgress; - element.scrollTop = scrollTop + gap; - if (progress <= 1 && progress >= 0) { - animationTimer = window.requestAnimationFrame(animation); - } else { - animationTimer = null; - } - }); - } - - SnapListview.prototype = prototype; - ns.widget.wearable.SnapListview = SnapListview; - - engine.defineWidget( - "SnapListview", - ".ui-snap-listview", - [], - SnapListview, - "wearable" - ); - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - return SnapListview; - } - ); - //>>excludeEnd("tauBuildExclude"); -}(window.document, ns)); diff --git a/tau/src/js/profile/wearable/widget/wearable/SwipeList.js b/tau/src/js/profile/wearable/widget/wearable/SwipeList.js index 6c36b6d3..332eadad 100644 --- a/tau/src/js/profile/wearable/widget/wearable/SwipeList.js +++ b/tau/src/js/profile/wearable/widget/wearable/SwipeList.js @@ -1,18 +1,6 @@ /*global window, define, Event, console */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -82,8 +70,8 @@ "../../../../core/util/selectors", "../../../../core/util/DOM", "../../../../core/widget/BaseWidget", - "../../../../core/widget/core/Page", - "../wearable" + "../wearable", + "./Page" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -231,7 +219,7 @@ }; prototype._init = function (element) { - var page = selectors.getClosestBySelector(element, "." + ns.widget.core.Page.classes.uiPage), + var page = selectors.getClosestBySelector(element, "." + ns.widget.wearable.Page.classes.uiPage), options = this.options, swipeLeftElementBg, swipeRightElementBg, @@ -240,13 +228,11 @@ if (options.container) { this.container = page.querySelector(options.container); } else { - this.container = element.parentNode; + this.container = this._findScrollableElement(this.element); } - this.scrollableElement = selectors.getScrollableParent(element); - if (!this.scrollableElement) { - this.scrollableElement = this.container; - } + this.container.style.position = "relative"; + this.swipeElement = page.querySelector(options.swipeElement); this.swipeLeftElement = options.swipeLeftElement ? page.querySelector(options.swipeLeftElement) : undefined; this.swipeRightElement = options.swipeRightElement ? page.querySelector(options.swipeRightElement) : undefined; @@ -255,8 +241,8 @@ this.swipeElementStyle = this.swipeElement.style; this.swipeElementStyle.display = "none"; this.swipeElementStyle.background = "transparent"; - this.swipeElementStyle.width = this.scrollableElement.offsetWidth + "px"; - this.swipeElementStyle.height = this.scrollableElement.offsetHeight + "px"; + this.swipeElementStyle.width = this.container.offsetWidth + "px"; + this.swipeElementStyle.height = this.container.offsetHeight + "px"; } if (this.swipeLeftElement) { @@ -403,6 +389,13 @@ }()); }; + prototype._findScrollableElement = function (elem) { + while ((elem.scrollHeight <= elem.offsetHeight) && (elem.scrollWidth <= elem.offsetWidth)) { + elem = elem.parentNode; + } + return elem; + }; + prototype._findSwipeTarget = function (element) { var selector = this.options.swipeTarget; @@ -419,7 +412,7 @@ prototype._start = function (e) { var gesture = e.detail, - width, height, top; + containerTop, width, height, top; this._dragging = false; this._cancelled = false; @@ -430,7 +423,10 @@ width = this.activeTarget.offsetWidth; height = this.activeTarget.offsetHeight; - top = this.activeTarget.offsetTop - this.scrollableElement.scrollTop; + containerTop = this.container.scrollTop; + top = this.activeTarget.offsetTop - containerTop; + + this.swipeElementStyle.top = containerTop + "px"; if (this.swipeLeftElementStyle) { this.swipeLeftElementStyle.width = width + "px"; diff --git a/tau/src/js/profile/wearable/widget/wearable/TabIndicator.js b/tau/src/js/profile/wearable/widget/wearable/TabIndicator.js index bcfe10c0..23910c78 100644 --- a/tau/src/js/profile/wearable/widget/wearable/TabIndicator.js +++ b/tau/src/js/profile/wearable/widget/wearable/TabIndicator.js @@ -1,19 +1,7 @@ /*global window, define, Event, console */ -/* -* Copyright (c) 2015 Samsung Electronics Co., Ltd -* -* Licensed under the Flora License, Version 1.1 (the "License"); -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://floralicense.org/license/ -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -*/ +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 + */ /*jslint nomen: true, plusplus: true */ /** * #TabIndicator Widget diff --git a/tau/src/js/profile/wearable/widget/wearable/ToggleSwitch.js b/tau/src/js/profile/wearable/widget/wearable/ToggleSwitch.js index dc2421cc..3ae60107 100644 --- a/tau/src/js/profile/wearable/widget/wearable/ToggleSwitch.js +++ b/tau/src/js/profile/wearable/widget/wearable/ToggleSwitch.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true */ /** diff --git a/tau/src/js/profile/wearable/widget/wearable/VirtualGrid.js b/tau/src/js/profile/wearable/widget/wearable/VirtualGrid.js index 602b0122..1d41fc10 100644 --- a/tau/src/js/profile/wearable/widget/wearable/VirtualGrid.js +++ b/tau/src/js/profile/wearable/widget/wearable/VirtualGrid.js @@ -1,19 +1,7 @@ /*global window, define */ /*jslint nomen: true, plusplus: true */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #VirtualGrid Widget @@ -78,8 +66,6 @@ * @static */ VERTICAL = "y", - FOCUS_SELECTOR = "::virtualgrid", - FOCUS_SELECTOR_PATTERN = /(::virtualgrid\((\d+)\))/gi, /** * Alias for class VirtualGrid * @method VirtualGrid @@ -111,7 +97,6 @@ return null; } }; - this._onFocusQuery = null; return this; }, @@ -139,9 +124,7 @@ * @private * @static */ - parent_refreshScrollbar = VirtualListPrototype._refreshScrollbar, - parent_bindEvents = VirtualListPrototype._bindEvents, - parent_destroy = VirtualListPrototype._destroy; + parent_refreshScrollbar = VirtualListPrototype._refreshScrollbar; /** * This method draws item. @@ -151,7 +134,7 @@ prototype.draw = function () { var self = this, element = self.element, - ui = self._ui, + ui = self.ui, newDiv = null, newDivStyle = null; @@ -169,41 +152,6 @@ parent_draw.call(self); }; - function onFocusQuery(self, event) { - var data = event.detail, - selector = data.selector, - index = -1; - if (selector.indexOf(FOCUS_SELECTOR) > -1) { - data.selector = selector = selector.replace(FOCUS_SELECTOR_PATTERN, - function (match, widgetMatch, indexMatch) { - if (widgetMatch && indexMatch) { - index = indexMatch | 0; - return "#" + self.id + " [data-index='" + index + "']"; - } - return match; - }); - - if (index > -1) { - self.scrollToIndex(index); - data.nextElement = document.querySelector(selector); - event.preventDefault(); // consume - } - } - } - - prototype._bindEvents = function (element) { - var self = this; - parent_bindEvents.call(self, element); - self._onFocusQuery = onFocusQuery.bind(null, self); - self.element.addEventListener("focusquery", self._onFocusQuery); - }; - - prototype._destroy = function (element) { - var self = this; - parent_destroy.call(self, element); - self.element.removeEventListener("focusquery", self._onFocusQuery); - }; - /** * Sets proper scrollbar size: width (horizontal) * @method _refreshScrollbar @@ -212,7 +160,7 @@ */ prototype._refreshScrollbar = function () { var width = 0, - ui = this._ui; + ui = this.ui; parent_refreshScrollbar.call(this); if (ui.container) { width = this.element.clientWidth + ui.spacer.clientWidth; @@ -292,7 +240,6 @@ elementI = document.createElement("div"); elementIStyle = elementI.style; elementIStyle.overflow = "hidden"; - elementI.setAttribute("data-index", count * index + i); if (options.orientation === VERTICAL) { elementI.style.float = "left"; @@ -302,7 +249,7 @@ } if (count * index + i < options.originalDataLength) { - this.options.listItemUpdater(elementI, count * index + i, count); + this.options.listItemUpdater(elementI, count * index + i); } element.appendChild(elementI); } diff --git a/tau/src/js/profile/wearable/widget/wearable/VirtualListview.js b/tau/src/js/profile/wearable/widget/wearable/VirtualListview.js index c537366f..1a737fdb 100644 --- a/tau/src/js/profile/wearable/widget/wearable/VirtualListview.js +++ b/tau/src/js/profile/wearable/widget/wearable/VirtualListview.js @@ -1,18 +1,6 @@ /*global window, define */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, white: true, plusplus: true*/ /** @@ -132,20 +120,957 @@ define( [ "../../../../core/engine", - "../../../../core/widget/core/VirtualListview", + "../../../../core/event", + "../../../../core/event/vmouse", + "../../../../core/widget/BaseWidget", "../wearable" // fetch namespace ], function() { //>>excludeEnd("tauBuildExclude"); - var VirtualListview = ns.widget.core.VirtualListview, - prototype = new VirtualListview(), - parent_init = prototype._init; + var BaseWidget = ns.widget.BaseWidget, + /** + * Alias for class {@link ns.engine} + * @property {Object} engine + * @private + * @static + * @member ns.widget.wearable.VirtualListview + */ + engine = ns.engine, + // Constants definition + /** + * Defines index of scroll `{@link ns.widget.wearable.VirtualListview#_scroll}.direction` + * @property {number} SCROLL_UP + * to retrive if user is scrolling up + * @private + * @static + * @member ns.widget.wearable.VirtualListview + */ + SCROLL_UP = 0, + /** + * Defines index of scroll `{@link ns.widget.wearable.VirtualListview#_scroll}.direction` + * @property {number} SCROLL_RIGHT + * to retrive if user is scrolling right + * @private + * @static + * @member ns.widget.wearable.VirtualListview + */ + SCROLL_RIGHT = 1, + /** + * Defines index of scroll {@link ns.widget.wearable.VirtualListview#_scroll} + * @property {number} SCROLL_DOWN + * to retrive if user is scrolling down + * @private + * @static + * @member ns.widget.wearable.VirtualListview + */ + SCROLL_DOWN = 2, + /** + * Defines index of scroll {@link ns.widget.wearable.VirtualListview#_scroll} + * @property {number} SCROLL_LEFT + * to retrive if user is scrolling left + * @private + * @static + * @member ns.widget.wearable.VirtualListview + */ + SCROLL_LEFT = 3, + /** + * Defines vertical scrolling orientation. It's default orientation. + * @property {string} VERTICAL + * @private + * @static + */ + VERTICAL = "y", + /** + * Defines horizontal scrolling orientation. + * @property {string} HORIZONTAL + * @private + * @static + */ + HORIZONTAL = "x", + /** + * Determines that scroll event should not be taken into account if scroll event accurs. + * @property {boolean} blockEvent + * @private + * @static + */ + blockEvent = false, + /** + * Handle window timeout ID. + * @property {number} timeoutHandler + * @private + * @static + */ + timeoutHandler, + /** + * Reference to original target object from touch event. + * @property {Object} origTarget + * @private + * @static + */ + origTarget, + /** + * Number of miliseconds to determine if tap event occured. + * @property {number} tapholdThreshold + * @private + * @static + */ + tapholdThreshold = 250, + /** + * Handler for touch event listener to examine tap occurance. + * @property {Object} tapHandlerBound + * @private + * @static + */ + tapHandlerBound = null, + /** + * Stores last touch position to examine tap occurance. + * @property {Object} lastTouchPos + * @private + * @static + */ + lastTouchPos = {}, + + /** + * Local constructor function + * @method VirtualListview + * @private + * @member ns.widget.wearable.VirtualListview + */ + VirtualListview = function() { + var self = this; + /** + * VirtualListview widget's properties associated with + * @property {Object} ui + * User Interface + * @property {?HTMLElement} [ui.scrollview=null] Scroll element + * @property {?HTMLElement} [ui.spacer=null] HTML element which makes scrollbar proper size + * @property {number} [ui.itemSize=0] Size of list element in pixels. If scrolling is + * vertically it's item width in other case it"s height of item element + * @member ns.widget.wearable.VirtualListview + */ + self.ui = { + scrollview: null, + spacer: null, + itemSize: 0 + }; + + /** + * Holds information about scrolling state + * @property {Object} _scroll + * @property {Array} [_scroll.direction=[0,0,0,0]] Holds current direction of scrolling. + * Indexes suit to following order: [up, left, down, right] + * @property {number} [_scroll.lastPositionX=0] Last scroll position from top in pixels. + * @property {number} [_scroll.lastPositionY=0] Last scroll position from left in pixels. + * @property {number} [_scroll.lastJumpX=0] Difference between last and current + * position of horizontal scroll. + * @property {number} [_scroll.lastJumpY=0] Difference between last and current + * position of vertical scroll. + * @property {number} [_scroll.clipWidth=0] Width of clip - visible area for user. + * @property {number} [_scroll.clipHeight=0] Height of clip - visible area for user. + * @member ns.widget.wearable.VirtualListview + */ + self._scroll = { + direction: [0, 0, 0, 0], + lastPositionX: 0, + lastPositionY: 0, + lastJumpX: 0, + lastJumpY: 0, + clipWidth: 0, + clipHeight: 0 + }; + + /** + * Name of widget + * @property {string} name + * @member ns.widget.wearable.VirtualListview + * @static + */ + self.name = "VirtualListview"; + + /** + * Current zero-based index of data set. + * @property {number} _currentIndex + * @member ns.widget.wearable.VirtualListview + * @protected + */ + self._currentIndex = 0; + + /** + * VirtualListview widget options. + * @property {Object} options + * @property {number} [options.bufferSize=100] Number of items of result set. The default value is 100. + * As the value gets higher, the loading time increases while the system performance + * improves. So you need to pick a value that provides the best performance + * without excessive loading time. It's recomended to set bufferSize at least 3 times bigger than number + * of visible elements. + * @property {number} [options.dataLength=0] Total number of items. + * @property {string} [options.orientation="y"] Scrolling orientation. Default vertical scrolling enabled. + * @property {Object} options.listItemUpdater Holds reference to method which modifies list item, depended + * at specified index from database. **Method should be overridden by developer using + * {@link ns.widget.wearable.VirtualListview#setListItemUpdater} method.** or defined as a config + * object. Method takes two parameters: + * - element {HTMLElement} List item to be modified + * - index {number} Index of data set + * @member ns.widget.wearable.VirtualListview + */ + self.options = { + bufferSize: 100, + dataLength: 0, + orientation: VERTICAL, + listItemUpdater: null + }; + + /** + * Binding for scroll event listener. + * @method _scrollEventBound + * @member ns.widget.wearable.VirtualListview + * @protected + */ + self._scrollEventBound = null; + /** + * Binding for touch start event listener. + * @method _touchStartEventBound + * @member ns.widget.wearable.VirtualListview + * @protected + */ + self._touchStartEventBound = null; + + return self; + }, + POINTER_START = 'vmousedown', + POINTER_MOVE = 'vmousemove', + POINTER_END = 'vmouseup', + + // Cached prototype for better minification + prototype = new BaseWidget(); + + /** + * Dictionary object containing commonly used wiget classes + * @property {Object} classes + * @static + * @readonly + * @member ns.widget.wearable.VirtualListview + */ + VirtualListview.classes = { + uiVirtualListContainer: "ui-virtual-list-container", + uiListviewActive: "ui-listview-active" + }; + + /** + * Remove highlight from items. + * @method _removeHighlight + * @param {ns.widget.wearable.VirtualListview} self Reference to VirtualListview object. + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function _removeHighlight (self) { + var children = self.element.children, + i = children.length; + while (--i >= 0) { + children[i].classList.remove(VirtualListview.classes.uiListviewActive); + } + } + + /** + * Checks if tap meet the condition. + * @method _tapHandler + * @param {ns.widget.wearable.VirtualListview} self Reference to VirtualListview object. + * @param {Event} event Received Touch event + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function _tapHandler (self, event) { + var changedTouches = event.changedTouches || + (event._originalEvent && + event._originalEvent.changedTouches), + eventTouch = (changedTouches && changedTouches.length) ? + changedTouches[0] : + event; + + if (event.type === POINTER_MOVE) { + if (Math.abs(lastTouchPos.clientX - eventTouch.clientX) > 10 && Math.abs(lastTouchPos.clientY - eventTouch.clientY) > 10) { + _removeHighlight(self); + window.clearTimeout(timeoutHandler); + } + } else { + _removeHighlight(self); + window.clearTimeout(timeoutHandler); + } + + } + + /** + * Adds highlight + * @method tapholdListener + * @param {ns.widget.wearable.VirtualListview} self Reference to VirtualListview object. + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function tapholdListener(self) { + var liElement; + + liElement = origTarget.tagName === "LI" ? origTarget : origTarget.parentNode; + + origTarget.removeEventListener(POINTER_MOVE, tapHandlerBound, false); + origTarget.removeEventListener(POINTER_END, tapHandlerBound, false); + tapHandlerBound = null; + + _removeHighlight(self); + liElement.classList.add(VirtualListview.classes.uiListviewActive); + lastTouchPos = {}; + } + + /** + * Binds touching events to examine tap event. + * @method _touchStartHandler + * @param {ns.widget.wearable.VirtualListview} self Reference to VirtualListview object. + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function _touchStartHandler (self, event) { + var eventData; + + origTarget = event.target; + + // Clean up + window.clearTimeout(timeoutHandler); + origTarget.removeEventListener(POINTER_MOVE, tapHandlerBound, false); + origTarget.removeEventListener(POINTER_END, tapHandlerBound, false); + + timeoutHandler = window.setTimeout(tapholdListener.bind(null, self), tapholdThreshold); + eventData = (event.touches && event.touches.length) ? event.touches[0] : event; + lastTouchPos.clientX = eventData.clientX; + lastTouchPos.clientY = eventData.clientY; + + //Add touch listeners + tapHandlerBound = _tapHandler.bind(null, self); + origTarget.addEventListener(POINTER_MOVE, tapHandlerBound, false); + origTarget.addEventListener(POINTER_END, tapHandlerBound, false); + + } + + + /** + * Updates scroll information about position, direction and jump size. + * @method _updateScrollInfo + * @param {ns.widget.wearable.VirtualListview} self VirtualListview widget reference + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function _updateScrollInfo(self) { + var scrollInfo = self._scroll, + scrollDirection = scrollInfo.direction, + scrollViewElement = self.ui.scrollview, + scrollLastPositionX = scrollInfo.lastPositionX, + scrollLastPositionY = scrollInfo.lastPositionY, + scrollviewPosX = scrollViewElement.scrollLeft, + scrollviewPosY = scrollViewElement.scrollTop; + + self._refreshScrollbar(); + //Reset scroll matrix + scrollDirection = [0, 0, 0, 0]; + + //Scrolling UP + if (scrollviewPosY < scrollLastPositionY) { + scrollDirection[SCROLL_UP] = 1; + } + + //Scrolling RIGHT + if (scrollviewPosX < scrollLastPositionX) { + scrollDirection[SCROLL_RIGHT] = 1; + } + + //Scrolling DOWN + if (scrollviewPosY > scrollLastPositionY) { + scrollDirection[SCROLL_DOWN] = 1; + } + + //Scrolling LEFT + if (scrollviewPosX > scrollLastPositionX) { + scrollDirection[SCROLL_LEFT] = 1; + } + + scrollInfo.lastJumpY = Math.abs(scrollviewPosY - scrollLastPositionY); + scrollInfo.lastJumpX = Math.abs(scrollviewPosX - scrollLastPositionX); + scrollInfo.lastPositionX = scrollviewPosX; + scrollInfo.lastPositionY = scrollviewPosY; + scrollInfo.direction = scrollDirection; + scrollInfo.clipHeight = scrollViewElement.clientHeight; + scrollInfo.clipWidth = scrollViewElement.clientWidth; + } + + /** + * Computes list element size according to scrolling orientation + * @method _computeElementSize + * @param {HTMLElement} element Element whose size should be computed + * @param {string} orientation Scrolling orientation + * @return {number} Size of element in pixels + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function _computeElementSize(element, orientation) { + // @TODO change to util method if it will work perfectly + return parseInt(orientation === VERTICAL ? element.clientHeight : element.clientWidth, 10) + 1; + } + + /** + * Scrolls and manipulates DOM element to destination index. Element at destination + * index is the first visible element on the screen. Destination index can + * be different from Virtual List's current index, because current index points + * to first element in the buffer. + * @member ns.widget.wearable.VirtualListview + * @param {ns.widget.wearable.VirtualListview} self VirtualListview widget reference + * @param {number} toIndex Destination index. + * @method _orderElementsByIndex + * @private + * @static + */ + function _orderElementsByIndex(self, toIndex) { + var element = self.element, + options = self.options, + scrollInfo = self._scroll, + scrollClipSize = 0, + dataLength = options.dataLength, + indexCorrection = 0, + bufferedElements = 0, + avgListItemSize = 0, + bufferSize = options.bufferSize, + i, + offset = 0, + index, + isLastBuffer = false; + + //Get size of scroll clip depended on scroll direction + scrollClipSize = options.orientation === VERTICAL ? scrollInfo.clipHeight : scrollInfo.clipWidth; + + //Compute average list item size + avgListItemSize = _computeElementSize(element, options.orientation) / bufferSize; + + //Compute average number of elements in each buffer (before and after clip) + bufferedElements = Math.floor((bufferSize - Math.floor(scrollClipSize / avgListItemSize)) / 2); + + if (toIndex - bufferedElements <= 0) { + index = 0; + indexCorrection = 0; + } else { + index = toIndex - bufferedElements; + } + + if (index + bufferSize >= dataLength) { + index = dataLength - bufferSize; + isLastBuffer = true; + } + indexCorrection = toIndex - index; + + self._loadData(index); + blockEvent = true; + offset = index * avgListItemSize; + if (options.orientation === VERTICAL) { + if (isLastBuffer) { + offset = self.ui.spacer.clientHeight; + } + element.style.top = offset + "px"; + } else { + if (isLastBuffer) { + offset = self.ui.spacer.clientWidth; + } + element.style.left = offset + "px"; + } + + for (i = 0; i < indexCorrection; i += 1) { + offset += _computeElementSize(element.children[i], options.orientation); + } + + if (options.orientation === VERTICAL) { + self.ui.scrollview.scrollTop = offset; + } else { + self.ui.scrollview.scrollLeft = offset; + } + blockEvent = false; + self._currentIndex = index; + } + + /** + * Orders elements. Controls resultset visibility and does DOM manipulation. This + * method is used during normal scrolling. + * @method _orderElements + * @param {ns.widget.wearable.VirtualListview} self VirtualListview widget reference + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function _orderElements(self) { + var element = self.element, + scrollInfo = self._scroll, + options = self.options, + elementStyle = element.style, + //Current index of data, first element of resultset + currentIndex = self._currentIndex, + //Number of items in resultset + bufferSize = parseInt(options.bufferSize, 10), + //Total number of items + dataLength = options.dataLength, + //Array of scroll direction + scrollDirection = scrollInfo.direction, + scrollClipWidth = scrollInfo.clipWidth, + scrollClipHeight = scrollInfo.clipHeight, + scrollLastPositionY = scrollInfo.lastPositionY, + scrollLastPositionX = scrollInfo.lastPositionX, + elementPositionTop = parseInt(elementStyle.top, 10) || 0, + elementPositionLeft = parseInt(elementStyle.left, 10) || 0, + elementsToLoad = 0, + bufferToLoad = 0, + elementsLeftToLoad = 0, + temporaryElement = null, + avgListItemSize = 0, + resultsetSize = 0, + childrenNodes, + i = 0, + jump = 0, + hiddenPart = 0, + direction, + newPosition; + + childrenNodes = element.children; + for (i = childrenNodes.length - 1; i > 0; i -= 1) { + if (options.orientation === VERTICAL) { + resultsetSize += childrenNodes[i].clientHeight; + } else { + resultsetSize += childrenNodes[i].clientWidth; + } + } + + //Compute average list item size + avgListItemSize = _computeElementSize(element, options.orientation) / bufferSize; + + //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling DOWN + if (scrollDirection[SCROLL_DOWN]) { + hiddenPart = scrollLastPositionY - elementPositionTop; + elementsLeftToLoad = dataLength - currentIndex - bufferSize; + } + + //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling UP + if (scrollDirection[SCROLL_UP]) { + hiddenPart = (elementPositionTop + resultsetSize) - (scrollLastPositionY + scrollClipHeight); + elementsLeftToLoad = currentIndex; + } + + //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling RIGHT + if (scrollDirection[SCROLL_RIGHT]) { + hiddenPart = scrollLastPositionX - elementPositionLeft; + elementsLeftToLoad = dataLength - currentIndex - bufferSize; + } + + //Compute hidden part of result set and number of elements, that needed to be loaded, while user is scrolling LEFT + if (scrollDirection[SCROLL_LEFT]) { + hiddenPart = (elementPositionLeft + resultsetSize) - (scrollLastPositionX - scrollClipWidth); + elementsLeftToLoad = currentIndex; + } + + //manipulate DOM only, when at least 2/3 of result set is hidden + //NOTE: Result Set should be at least 3x bigger then clip size + if (hiddenPart > 0 && (resultsetSize / hiddenPart) <= 1.5) { + + //Left half of hidden elements still hidden/cached + elementsToLoad = Math.floor(hiddenPart / avgListItemSize) - Math.floor((bufferSize - scrollClipHeight / avgListItemSize) / 2); + elementsToLoad = elementsLeftToLoad < elementsToLoad ? elementsLeftToLoad : elementsToLoad; + bufferToLoad = Math.floor(elementsToLoad / bufferSize); + elementsToLoad = elementsToLoad % bufferSize; + // Scrolling more then buffer + if (bufferToLoad > 0) { + if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { + direction = 1; + } + if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_LEFT]) { + direction = -1; + } + + // Load data to buffer according to jumped index + self._loadData(currentIndex + direction * bufferToLoad * bufferSize); + + // Refresh current index after buffer jump + currentIndex = self._currentIndex; + + jump += direction * bufferToLoad * bufferSize * avgListItemSize; + } + + if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { + //Switch currentIndex to last + currentIndex = currentIndex + bufferSize - 1; + } + for (i = elementsToLoad; i > 0; i -= 1) { + if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { + temporaryElement = element.appendChild(element.firstElementChild); + ++currentIndex; + + //Updates list item using template + self._updateListItem(temporaryElement, currentIndex); + jump += temporaryElement.clientHeight; + } + + if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_LEFT]) { + temporaryElement = element.insertBefore(element.lastElementChild, element.firstElementChild); + --currentIndex; + + //Updates list item using template + self._updateListItem(temporaryElement, currentIndex); + jump -= temporaryElement.clientHeight; + } + } + if (scrollDirection[SCROLL_UP] || scrollDirection[SCROLL_DOWN]) { + newPosition = elementPositionTop + jump; + + if (newPosition < 0 || currentIndex <= 0) { + newPosition = 0; + currentIndex = 0; + } + + if (currentIndex >= (dataLength - 1)) { + newPosition = self.ui.spacer.clientHeight; + } + + elementStyle.top = newPosition + "px"; + } + + if (scrollDirection[SCROLL_LEFT] || scrollDirection[SCROLL_RIGHT]) { + newPosition = elementPositionLeft + jump; + + if (newPosition < 0 || currentIndex <= 0) { + newPosition = 0; + } + + if (currentIndex >= (dataLength - 1)) { + newPosition = self.ui.spacer.clientWidth; + } + + elementStyle.left = newPosition + "px"; + } + + if (scrollDirection[SCROLL_DOWN] || scrollDirection[SCROLL_RIGHT]) { + //Switch currentIndex to first + currentIndex = currentIndex - bufferSize + 1; + } + //Save current index + self._currentIndex = currentIndex; + } + } + + /** + * Check if scrolling position is changed and updates list if it needed. + * @method _updateList + * @param {ns.widget.wearable.VirtualListview} self VirtualListview widget reference + * @member ns.widget.wearable.VirtualListview + * @private + * @static + */ + function _updateList(self) { + var _scroll = self._scroll; + _updateScrollInfo.call(null, self); + if (_scroll.lastJumpY > 0 || _scroll.lastJumpX > 0) { + if (!blockEvent) { + _orderElements(self); + } + } + } + + /** + * Updates list item using user defined listItemUpdater function. + * @method _updateListItem + * @param {HTMLElement} element List element to update + * @param {number} index Data row index + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._updateListItem = function (element, index) { + this.options.listItemUpdater(element, index); + }; + + /** + * Build widget structure + * @method _build + * @param {HTMLElement} element Widget's element + * @return {HTMLElement} Element on which built is widget + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._build = function(element) { + var classes = VirtualListview.classes; + + element.classList.add(classes.uiVirtualListContainer); + return element; + }; + + + /** + * Initialize widget on an element. + * @method _init + * @param {HTMLElement} element Widget's element + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._init = function(element) { + var self = this, + ui = self.ui, + options = self.options, + orientation, + scrollview, + scrollviewStyle, + spacer, + spacerStyle; + + //Set orientation, default vertical scrolling is allowed + orientation = options.orientation.toLowerCase() === HORIZONTAL ? HORIZONTAL : VERTICAL; + + //Get scrollview instance + scrollview = element.parentElement; + scrollviewStyle = scrollview.style; + + // Prepare spacer (element which makes scrollbar proper size) + spacer = document.createElement("div"); + spacerStyle = spacer.style; + spacerStyle.display = "block"; + spacerStyle.position = "static"; + scrollview.appendChild(spacer); + + //Prepare element + element.style.position = "relative"; + + if (orientation === HORIZONTAL) { + // @TODO check if whiteSpace: nowrap is better for vertical listes + spacerStyle.float = "left"; + scrollviewStyle.overflowX = "scroll"; + scrollviewStyle.overflowY = "hidden"; + } else { + scrollviewStyle.overflowX = "hidden"; + scrollviewStyle.overflowY = "scroll"; + } + + if (options.dataLength < options.bufferSize) { + options.bufferSize = options.dataLength; + } + + if (options.bufferSize < 1) { + options.bufferSize = 1; + } + + // Assign variables to members + ui.spacer = spacer; + ui.scrollview = scrollview; + self.element = element; + options.orientation = orientation; + }; + + /** + * Builds Virtual List structure + * @method _buildList + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._buildList = function() { + var listItem, + list = this.element, + numberOfItems = this.options.bufferSize, + documentFragment = document.createDocumentFragment(), + touchStartEventBound = _touchStartHandler.bind(null, this), + orientation = this.options.orientation, + i; + + for (i = 0; i < numberOfItems; ++i) { + listItem = document.createElement("li"); + + if (orientation === HORIZONTAL) { + // TODO: check if whiteSpace: nowrap is better for vertical listes + // NOTE: after rebuild this condition check possible duplication from _init method + listItem.style.float = "left"; + } + + this._updateListItem(listItem, i); + documentFragment.appendChild(listItem); + listItem.addEventListener(POINTER_START, touchStartEventBound, false); + } + + list.appendChild(documentFragment); + this._touchStartEventBound = touchStartEventBound; + this._refresh(); + }; + + /** + * Refresh list + * @method _refresh + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._refresh = function() { + //Set default value of variable create + this._refreshScrollbar(); + }; + + /** + * Loads data from specified index to result set. + * @method _loadData + * @param {number} index Index of first row + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._loadData = function(index) { + var self = this, + children = self.element.firstElementChild; + + if (self._currentIndex !== index) { + self._currentIndex = index; + do { + self._updateListItem(children, index); + ++index; + children = children.nextElementSibling; + } while (children); + } + }; + + /** + * Sets proper scrollbar size: height (vertical), width (horizontal) + * @method _refreshScrollbar + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._refreshScrollbar = function() { + var self = this, + element = self.element, + options = self.options, + ui = self.ui, + spacerStyle = ui.spacer.style, + bufferSizePx; + + if (options.orientation === VERTICAL) { + //Note: element.clientHeight is variable + bufferSizePx = parseFloat(element.clientHeight) || 0; + spacerStyle.height = (bufferSizePx / options.bufferSize * options.dataLength - bufferSizePx) + "px"; + } else { + //Note: element.clientWidth is variable + bufferSizePx = parseFloat(element.clientWidth) || 0; + spacerStyle.width = (bufferSizePx / options.bufferSize * (options.dataLength - 1) - 4 / 3 * bufferSizePx) + "px"; + } + }; + + /** + * Binds VirtualListview events + * @method _bindEvents + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._bindEvents = function() { + var scrollEventBound = _updateList.bind(null, this), + scrollviewClip = this.ui.scrollview; + + if (scrollviewClip) { + scrollviewClip.addEventListener("scroll", scrollEventBound, false); + this._scrollEventBound = scrollEventBound; + } + }; + + /** + * Cleans widget's resources + * @method _destroy + * @member ns.widget.wearable.VirtualListview + * @protected + */ + prototype._destroy = function() { + var self = this, + scrollviewClip = self.ui.scrollview, + uiSpacer = self.ui.spacer, + element = self.element, + elementStyle = element.style, + listItem; + + // Restore start position + elementStyle.position = "static"; + if (self.options.orientation === VERTICAL) { + elementStyle.top = "auto"; + } else { + elementStyle.left = "auto"; + } + + if (scrollviewClip) { + scrollviewClip.removeEventListener("scroll", self._scrollEventBound, false); + } + + //Remove spacer element + if (uiSpacer.parentNode) { + uiSpacer.parentNode.removeChild(uiSpacer); + } + + //Remove li elements. + while (element.firstElementChild) { + listItem = element.firstElementChild; + listItem.removeEventListener(POINTER_START, self._touchStartEventBound, false); + element.removeChild(listItem); + } + + }; + + /** + * This method scrolls list to defined position in pixels. + * @method scrollTo + * @param {number} position Scroll position expressed in pixels. + * @member ns.widget.wearable.VirtualListview + */ + prototype.scrollTo = function(position) { + this.ui.scrollview.scrollTop = position; + }; + + /** + * This method scrolls list to defined index. + * @method scrollToIndex + * @param {number} index Scroll Destination index. + * @member ns.widget.wearable.VirtualListview + */ + prototype.scrollToIndex = function(index) { + if (index < 0) { + index = 0; + } + if (index >= this.options.dataLength) { + index = this.options.dataLength - 1; + } + _updateScrollInfo(this); + _orderElementsByIndex(this, index); + }; + + /** + * This method builds widget and trigger event "draw". + * @method draw + * @member ns.widget.wearable.VirtualListview + */ + prototype.draw = function() { + this._buildList(); + this.trigger("draw"); + }; + + /** + * This method sets list item updater function. + * To learn how to create list item updater function please + * visit Virtual List User Guide. + * @method setListItemUpdater + * @param {Object} updateFunction Function reference. + * @member ns.widget.wearable.VirtualListview + */ + prototype.setListItemUpdater = function(updateFunction) { + this.options.listItemUpdater = updateFunction; + }; + + // Assign prototype VirtualListview.prototype = prototype; + + // definition ns.widget.wearable.VirtualListview = VirtualListview; - ns.engine.defineWidget( + engine.defineWidget( "VirtualListview", "", ["draw", "setListItemUpdater", "scrollTo", "scrollToIndex"], diff --git a/tau/src/js/profile/wearable/widget/wearable/indexscrollbar.js b/tau/src/js/profile/wearable/widget/wearable/indexscrollbar.js new file mode 100644 index 00000000..b61395f6 --- /dev/null +++ b/tau/src/js/profile/wearable/widget/wearable/indexscrollbar.js @@ -0,0 +1,24 @@ +/*global window, define, ns */ +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 + */ +/* + * @author Maciej Urbanski <m.urbanski@samsung.com> + */ +(function (window, ns) { + "use strict"; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + define( + [ + "../wearable" + ], + function () { + //>>excludeEnd("tauBuildExclude"); + /** @namespace ns.widget.wearable */ + ns.widget.wearable.indexscrollbar = ns.widget.wearable.indexscrollbar || {}; + //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + return ns.widget.wearable.indexscrollbar; + } + ); + //>>excludeEnd("tauBuildExclude"); +}(window, ns)); diff --git a/tau/src/js/core/widget/core/indexscrollbar/IndexBar.js b/tau/src/js/profile/wearable/widget/wearable/indexscrollbar/IndexBar.js index 5980bbef..ce0bb1ea 100644 --- a/tau/src/js/core/widget/core/indexscrollbar/IndexBar.js +++ b/tau/src/js/profile/wearable/widget/wearable/indexscrollbar/IndexBar.js @@ -1,18 +1,6 @@ /*global define, ns, document, window */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -28,8 +16,8 @@ define( [ "../indexscrollbar", - "../../../util/object", - "../../../util/DOM/css" + "../../../../../core/util/object", + "../../../../../core/util/DOM/css" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -374,7 +362,7 @@ } }; - ns.widget.core.indexscrollbar.IndexBar = IndexBar; + ns.widget.wearable.indexscrollbar.IndexBar = IndexBar; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); } diff --git a/tau/src/js/core/widget/core/indexscrollbar/IndexIndicator.js b/tau/src/js/profile/wearable/widget/wearable/indexscrollbar/IndexIndicator.js index a6faab52..c2c6a596 100644 --- a/tau/src/js/core/widget/core/indexscrollbar/IndexIndicator.js +++ b/tau/src/js/profile/wearable/widget/wearable/indexscrollbar/IndexIndicator.js @@ -1,18 +1,6 @@ /*global define, ns, document, window */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -28,8 +16,8 @@ define( [ "../indexscrollbar", - "../../../util/object", - "../../../event" + "../../../../../core/util/object", + "../../../../../core/event" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -70,7 +58,7 @@ // Add to DOM tree - options.referenceElement.parentNode.insertBefore(element, options.referenceElement); + options.container.insertBefore(element, options.referenceElement); self.fitToContainer(); }, @@ -144,7 +132,7 @@ } }; - ns.widget.core.indexscrollbar.IndexIndicator = IndexIndicator; + ns.widget.wearable.indexscrollbar.IndexIndicator = IndexIndicator; //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return IndexIndicator; } diff --git a/tau/src/js/core/widget/core/indexscrollbar/IndexScrollbar.js b/tau/src/js/profile/wearable/widget/wearable/indexscrollbar/IndexScrollbar.js index 0e8a0b69..53e99827 100644 --- a/tau/src/js/core/widget/core/indexscrollbar/IndexScrollbar.js +++ b/tau/src/js/profile/wearable/widget/wearable/indexscrollbar/IndexScrollbar.js @@ -1,18 +1,6 @@ /*global define, ns, document, window */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -274,7 +262,7 @@ * @author Maciej Urbanski <m.urbanski@samsung.com> * @author Jadwiga Sosnowska <j.sosnowska@samsung.com> * @author Tomasz Lukawski <t.lukawski@samsung.com> - * @class ns.widget.core.IndexScrollbar + * @class ns.widget.wearable.IndexScrollbar * @extends ns.widget.BaseWidget */ (function (document, ns) { @@ -282,15 +270,15 @@ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); define( [ - "../../../engine", - "../../../event", - "../../../event/vmouse", - "../../../util/object", - "../../../util/DOM/css", + "../../../../../core/engine", + "../../../../../core/event", + "../../../../../core/event/vmouse", + "../../../../../core/util/object", + "../../../../../core/util/DOM/css", "../indexscrollbar", "./IndexBar", "./IndexIndicator", - "../../BaseWidget" + "../../../../../core/widget/BaseWidget" ], function () { //>>excludeEnd("tauBuildExclude"); @@ -311,47 +299,39 @@ this.eventHandlers = {}; }, - BaseWidget = ns.widget.BaseWidget, - /** - * Alias for class {@link ns.engine} - * @property {Object} engine - * @member ns.widget.core.IndexScrollbar - * @private - * @static - */ + BaseWidget = ns.widget.BaseWidget, + /** + * Alias for class {@link ns.engine} + * @property {Object} engine + * @member ns.widget.wearable.IndexScrollbar + * @private + * @static + */ engine = ns.engine, - /** - * Alias for class {@link ns.event} - * @property {Object} events - * @member ns.widget.core.IndexScrollbar - * @private - * @static - */ + + /** + * Alias for class {@link ns.event} + * @property {Object} events + * @member ns.widget.wearable.IndexScrollbar + * @private + * @static + */ events = ns.event, - /** - * Alias for class {@link ns.util.object} - * @property {Object} utilsObject - * @member ns.widget.core.IndexScrollbar - * @private - * @static - */ + /** + * Alias for class {@link ns.util.object} + * @property {Object} utilsObject + * @member ns.widget.wearable.IndexScrollbar + * @private + * @static + */ utilsObject = ns.util.object, - /** - * Alias for class ns.util.DOM - * @property {ns.util.DOM} doms - * @member ns.widget.wearable.IndexScrollbar - * @private - * @static - */ - doms = ns.util.DOM, - - IndexBar = ns.widget.core.indexscrollbar.IndexBar, - IndexIndicator = ns.widget.core.indexscrollbar.IndexIndicator, + IndexBar = ns.widget.wearable.indexscrollbar.IndexBar, + IndexIndicator = ns.widget.wearable.indexscrollbar.IndexIndicator, EventType = { /** * Event triggered after select index by user * @event select - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ SELECT: "select" }, @@ -385,11 +365,10 @@ * @property {?boolean} [options.container=null] * @property {?boolean} [options.supplementaryIndex=null] * @property {number} [options.supplementaryIndexMargin=1] - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ this.options = { moreChar: "*", - indexScrollbarClass: "ui-indexscrollbar", selectedClass: "ui-state-selected", indicatorClass: "ui-indexscrollbar-indicator", delimiter: ",", @@ -413,7 +392,7 @@ * @protected * @param {HTMLElement} element * @return {HTMLElement} - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _build: function (element) { return element; @@ -425,14 +404,11 @@ * @protected * @param {HTMLElement} element * @return {HTMLElement} - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _init: function (element) { var self = this, options = self.options; - - element.classList.add(options.indexScrollbarClass); - self._setIndex(element, options.index); self._setMaxIndexLen(element, options.maxIndexLen); self._setInitialLayout(); // This is needed for creating sub objects @@ -450,7 +426,7 @@ * @method _refresh * @protected * @return {HTMLElement} - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _refresh: function () { if( this._isExtended() ) { @@ -460,9 +436,7 @@ } this._updateLayout(); - this.indexBar1.options.index = this.options.index; this.indexBar1.refresh(); - this._bindEvents(); this._extended( true ); }, @@ -472,7 +446,7 @@ * @protected * @param {HTMLElement} element * @return {HTMLElement} - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _destroy: function() { var self = this; @@ -490,7 +464,7 @@ * This method creates indexBar1 and indicator in the indexScrollbar * @method _createSubObjects * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _createSubObjects: function() { var self = this, @@ -531,7 +505,7 @@ * This method destroys sub-elements: index bars and indicator. * @method _destroySubObjects * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _destroySubObjects: function() { var subObjs = { @@ -556,7 +530,7 @@ * This method sets initial layout. * @method _setInitialLayout * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _setInitialLayout: function () { var indexScrollbar = this.element, @@ -575,7 +549,7 @@ * This method calculates maximum index length. * @method _setMaxIndexLen * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _setMaxIndexLen: function(element, value) { var self = this, @@ -596,7 +570,7 @@ * This method updates layout. * @method _updateLayout * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _updateLayout: function() { this._setInitialLayout(); @@ -609,7 +583,7 @@ * This method draws additional sub-elements * @method _draw * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _draw: function () { this.indexBar1.show(); @@ -620,7 +594,7 @@ * This method removes indicator. * @method _removeIndicator * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _removeIndicator: function() { var indicator = this.indicator, @@ -635,9 +609,9 @@ * This method returns the receiver of event by position. * @method _getEventReceiverByPosition * @param {number} posX The position relative to the left edge of the document. - * @return {?ns.widget.core.indexscrollbar.IndexBar} Receiver of event + * @return {?ns.widget.wearable.indexscrollbar.IndexBar} Receiver of event * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _getEventReceiverByPosition: function(posX) { var windowWidth = window.innerWidth, @@ -662,7 +636,7 @@ * @method _updateIndicatorAndTriggerEvent * @param {number} val The value of indicator * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _updateIndicatorAndTriggerEvent: function(val) { this.indicator.setValue( val ); @@ -681,7 +655,7 @@ * @method _onTouchStartHandler * @param {Event} event Event * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _onTouchStartHandler: function(event) { pointerIsPressed = true; @@ -699,10 +673,6 @@ iBar1.select( idx ); // highlight selected value - document.addEventListener(POINTER_MOVE, this.eventHandlers.touchMove); - document.addEventListener(POINTER_END, this.eventHandlers.touchEnd); - document.addEventListener("touchcancel", this.eventHandlers.touchEnd); - this._updateIndicatorAndTriggerEvent( val ); }, @@ -711,7 +681,7 @@ * @method _onTouchMoveHandler * @param {Event} event Event * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _onTouchMoveHandler: function(event) { var touches = event._originalEvent && event._originalEvent.touches; @@ -766,7 +736,7 @@ * @method _onTouchEndHandler * @param {Event} event Event * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _onTouchEndHandler: function( event ) { var self = this, @@ -782,17 +752,13 @@ self.indexBar2.clearSelected(); self.indexBar2.hide(); } - - document.removeEventListener(POINTER_MOVE, self.eventHandlers.touchMove); - document.removeEventListener(POINTER_END, self.eventHandlers.touchEnd); - document.removeEventListener("touchcancel", self.eventHandlers.touchEnd); }, /** * This method binds events to widget. * @method _bindEvents * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _bindEvents: function() { this._bindResizeEvent(); @@ -803,7 +769,7 @@ * This method unbinds events to widget. * @method _unbindEvent * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _unbindEvent: function() { this._unbindResizeEvent(); @@ -814,7 +780,7 @@ * This method binds event "resize". * @method _bindResizeEvent * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _bindResizeEvent: function() { this.eventHandlers.onresize = function(/* ev */) { @@ -828,7 +794,7 @@ * This method unbinds event "resize". * @method _bindResizeEvent * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _unbindResizeEvent: function() { if ( this.eventHandlers.onresize ) { @@ -840,7 +806,7 @@ * This method binds touch events. * @method _bindEventToTriggerSelectEvent * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _bindEventToTriggerSelectEvent: function() { var self = this; @@ -849,17 +815,23 @@ self.eventHandlers.touchMove = self._onTouchMoveHandler.bind(self); self.element.addEventListener(POINTER_START, self.eventHandlers.touchStart); + document.addEventListener(POINTER_MOVE, self.eventHandlers.touchMove); + document.addEventListener(POINTER_END, self.eventHandlers.touchEnd); + document.addEventListener("touchcancel", self.eventHandlers.touchEnd); }, /** * This method unbinds touch events. * @method _unbindEventToTriggerSelectEvent * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _unbindEventToTriggerSelectEvent: function() { var self = this; self.element.removeEventListener(POINTER_START, self.eventHandlers.touchStart); + document.removeEventListener(POINTER_MOVE, self.eventHandlers.touchMove); + document.removeEventListener(POINTER_END, self.eventHandlers.touchEnd); + document.removeEventListener("touchcancel", self.eventHandlers.touchEnd); }, /** @@ -869,7 +841,7 @@ * @param {*} val * @return {*} Return value of data or widget's object * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _data: function (key, val) { var el = this.element, @@ -900,7 +872,7 @@ * @param {HTMLElement} el * @return {boolean} True, if element is valid. * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _isValidElement: function (el) { return el.classList.contains(this.widgetClass); @@ -911,7 +883,7 @@ * @method _isExtended * @return {boolean} True, if element is extended. * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _isExtended: function () { return !!this._data("extended"); @@ -922,7 +894,7 @@ * @method _extended * @param {boolean} flag Value for extended * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _extended: function (flag) { this._data("extended", flag); @@ -932,11 +904,11 @@ /** * This method gets indices prepared from parameter * or index of widget. - * @method _setIndex - * @param {HTMLElement} element element - * @param {string} value Indices to prepared + * @method _getIndex + * @param {string} [value] Indices to prepared + * @return {Array} Indices * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _setIndex: function (element, value) { var options = this.options; @@ -952,7 +924,7 @@ * @param {HTMLElement} el Element * @return {Object} Offset with "top" and "left" properties * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _getOffset: function( el ) { var left=0, top=0 ; @@ -973,26 +945,10 @@ * @method _getContainer * @return {HTMLElement} Container * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _getContainer: function() { - var container = this.options.container, - element = this.element, - parentElement = element.parentNode, - overflow; - - if (!container) { - while (parentElement && parentElement != document.body) { - overflow = doms.getCSSProperty(parentElement, "overflow-y"); - if (overflow === "scroll" || (overflow === "auto" && parentElement.scrollHeight > parentElement.clientHeight)) { - return parentElement; - } - parentElement = parentElement.parentNode; - } - container = element.parentNode; - } - - return container || element.parentNode; + return this.options.container || this.element.parentNode; }, /** @@ -1000,7 +956,7 @@ * @method _getPositionFromEvent * @return {Object} Position of event with properties "x" and "y" * @protected - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ _getPositionFromEvent: function( ev ) { return ev.type.search(/^touch/) !== -1 ? @@ -1013,7 +969,7 @@ * @method addEventListener * @param {string} type Name of event * @param {Function} listener Function to be executed - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ addEventListener: function (type, listener) { this.element.addEventListener(type, listener); @@ -1024,7 +980,7 @@ * @method removeEventListener * @param {string} type Name of event * @param {Function} listener Function to be removed - * @member ns.widget.core.IndexScrollbar + * @member ns.widget.wearable.IndexScrollbar */ removeEventListener: function (type, listener) { this.element.removeEventListener(type, listener); @@ -1033,7 +989,14 @@ }); // definition - ns.widget.core.IndexScrollbar = IndexScrollbar; + ns.widget.wearable.IndexScrollbar = IndexScrollbar; + engine.defineWidget( + "IndexScrollbar", + ".ui-indexscrollbar", + [], + IndexScrollbar, + "wearable" + ); //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); return IndexScrollbar; } diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller.js b/tau/src/js/profile/wearable/widget/wearable/scroller.js index d6bb5188..90f961e8 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller.js @@ -1,18 +1,6 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /** * #Scroller namespace diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/Scroller.js b/tau/src/js/profile/wearable/widget/wearable/scroller/Scroller.js index b1b86b4c..dbb15abd 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/Scroller.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/Scroller.js @@ -1,18 +1,6 @@ /*global window, define, Event, console, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -94,6 +82,9 @@ this.bouncingEffect = null; this.scrollbar = null; + this.width = 0; + this.height = 0; + this.scrollerWidth = 0; this.scrollerHeight = 0; this.scrollerOffsetX = 0; @@ -127,7 +118,7 @@ */ this.options = utilsObject.merge({}, this.options, { scrollDelay: 0, - threshold: 30, + threshold: 10, scrollbar: "", useBouncingEffect: false, orientation: "vertical" // vertical or horizontal, @@ -135,22 +126,16 @@ }; prototype._init = function () { - var options = this.options, - scrollerChildren = this.scroller.children, - elementStyle = this.element.style, - scrollerStyle = this.scroller.style, - elementHalfWidth = this.element.offsetWidth / 2, - elementHalfHeight = this.element.offsetHeight / 2; - - this.orientation = this.orientation ? this.orientation : - (options.orientation === "horizontal" ? Scroller.Orientation.HORIZONTAL : Scroller.Orientation.VERTICAL); + this.width = this.element.offsetWidth; + this.height = this.element.offsetHeight; + this.scrollerWidth = this.scroller.offsetWidth; this.scrollerHeight = this.scroller.offsetHeight; - this.maxScrollX = elementHalfWidth - this.scrollerWidth + scrollerChildren[scrollerChildren.length - 1].offsetWidth / 2; - this.maxScrollY = elementHalfHeight - this.scrollerHeight + scrollerChildren[scrollerChildren.length - 1].offsetHeight / 2; - this.minScrollX = elementHalfWidth - scrollerChildren[0].offsetWidth / 2; - this.minScrollY = elementHalfHeight - scrollerChildren[0].offsetHeight / 2; + this.maxScrollX = this.width - this.scrollerWidth; + this.maxScrollY = this.height - this.scrollerHeight; + + this.orientation = this.options.orientation === "horizontal" ? Scroller.Orientation.HORIZONTAL : Scroller.Orientation.VERTICAL; this.scrolled = false; this.touching = true; @@ -161,15 +146,24 @@ } else { this.maxScrollX = 0; } + + this._initLayout(); + this._initScrollbar(); + this._initBouncingEffect(); + }; + + prototype._initLayout = function () { + var elementStyle = this.element.style, + scrollerStyle = this.scroller.style; + elementStyle.overflow = "hidden"; elementStyle.position = "relative"; + scrollerStyle.position = "absolute"; scrollerStyle.top = "0px"; scrollerStyle.left = "0px"; scrollerStyle.width = this.scrollerWidth + "px"; scrollerStyle.height = this.scrollerHeight + "px"; - this._initScrollbar(); - this._initBouncingEffect(); }; prototype._initScrollbar = function () { @@ -216,10 +210,7 @@ scrollerStyle.height = ""; scrollerStyle["-webkit-transform"] = ""; - scrollerStyle["-moz-transition"] = ""; - scrollerStyle["-ms-transition"] = ""; - scrollerStyle["-o-transition"] = ""; - scrollerStyle["transition"] = ""; + scrollerStyle["-webkit-transition"] = ""; } }; @@ -305,34 +296,18 @@ prototype._translate = function (x, y, duration) { var translate, - transition = { - normal: "none", - webkit: "none", - moz: "none", - ms: "none", - o: "none" - }, + transition, scrollerStyle = this.scrollerStyle; - if (duration) { - transition.normal = "transform " + duration / 1000 + "s ease-out"; - transition.webkit = "-webkit-transform " + duration / 1000 + "s ease-out"; - transition.moz = "-moz-transform " + duration / 1000 + "s ease-out"; - transition.ms = "-ms-transform " + duration / 1000 + "s ease-out"; - transition.o = "-o-transform " + duration / 1000 + "s ease-out"; + if ( !duration ) { + transition = "none"; + } else { + transition = "-webkit-transform " + duration / 1000 + "s ease-out"; } translate = "translate3d(" + x + "px," + y + "px, 0)"; - scrollerStyle["-webkit-transform"] = - scrollerStyle["-moz-transform"] = - scrollerStyle["-ms-transform"] = - scrollerStyle["-o-transform"] = - scrollerStyle.transform = translate; - scrollerStyle.transition = transition.normal; - scrollerStyle["-webkit-transition"] = transition.webkit; - scrollerStyle["-moz-transition"] = transition.moz; - scrollerStyle["-ms-transition"] = transition.ms; - scrollerStyle["-o-transition"] = transition.o; + scrollerStyle["-webkit-transform"] = translate; + scrollerStyle["-webkit-transition"] = transition; this.scrollerOffsetX = window.parseInt(x, 10); this.scrollerOffsetY = window.parseInt(y, 10); @@ -369,11 +344,11 @@ newY += e.detail.estimatedDeltaY; } - if ( newX > this.minScrollX || newX < this.maxScrollX ) { - newX = newX > this.minScrollX ? this.minScrollX : this.maxScrollX; + if ( newX > 0 || newX < this.maxScrollX ) { + newX = newX > 0 ? 0 : this.maxScrollX; } - if ( newY > this.minScrollY || newY < this.maxScrollY ) { - newY = newY > this.minScrollY ? this.minScrollY : this.maxScrollY; + if ( newY > 0 || newY < this.maxScrollY ) { + newY = newY > 0 ? 0 : this.maxScrollY; } if ( newX !== this.scrollerOffsetX || newY !== this.scrollerOffsetY ) { diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/effect.js b/tau/src/js/profile/wearable/widget/wearable/scroller/effect.js index 2c456d43..478819d9 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/effect.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/effect.js @@ -1,18 +1,6 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /* * #Effect namespace diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/effect/Bouncing.js b/tau/src/js/profile/wearable/widget/wearable/scroller/effect/Bouncing.js index df0ba3ac..29e2de84 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/effect/Bouncing.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/effect/Bouncing.js @@ -1,18 +1,6 @@ -/*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/*global window, define, Event, console, ns */ +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -31,96 +19,61 @@ function () { //>>excludeEnd("tauBuildExclude"); // scroller.start event trigger when user try to move scroller - var utilsObject = ns.util.object, - selectors = ns.util.selectors, - Bouncing = function (scrollerElement, options) { - var self = this; - self._orientation = null; - self._maxValue = null; - - self._container = null; - self._minEffectElement = null; - self._maxEffectElement = null; - - self.options = utilsObject.merge({}, Bouncing.defaults, {scrollEndEffectArea: ns.getConfig("scrollEndEffectArea", Bouncing.defaults.scrollEndEffectArea)}); + var Bouncing = function (scrollerElement, options) { + this.orientation = null; + this.maxValue = null; + + this.container = null; + this.minEffectElement = null; + this.maxEffectElement = null; /** * target element for bouncing effect * @property {HTMLElement} targetElement * @member ns.widget.wearable.scroller.effect.Bouncing */ - self._targetElement = null; + this.targetElement = null; - self._isShow = false; - self._isDrag = false; - self._isShowAnimating = false; - self._isHideAnimating = false; + this.isShow = false; + this.isDrag = false; + this.isShowAnimating = false; + this.isHideAnimating = false; - self._create(scrollerElement, options); - }, - endEffectAreaType = { - content: "content", - screen: "screen" - }, - defaults = { - duration: 500, - scrollEndEffectArea : "content" - }, - classes = { - bouncingEffect: "ui-scrollbar-bouncing-effect", - page: "ui-page", - left: "ui-left", - right: "ui-right", - top: "ui-top", - bottom: "ui-bottom", - hide: "ui-hide", - show: "ui-show" + this._create(scrollerElement, options); }; - Bouncing.defaults = defaults; - Bouncing.prototype = { + options: { + className: "ui-scrollbar-bouncing-effect", + duration: 500 + }, + _create: function (scrollerElement, options) { - var self = this; - if( self.options.scrollEndEffectArea === endEffectAreaType.content ){ - self._container = scrollerElement; - } else { - self._container = selectors.getClosestByClass(scrollerElement, classes.page); - } + this.container = scrollerElement; - self._orientation = options.orientation; - self._maxValue = self._getValue( options.maxScrollX, options.maxScrollY ); + this.orientation = options.orientation; + this.maxValue = this._getValue( options.maxScrollX, options.maxScrollY ); - self._initLayout(); + this._initLayout(); }, _initLayout: function() { - var self = this, - minElement = self._minEffectElement = document.createElement("DIV"), - maxElement = self._maxEffectElement = document.createElement("DIV"), - className = classes.bouncingEffect; - - if ( self._orientation === ns.widget.wearable.scroller.Scroller.Orientation.HORIZONTAL ) { - minElement.className = className + " " + classes.left; - maxElement.className = className + " " + classes.right; + var minElement = this.minEffectElement = document.createElement("DIV"), + maxElement = this.maxEffectElement = document.createElement("DIV"), + className = this.options.className; + + if ( this.orientation === ns.widget.wearable.scroller.Scroller.Orientation.HORIZONTAL ) { + minElement.className = className + " ui-left"; + maxElement.className = className + " ui-right"; } else { - minElement.className = className + " " + classes.top; - maxElement.className = className + " " + classes.bottom; + minElement.className = className + " ui-top"; + maxElement.className = className + " ui-bottom"; } - self._container.appendChild( minElement ); - self._container.appendChild( maxElement ); + this.container.appendChild( minElement ); + this.container.appendChild( maxElement ); - minElement.addEventListener("animationEnd", this); minElement.addEventListener("webkitAnimationEnd", this); - minElement.addEventListener("mozAnimationEnd", this); - minElement.addEventListener("msAnimationEnd", this); - minElement.addEventListener("oAnimationEnd", this); - - maxElement.addEventListener("animationEnd", this); maxElement.addEventListener("webkitAnimationEnd", this); - maxElement.addEventListener("mozAnimationEnd", this); - maxElement.addEventListener("msAnimationEnd", this); - maxElement.addEventListener("oAnimationEnd", this); }, /** @@ -131,7 +84,7 @@ * @member ns.widget.wearable.scroller.effect.Bouncing */ drag: function( x, y ) { - this._isDrag = true; + this.isDrag = true; this._checkAndShow( x, y ); }, @@ -141,12 +94,11 @@ * @member ns.widget.wearable.scroller.effect.Bouncing */ dragEnd: function() { - var self = this; - if ( self._isShow && !self._isShowAnimating && !self._isHideAnimating ) { - self._beginHide(); + if ( this.isShow && !this.isShowAnimating && !this.isHideAnimating ) { + this._beginHide(); } - self._isDrag = false; + this.isDrag = false; }, /** @@ -155,10 +107,9 @@ * @member ns.widget.wearable.scroller.effect.Bouncing */ show: function() { - var self = this; - if ( self._targetElement ) { - self._isShow = true; - self._beginShow(); + if ( this.targetElement ) { + this.isShow = true; + this._beginShow(); } }, @@ -168,83 +119,77 @@ * @member ns.widget.wearable.scroller.effect.Bouncing */ hide: function() { - var self = this; - if ( self._isShow ) { - self._minEffectElement.style.display = "none"; - self._maxEffectElement.style.display = "none"; - self._targetElement.classList.remove(classes.hide); - self._targetElement.classList.remove(classes.show); + if ( this.isShow ) { + this.minEffectElement.style.display = "none"; + this.maxEffectElement.style.display = "none"; + this.targetElement.classList.remove("ui-hide"); + this.targetElement.classList.remove("ui-show"); } - self._isShow = false; - self._isShowAnimating = false; - self._isHideAnimating = false; - self._targetElement = null; + this.isShow = false; + this.isShowAnimating = false; + this.isHideAnimating = false; + this.targetElement = null; }, _checkAndShow: function( x, y ) { - var self = this, - val = self._getValue(x, y); - if ( !self._isShow ) { + var val = this._getValue(x, y); + if ( !this.isShow ) { if ( val >= 0 ) { - self._targetElement = self._minEffectElement; - self.show(); - } else if ( val <= self._maxValue ) { - self._targetElement = self._maxEffectElement; - self.show(); + this.targetElement = this.minEffectElement; + this.show(); + } else if ( val <= this.maxValue ) { + this.targetElement = this.maxEffectElement; + this.show(); } - } else if ( self._isShow && !self._isDrag && !self._isShowAnimating && !self._isHideAnimating ) { - self._beginHide(); + } else if ( this.isShow && !this.isDrag && !this.isShowAnimating && !this.isHideAnimating ) { + this._beginHide(); } }, _getValue: function(x, y) { - return this._orientation === ns.widget.wearable.scroller.Scroller.Orientation.HORIZONTAL ? x : y; + return this.orientation === ns.widget.wearable.scroller.Scroller.Orientation.HORIZONTAL ? x : y; }, _beginShow: function() { - var self = this; - if ( !self._targetElement || self._isShowAnimating ) { + if ( !this.targetElement || this.isShowAnimating ) { return; } - self._targetElement.style.display = "block"; + this.targetElement.style.display = "block"; - self._targetElement.classList.remove(classes.hide); - self._targetElement.classList.add(classes.show); + this.targetElement.classList.remove("ui-hide"); + this.targetElement.classList.add("ui-show"); - self._isShowAnimating = true; - self._isHideAnimating = false; + this.isShowAnimating = true; + this.isHideAnimating = false; }, _finishShow: function() { - var self = this; - self._isShowAnimating = false; - if ( !self._isDrag ) { - self._targetElement.classList.remove(classes.show); - self._beginHide(); + this.isShowAnimating = false; + if ( !this.isDrag ) { + this.targetElement.classList.remove("ui-show"); + this._beginHide(); } }, _beginHide: function() { - var self = this; - if ( self._isHideAnimating ) { + if ( this.isHideAnimating ) { return; } - self._targetElement.classList.remove(classes.show); - self._targetElement.classList.add(classes.hide); + this.targetElement.classList.remove("ui-show"); + this.targetElement.classList.add("ui-hide"); - self._isHideAnimating = true; - self._isShowAnimating = false; + this.isHideAnimating = true; + this.isShowAnimating = false; }, _finishHide: function() { - var self = this; - self._isHideAnimating = false; - self._targetElement.classList.remove(classes.hide); - self.hide(); - self._checkAndShow(); + this.isHideAnimating = false; + this.targetElement.classList.remove("ui-hide"); + this.hide(); + this._checkAndShow(); }, /** @@ -253,10 +198,10 @@ * @member ns.widget.wearable.scroller.effect.Bouncing */ handleEvent: function( event ) { - if (event.type.toLowerCase().indexOf("animationend") > -1) { - if ( this._isShowAnimating ) { + if (event.type === "webkitAnimationEnd") { + if ( this.isShowAnimating ) { this._finishShow(); - } else if ( this._isHideAnimating ) { + } else if ( this.isHideAnimating ) { this._finishHide(); } } @@ -268,33 +213,20 @@ * @member ns.widget.wearable.scroller.effect.Bouncing */ destroy: function() { - var self = this, - maxEffectElement = this._maxEffectElement, - minEffectElement = this._minEffectElement; - - minEffectElement.removeEventListener("animationEnd", this); - minEffectElement.removeEventListener("webkitAnimationEnd", this); - minEffectElement.removeEventListener("mozAnimationEnd", this); - minEffectElement.removeEventListener("msAnimationEnd", this); - minEffectElement.removeEventListener("oAnimationEnd", this); - - maxEffectElement.removeEventListener("animationEnd", this); - maxEffectElement.removeEventListener("webkitAnimationEnd", this); - maxEffectElement.removeEventListener("mozAnimationEnd", this); - maxEffectElement.removeEventListener("msAnimationEnd", this); - maxEffectElement.removeEventListener("oAnimationEnd", this); - - self._container.removeChild( minEffectElement ); - self._container.removeChild( maxEffectElement ); - - self._container = null; - self._minEffectElement = null; - self._maxEffectElement = null; - self._targetElement = null; - - self._isShow = null; - self._orientation = null; - self._maxValue = null; + this.minEffectElement.removeEventListener("webkitAnimationEnd", this); + this.maxEffectElement.removeEventListener("webkitAnimationEnd", this); + + this.container.removeChild( this.minEffectElement ); + this.container.removeChild( this.maxEffectElement ); + + this.container = null; + this.minEffectElement = null; + this.maxEffectElement = null; + this.targetElement = null; + + this.isShow = null; + this.orientation = null; + this.maxValue = null; } }; diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar.js b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar.js index 31748c1b..2d91f7c4 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar.js @@ -1,18 +1,6 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /* * #Scrollbar namespace diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/ScrollBar.js b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/ScrollBar.js index 94c02066..b957cb9a 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/ScrollBar.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/ScrollBar.js @@ -1,18 +1,6 @@ /*global window, define, Event, console, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -32,7 +20,7 @@ "../scrollbar", "./type/bar", "../../../../../../core/widget/BaseWidget", - "../../../../../../core/widget/core/Page", + "../../Page", "../Scroller" ], function () { @@ -44,11 +32,6 @@ utilsObject = ns.util.object, selectors = ns.util.selectors, scrollbarType = ns.widget.wearable.scroller.scrollbar.type, - Classes = { - wrapperClass: "ui-scrollbar-bar-type", - barClass: "ui-scrollbar-indicator", - orientationClass: "ui-scrollbar-" - }, Scroller = ns.widget.wearable.scroller.Scroller, ScrollerScrollBar = function () { @@ -57,7 +40,7 @@ this.barElement = null; this.container = null; - this.view = null; + this.clip = null; this.options = {}; this.type = null; @@ -70,9 +53,8 @@ }; prototype._build = function (scrollElement) { - this.clip = scrollElement; - this.view = scrollElement.children[0]; - this.firstChild = this.view.children[0]; + this.container = scrollElement; + this.clip = scrollElement.children[0]; return scrollElement; }; @@ -107,33 +89,30 @@ prototype._createScrollbar = function () { var orientation = this.options.orientation, wrapper = document.createElement("DIV"), - bar = document.createElement("span"), - view = this.view, - clip = this.clip, - firstChild = this.firstChild, - type = this.type; + bar = document.createElement("span"); - clip.appendChild(wrapper); wrapper.appendChild(bar); - wrapper.classList.add(Classes.wrapperClass); - bar.className = Classes.barClass; - if (orientation === Scroller.Orientation.HORIZONTAL) { - type.setScrollbar(view.offsetWidth, firstChild.offsetWidth, clip.offsetWidth); - bar.style.width = type.getScrollbarSize() + "px"; - wrapper.classList.add(Classes.orientationClass + "horizontal"); - } else { - type.setScrollbar(view.offsetHeight, firstChild.offsetHeight, clip.offsetHeight); - bar.style.height = type.getScrollbarSize() + "px"; - wrapper.classList.add(Classes.orientationClass + "vertical"); - } + this.type.insertAndDecorate({ + orientation: orientation, + wrapper: wrapper, + bar: bar, + container: this.container, + clip: this.clip + }); this.wrapper = wrapper; this.barElement = bar; }; prototype._removeScrollbar = function () { - this.clip.removeChild(this.wrapper); + this.type.remove({ + orientation: this.options.orientation, + wrapper: this.wrapper, + bar: this.barElement, + container: this.container, + clip: this.clip + }); this.wrapper = null; this.barElement = null; @@ -156,13 +135,7 @@ prototype.translate = function (offset, duration, autoHidden) { var orientation = this.options.orientation, translate, - transition = { - normal: "none", - webkit: "none", - moz: "none", - ms: "none", - o: "none" - }, + transition, barStyle, endDelay; @@ -177,26 +150,16 @@ offset = this.type.offset( orientation, offset ); barStyle = this.barElement.style; - if (duration) { - transition.normal = "transform " + duration / 1000 + "s ease-out"; - transition.webkit = "-webkit-transform " + duration / 1000 + "s ease-out"; - transition.moz = "-moz-transform " + duration / 1000 + "s ease-out"; - transition.ms = "-ms-transform " + duration / 1000 + "s ease-out"; - transition.o = "-o-transform " + duration / 1000 + "s ease-out"; + if ( !duration ) { + transition = "none"; + } else { + transition = "-webkit-transform " + duration / 1000 + "s ease-out"; } translate = "translate3d(" + offset.x + "px," + offset.y + "px, 0)"; - barStyle["-webkit-transform"] = - barStyle["-moz-transform"] = - barStyle["-ms-transform"] = - barStyle["-o-transform"] = - barStyle.transform = translate; - barStyle["-webkit-transition"] = transition.webkit; - barStyle["-moz-transition"] = transition.moz; - barStyle["-ms-transition"] = transition.ms; - barStyle["-o-transition"] = transition.o; - barStyle.transition = transition.normal; + barStyle["-webkit-transform"] = translate; + barStyle["-webkit-transition"] = transition; if ( !this.started ) { this._start(); @@ -244,7 +207,7 @@ switch(event.type) { case "visibilitychange": - page = selectors.getClosestBySelector(this.container, "." + ns.widget.core.Page.classes.uiPage); + page = selectors.getClosestBySelector(this.container, "." + ns.widget.wearable.Page.classes.uiPage); if (document.visibilityState === "visible" && page === ns.activePage) { this.refresh(); } @@ -266,8 +229,8 @@ document.removeEventListener("visibilitychange", this); this.options = null; + this.container = null; this.clip = null; - this.view = null; }; ScrollerScrollBar.prototype = prototype; diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type.js b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type.js index 422d3da9..e7dda312 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type.js @@ -1,18 +1,6 @@ /*global window, define, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /* * #type namespace diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/bar.js b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/bar.js index fe1cbf22..fa0ea658 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/bar.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/bar.js @@ -1,18 +1,6 @@ /*global window, define, Event, console, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -41,34 +29,66 @@ type.bar = utilsObject.merge({}, typeInterface, { options: { + wrapperClass: "ui-scrollbar-bar-type", + barClass: "ui-scrollbar-indicator", + orientationClass: "ui-scrollbar-", + margin: 2, animationDuration: 500 }, /** - * @method setScrollbar - * @param viewLayout - * @param firstChildLayout - * @param clipLayout + * + * @method insertAndDecorate + * @param data * @static * @member ns.widget.wearable.scroller.scrollbar.type.bar */ + insertAndDecorate: function( data ) { + var scrollbarElement = data.wrapper, + barElement = data.bar, + container = data.container, + clip = data.clip, + orientation = data.orientation, + margin = this.options.margin, + clipSize = orientation === Scroller.Orientation.VERTICAL ? clip.offsetHeight : clip.offsetWidth, + containerSize = orientation === Scroller.Orientation.VERTICAL ? container.offsetHeight : container.offsetWidth, + orientationClass = this.options.orientationClass + (orientation === Scroller.Orientation.VERTICAL ? "vertical" : "horizontal"), + barStyle = barElement.style; - setScrollbar: function(viewLayout, firstChildLayout, clipLayout) { - this._viewLayout = viewLayout; - this._clipLayout = clipLayout; - this._firstChildLayout = firstChildLayout; - this._ratio = clipLayout / firstChildLayout; + this.containerSize = containerSize; + this.maxScrollOffset = clipSize - containerSize; + this.scrollZoomRate = containerSize / clipSize; + this.barSize = window.parseInt( containerSize / (clipSize/containerSize) ) - ( margin * 2 ); + + scrollbarElement.className = this.options.wrapperClass + " " + orientationClass; + barElement.className = this.options.barClass; + + if ( orientation === Scroller.Orientation.VERTICAL ) { + barStyle.height = this.barSize + "px"; + barStyle.top = "0px"; + } else { + barStyle.width = this.barSize + "px"; + barStyle.left = "0px"; + } + + container.appendChild(scrollbarElement); }, /** - * @method getScrollbarSize - * @return scrollbar size + * @method insertAndDecorate + * @param data * @static * @member ns.widget.wearable.scroller.scrollbar.type.bar */ - getScrollbarSize: function() { - return this._firstChildLayout / this._viewLayout * this._firstChildLayout * this._ratio; + remove: function (data) { + var scrollbarElement = data.wrapper, + container = data.container; + + if ( container && scrollbarElement) { + container.removeChild(scrollbarElement); + } }, + /** * @method offset * @param orientation @@ -79,7 +99,9 @@ offset: function( orientation, offset ) { var x, y; - offset = offset * this._clipLayout / this._viewLayout; + offset = offset !== this.maxScrollOffset ? + offset * this.scrollZoomRate : + this.containerSize - this.barSize - this.options.margin * 2; if ( orientation === Scroller.Orientation.VERTICAL ) { x = 0; @@ -104,11 +126,7 @@ start: function( scrollbarElement/*, barElement */) { var style = scrollbarElement.style, duration = this.options.animationDuration; - style["-webkit-transition"] = - style["-moz-transition"] = - style["-ms-transition"] = - style["-o-transition"] = - style.transition = "opacity " + duration / 1000 + "s ease"; + style["-webkit-transition"] = "opacity " + duration / 1000 + "s ease"; style.opacity = 1; }, @@ -121,11 +139,7 @@ end: function( scrollbarElement/*, barElement */) { var style = scrollbarElement.style, duration = this.options.animationDuration; - style["-webkit-transition"] = - style["-moz-transition"] = - style["-ms-transition"] = - style["-o-transition"] = - style.transition = "opacity " + duration / 1000 + "s ease"; + style["-webkit-transition"] = "opacity " + duration / 1000 + "s ease"; style.opacity = 0; } }); diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/interface.js b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/interface.js index 6d1a3cd3..60008443 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/interface.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/interface.js @@ -1,18 +1,6 @@ /*global window, define, Event, console, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** @@ -39,7 +27,7 @@ * @static * @member ns.widget.wearable.scroller.scrollbar.type.interface */ - setScrollbarLayout: function (/* options */) { + insertAndDecorate: function (/* options */) { }, /** * Removes element. diff --git a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/tab.js b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/tab.js index 51709849..d62f83cf 100644 --- a/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/tab.js +++ b/tau/src/js/profile/wearable/widget/wearable/scroller/scrollbar/type/tab.js @@ -1,18 +1,6 @@ /*global window, define, Event, console, ns */ -/* - * Copyright (c) 2015 Samsung Electronics Co., Ltd - * - * Licensed under the Flora License, Version 1.1 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://floralicense.org/license/ - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. +/* Copyright 2010 - 2014 Samsung Electronics Co., Ltd. + * License : MIT License V2 */ /*jslint nomen: true, plusplus: true */ /** diff --git a/tau/src/js/tools/performance.js b/tau/src/js/tools/performance.js deleted file mode 100644 index 2cc924ff..00000000 --- a/tau/src/js/tools/performance.js +++ /dev/null @@ -1,121 +0,0 @@ -/*global define, ns, tizen */ -(function (ns, tizen) { - "use strict"; - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - define(function () { - //>>excludeEnd("tauBuildExclude"); - - window.tauPerf = { - phantomRun: window.callPhantom && window._phantom, - collect: function (type, section, stepName, stepTime, stepDuration) { - if (this.phantomRun) { - window.callPhantom({ - type: type, - section: section, - stepName: stepName, - stepTime: stepTime, - stepDuration: stepDuration - }); - } - }, - saveToFile: !!(tizen && tizen.filesystem), - print: function () { - if (!this.phantomRun) { - console.log.apply(console, arguments); - } - }, - data: {}, - steps: {}, - start: function (sectionName) { - var text; - - this.data[sectionName] = window.performance.now(); - this.steps[sectionName] = []; - - text = "[TAU Perf][%c" + sectionName + "%c][start] at %c" + this.data[sectionName].toFixed(3); - - this.print(text, "color:blue", "color:inherit", "font-weight: bold"); - - this.collect("performance.data.start", sectionName, 'start', this.data[sectionName]); - }, - get: function (sectionName, stepName) { - var text, - stepDuration, - timeNow = window.performance.now(); - - if (this.data[sectionName]) { - stepDuration = timeNow - this.data[sectionName]; - text = "[TAU Perf][%c" + sectionName + "%c] %c+" + stepDuration.toFixed(3) + "ms%c"; - - if (stepName) { - text += " | [Step] " + stepName; - //rawText += " | [Step] " + stepName; - } else { - stepName = "Step" + this.steps[sectionName].length; - } - - this.steps[sectionName].push({ - name: stepName, - time: timeNow, - duration: stepDuration - }); - - this.print(text, "color:blue", "color:inherit", "font-weight: bold", "font-weight:normal"); - - this.collect("performance.data", sectionName, stepName, timeNow, stepDuration); - - return text; - } - }, - finish: function () { - var self = this; - - if (self.saveToFile) { - tizen.filesystem.resolve("documents", function (documents) { - var resultFile, - file = "tauperf_result.json"; - - try { - // On some tizen version this throws error and on other just returns null - resultFile = documents.resolve(file); - - if (resultFile === null) { - resultFile = documents.createFile(file); - } - } catch (e) { - resultFile = documents.createFile(file); - } - - // Save reference to done - self.start("performance.done"); - resultFile.openStream("w", function (fs) { - var stringToWrite = JSON.stringify({ - data: self.data, - steps: self.steps - }); - - fs.write(stringToWrite); - - fs.close(); - tizen.application.getCurrentApplication().exit(); - }, function (e) { - console.error("Problem with opening file for writing " + e.message); - }, "UTF-8"); - }, function(e) { - console.error("Error: " + e.message); - tizen.application.getCurrentApplication.exit(); - }, "rw"); - } else { - self.collect("performance.done"); - } - } - }; - - window.tauPerf.start("performance.start"); - - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); - }); - //>>excludeEnd("tauBuildExclude"); - -}(ns, window.tizen)); diff --git a/tau/src/js/tv.js b/tau/src/js/tv.js index 7a6ffd7f..31e839bd 100644 --- a/tau/src/js/tv.js +++ b/tau/src/js/tv.js @@ -1,4 +1,4 @@ -/*global define, ns */ +/*global define */ /** * #Tizen Advanced UI Framework * @@ -56,18 +56,15 @@ * @title Tizen Advanced UI Framework */ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); -(function (ns) { +(function () { "use strict"; define( [ "require", - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - "./tools/performance", - //>>excludeEnd("tauPerformance") "./core/core", "./core/config", "./profile/tv/config", - "./core/info", + "./profile/wearable/defaults", "./core/engine", // widget list "./core/util/anchorHighlight", @@ -79,27 +76,18 @@ "./profile/wearable/widget/wearable/VirtualGrid", "./profile/tv/widget/PageContainer", "./profile/tv/widget/Drawer", - "./core/router/Router", - "./core/router/route/page", - "./core/router/route/popup", - "./core/router/route/drawer", + "./profile/wearable/router/Router", + "./profile/wearable/router/route/page", + "./profile/wearable/router/route/popup", "./profile/tv/router/route/dynamic", - "./core/router/history", + "./profile/wearable/router/history", "./profile/wearable/expose", "./profile/tv/widget/TextInput", - "./profile/tv/widget/SpinControl", - "./profile/tv/widget/TimeInput", - "./profile/tv/widget/DateInput", "./profile/tv/widget/Listdivider", "./profile/tv/widget/Checkboxradio", - "./profile/tv/widget/SearchBar", "./profile/tv/widget/Progress", - "./profile/tv/widget/SelectMenu", "./profile/mobile/widget/mobile/TabBar", "./profile/tv/widget/ControlGroup", - "./profile/tv/widget/ScrollHandler", - "./profile/tv/widget/HomeBar", - "./profile/tv/widget/ContextualMenu", // Modules to be loaded after "./core/init", //documentation pages @@ -113,15 +101,11 @@ "./profile/tv/page/design/elements", "./profile/tv/page/design/navigation", // tv differences - "./profile/tv/page/differences/introduction", - "./core/decorator/focusAnimation", - "./core/decorator/marquee" + "./profile/tv/page/differences/introduction" ], - function () { - //>>excludeEnd("tauBuildExclude"); - ns.info.profile = "tv"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + function ( ) { + return; } ); -}(ns)); +}()); //>>excludeEnd("tauBuildExclude"); diff --git a/tau/src/js/wearable.js b/tau/src/js/wearable.js index 01a2acbe..069dde57 100644 --- a/tau/src/js/wearable.js +++ b/tau/src/js/wearable.js @@ -1,64 +1,44 @@ -/*global define, ns */ +/*global define */ //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); -(function (ns) { +(function () { "use strict"; define( [ "require", - //>>excludeStart("tauPerformance", pragmas.tauPerformance); - "./tools/performance", - //>>excludeEnd("tauPerformance"); "./core/core", "./core/config", - "./core/support/tizen", "./profile/wearable/config", - "./core/info", + "./profile/wearable/defaults", "./core/engine", // widget list "./core/util/anchorHighlight", - "./core/widget/core/PageContainer", - "./core/widget/core/Button", - "./core/widget/core/Checkboxradio", - "./core/widget/core/Marquee", - "./core/widget/core/viewswitcher/ViewSwitcher", - "./profile/wearable/widget/wearable/Page", - "./profile/wearable/widget/wearable/Popup", - "./profile/wearable/widget/wearable/Drawer", - "./profile/wearable/widget/wearable/CircleProgressBar", + "./core/widget/core/ContextPopup", + "./profile/wearable/widget/wearable/Button", + "./profile/wearable/widget/wearable/Checkboxradio", "./profile/wearable/widget/wearable/Listview", - "./profile/wearable/widget/wearable/IndexScrollbar", - "./profile/wearable/widget/wearable/CircularIndexScrollbar", + "./profile/wearable/widget/wearable/Page", + "./profile/wearable/widget/wearable/PageContainer", + "./profile/wearable/widget/wearable/indexscrollbar/IndexScrollbar", "./profile/wearable/widget/wearable/Progress", "./profile/wearable/widget/wearable/Progressing", "./profile/wearable/widget/wearable/ToggleSwitch", "./profile/wearable/widget/wearable/VirtualListview", "./profile/wearable/widget/wearable/SectionChanger", "./profile/wearable/widget/wearable/VirtualGrid", - "./profile/wearable/widget/wearable/SnapListview", "./profile/wearable/widget/wearable/SwipeList", "./profile/wearable/widget/wearable/scroller/Scroller", "./profile/wearable/widget/wearable/scroller/scrollbar/ScrollBar", - "./profile/wearable/widget/wearable/PageIndicator", - "./profile/wearable/widget/wearable/Selector", - "./profile/wearable/helper/SnapListStyle", - "./profile/wearable/helper/SnapListMarqueeStyle", - "./profile/wearable/helper/DrawerMoreStyle", - "./core/router/Router", - "./core/router/history", - "./core/router/route/page", - "./core/router/route/popup", - "./core/router/route/drawer", - "./profile/wearable/router/route/circularindexscrollbar", + "./profile/wearable/router/Router", + "./profile/wearable/router/route/page", + "./profile/wearable/router/route/popup", + "./profile/wearable/router/history", "./profile/wearable/expose", "./profile/wearable/backward", // Modules to be loaded after "./core/init" ], - function () { - //>>excludeEnd("tauBuildExclude"); - ns.info.profile = "wearable"; - //>>excludeStart("tauBuildExclude", pragmas.tauBuildExclude); + function ( ) { } ); -}(ns)); +}()); //>>excludeEnd("tauBuildExclude"); |
