Skip to content

M
mui
Commit cf92c3d8 authored by hbcui1984's avatar hbcui1984
Browse files
Options

编译为mui v2.0.0

parent 938f217a
Show whitespace changes
Inline Side-by-side
Showing with 2977 additions and 1044 deletions
dist/css/mui.css
View file @ cf92c3d8
/*!
* =====================================================
* Mui v1.9.0 (https://github.com/dcloudio/mui)
* Mui v2.0.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......
dist/css/mui.min.css
View file @ cf92c3d8
/*!
* =====================================================
* Mui v1.9.0 (https://github.com/dcloudio/mui)
* Mui v2.0.0 (https://github.com/dcloudio/mui)
* =====================================================
*//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{font:inherit;margin:0;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;outline:0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}body{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#efeff4;-webkit-overflow-scrolling:touch}a{text-decoration:none;color:#007aff}a:active{color:#0062cc}.mui-content{background-color:#efeff4;-webkit-overflow-scrolling:touch}.mui-bar-nav~.mui-content{padding-top:44px}.mui-bar-nav~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{top:44px}.mui-bar-header-secondary~.mui-content{padding-top:88px}.mui-bar-header-secondary~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{top:88px}.mui-bar-footer~.mui-content{padding-bottom:44px}.mui-bar-footer~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:44px}.mui-bar-footer-secondary~.mui-content{padding-bottom:88px}.mui-bar-footer-secondary~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:88px}.mui-bar-tab~.mui-content{padding-bottom:50px}.mui-bar-tab~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:50px}.mui-bar-footer-secondary-tab~.mui-content{padding-bottom:94px}.mui-bar-footer-secondary-tab~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:94px}.mui-content-padded{margin:10px}.mui-inline{display:inline-block;vertical-align:top}.mui-block{display:block!important}.mui-visibility{visibility:visible!important}.mui-hidden{display:none!important}.mui-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mui-ellipsis-2{display:-webkit-box;overflow:hidden;white-space:normal!important;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mui-table{display:table;width:100%;table-layout:fixed}.mui-table-cell{position:relative;display:table-cell}.mui-text-left{text-align:left!important}.mui-text-center{text-align:center!important}.mui-text-justify{text-align:justify!important}.mui-text-right{text-align:right!important}.mui-pull-left{float:left}.mui-pull-right{float:right}.mui-list-unstyled{padding-left:0;list-style:none}.mui-list-inline{margin-left:-5px;padding-left:0;list-style:none}.mui-list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}.mui-clearfix:after,.mui-clearfix:before{display:table;content:' '}.mui-clearfix:after{clear:both}.mui-bg-primary{background-color:#007aff}.mui-bg-positive{background-color:#4cd964}.mui-bg-negative{background-color:#dd524d}.mui-error{margin:88px 35px;padding:10px;border-radius:6px;background-color:#bbb}.mui-subtitle{font-size:15px}h1,h2,h3,h4,h5,h6{line-height:1;margin-top:5px;margin-bottom:5px}.mui-h1,h1{font-size:36px}.mui-h2,h2{font-size:30px}.mui-h3,h3{font-size:24px}.mui-h4,h4{font-size:18px}.mui-h5,h5{font-size:14px;font-weight:400;color:#8f8f94}.mui-h6,h6{font-size:12px;font-weight:400;color:#8f8f94}p{font-size:14px;margin-top:0;margin-bottom:10px;color:#8f8f94}.mui-col-xs-12{width:100%}.mui-col-xs-11{width:91.66666667%}.mui-col-xs-10{width:83.33333333%}.mui-col-xs-9{width:75%}.mui-col-xs-8{width:66.66666667%}.mui-col-xs-7{width:58.33333333%}.mui-col-xs-6{width:50%}.mui-col-xs-5{width:41.66666667%}.mui-col-xs-4{width:33.33333333%}.mui-col-xs-3{width:25%}.mui-col-xs-2{width:16.66666667%}.mui-col-xs-1{width:8.33333333%}@media (min-width:400px){.mui-col-sm-12{width:100%}.mui-col-sm-11{width:91.66666667%}.mui-col-sm-10{width:83.33333333%}.mui-col-sm-9{width:75%}.mui-col-sm-8{width:66.66666667%}.mui-col-sm-7{width:58.33333333%}.mui-col-sm-6{width:50%}.mui-col-sm-5{width:41.66666667%}.mui-col-sm-4{width:33.33333333%}.mui-col-sm-3{width:25%}.mui-col-sm-2{width:16.66666667%}.mui-col-sm-1{width:8.33333333%}}.mui-scroll-wrapper{position:absolute;z-index:1;top:0;bottom:0;left:0;overflow:hidden;width:100%;-webkit-backface-visibility:hidden}.mui-scroll{position:absolute;z-index:1;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden}.mui-scrollbar{position:absolute;z-index:9998;overflow:hidden;-webkit-transition:500ms;transition:500ms;transform:translateZ(0px);pointer-events:none;opacity:0}.mui-scrollbar-vertical{top:0;right:1px;bottom:2px;width:4px}.mui-scrollbar-vertical .mui-scrollbar-indicator{width:100%}.mui-scrollbar-horizontal{right:2px;bottom:0;left:2px;height:4px}.mui-scrollbar-horizontal .mui-scrollbar-indicator{height:100%}.mui-scrollbar-indicator{position:absolute;display:block;box-sizing:border-box;-webkit-transition:.01s cubic-bezier(.1,.57,.1,1);transition:.01s cubic-bezier(.1,.57,.1,1);transform:translate(0px,0) translateZ(0px);border:1px solid rgba(255,255,255,.80196);border-radius:2px;background:rgba(0,0,0,.39804)}.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll-wrapper,.mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll-wrapper{position:absolute;top:0;bottom:0;left:0;overflow:hidden;width:100%}.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll,.mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll{position:absolute;width:100%}.mui-plus-pullrefresh .mui-scroll-wrapper,.mui-plus-pullrefresh .mui-slider-group{position:static;top:auto;bottom:auto;left:auto;overflow:auto;width:auto}.mui-plus-pullrefresh .mui-slider-group{overflow:visible}.mui-plus-pullrefresh .mui-scroll{position:static;width:auto}.mui-off-canvas-wrap .mui-bar{position:absolute!important}.mui-off-canvas-wrap{position:relative;z-index:1;overflow:hidden;width:100%;height:100%}.mui-off-canvas-wrap .mui-inner-wrap{position:relative;z-index:1;width:100%;height:100%}.mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning{-webkit-transition:-webkit-transform 200ms ease;transition:transform 200ms ease}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-off-canvas-wrap.mui-active{overflow:hidden;height:100%}.mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop{position:absolute;z-index:998;top:0;right:0;bottom:0;left:0;display:block;transition:background 200ms ease;background:rgba(0,0,0,.4);box-shadow:-4px 0 4px rgba(0,0,0,.5),4px 0 4px rgba(0,0,0,.5);-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent}.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right{z-index:10000!important;-webkit-transform:translate3d(100%,0,0)}.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-left{z-index:10000!important;-webkit-transform:translate3d(-100%,0,0)}.mui-off-canvas-left,.mui-off-canvas-right{position:absolute;z-index:-1;top:0;bottom:0;visibility:hidden;box-sizing:content-box;width:70%;min-height:100%;background:#333;-webkit-backface-visibility:hidden;-webkit-overflow-scrolling:touch}.mui-off-canvas-left.mui-transitioning,.mui-off-canvas-right.mui-transitioning{-webkit-transition:-webkit-transform 200ms ease;transition:transform 200ms ease}.mui-off-canvas-left{left:0}.mui-off-canvas-right{right:0}.mui-loading .mui-spinner{display:block;margin:0 auto}.mui-spinner{display:inline-block;width:24px;height:24px;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:spinner-spin 1s step-end infinite;animation:spinner-spin 1s step-end infinite}.mui-spinner:after{display:block;width:100%;height:100%;content:'';background-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');background-repeat:no-repeat;background-position:50%;background-size:100%}.mui-spinner-white:after{background-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%23fff\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>')}@-webkit-keyframes spinner-spin{0%{-webkit-transform:rotate(0deg)}8.33333333%{-webkit-transform:rotate(30deg)}16.66666667%{-webkit-transform:rotate(60deg)}25%{-webkit-transform:rotate(90deg)}33.33333333%{-webkit-transform:rotate(120deg)}41.66666667%{-webkit-transform:rotate(150deg)}50%{-webkit-transform:rotate(180deg)}58.33333333%{-webkit-transform:rotate(210deg)}66.66666667%{-webkit-transform:rotate(240deg)}75%{-webkit-transform:rotate(270deg)}83.33333333%{-webkit-transform:rotate(300deg)}91.66666667%{-webkit-transform:rotate(330deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinner-spin{0%{transform:rotate(0deg)}8.33333333%{transform:rotate(30deg)}16.66666667%{transform:rotate(60deg)}25%{transform:rotate(90deg)}33.33333333%{transform:rotate(120deg)}41.66666667%{transform:rotate(150deg)}50%{transform:rotate(180deg)}58.33333333%{transform:rotate(210deg)}66.66666667%{transform:rotate(240deg)}75%{transform:rotate(270deg)}83.33333333%{transform:rotate(300deg)}91.66666667%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}.mui-btn,button,input[type=button],input[type=reset],input[type=submit]{font-size:14px;font-weight:400;line-height:1.42;position:relative;display:inline-block;margin-bottom:0;padding:6px 12px;cursor:pointer;-webkit-transition:all;transition:all;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;transition-duration:.2s;text-align:center;vertical-align:top;white-space:nowrap;color:#333;border:1px solid #ccc;border-radius:3px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;background-color:#fff;background-clip:padding-box}.mui-btn.mui-active:enabled,.mui-btn:enabled:active,button.mui-active:enabled,button:enabled:active,input[type=button].mui-active:enabled,input[type=button]:enabled:active,input[type=reset].mui-active:enabled,input[type=reset]:enabled:active,input[type=submit].mui-active:enabled,input[type=submit]:enabled:active{color:#fff;background-color:#929292}.mui-btn.mui-disabled,.mui-btn:disabled,button.mui-disabled,button:disabled,input[type=button].mui-disabled,input[type=button]:disabled,input[type=reset].mui-disabled,input[type=reset]:disabled,input[type=submit].mui-disabled,input[type=submit]:disabled{opacity:.6}.mui-btn-blue,.mui-btn-primary,input[type=submit]{color:#fff;border:1px solid #007aff;background-color:#007aff}.mui-btn-blue.mui-active:enabled,.mui-btn-blue:enabled:active,.mui-btn-primary.mui-active:enabled,.mui-btn-primary:enabled:active,input[type=submit].mui-active:enabled,input[type=submit]:enabled:active{color:#fff;border:1px solid #0062cc;background-color:#0062cc}.mui-btn-green,.mui-btn-positive,.mui-btn-success{color:#fff;border:1px solid #4cd964;background-color:#4cd964}.mui-btn-green.mui-active:enabled,.mui-btn-green:enabled:active,.mui-btn-positive.mui-active:enabled,.mui-btn-positive:enabled:active,.mui-btn-success.mui-active:enabled,.mui-btn-success:enabled:active{color:#fff;border:1px solid #2ac845;background-color:#2ac845}.mui-btn-warning,.mui-btn-yellow{color:#fff;border:1px solid #f0ad4e;background-color:#f0ad4e}.mui-btn-warning.mui-active:enabled,.mui-btn-warning:enabled:active,.mui-btn-yellow.mui-active:enabled,.mui-btn-yellow:enabled:active{color:#fff;border:1px solid #ec971f;background-color:#ec971f}.mui-btn-danger,.mui-btn-negative,.mui-btn-red{color:#fff;border:1px solid #dd524d;background-color:#dd524d}.mui-btn-danger.mui-active:enabled,.mui-btn-danger:enabled:active,.mui-btn-negative.mui-active:enabled,.mui-btn-negative:enabled:active,.mui-btn-red.mui-active:enabled,.mui-btn-red:enabled:active{color:#fff;border:1px solid #cf2d28;background-color:#cf2d28}.mui-btn-purple,.mui-btn-royal{color:#fff;border:1px solid #8a6de9;background-color:#8a6de9}.mui-btn-purple.mui-active:enabled,.mui-btn-purple:enabled:active,.mui-btn-royal.mui-active:enabled,.mui-btn-royal:enabled:active{color:#fff;border:1px solid #6641e2;background-color:#6641e2}.mui-btn-grey{color:#fff;border:1px solid #c7c7cc;background-color:#c7c7cc}.mui-btn-grey.mui-active:enabled,.mui-btn-grey:enabled:active{color:#fff;border:1px solid #acacb4;background-color:#acacb4}.mui-btn-outlined{background-color:transparent}.mui-btn-outlined.mui-btn-blue,.mui-btn-outlined.mui-btn-primary{color:#007aff}.mui-btn-outlined.mui-btn-green,.mui-btn-outlined.mui-btn-positive,.mui-btn-outlined.mui-btn-success{color:#4cd964}.mui-btn-outlined.mui-btn-warning,.mui-btn-outlined.mui-btn-yellow{color:#f0ad4e}.mui-btn-outlined.mui-btn-danger,.mui-btn-outlined.mui-btn-negative,.mui-btn-outlined.mui-btn-red{color:#dd524d}.mui-btn-outlined.mui-btn-purple,.mui-btn-outlined.mui-btn-royal{color:#8a6de9}.mui-btn-outlined.mui-btn-blue:enabled:active,.mui-btn-outlined.mui-btn-danger:enabled:active,.mui-btn-outlined.mui-btn-green:enabled:active,.mui-btn-outlined.mui-btn-negative:enabled:active,.mui-btn-outlined.mui-btn-positive:enabled:active,.mui-btn-outlined.mui-btn-primary:enabled:active,.mui-btn-outlined.mui-btn-purple:enabled:active,.mui-btn-outlined.mui-btn-red:enabled:active,.mui-btn-outlined.mui-btn-royal:enabled:active,.mui-btn-outlined.mui-btn-success:enabled:active,.mui-btn-outlined.mui-btn-warning:enabled:active,.mui-btn-outlined.mui-btn-yellow:enabled:active{color:#fff}.mui-btn-link{padding-top:6px;padding-bottom:6px;color:#007aff;border:0;background-color:transparent}.mui-btn-link.mui-active:enabled,.mui-btn-link:enabled:active{color:#0062cc;background-color:transparent}.mui-btn-block{font-size:18px;display:block;width:100%;margin-bottom:10px;padding:15px 0}.mui-btn .mui-badge{font-size:14px;margin:-2px -4px -2px 4px;background-color:rgba(0,0,0,.15)}.mui-btn .mui-badge-inverted,.mui-btn:enabled:active .mui-badge-inverted{background-color:transparent}.mui-btn-negative:enabled:active .mui-badge-inverted,.mui-btn-positive:enabled:active .mui-badge-inverted,.mui-btn-primary:enabled:active .mui-badge-inverted{color:#fff}.mui-btn-block .mui-badge{position:absolute;right:0;margin-right:10px}.mui-btn .mui-icon{font-size:inherit}.mui-btn.mui-icon{font-size:14px;line-height:1.42}.mui-btn.mui-fab{width:56px;height:56px;padding:16px;border-radius:50%;outline:0}.mui-btn.mui-fab.mui-btn-mini{width:40px;height:40px;padding:8px}.mui-btn.mui-fab .mui-icon{font-size:24px;line-height:24px;width:24px;height:24px}.mui-bar{position:fixed;z-index:10;right:0;left:0;height:44px;padding-right:10px;padding-left:10px;border-bottom:0;background-color:#f7f7f7;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85);-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-bar .mui-title{right:40px;left:40px;display:inline-block;overflow:hidden;width:auto;margin:0;text-overflow:ellipsis}.mui-bar .mui-backdrop{background:0 0}.mui-bar-header-secondary{top:44px}.mui-bar-footer{bottom:0}.mui-bar-footer-secondary{bottom:44px}.mui-bar-footer-secondary-tab{bottom:50px}.mui-bar-footer,.mui-bar-footer-secondary,.mui-bar-footer-secondary-tab{border-top:0}.mui-bar-nav{top:0;-webkit-box-shadow:0 1px 6px #ccc;box-shadow:0 1px 6px #ccc}.mui-bar-nav~.mui-content .mui-anchor{display:block;visibility:hidden;height:45px;margin-top:-45px}.mui-bar-nav.mui-bar .mui-icon{margin-right:-10px;margin-left:-10px;padding-right:10px;padding-left:10px}.mui-title{font-size:17px;font-weight:500;line-height:44px;position:absolute;display:block;width:100%;margin:0 -10px;padding:0;text-align:center;white-space:nowrap;color:#000}.mui-title a{color:inherit}.mui-bar-tab{bottom:0;display:table;width:100%;height:50px;padding:0;table-layout:fixed;border-top:0;border-bottom:0;-webkit-touch-callout:none}.mui-bar-tab .mui-tab-item{display:table-cell;overflow:hidden;width:1%;height:50px;text-align:center;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;color:#929292}.mui-bar-tab .mui-tab-item.mui-active{color:#007aff}.mui-bar-tab .mui-tab-item .mui-icon{top:3px;width:24px;height:24px;padding-top:0;padding-bottom:0}.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis}.mui-bar-tab .mui-tab-item .mui-icon:active{background:0 0}.mui-focusin>.mui-bar-header-secondary,.mui-focusin>.mui-bar-nav{position:absolute}.mui-focusin>.mui-bar~.mui-content{padding-bottom:0}.mui-bar .mui-btn{font-weight:400;position:relative;z-index:20;top:7px;margin-top:0;padding:6px 12px 7px}.mui-bar .mui-btn.mui-pull-right{margin-left:10px}.mui-bar .mui-btn.mui-pull-left{margin-right:10px}.mui-bar .mui-btn-link{font-size:16px;line-height:44px;top:0;padding:0;color:#007aff;border:0}.mui-bar .mui-btn-link.mui-active,.mui-bar .mui-btn-link:active{color:#0062cc}.mui-bar .mui-btn-block{font-size:16px;top:6px;margin-bottom:0;padding:5px 0}.mui-bar .mui-btn-nav.mui-pull-left{margin-left:-5px}.mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav{margin-right:-3px}.mui-bar .mui-btn-nav.mui-pull-right{margin-right:-5px}.mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav{margin-left:-3px}.mui-bar .mui-btn-nav:active{opacity:.3}.mui-bar .mui-icon{font-size:24px;position:relative;z-index:20;padding-top:10px;padding-bottom:10px}.mui-bar .mui-icon:active{opacity:.3}.mui-bar .mui-btn .mui-icon{top:1px;margin:0;padding:0}.mui-bar .mui-title .mui-icon{margin:0;padding:0}.mui-bar .mui-title .mui-icon.mui-icon-caret{top:4px;margin-left:-5px}.mui-bar input[type=search]{height:29px;margin:6px 0}.mui-bar .mui-input-row .mui-btn{padding:12px 10px}.mui-bar .mui-search:before{margin-top:-10px}.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear,.mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech{top:0;right:12px}.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-clear~.mui-icon-clear,.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-speech~.mui-icon-speech{top:0;right:0}.mui-bar .mui-segmented-control{top:7px;width:auto;margin:0 auto}.mui-badge{font-size:12px;line-height:1;display:inline-block;padding:3px 6px;color:#333;border-radius:100px;background-color:rgba(0,0,0,.15)}.mui-badge.mui-badge-inverted{padding:0 5px 0 0;color:#929292;background-color:transparent}.mui-badge-blue,.mui-badge-primary{color:#fff;background-color:#007aff}.mui-badge-blue.mui-badge-inverted,.mui-badge-primary.mui-badge-inverted{color:#007aff;background-color:transparent}.mui-badge-green,.mui-badge-success{color:#fff;background-color:#4cd964}.mui-badge-green.mui-badge-inverted,.mui-badge-success.mui-badge-inverted{color:#4cd964;background-color:transparent}.mui-badge-warning,.mui-badge-yellow{color:#fff;background-color:#f0ad4e}.mui-badge-warning.mui-badge-inverted,.mui-badge-yellow.mui-badge-inverted{color:#f0ad4e;background-color:transparent}.mui-badge-danger,.mui-badge-red{color:#fff;background-color:#dd524d}.mui-badge-danger.mui-badge-inverted,.mui-badge-red.mui-badge-inverted{color:#dd524d;background-color:transparent}.mui-badge-purple,.mui-badge-royal{color:#fff;background-color:#8a6de9}.mui-badge-purple.mui-badge-inverted,.mui-badge-royal.mui-badge-inverted{color:#8a6de9;background-color:transparent}.mui-icon .mui-badge{font-size:10px;line-height:1.4;position:absolute;top:-2px;left:100%;margin-left:-10px;padding:1px 5px;color:#fff;background:red}.mui-card{overflow:hidden;margin:0 15px;border:1px solid #ddd;border-radius:6px;background-color:#fff;background-clip:padding-box}.mui-content>.mui-card:first-child{margin-top:15px}.mui-card .mui-input-group .mui-input-row:last-child:after,.mui-card .mui-input-group .mui-input-row:last-child:before,.mui-card .mui-input-group:after,.mui-card .mui-input-group:before{height:0}.mui-card .mui-table-view{margin-bottom:0;border-top:0;border-bottom:0;border-radius:6px}.mui-card .mui-table-view .mui-table-view-divider:first-child{top:0;border-top-left-radius:6px;border-top-right-radius:6px}.mui-card .mui-table-view .mui-table-view-divider:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.mui-card .mui-table-view:after,.mui-card .mui-table-view:before,.mui-card>.mui-table-view>.mui-table-view-cell:last-child:after,.mui-card>.mui-table-view>.mui-table-view-cell:last-child:before{height:0}.mui-table-view{position:relative;margin-top:0;margin-bottom:0;padding-left:0;list-style:none;background-color:#fff}.mui-table-view:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon{font-size:20px;margin-top:-1px;margin-right:5px;margin-left:-5px}.mui-table-view-icon .mui-table-view-cell:after{left:40px}.mui-table-view-chevron .mui-table-view-cell{padding-right:65px}.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){margin-right:-65px}.mui-table-view-radio .mui-table-view-cell{padding-right:65px}.mui-table-view-radio .mui-table-view-cell>a:not(.mui-btn){margin-right:-65px}.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after{font-size:30px;font-weight:600;right:9px;content:'';color:#007aff}.mui-table-view-radio .mui-table-view-cell.mui-selected .mui-navigate-right:after{content:'\e472'}.mui-table-view-inverted{color:#fff;background:#333}.mui-table-view-inverted:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted .mui-table-view-cell.mui-active,.mui-table-view-inverted .mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#242424}.mui-table-view-cell{position:relative;overflow:hidden;padding:11px 15px;background-color:inherit;-webkit-touch-callout:none}.mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-cell.mui-checkbox input[type=checkbox],.mui-table-view-cell.mui-radio input[type=radio]{top:8px}.mui-table-view-cell.mui-checkbox.mui-left,.mui-table-view-cell.mui-radio.mui-left{padding-left:58px}.mui-table-view-cell.mui-active{background-color:#eee}.mui-table-view-cell:last-child:after,.mui-table-view-cell:last-child:before{height:0}.mui-table-view-cell>a:not(.mui-btn){position:relative;display:block;overflow:hidden;margin:-11px -15px;padding:inherit;white-space:nowrap;text-overflow:ellipsis;color:inherit}.mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#eee}.mui-table-view-cell p{margin-bottom:0}.mui-table-view-cell.mui-transitioning>.mui-slider-handle,.mui-table-view-cell.mui-transitioning>.mui-slider-left .mui-btn,.mui-table-view-cell.mui-transitioning>.mui-slider-right .mui-btn{-webkit-transition:-webkit-transform 300ms ease;transition:transform 300ms ease}.mui-table-view-cell.mui-active>.mui-slider-handle{background-color:#eee}.mui-table-view-cell>.mui-slider-handle{position:relative;background-color:#fff}.mui-table-view-cell>.mui-slider-handle .mui-navigate-right:after,.mui-table-view-cell>.mui-slider-handle.mui-navigate-right:after{right:0}.mui-table-view-cell>.mui-slider-handle,.mui-table-view-cell>.mui-slider-left .mui-btn,.mui-table-view-cell>.mui-slider-right .mui-btn{-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease;-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-table-view-cell>.mui-slider-left,.mui-table-view-cell>.mui-slider-right{position:absolute;top:0;display:-webkit-box;display:-webkit-flex;display:flex;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-table-view-cell>.mui-slider-left>.mui-btn,.mui-table-view-cell>.mui-slider-right>.mui-btn{position:relative;left:0;display:-webkit-box;display:-webkit-flex;display:flex;padding:0 30px;color:#fff;border:0;border-radius:0;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.mui-table-view-cell>.mui-slider-left>.mui-btn:after,.mui-table-view-cell>.mui-slider-right>.mui-btn:after{position:absolute;z-index:-1;top:0;width:600%;height:100%;content:'';background:inherit}.mui-table-view-cell>.mui-slider-left>.mui-btn.mui-icon,.mui-table-view-cell>.mui-slider-right>.mui-btn.mui-icon{font-size:30px}.mui-table-view-cell>.mui-slider-right{right:0;-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease;-webkit-transform:translateX(100%);transform:translateX(100%)}.mui-table-view-cell>.mui-slider-left{left:0;-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mui-table-view-cell>.mui-slider-left>.mui-btn:after{right:100%;margin-right:-1px}.mui-table-view-divider{font-weight:500;position:relative;margin-top:-1px;margin-left:0;padding-top:6px;padding-bottom:6px;padding-left:15px;color:#999;background-color:#fafafa}.mui-table-view-divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-divider:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view .mui-media,.mui-table-view .mui-media-body{overflow:hidden}.mui-table-view .mui-media-large .mui-media-object{line-height:80px;max-width:80px;height:80px}.mui-table-view .mui-media .mui-subtitle{color:#000}.mui-table-view .mui-media-object{line-height:42px;max-width:42px;height:42px}.mui-table-view .mui-media-object.mui-pull-left{margin-right:10px}.mui-table-view .mui-media-object.mui-pull-right{margin-left:10px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object{line-height:29px;max-width:29px;height:29px;margin:-4px 0}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object img{line-height:29px;max-width:29px;height:29px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object.mui-pull-left{margin-right:10px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object .mui-icon{font-size:29px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-body:after{position:absolute;right:0;bottom:0;left:55px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view .mui-table-view-cell.mui-media-icon:after{height:0!important}.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view{display:block}.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:after,.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:before{height:0!important}.mui-table-view.mui-unfold .mui-table-view-cell.mui-media-icon.mui-collapse .mui-media-body:after{position:absolute;right:0;bottom:0;left:70px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-cell>.mui-badge,.mui-table-view-cell>.mui-btn,.mui-table-view-cell>.mui-switch,.mui-table-view-cell>a>.mui-badge,.mui-table-view-cell>a>.mui-btn,.mui-table-view-cell>a>.mui-switch{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mui-table-view-cell .mui-navigate-left>.mui-badge,.mui-table-view-cell .mui-navigate-left>.mui-btn,.mui-table-view-cell .mui-navigate-left>.mui-switch,.mui-table-view-cell .mui-navigate-right>.mui-badge,.mui-table-view-cell .mui-navigate-right>.mui-btn,.mui-table-view-cell .mui-navigate-right>.mui-switch,.mui-table-view-cell .mui-push-left>.mui-badge,.mui-table-view-cell .mui-push-left>.mui-btn,.mui-table-view-cell .mui-push-left>.mui-switch,.mui-table-view-cell .mui-push-right>.mui-badge,.mui-table-view-cell .mui-push-right>.mui-btn,.mui-table-view-cell .mui-push-right>.mui-switch,.mui-table-view-cell>a .mui-navigate-left>.mui-badge,.mui-table-view-cell>a .mui-navigate-left>.mui-btn,.mui-table-view-cell>a .mui-navigate-left>.mui-switch,.mui-table-view-cell>a .mui-navigate-right>.mui-badge,.mui-table-view-cell>a .mui-navigate-right>.mui-btn,.mui-table-view-cell>a .mui-navigate-right>.mui-switch,.mui-table-view-cell>a .mui-push-left>.mui-badge,.mui-table-view-cell>a .mui-push-left>.mui-btn,.mui-table-view-cell>a .mui-push-left>.mui-switch,.mui-table-view-cell>a .mui-push-right>.mui-badge,.mui-table-view-cell>a .mui-push-right>.mui-btn,.mui-table-view-cell>a .mui-push-right>.mui-switch{right:35px}.mui-content>.mui-table-view:first-child{margin-top:15px}.mui-table-view-cell.mui-collapse .mui-table-view:after{left:15px}.mui-table-view-cell.mui-collapse>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse>.mui-push-right:after{content:'\e581'}.mui-table-view-cell.mui-collapse.mui-active .mui-collapse-content,.mui-table-view-cell.mui-collapse.mui-active .mui-table-view{display:block}.mui-table-view-cell.mui-collapse.mui-active>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse.mui-active>.mui-push-right:after{content:'\e580'}.mui-table-view-cell.mui-collapse .mui-collapse-content{position:relative;display:none;overflow:hidden;margin:11px -15px -11px;padding:8px 15px;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease;border:1px solid #ddd;background:#fff}.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-input-group,.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-slider{width:auto;height:auto;margin:-8px -15px}.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-slider{margin:-8px -16px}.mui-table-view-cell.mui-collapse .mui-table-view{display:none;margin-top:11px;margin-right:-15px;margin-bottom:-11px;margin-left:-15px;border:0}.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron{margin-right:-65px}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell{padding-left:31px;background-position:31px 100%}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:30px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view.mui-grid-view{font-size:0;display:block;width:100%;padding:0 10px 10px 0;white-space:normal}.mui-table-view.mui-grid-view .mui-table-view-cell{font-size:17px;display:inline-block;margin-right:-4px;padding:10px 0 0 14px;text-align:center;vertical-align:middle;background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{width:100%;max-width:100%;height:auto}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn){margin:-10px 0 0 -14px}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn).mui-active,.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn):active{background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{font-size:15px;line-height:15px;display:block;width:100%;height:15px;margin-top:8px;text-overflow:ellipsis;color:#333}.mui-table-view.mui-grid-view .mui-table-view-cell:after,.mui-table-view.mui-grid-view .mui-table-view-cell:before{height:0}.mui-grid-view.mui-grid-9{padding:1px 0;padding-right:0;background-color:#f2f2f2}.mui-grid-view.mui-grid-9 .mui-table-view-cell{margin:-1px 0 0 -1px;padding:11px 15px;vertical-align:top;border-top:1px solid #eee;border-left:1px solid #eee}.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active{background-color:#eee}.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn){margin:0;padding:10px 0}.mui-grid-view.mui-grid-9:before{height:0}.mui-grid-view.mui-grid-9 .mui-media{color:#797979}.mui-grid-view.mui-grid-9 .mui-media .mui-icon{font-size:2.4em;position:relative}.mui-slider-cell{position:relative}.mui-slider-cell>.mui-slider-handle{z-index:1}.mui-slider-cell>.mui-slider-left,.mui-slider-cell>.mui-slider-right{position:absolute;z-index:0;top:0;bottom:0}.mui-slider-cell>.mui-slider-left{left:0}.mui-slider-cell>.mui-slider-right{right:0}input,select,textarea{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:17px;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}input:focus,select:focus,textarea:focus{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{line-height:21px;width:100%;height:40px;margin-bottom:15px;padding:10px 15px;-webkit-user-select:text;border:1px solid rgba(0,0,0,.2);border-radius:3px;outline:0;background-color:#fff;-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}input[type=search]{font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;height:34px;text-align:center;border:0;border-radius:6px;background-color:rgba(0,0,0,.1)}input[type=search]:focus{text-align:left}textarea{height:auto;resize:none}select{font-size:14px;height:auto;margin-top:1px;border:0!important;background-color:#fff}select:focus{-webkit-user-modify:read-only}.mui-input-group{position:relative;padding:0;border:0;background-color:#fff}.mui-input-group:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-group:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-group input,.mui-input-group textarea{margin-bottom:0;border:0;border-radius:0;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.mui-input-group input[type=search]{background:0 0}.mui-input-group input:last-child{background-image:none}.mui-input-row{clear:left;overflow:hidden}.mui-input-row select{font-size:17px;height:37px;padding:0}.mui-input-row .mui-btn+input,.mui-input-row label+input,.mui-input-row:last-child{background:0 0}.mui-input-group .mui-input-row{height:40px}.mui-input-group .mui-input-row:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-row label{font-family:'Helvetica Neue',Helvetica,sans-serif;line-height:1.1;float:left;width:35%;padding:10px 15px}.mui-input-row label~input,.mui-input-row label~select,.mui-input-row label~textarea{float:right;width:65%;margin-bottom:0;padding-left:0;border:0}.mui-input-row .mui-btn{font-family:'Helvetica Neue',Helvetica,sans-serif;line-height:1.1;float:right;width:15%;padding:10px 15px}.mui-input-row .mui-btn~input,.mui-input-row .mui-btn~select,.mui-input-row .mui-btn~textarea{float:left;width:85%;margin-bottom:0;padding-left:0;border:0}.mui-button-row{position:relative;padding-top:5px;text-align:center}.mui-input-group .mui-button-row{height:45px}.mui-input-row{position:relative}.mui-input-row.mui-input-range{overflow:visible;padding-right:20px}.mui-input-row .mui-inline{padding:8px 0}.mui-input-row .mui-input-clear~.mui-icon-clear,.mui-input-row .mui-input-speech~.mui-icon-speech{font-size:20px;position:absolute;z-index:1;top:10px;right:0;width:38px;height:38px;text-align:center;color:#999}.mui-input-row .mui-input-speech~.mui-icon-speech{font-size:24px;top:8px}.mui-input-row .mui-input-clear~.mui-icon-clear~.mui-icon-speech{display:none}.mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{display:inline-block}.mui-input-row .mui-icon-speech~.mui-placeholder{right:38px}.mui-input-row.mui-search .mui-icon-clear{top:7px}.mui-input-row.mui-search .mui-icon-speech{top:5px}.mui-checkbox,.mui-radio{position:relative}.mui-checkbox label,.mui-radio label{display:inline-block;float:none;width:100%;padding-right:58px}.mui-checkbox.mui-left input[type=checkbox],.mui-radio.mui-left input[type=radio]{left:20px}.mui-checkbox.mui-left label,.mui-radio.mui-left label{padding-right:15px;padding-left:58px}.mui-checkbox input[type=checkbox],.mui-radio input[type=radio]{position:absolute;top:4px;right:20px;display:inline-block;width:28px;height:26px;border:0;outline:0!important;background-color:transparent;-webkit-appearance:none}.mui-checkbox input[type=checkbox][disabled]:before,.mui-radio input[type=radio][disabled]:before{opacity:.3}.mui-checkbox input[type=checkbox]:before,.mui-radio input[type=radio]:before{font-family:Muiicons;font-size:28px;font-weight:400;line-height:1;text-decoration:none;color:#aaa;border-radius:0;background:0 0;-webkit-font-smoothing:antialiased}.mui-checkbox input[type=checkbox]:checked:before,.mui-radio input[type=radio]:checked:before{color:#007aff}.mui-checkbox label.mui-disabled,.mui-checkbox.mui-disabled label,.mui-radio label.mui-disabled,.mui-radio.mui-disabled label{opacity:.4}.mui-radio input[type=radio]:before{content:'\e411'}.mui-radio input[type=radio]:checked:before{content:'\e441'}.mui-checkbox input[type=checkbox]:before{content:'\e411'}.mui-checkbox input[type=checkbox]:checked:before{content:'\e442'}.mui-select{position:relative}.mui-select:before{font-family:Muiicons;position:absolute;top:8px;right:21px;content:'\e581';color:rgba(170,170,170,.6)}.mui-input-row .mui-switch{float:right;margin-top:5px;margin-right:20px}.mui-input-range input[type=range]{position:relative;width:100%;height:2px;margin:17px 0;padding:0;cursor:pointer;border:0;border-radius:3px;outline:0;background-color:#999;-webkit-appearance:none!important}.mui-input-range input[type=range]::-webkit-slider-thumb{width:28px;height:28px;border-color:#0062cc;border-radius:50%;background-color:#007aff;background-clip:padding-box;-webkit-appearance:none!important}.mui-input-range label~input[type=range]{width:65%}.mui-input-range .mui-tooltip{font-size:36px;line-height:64px;position:absolute;z-index:1;top:-70px;width:64px;height:64px;text-align:center;opacity:.8;color:#333;border:1px solid #ddd;border-radius:6px;background-color:#fff;text-shadow:0 1px 0 #f3f3f3}.mui-search{position:relative}.mui-search input[type=search]{padding-left:30px}.mui-search .mui-placeholder{font-size:16px;line-height:34px;position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;display:inline-block;height:34px;text-align:center;color:#999;border:0;border-radius:6px;background:0 0}.mui-search .mui-placeholder .mui-icon{font-size:20px;color:#333}.mui-search:before{font-family:Muiicons;font-size:20px;font-weight:400;position:absolute;top:50%;right:50%;display:none;margin-top:-18px;margin-right:31px;content:'\e466'}.mui-search.mui-active:before{font-size:20px;right:auto;left:5px;display:block;margin-right:0}.mui-search.mui-active input[type=search]{text-align:left}.mui-search.mui-active .mui-placeholder{display:none}.mui-segmented-control{font-size:15px;font-weight:400;position:relative;display:table;overflow:hidden;width:100%;table-layout:fixed;border:1px solid #007aff;border-radius:3px;background-color:transparent;-webkit-touch-callout:none}.mui-segmented-control.mui-scroll-wrapper{height:38px}.mui-segmented-control.mui-scroll-wrapper .mui-scroll{width:auto;height:40px;white-space:nowrap}.mui-segmented-control.mui-scroll-wrapper .mui-control-item{display:inline-block;width:auto;padding:0 20px;border:0}.mui-segmented-control .mui-control-item{line-height:38px;display:table-cell;overflow:hidden;width:1%;-webkit-transition:background-color .1s linear;transition:background-color .1s linear;text-align:center;white-space:nowrap;text-overflow:ellipsis;color:#007aff;border-color:#007aff;border-left:1px solid #007aff}.mui-segmented-control .mui-control-item:first-child{border-left-width:0}.mui-segmented-control .mui-control-item.mui-active{color:#fff;background-color:#007aff}.mui-segmented-control.mui-segmented-control-inverted{width:100%;border:0;border-radius:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{color:inherit;border:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#007aff;border-bottom:2px solid #007aff;background:0 0}.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#007aff}.mui-segmented-control-positive{border:1px solid #4cd964}.mui-segmented-control-positive .mui-control-item{color:#4cd964;border-color:inherit}.mui-segmented-control-positive .mui-control-item.mui-active{color:#fff;background-color:#4cd964}.mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active{color:#4cd964;border-bottom:2px solid #4cd964;background:0 0}.mui-segmented-control-positive.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#4cd964}.mui-segmented-control-negative{border:1px solid #dd524d}.mui-segmented-control-negative .mui-control-item{color:#dd524d;border-color:inherit}.mui-segmented-control-negative .mui-control-item.mui-active{color:#fff;background-color:#dd524d}.mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active{color:#dd524d;border-bottom:2px solid #dd524d;background:0 0}.mui-segmented-control-negative.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#dd524d}.mui-control-content{position:relative;display:none}.mui-control-content.mui-active{display:block}.mui-popover{position:absolute;z-index:999;display:none;width:280px;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transform:none;transform:none;opacity:0;border-radius:7px;background-color:#f7f7f7;-webkit-box-shadow:0 0 15px rgba(0,0,0,.1);box-shadow:0 0 15px rgba(0,0,0,.1)}.mui-popover .mui-popover-arrow{position:absolute;z-index:1000;top:-25px;left:0;overflow:hidden;width:26px;height:26px}.mui-popover .mui-popover-arrow:after{position:absolute;top:19px;left:0;width:26px;height:26px;content:' ';-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:3px;background:#f7f7f7}.mui-popover .mui-popover-arrow.mui-bottom{top:100%;left:-26px;margin-top:-1px}.mui-popover .mui-popover-arrow.mui-bottom:after{top:-19px;left:0}.mui-popover.mui-popover-action{bottom:0;width:100%;-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);border-radius:0;background:0 0;-webkit-box-shadow:none;box-shadow:none}.mui-popover.mui-popover-action .mui-popover-arrow{display:none}.mui-popover.mui-popover-action.mui-popover-bottom{position:fixed}.mui-popover.mui-popover-action.mui-active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-popover.mui-popover-action .mui-table-view{margin:8px;text-align:center;color:#007aff;border-radius:4px}.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-popover.mui-popover-action .mui-table-view small{font-weight:400;line-height:1.3;display:block}.mui-popover.mui-active{display:block;opacity:1}.mui-popover .mui-bar~.mui-table-view{padding-top:44px}.mui-backdrop{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3)}.mui-bar-backdrop.mui-backdrop{bottom:50px;background:0 0}.mui-backdrop-action.mui-backdrop{background-color:rgba(0,0,0,.3)}.mui-backdrop-action.mui-backdrop,.mui-bar-backdrop.mui-backdrop{opacity:0}.mui-backdrop-action.mui-backdrop.mui-active,.mui-bar-backdrop.mui-backdrop.mui-active{-webkit-transition:all .4s ease;transition:all .4s ease;opacity:1}.mui-popover .mui-btn-block{margin-bottom:5px}.mui-popover .mui-btn-block:last-child{margin-bottom:0}.mui-popover .mui-bar{-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-bar-nav{border-bottom:1px solid rgba(0,0,0,.15);border-top-left-radius:12px;border-top-right-radius:12px;-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-scroll-wrapper{margin:7px 0;border-radius:7px;background-clip:padding-box}.mui-popover .mui-scroll .mui-table-view{max-height:none}.mui-popover .mui-table-view{overflow:auto;max-height:300px;margin-bottom:0;border-radius:7px;background-color:#f7f7f7;background-image:none;-webkit-overflow-scrolling:touch}.mui-popover .mui-table-view:after,.mui-popover .mui-table-view:before{height:0}.mui-popover .mui-table-view .mui-table-view-cell:first-child,.mui-popover .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn){border-top-left-radius:12px;border-top-right-radius:12px}.mui-popover .mui-table-view .mui-table-view-cell:last-child,.mui-popover .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn){border-bottom-right-radius:12px;border-bottom-left-radius:12px}.mui-popover.mui-bar-popover .mui-table-view{width:106px}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell{padding:11px 15px;background-position:0 100%}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell>a:not(.mui-btn){margin:-11px -15px -11px -15px}.mui-pagination{display:inline-block;margin:0 auto;padding-left:0;border-radius:6px}.mui-pagination>li{display:inline}.mui-pagination>li>a,.mui-pagination>li>span{line-height:1.428571429;position:relative;float:left;margin-left:-1px;padding:6px 12px;text-decoration:none;color:#007aff;border:1px solid #ddd;background-color:#fff}.mui-pagination>li:first-child>a,.mui-pagination>li:first-child>span{margin-left:0;border-top-left-radius:6px;border-bottom-left-radius:6px;background-clip:padding-box}.mui-pagination>li:last-child>a,.mui-pagination>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px;background-clip:padding-box}.mui-pagination>li.mui-active>a,.mui-pagination>li.mui-active>a:active,.mui-pagination>li.mui-active>span,.mui-pagination>li.mui-active>span:active,.mui-pagination>li:active>a,.mui-pagination>li:active>a:active,.mui-pagination>li:active>span,.mui-pagination>li:active>span:active{z-index:2;cursor:default;color:#fff;border-color:#007aff;background-color:#007aff}.mui-pagination>li.mui-disabled>a,.mui-pagination>li.mui-disabled>a:active,.mui-pagination>li.mui-disabled>span,.mui-pagination>li.mui-disabled>span:active{opacity:.6;color:#777;border:1px solid #ddd;background-color:#fff}.mui-pagination-lg>li>a,.mui-pagination-lg>li>span{font-size:18px;padding:10px 16px}.mui-pagination-sm>li>a,.mui-pagination-sm>li>span{font-size:12px;padding:5px 10px}.mui-pager{padding-left:0;list-style:none;text-align:center}.mui-pager:after,.mui-pager:before{display:table;content:' '}.mui-pager:after{clear:both}.mui-pager li{display:inline}.mui-pager li>a,.mui-pager li>span{display:inline-block;padding:5px 14px;border:1px solid #ddd;border-radius:6px;background-color:#fff;background-clip:padding-box}.mui-pager li.mui-active>a,.mui-pager li.mui-active>span,.mui-pager li:active>a,.mui-pager li:active>span{cursor:default;text-decoration:none;color:#fff;border-color:#007aff;background-color:#007aff}.mui-pager .mui-next>a,.mui-pager .mui-next>span{float:right}.mui-pager .mui-previous>a,.mui-pager .mui-previous>span{float:left}.mui-pager .mui-disabled>a,.mui-pager .mui-disabled>a:active,.mui-pager .mui-disabled>span,.mui-pager .mui-disabled>span:active{opacity:.6;color:#777;border:1px solid #ddd;background-color:#fff}.mui-modal{position:fixed;z-index:999;top:0;overflow:hidden;width:100%;min-height:100%;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0;background-color:#fff}.mui-modal.mui-active{height:100%;-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.mui-android .mui-modal .mui-bar{position:static}.mui-android .mui-modal .mui-bar-nav~.mui-content{padding-top:0}.mui-slider{position:relative;overflow:hidden;width:100%}.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:0}.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border-top:1px solid #c8c7cc;border-bottom:1px solid #c8c7cc}.mui-slider .mui-slider-group{font-size:0;position:relative;-webkit-transition:all 0s linear;transition:all 0s linear;white-space:nowrap}.mui-slider .mui-slider-group .mui-slider-item{font-size:14px;position:relative;display:inline-block;width:100%;height:100%;vertical-align:top}.mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item){line-height:0;position:relative;display:block}.mui-slider .mui-slider-group .mui-slider-item img{width:100%}.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:after,.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:before{height:0}.mui-slider .mui-slider-group.mui-slider-loop{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}.mui-slider-title{line-height:30px;position:absolute;bottom:0;left:0;width:100%;height:30px;margin:0;text-align:left;text-indent:12px;opacity:.8;background-color:#000}.mui-slider-indicator{position:absolute;bottom:8px;width:100%;text-align:center;background:0 0}.mui-slider-indicator.mui-segmented-control{position:relative;bottom:auto}.mui-slider-indicator .mui-indicator{display:inline-block;width:6px;height:6px;margin:1px 6px;cursor:pointer;border-radius:50%;background:#aaa;-webkit-box-shadow:0 0 1px 1px rgba(130,130,130,.7);box-shadow:0 0 1px 1px rgba(130,130,130,.7)}.mui-slider-indicator .mui-active.mui-indicator{background:#fff}.mui-slider-indicator .mui-icon{font-size:20px;line-height:30px;width:40px;height:30px;margin:3px;text-align:center;border:1px solid #ddd}.mui-slider-indicator .mui-number{line-height:32px;display:inline-block;width:58px}.mui-slider-indicator .mui-number span{color:#ff5053}.mui-slider-progress-bar{z-index:1;height:2px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden}.mui-switch{position:relative;display:block;width:74px;height:30px;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;transition-property:background-color,border;border:2px solid #ddd;border-radius:20px;background-color:#fff;background-clip:padding-box}.mui-switch.mui-disabled{opacity:.3}.mui-switch .mui-switch-handle{position:absolute;z-index:1;top:-1px;left:-1px;width:28px;height:28px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;-webkit-transition-property:-webkit-transform,width,left;transition-property:transform,width,left;border-radius:16px;background-color:#fff;background-clip:padding-box;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.4);box-shadow:0 2px 5px rgba(0,0,0,.4)}.mui-switch:before{font-size:13px;position:absolute;top:3px;right:11px;content:'Off';text-transform:uppercase;color:#999}.mui-switch.mui-dragging{border-color:#f7f7f7;background-color:#f7f7f7}.mui-switch.mui-dragging .mui-switch-handle{width:38px}.mui-switch.mui-dragging.mui-active .mui-switch-handle{left:-11px;width:38px}.mui-switch.mui-active{border-color:#4cd964;background-color:#4cd964}.mui-switch.mui-active .mui-switch-handle{-webkit-transform:translate(43px,0);transform:translate(43px,0)}.mui-switch.mui-active:before{right:auto;left:15px;content:'On';color:#fff}.mui-switch input[type=checkbox]{display:none}.mui-switch-mini{width:47px}.mui-switch-mini:before{display:none}.mui-switch-mini.mui-active .mui-switch-handle{-webkit-transform:translate(16px,0);transform:translate(16px,0)}.mui-switch-blue.mui-active{border:2px solid #007aff;background-color:#007aff}.mui-content.mui-fade{left:0;opacity:0}.mui-content.mui-fade.mui-in{opacity:1}.mui-content.mui-sliding{z-index:2;-webkit-transition:-webkit-transform .4s;transition:transform .4s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-content.mui-sliding.mui-left{z-index:1;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-content.mui-sliding.mui-right{z-index:3;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-navigate-left:after,.mui-navigate-right:after,.mui-push-left:after,.mui-push-right:after{font-family:Muiicons;font-size:inherit;line-height:1;position:absolute;top:50%;display:inline-block;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-decoration:none;color:#bbb;-webkit-font-smoothing:antialiased}.mui-navigate-left:after,.mui-push-left:after{left:15px;content:'\e582'}.mui-navigate-right:after,.mui-push-right:after{right:15px;content:'\e583'}.mui-pull-bottom-pocket,.mui-pull-top-pocket{position:absolute;left:0;display:block;visibility:hidden;overflow:hidden;width:100%;height:50px}.mui-plus-pullrefresh .mui-pull-bottom-pocket,.mui-plus-pullrefresh .mui-pull-top-pocket{display:none;visibility:visible}.mui-pull-top-pocket{top:0}.mui-bar-nav~.mui-content .mui-pull-top-pocket{top:44px}.mui-bar-nav~.mui-bar-header-secondary~.mui-content .mui-pull-top-pocket{top:88px}.mui-pull-bottom-pocket{position:relative;bottom:0;height:40px}.mui-pull-bottom-pocket .mui-pull-loading{visibility:hidden}.mui-pull-bottom-pocket .mui-pull-loading.mui-in{display:inline-block}.mui-pull{font-weight:700;position:absolute;right:0;bottom:10px;left:0;text-align:center;color:#777}.mui-pull-loading{margin-right:10px;-webkit-transition:-webkit-transform .4s;transition:transform .4s;-webkit-transition-duration:400ms;transition-duration:400ms;vertical-align:middle;-webkit-backface-visibility:hidden}.mui-pull-loading.mui-reverse{-webkit-transform:rotate(180deg) translateZ(0);transform:rotate(180deg) translateZ(0)}.mui-pull-caption{font-size:15px;line-height:24px;position:relative;display:inline-block;overflow:visible;margin-top:0;vertical-align:middle}.mui-pull-caption span{display:none}.mui-pull-caption span.mui-in{display:inline}.mui-toast-container{position:fixed;z-index:9999;bottom:50px;width:100%}.mui-toast-message{font-size:14px;width:270px;margin:5px auto;padding:5px;text-align:center;color:#000;border-radius:7px;background-color:#d8d8d8}.mui-numbox{position:relative;display:inline-block;overflow:hidden;width:120px;height:35px;padding:0 40px;vertical-align:top;vertical-align:middle;border:solid 1px #bbb;border-radius:3px;background-color:#efeff4}.mui-numbox [class*=mui-numbox-btn]{font-size:18px;font-weight:400;line-height:100%;position:absolute;top:0;overflow:hidden;width:40px;height:100%;padding:0;color:#555;border:none;border-radius:0;background-color:#f9f9f9}.mui-numbox [class*=mui-numbox-btn]:active{background-color:#ccc}.mui-numbox [class*=mui-numbox-btn][disabled]{color:silver}.mui-numbox .mui-numbox-btn-plus{right:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.mui-numbox .mui-numbox-btn-minus{left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.mui-numbox .mui-numbox-input{display:inline-block;overflow:hidden;width:100%!important;height:100%;margin:0;padding:0 3px!important;text-align:center;text-overflow:ellipsis;word-break:normal;border:none!important;border-right:solid 1px #ccc!important;border-left:solid 1px #ccc!important;border-radius:0!important}.mui-input-row .mui-numbox{float:right;margin:2px 8px}@font-face{font-family:Muiicons;font-weight:400;font-style:normal;src:url(../fonts/mui.ttf) format('truetype')}.mui-icon{font-family:Muiicons;font-size:24px;font-weight:400;font-style:normal;line-height:1;display:inline-block;text-decoration:none;-webkit-font-smoothing:antialiased}.mui-icon.mui-right:before{float:right;padding-left:.2em}.mui-icon-contact:before{content:'\e100'}.mui-icon-person:before{content:'\e101'}.mui-icon-personadd:before{content:'\e102'}.mui-icon-contact-filled:before{content:'\e130'}.mui-icon-person-filled:before{content:'\e131'}.mui-icon-personadd-filled:before{content:'\e132'}.mui-icon-phone:before{content:'\e200'}.mui-icon-email:before{content:'\e201'}.mui-icon-chatbubble:before{content:'\e202'}.mui-icon-chatboxes:before{content:'\e203'}.mui-icon-phone-filled:before{content:'\e230'}.mui-icon-email-filled:before{content:'\e231'}.mui-icon-chatbubble-filled:before{content:'\e232'}.mui-icon-chatboxes-filled:before{content:'\e233'}.mui-icon-weibo:before{content:'\e260'}.mui-icon-weixin:before{content:'\e261'}.mui-icon-pengyouquan:before{content:'\e262'}.mui-icon-chat:before{content:'\e263'}.mui-icon-qq:before{content:'\e264'}.mui-icon-videocam:before{content:'\e300'}.mui-icon-camera:before{content:'\e301'}.mui-icon-mic:before{content:'\e302'}.mui-icon-location:before{content:'\e303'}.mui-icon-mic-filled:before,.mui-icon-speech:before{content:'\e332'}.mui-icon-location-filled:before{content:'\e333'}.mui-icon-micoff:before{content:'\e360'}.mui-icon-image:before{content:'\e363'}.mui-icon-map:before{content:'\e364'}.mui-icon-compose:before{content:'\e400'}.mui-icon-trash:before{content:'\e401'}.mui-icon-upload:before{content:'\e402'}.mui-icon-download:before{content:'\e403'}.mui-icon-close:before{content:'\e404'}.mui-icon-redo:before{content:'\e405'}.mui-icon-undo:before{content:'\e406'}.mui-icon-refresh:before{content:'\e407'}.mui-icon-star:before{content:'\e408'}.mui-icon-plus:before{content:'\e409'}.mui-icon-minus:before{content:'\e410'}.mui-icon-checkbox:before,.mui-icon-circle:before{content:'\e411'}.mui-icon-clear:before,.mui-icon-close-filled:before{content:'\e434'}.mui-icon-refresh-filled:before{content:'\e437'}.mui-icon-star-filled:before{content:'\e438'}.mui-icon-plus-filled:before{content:'\e439'}.mui-icon-minus-filled:before{content:'\e440'}.mui-icon-circle-filled:before{content:'\e441'}.mui-icon-checkbox-filled:before{content:'\e442'}.mui-icon-closeempty:before{content:'\e460'}.mui-icon-refreshempty:before{content:'\e461'}.mui-icon-reload:before{content:'\e462'}.mui-icon-starhalf:before{content:'\e463'}.mui-icon-spinner:before{content:'\e464'}.mui-icon-spinner-cycle:before{content:'\e465'}.mui-icon-search:before{content:'\e466'}.mui-icon-plusempty:before{content:'\e468'}.mui-icon-forward:before{content:'\e470'}.mui-icon-back:before,.mui-icon-left-nav:before{content:'\e471'}.mui-icon-checkmarkempty:before{content:'\e472'}.mui-icon-home:before{content:'\e500'}.mui-icon-navigate:before{content:'\e501'}.mui-icon-gear:before{content:'\e502'}.mui-icon-paperplane:before{content:'\e503'}.mui-icon-info:before{content:'\e504'}.mui-icon-help:before{content:'\e505'}.mui-icon-locked:before{content:'\e506'}.mui-icon-more:before{content:'\e507'}.mui-icon-flag:before{content:'\e508'}.mui-icon-home-filled:before{content:'\e530'}.mui-icon-gear-filled:before{content:'\e532'}.mui-icon-info-filled:before{content:'\e534'}.mui-icon-help-filled:before{content:'\e535'}.mui-icon-more-filled:before{content:'\e537'}.mui-icon-settings:before{content:'\e560'}.mui-icon-list:before{content:'\e562'}.mui-icon-bars:before{content:'\e563'}.mui-icon-loop:before{content:'\e565'}.mui-icon-paperclip:before{content:'\e567'}.mui-icon-arrowup:before{content:'\e580'}.mui-icon-arrowdown:before{content:'\e581'}.mui-icon-arrowleft:before{content:'\e582'}.mui-icon-arrowright:before{content:'\e583'}.mui-icon-arrowthinup:before{content:'\e584'}.mui-icon-arrowthindown:before{content:'\e585'}.mui-icon-arrowthinleft:before{content:'\e586'}.mui-icon-arrowthinright:before{content:'\e587'}.mui-icon-pulldown:before{content:'\e588'}.mui-fullscreen{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.mui-fullscreen .mui-slider-group{height:100%}.mui-fullscreen .mui-segmented-control~.mui-slider-group{position:absolute;top:40px;bottom:0;width:100%;height:auto}.mui-fullscreen .mui-slider-item>a{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mui-fullscreen .mui-off-canvas-wrap .mui-slider-item>a{top:auto;-webkit-transform:none;transform:none}.mui-bar-tab~.mui-content .mui-slider.mui-fullscreen .mui-segmented-control~.mui-slider-group{bottom:50px}.mui-android.mui-android-4-0 input:focus,.mui-android.mui-android-4-0 textarea:focus{-webkit-user-modify:inherit}.mui-ios .mui-table-view-cell{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.mui-plus-visible,.mui-wechat-visible{display:none!important}.mui-plus .mui-plus-visible,.mui-plus-hidden,.mui-wechat .mui-wechat-visible,.mui-wechat-hidden{display:block!important}.mui-plus .mui-plus-hidden,.mui-wechat .mui-wechat-hidden{display:none!important}
\ No newline at end of file
dist/js/mui.js
View file @ cf92c3d8
/*!
* =====================================================
* Mui v1.9.0 (https://github.com/dcloudio/mui)
* Mui v2.0.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -469,6 +469,12 @@ var mui = (function(document, undefined) {
$(function() {
document.body.classList.add('mui-plus');
});
if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识
this.os.stream = true;
}
$(function() {
document.body.classList.add('mui-plus-stream');
});
}
}
detect.call($, navigator.userAgent);
......@@ -845,7 +851,7 @@ var mui = (function(document, undefined) {
};
//简单的wrap对象_mid
var mid = function(obj) {
return obj._mid || (obj._mid = _mid++);
return obj && (obj._mid || (obj._mid = _mid++));
};
//事件委托对象绑定的事件回调列表
var delegateFns = {};
......@@ -1009,16 +1015,37 @@ var mui = (function(document, undefined) {
return $.registerHandler('gestures', gesture);
};
var round = Math.round;
var abs = Math.abs;
var sqrt = Math.sqrt;
var atan = Math.atan;
var atan2 = Math.atan2;
/**
* distance
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getDistance = function(p1, p2) {
var x = p2.x - p1.x;
var y = p2.y - p1.y;
return Math.sqrt((x * x) + (y * y));
var getDistance = function(p1, p2, props) {
if (!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return sqrt((x * x) + (y * y));
};
/**
* scale
* @param {Object} starts
* @param {Object} moves
*/
var getScale = function(starts, moves) {
if (starts.length >= 2 && moves.length >= 2) {
var props = ['pageX', 'pageY'];
return getDistance(moves[1], moves[0], props) / getDistance(starts[1], starts[0], props);
}
return 1;
};
/**
* angle
......@@ -1026,25 +1053,32 @@ var mui = (function(document, undefined) {
* @param {type} p2
* @returns {Number}
*/
var getAngle = function(p1, p2) {
return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
var getAngle = function(p1, p2, props) {
if (!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return atan2(y, x) * 180 / Math.PI;
};
/**
* direction
* @param {type} angle
* @returns {unresolved}
* @param {Object} x
* @param {Object} y
*/
var getDirectionByAngle = function(angle) {
if (angle < -45 && angle > -135) {
return 'up';
} else if (angle >= 45 && angle < 135) {
return 'down';
} else if (angle >= 135 || angle <= -135) {
return 'left';
} else if (angle >= -45 && angle <= 45) {
return 'right';
var getDirection = function(x, y) {
if (x === y) {
return '';
}
return null;
if (abs(x) >= abs(y)) {
return x > 0 ? 'left' : 'right';
}
return y > 0 ? 'up' : 'down';
};
var getRotation = function(start, end) {
var props = ['pageX', 'pageY'];
return getAngle(end[1], end[0], props) - getAngle(start[1], start[0], props);
};
/**
* detect gestures
......@@ -1064,100 +1098,276 @@ var mui = (function(document, undefined) {
}
});
};
var detectTouchStart = function(event) {
$.gestures.stoped = false;
var now = $.now();
var point = event.touches ? event.touches[0] : event;
$.gestures.touch = {
target: event.target,
lastTarget: ($.gestures.touch && $.gestures.touch.lastTarget ? $.gestures.touch.lastTarget : null),
startTime: now,
touchTime: 0,
flickStartTime: now,
lastTapTime: ($.gestures.touch && $.gestures.touch.lastTapTime ? $.gestures.touch.lastTapTime : 0),
start: {
x: point.pageX,
y: point.pageY
},
flickStart: {
x: point.pageX,
y: point.pageY
},
flickDistanceX: 0,
flickDistanceY: 0,
move: {
x: 0,
y: 0
},
deltaX: 0,
deltaY: 0,
lastDeltaX: 0,
lastDeltaY: 0,
angle: '',
direction: '',
lockDirection: false,
startDirection: '',
distance: 0,
drag: false,
swipe: false,
hold: false,
gesture: event
/**
* px per ms
* @param {Object} deltaTime
* @param {Object} x
* @param {Object} y
*/
var getVelocity = function(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
};
var hasParent = function(node, parent) {
while (node) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
};
var uniqueArray = function(src, key, sort) {
var results = [];
var values = [];
var i = 0;
while (i < src.length) {
var val = key ? src[i][key] : src[i];
if (values.indexOf(val) < 0) {
results.push(src[i]);
}
values[i] = val;
i++;
}
if (sort) {
if (!key) {
results = results.sort();
} else {
results = results.sort(function sortUniqueArray(a, b) {
return a[key] > b[key];
});
}
}
detect(event, $.gestures.touch);
return results;
};
var getMultiCenter = function(touches) {
var touchesLength = touches.length;
if (touchesLength === 1) {
return {
x: round(touches[0].pageX),
y: round(touches[0].pageY)
};
var detectTouchMove = function(event) {
if ($.gestures.stoped || !$.gestures.touch) {
return;
}
var touch = $.gestures.touch;
if (event.target != touch.target) {
return;
var x = 0;
var y = 0;
var i = 0;
while (i < touchesLength) {
x += touches[i].pageX;
y += touches[i].pageY;
i++;
}
var now = $.now();
var point = event.touches ? event.touches[0] : event;
touch.touchTime = now - touch.startTime;
touch.move = {
x: point.pageX,
y: point.pageY
};
if (now - touch.flickStartTime > 300) {
touch.flickStartTime = now;
touch.flickStart = touch.move;
}
touch.distance = getDistance(touch.start, touch.move);
touch.angle = getAngle(touch.start, touch.move);
touch.direction = getDirectionByAngle(touch.angle);
touch.lastDeltaX = touch.deltaX;
touch.lastDeltaY = touch.deltaY;
touch.deltaX = touch.move.x - touch.start.x;
touch.deltaY = touch.move.y - touch.start.y;
touch.gesture = event;
detect(event, touch);
return {
x: round(x / touchesLength),
y: round(y / touchesLength)
};
var detectTouchEnd = function(event) {
if ($.gestures.stoped || !$.gestures.touch) {
return;
};
var multiTouch = function() {
return $.options.gestureConfig.pinch;
};
var copySimpleTouchData = function(touch) {
var touches = [];
var i = 0;
while (i < touch.touches.length) {
touches[i] = {
pageX: round(touch.touches[i].pageX),
pageY: round(touch.touches[i].pageY)
};
i++;
}
var touch = $.gestures.touch;
if (event.target != touch.target) {
return;
return {
timestamp: $.now(),
gesture: touch.gesture,
touches: touches,
center: getMultiCenter(touch.touches),
deltaX: touch.deltaX,
deltaY: touch.deltaY
};
};
var calDelta = function(touch) {
var session = $.gestures.session;
var center = touch.center;
var offset = session.offsetDelta || {};
var prevDelta = session.prevDelta || {};
var prevTouch = session.prevTouch || {};
if (touch.gesture.type === $.EVENT_START || touch.gesture.type === $.EVENT_END) {
prevDelta = session.prevDelta = {
x: prevTouch.deltaX || 0,
y: prevTouch.deltaY || 0
};
offset = session.offsetDelta = {
x: center.x,
y: center.y
};
}
var now = $.now();
touch.touchTime = now - touch.startTime;
touch.flickTime = now - touch.flickStartTime;
touch.flickDistanceX = touch.move.x - touch.flickStart.x;
touch.flickDistanceY = touch.move.y - touch.flickStart.y;
touch.gesture = event;
touch.deltaX = prevDelta.x + (center.x - offset.x);
touch.deltaY = prevDelta.y + (center.y - offset.y);
};
var calTouchData = function(touch) {
var session = $.gestures.session;
var touches = touch.touches;
var touchesLength = touches.length;
detect(event, touch);
if (!session.firstTouch) {
session.firstTouch = copySimpleTouchData(touch);
}
if (multiTouch() && touchesLength > 1 && !session.firstMultiTouch) {
session.firstMultiTouch = copySimpleTouchData(touch);
} else if (touchesLength === 1) {
session.firstMultiTouch = false;
}
var firstTouch = session.firstTouch;
var firstMultiTouch = session.firstMultiTouch;
var offsetCenter = firstMultiTouch ? firstMultiTouch.center : firstTouch.center;
var center = touch.center = getMultiCenter(touches);
touch.timestamp = $.now();
touch.deltaTime = touch.timestamp - firstTouch.timestamp;
touch.angle = getAngle(offsetCenter, center);
touch.distance = getDistance(offsetCenter, center);
calDelta(touch);
touch.offsetDirection = getDirection(touch.deltaX, touch.deltaY);
touch.scale = firstMultiTouch ? getScale(firstMultiTouch.touches, touches) : 1;
touch.rotation = firstMultiTouch ? getRotation(firstMultiTouch.touches, touches) : 0;
calIntervalTouchData(touch);
};
var CAL_INTERVAL = 25;
var calIntervalTouchData = function(touch) {
var session = $.gestures.session;
var last = session.lastInterval || touch;
var deltaTime = touch.timestamp - last.timestamp;
var velocity;
var velocityX;
var velocityY;
var direction;
if (touch.gesture.type != $.EVENT_CANCEL && (deltaTime > CAL_INTERVAL || last.velocity === undefined)) {
var deltaX = last.deltaX - touch.deltaX;
var deltaY = last.deltaY - touch.deltaY;
var v = getVelocity(deltaTime, deltaX, deltaY);
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY);
session.lastInterval = touch;
} else {
velocity = last.velocity;
velocityX = last.velocityX;
velocityY = last.velocityY;
direction = last.direction;
}
touch.velocity = velocity;
touch.velocityX = velocityX;
touch.velocityY = velocityY;
touch.direction = direction;
};
var getTouches = function(event, touch) {
var allTouches = $.slice.call(event.touches);
var type = event.type;
var targetTouches = [];
var changedTargetTouches = [];
$.gestures.session || ($.gestures.session = {
targetIds: {}
});
if ((type === $.EVENT_START || type === $.EVENT_MOVE) && allTouches.length === 1) {
if (type === $.EVENT_START) { //first
touch.isFirst = true;
$.gestures.touch = $.gestures.session = {
firstTarget: event.target,
targetIds: {}
};
}
var targetIds = $.gestures.session.targetIds;
targetIds[allTouches[0].identifier] = true;
targetTouches = allTouches;
changedTargetTouches = allTouches;
touch.target = event.target;
} else {
var i = 0;
var targetTouches = [];
var changedTargetTouches = [];
var targetIds = $.gestures.session.targetIds;
var changedTouches = $.slice.call(event.changedTouches);
touch.target = event.target;
targetTouches = allTouches.filter(function(touch) {
return true; //return hasParent(touch.target, touch.firstTarget);
});
if (type === $.EVENT_START) {
i = 0;
while (i < targetTouches.length) {
targetIds[targetTouches[i].identifier] = true;
i++;
}
}
i = 0;
while (i < changedTouches.length) {
if (targetIds[changedTouches[i].identifier]) {
changedTargetTouches.push(changedTouches[i]);
}
if (type === $.EVENT_END || type === $.EVENT_CANCEL) {
delete targetIds[changedTouches[i].identifier];
}
i++;
}
if (!changedTargetTouches.length) {
return false;
}
}
targetTouches = uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true);
var touchesLength = targetTouches.length;
var changedTouchesLength = changedTargetTouches.length;
window.addEventListener($.EVENT_START, detectTouchStart);
window.addEventListener($.EVENT_MOVE, detectTouchMove);
window.addEventListener($.EVENT_END, detectTouchEnd);
window.addEventListener($.EVENT_CANCEL, detectTouchEnd);
touch.isFinal = ((type === $.EVENT_END || type === $.EVENT_CANCEL) && (touchesLength - changedTouchesLength === 0));
touch.touches = targetTouches;
touch.changedTouches = changedTargetTouches;
return true;
};
var handleTouchEvent = function(event) {
var touch = {
gesture: event
};
var touches = getTouches(event, touch);
if (!touches) {
return;
}
calTouchData(touch);
detect(event, touch);
$.gestures.session.prevTouch = touch;
};
window.addEventListener($.EVENT_START, handleTouchEvent);
window.addEventListener($.EVENT_MOVE, handleTouchEvent);
window.addEventListener($.EVENT_END, handleTouchEvent);
window.addEventListener($.EVENT_CANCEL, handleTouchEvent);
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
......@@ -1185,15 +1395,31 @@ var mui = (function(document, undefined) {
* @returns {undefined}
*/
(function($, name) {
var flickStartTime = 0;
var handle = function(event, touch) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var session = $.gestures.session;
var options = this.options;
if (touch.direction && options.flickMaxTime > touch.flickTime && touch.distance > options.flickMinDistince) {
var now = $.now();
switch (event.type) {
case $.EVENT_MOVE:
if (now - flickStartTime > 300) {
flickStartTime = now;
session.flickStart = touch.center;
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) {
touch.flick = true;
touch.flickTime = now - flickStartTime;
touch.flickDistanceX = touch.center.x - session.flickStart.x;
touch.flickDistanceY = touch.center.y - session.flickStart.y;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
break;
}
};
/**
* mui gesture flick
......@@ -1218,8 +1444,9 @@ var mui = (function(document, undefined) {
var handle = function(event, touch) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options;
if (touch.direction && options.swipeMaxTime > touch.touchTime && touch.distance > options.swipeMinDistince) {
if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
touch.swipe = true;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
}
......@@ -1245,31 +1472,35 @@ var mui = (function(document, undefined) {
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if (touch.direction) { //drag
//修正direction
//默认锁定单向drag(后续可能需要额外配置支持)
if (touch.lockDirection && touch.startDirection) {
if (touch.startDirection && touch.startDirection !== touch.direction) {
if (touch.startDirection === 'up' || touch.startDirection === 'down') {
if (!touch.direction) {
return;
}
//修正direction,可在session期间自行锁定拖拽方向，方便开发scroll类不同方向拖拽插件嵌套
if (session.lockDirection && session.startDirection) {
if (session.startDirection && session.startDirection !== touch.direction) {
if (session.startDirection === 'up' || session.startDirection === 'down') {
touch.direction = touch.deltaY < 0 ? 'up' : 'down';
} else {
touch.direction = touch.deltaX < 0 ? 'left' : 'right';
}
}
}
if (!touch.drag) {
touch.drag = true;
if (!session.drag) {
session.drag = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (touch.drag) {
if (session.drag && touch.isFinal) {
$.trigger(event.target, name + 'end', touch);
}
break;
......@@ -1282,7 +1513,9 @@ var mui = (function(document, undefined) {
name: name,
index: 20,
handle: handle,
options: {}
options: {
fingers: 1
}
});
})(mui, 'drag');
/**
......@@ -1292,24 +1525,34 @@ var mui = (function(document, undefined) {
* @returns {undefined}
*/
(function($, name) {
var lastTarget;
var lastTapTime;
var handle = function(event, touch) {
//if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
if (event.type === $.EVENT_END) { //ignore touchcancel
var options = this.options;
if (touch.distance < options.tapMaxDistance && touch.touchTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && touch.lastTarget && (touch.lastTarget === event.target)) { //same target
if (touch.lastTapTime && (touch.startTime - touch.lastTapTime) < options.tapMaxInterval) {
$.trigger(event.target, 'doubletap', touch);
touch.lastTapTime = $.now();
touch.lastTarget = event.target;
switch (event.type) {
case $.EVENT_END:
if (!touch.isFinal) {
return;
}
var target = event.target;
if (!target || (target.disabled || target.classList.contains('mui-disabled'))) {
return;
}
$.trigger(event.target, name, touch);
touch.lastTapTime = $.now();
touch.lastTarget = event.target;
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && lastTarget && (lastTarget === target)) { //same target
if (lastTapTime && (touch.timestamp - lastTapTime) < options.tapMaxInterval) {
$.trigger(target, 'doubletap', touch);
lastTapTime = $.now();
lastTarget = target;
return;
}
}
$.trigger(target, name, touch);
lastTapTime = $.now();
lastTarget = event.target;
}
break;
}
};
/**
* mui gesture tap
......@@ -1319,6 +1562,7 @@ var mui = (function(document, undefined) {
index: 30,
handle: handle,
options: {
fingers: 1,
tapMaxInterval: 300,
tapMaxDistance: 5,
tapMaxTime: 250
......@@ -1339,9 +1583,7 @@ var mui = (function(document, undefined) {
case $.EVENT_START:
clearTimeout(timer);
timer = setTimeout(function() {
if (!touch.drag) {
$.trigger(event.target, name, touch);
}
}, options.holdTimeout);
break;
case $.EVENT_MOVE:
......@@ -1363,6 +1605,7 @@ var mui = (function(document, undefined) {
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 500,
holdThreshold: 2
}
......@@ -1380,18 +1623,20 @@ var mui = (function(document, undefined) {
var options = this.options;
switch (event.type) {
case $.EVENT_START:
clearTimeout(timer);
if ($.options.gestureConfig.hold) {
timer && clearTimeout(timer);
timer = setTimeout(function() {
touch.hold = true;
$.trigger(event.target, name, touch);
}, options.holdTimeout);
}
break;
case $.EVENT_MOVE:
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
clearTimeout(timer);
if ($.options.gestureConfig.hold && touch.hold) {
if (timer) {
clearTimeout(timer) && (timer = null);
$.trigger(event.target, 'release', touch);
}
break;
......@@ -1405,6 +1650,7 @@ var mui = (function(document, undefined) {
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 0
}
});
......@@ -1423,7 +1669,8 @@ var mui = (function(document, undefined) {
hold: false,
flick: true,
swipe: true,
drag: true
drag: true,
pinch: false
}
};
/**
......@@ -2051,6 +2298,11 @@ var mui = (function(document, undefined) {
$(offCanvas).offCanvas('close');
return true;
}
var previewImage = $.isFunction($.getPreviewImage) && $.getPreviewImage();
if (previewImage && previewImage.isShown()) {
previewImage.close();
return true;
}
}
});
}
......@@ -2897,29 +3149,6 @@ var mui = (function(document, undefined) {
this.indicators.push(new Indicator(this, indicators[i]));
}
this.wrapper.addEventListener('scrollend', function() {
self.indicators.map(function(indicator) {
indicator.fade();
});
});
this.wrapper.addEventListener('scrollstart', function() {
self.indicators.map(function(indicator) {
indicator.fade(1);
});
});
// this.wrapper.addEventListener('beforescrollstart', function() {
// self.indicators.map(function(indicator) {
// indicator.fade(1, true);
// });
// });
this.wrapper.addEventListener('refresh', function() {
self.indicators.map(function(indicator) {
indicator.refresh();
});
});
},
_initSnap: function() {
this.currentPage = {};
......@@ -2998,26 +3227,48 @@ var mui = (function(document, undefined) {
pageX: 0
};
},
_initEvent: function() {
window.addEventListener('orientationchange', this);
window.addEventListener('resize', this);
this.scroller.addEventListener('webkitTransitionEnd', this);
this.wrapper.addEventListener('touchstart', this);
this.wrapper.addEventListener('touchcancel', this);
this.wrapper.addEventListener('touchend', this);
this.wrapper.addEventListener('drag', this);
this.wrapper.addEventListener('dragend', this);
this.wrapper.addEventListener('flick', this);
this.wrapper.addEventListener('scrollend', this);
_initEvent: function(detach) {
var action = detach ? 'removeEventListener' : 'addEventListener';
window[action]('orientationchange', this);
window[action]('resize', this);
this.scroller[action]('webkitTransitionEnd', this);
this.wrapper[action]('touchstart', this);
this.wrapper[action]('touchcancel', this);
this.wrapper[action]('touchend', this);
this.wrapper[action]('drag', this);
this.wrapper[action]('dragend', this);
this.wrapper[action]('flick', this);
this.wrapper[action]('scrollend', this);
if (this.options.scrollX) {
this.wrapper.addEventListener('swiperight', this);
this.wrapper[action]('swiperight', this);
}
var segmentedControl = this.wrapper.querySelector('.mui-segmented-control');
if (segmentedControl) { //靠，这个bug排查了一下午，阻止hash跳转，一旦hash跳转会导致可拖拽选项卡的tab不见
mui(segmentedControl).on('click', 'a', $.preventDefault);
mui(segmentedControl)[detach ? 'off' : 'on']('click', 'a', $.preventDefault);
}
this.wrapper[action]('scrollend', this._handleIndicatorScrollend.bind(this));
this.wrapper[action]('scrollstart', this._handleIndicatorScrollstart.bind(this));
this.wrapper[action]('refresh', this._handleIndicatorRefresh.bind(this));
},
_handleIndicatorScrollend: function() {
this.indicators.map(function(indicator) {
indicator.fade();
});
},
_handleIndicatorScrollstart: function() {
this.indicators.map(function(indicator) {
indicator.fade(1);
});
},
_handleIndicatorRefresh: function() {
this.indicators.map(function(indicator) {
indicator.refresh();
});
},
handleEvent: function(e) {
if (this.stopped) {
......@@ -3113,8 +3364,8 @@ var mui = (function(document, undefined) {
// if (direction !== 'left' && direction !== 'right') {
// isReturn = true;
// } else {
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
// }
}
} else if (this.options.scrollY && !this.moved) {
......@@ -3129,8 +3380,8 @@ var mui = (function(document, undefined) {
// }
// }
if (!this.moved) {
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
}
} else if (this.options.scrollX && !this.moved) {
isReturn = true;
......@@ -3156,8 +3407,8 @@ var mui = (function(document, undefined) {
deltaX = detail.deltaX;
deltaY = detail.deltaY;
} else { //move
deltaX = detail.deltaX - detail.lastDeltaX;
deltaY = detail.deltaY - detail.lastDeltaY;
deltaX = detail.deltaX - $.gestures.session.prevTouch.deltaX;
deltaY = detail.deltaY - $.gestures.session.prevTouch.deltaY;
}
var absDeltaX = Math.abs(detail.deltaX);
var absDeltaY = Math.abs(detail.deltaY);
......@@ -3431,6 +3682,7 @@ var mui = (function(document, undefined) {
}
this.lastX = this.x;
this.lastY = this.y;
$.trigger(this.scroller, 'scroll', this);
},
reLayout: function() {
this.wrapper.offsetHeight;
......@@ -3503,6 +3755,11 @@ var mui = (function(document, undefined) {
},
gotoPage: function(index) {
this._gotoPage(index);
},
destory: function() {
this._initEvent(true); //detach
delete $.data[this.wrapper.getAttribute('data-scroll')];
this.wrapper.setAttribute('data-scroll', '');
}
});
//Indicator
......@@ -3719,9 +3976,13 @@ var mui = (function(document, undefined) {
},
//API
resetPosition: function(time) {
if (this.pulldown && this.y >= this.options.down.height) {
if (this.pulldown) {
if (this.y >= this.options.down.height) {
this.pulldownLoading(undefined, time || 0);
return true;
} else {
this.topPocket.classList.remove(CLASS_VISIBILITY);
}
}
return this._super(time);
},
......@@ -3810,7 +4071,9 @@ var mui = (function(document, undefined) {
} else {
pullRefreshApi = $.data[id];
}
if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
pullRefreshApi.pulldownLoading(options.down.autoY);
} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
pullRefreshApi.pullupLoading();
}
//暂不提供这种调用方式吧
......@@ -3844,10 +4107,10 @@ var mui = (function(document, undefined) {
var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
var SELECTOR_SLIDER_PROGRESS_BAR = '.mui-slider-progress-bar';
var Slider = $.Scroll.extend({
var Slider = $.Slider = $.Scroll.extend({
init: function(element, options) {
this._super(element, $.extend(true, {
fingers: 1,
interval: 0, //设置为0，则不定时轮播
scrollY: false,
scrollX: true,
......@@ -3886,11 +4149,8 @@ var mui = (function(document, undefined) {
this._initTimer();
}
},
_initEvent: function() {
_triggerSlide: function() {
var self = this;
self._super();
self.wrapper.addEventListener('swiperight', $.stopPropagation);
self.wrapper.addEventListener('scrollend', function() {
self.isInTransition = false;
var page = self.currentPage;
self.slideNumber = self._fixedSlideNumber();
......@@ -3903,14 +4163,15 @@ var mui = (function(document, undefined) {
}
if (self.lastSlideNumber != self.slideNumber) {
self.lastSlideNumber = self.slideNumber;
self.lastPage = self.currentPage;
$.trigger(self.wrapper, 'slide', {
slideNumber: self.slideNumber
});
}
self._initTimer();
});
self.wrapper.addEventListener('slide', function(e) {
},
_handleSlide: function(e) {
var self = this;
if (e.target !== self.wrapper) {
return;
}
......@@ -3956,21 +4217,32 @@ var mui = (function(document, undefined) {
}
}
e.stopPropagation();
});
self.wrapper.addEventListener($.eventName('shown', 'tab'), function(e) { //tab
},
_handleTabShow: function(e) {
var self = this;
self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
});
//indicator
var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
if (indicator) {
indicator.addEventListener('tap', function(event) {
},
_handleIndicatorTap: function(event) {
var target = event.target;
if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
event.stopPropagation();
}
});
},
_initEvent: function(detach) {
var self = this;
self._super(detach);
var action = detach ? 'removeEventListener' : 'addEventListener';
self.wrapper[action]('swiperight', $.stopPropagation);
self.wrapper[action]('scrollend', self._triggerSlide.bind(this));
self.wrapper[action]('slide', self._handleSlide.bind(this));
self.wrapper[action]($.eventName('shown', 'tab'), self._handleTabShow.bind(this));
//indicator
var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
if (indicator) {
indicator[action]('tap', self._handleIndicatorTap.bind(this));
}
},
_drag: function(e) {
......@@ -4050,7 +4322,7 @@ var mui = (function(document, undefined) {
// return;
// }
if (e.type === 'flick') {
if (detail.touchTime < 200) { //flick，太容易触发，额外校验一下touchtime
if (detail.deltaTime < 200) { //flick，太容易触发，额外校验一下deltaTime
this.x = this._getPage((this.slideNumber + (direction === 'right' ? -1 : 1)), true).x;
}
this.resetPosition(this.options.bounceTime);
......@@ -4153,6 +4425,11 @@ var mui = (function(document, undefined) {
} else {
this._super();
}
},
destory: function() {
this._initEvent(true); //detach
delete $.data[this.wrapper.getAttribute('data-slider')];
this.wrapper.setAttribute('data-slider', '');
}
});
$.fn.slider = function(options) {
......@@ -4325,10 +4602,16 @@ var mui = (function(document, undefined) {
});
}
},
pulldownLoading: function() {
pulldownLoading: function() { //该方法是子页面调用的
var callback = $.options.pullRefresh.down.callback;
callback && callback.call(this);
},
_pulldownLoading: function() { //该方法是子页面调用的
var self = this;
$.plusReady(function() {
plus.webview.getWebviewById(self.options.webviewId).evalJS("mui&&mui.options.pullRefresh.down&&mui.options.pullRefresh.down.callback()");
});
},
endPulldownToRefresh: function() { //该方法是子页面调用的
var webview = plus.webview.currentWebview();
webview.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
......@@ -4430,7 +4713,9 @@ var mui = (function(document, undefined) {
} else {
pullRefreshApi = $.data[id];
}
if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
pullRefreshApi._pulldownLoading(); //parent webview
} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
pullRefreshApi.pullupLoading();
}
return pullRefreshApi;
......@@ -4533,10 +4818,10 @@ var mui = (function(document, undefined) {
case 'drag':
var detail = e.detail;
if (!this.startX) {
this.startX = detail.move.x;
this.startX = detail.center.x;
this.lastX = this.startX;
} else {
this.lastX = detail.move.x;
this.lastX = detail.center.x;
}
if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
if (this.slideIn) {
......@@ -4556,8 +4841,8 @@ var mui = (function(document, undefined) {
this.startX = this.lastX;
this.isDragging = true;
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
this.scroller.classList.remove(CLASS_TRANSITIONING);
this.offsetX = this.getTranslateX();
......@@ -4943,7 +5228,11 @@ var mui = (function(document, undefined) {
var CLASS_ACTION = 'mui-action';
var handle = function(event, target) {
if (target.className && ~target.className.indexOf(CLASS_ACTION)) {
var className = target.className || '';
if (typeof className !== 'string') { //svg className(SVGAnimatedString)
className = '';
}
if (className && ~className.indexOf(CLASS_ACTION)) {
if (target.classList.contains('mui-action-back')) {
event.preventDefault();
}
......@@ -5691,7 +5980,7 @@ var mui = (function(document, undefined) {
timer = $.later(function() {
toggleActive(true);
}, 100);
} else{
} else {
toggleActive(true);
}
}
......@@ -5972,8 +6261,8 @@ var mui = (function(document, undefined) {
sliderHandle && toggleEvents(cell, true);
});
var radioOrCheckboxClick = function(event) {
var type = event.target&&event.target.type||'';
if(type==='radio'||type==='checkbox'){
var type = event.target && event.target.type || '';
if (type === 'radio' || type === 'checkbox') {
return;
}
var classList = cell.classList;
......
dist/js/mui.min.js
View file @ cf92c3d8
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/css/feedback-page.css 0 → 100644
View file @ cf92c3d8
.feedback body {
background-color: #EFEFF4;
}
.feedback input,
.feedback textarea {
border: none !important;
}
.feedback textarea {
height: 100px;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.feedback .row {
width: 100%;
background-color: #fff;
}
.feedback p {
padding: 10px 15px 0;
}
.feedback button {
width: 90%;
height: 46px;
left: 50%;
-webkit-transform: translate(-50%);
}
.feedback .hidden {
display: none;
}
.feedback .image-list {
width: 100%;
height: 85px;
background-size: cover;
padding: 10px 10px;
overflow: hidden;
}
.feedback .image-item {
width: 65px;
height: 65px;
background-image: url(../images/iconfont-tianjia.png);
background-size: 100% 100%;
display: inline-block;
position: relative;
border-radius: 5px;
margin-right: 10px;
margin-bottom: 10px;
border: solid 1px #e8e8e8;
}
.feedback .image-item input[type="file"] {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 0;
}
.feedback .image-item.space {
border: none;
}
.feedback .image-item .image-close {
position: absolute;
display: inline-block;
right: -6px;
top: -6px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 12px;
background-color: #FF5053;
color: #f3f3f3;
border: solid 1px #FF5053;
font-size: 9px;
font-weight: 200;
z-index: 1;
}
.feedback .image-item.space .image-close {
display: none;
}
\ No newline at end of file
examples/hello-mui/css/mui.css
View file @ cf92c3d8
/*!
* =====================================================
* Mui v1.9.0 (https://github.com/dcloudio/mui)
* Mui v2.0.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
......
examples/hello-mui/css/mui.dtpicker.css
View file @ cf92c3d8
......@@ -13,6 +13,11 @@
.mui-dtpicker.mui-active {
-webkit-transform: translateY(0px);
}
/*用于将 html body 禁止滚动条*/
.mui-dtpicker-active-for-page {
overflow: hidden !important;
}
.mui-android-5-1 .mui-dtpicker {
bottom: -300px;
-webkit-transition-property: bottom;
......@@ -42,6 +47,12 @@
border-top: solid 1px #eee;
background-color: #fff;
}
.mui-ios .mui-dtpicker-body {
-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-dtpicker-title h5 {
display: inline-block;
width: 20%;
......@@ -58,9 +69,6 @@
float: left;
border: none;
}
.mui-dtpicker .mui-listpicker ul li {
padding: 10px;
}
/*年月日时分*/
[data-type="datetime"] .mui-listpicker,
......
examples/hello-mui/css/mui.listpicker.css
View file @ cf92c3d8
......@@ -10,7 +10,7 @@
border: solid 1px #ccc;
padding: 0px;
margin: 3px;
height: 200px;
height: 185px;
background-color: #fff;
overflow: hidden;
border-radius: 3px;
......@@ -18,18 +18,22 @@
.mui-listpicker .mui-listpicker-inner {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
border-radius: 3px;
-webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
-webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
}
.mui-listpicker .mui-listpicker-inner-ios {
.mui-ios .mui-listpicker .mui-listpicker-inner {
width: calc(100% + 8px);
padding-right: 8px;
}
.mui-android .mui-listpicker .mui-listpicker-inner {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mui-listpicker .mui-listpicker-inner::-webkit-scrollbar {
width: 0px;
height: 0px;
......@@ -42,14 +46,32 @@
position: relative;
}
.mui-listpicker ul li {
box-sizing: border-box;
position: relative;
padding: 8px;
height: 36px;
line-height: 36px;
text-align: center;
color: #555;
white-space:nowrap;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mui-listpicker.three-dimensional {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-listpicker.three-dimensional .mui-listpicker-inner {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-listpicker.three-dimensional ul {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-listpicker.three-dimensional ul li {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-listpicker ul li:last-child {
border-bottom: none;
}
......@@ -68,6 +90,6 @@
top: 50%;
z-index: 0;
}
.mui-listpicker .mui-listpicker-highlight {
.mui-listpicker .mui-listpicker-item-selected {
color: green;
}
\ No newline at end of file
examples/hello-mui/css/mui.min.css
View file @ cf92c3d8
/*!
* =====================================================
* Mui v1.9.0 (https://github.com/dcloudio/mui)
* Mui v2.0.0 (https://github.com/dcloudio/mui)
* =====================================================
*//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{font:inherit;margin:0;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;outline:0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}body{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:17px;line-height:21px;color:#000;background-color:#efeff4;-webkit-overflow-scrolling:touch}a{text-decoration:none;color:#007aff}a:active{color:#0062cc}.mui-content{background-color:#efeff4;-webkit-overflow-scrolling:touch}.mui-bar-nav~.mui-content{padding-top:44px}.mui-bar-nav~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{top:44px}.mui-bar-header-secondary~.mui-content{padding-top:88px}.mui-bar-header-secondary~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{top:88px}.mui-bar-footer~.mui-content{padding-bottom:44px}.mui-bar-footer~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:44px}.mui-bar-footer-secondary~.mui-content{padding-bottom:88px}.mui-bar-footer-secondary~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:88px}.mui-bar-tab~.mui-content{padding-bottom:50px}.mui-bar-tab~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:50px}.mui-bar-footer-secondary-tab~.mui-content{padding-bottom:94px}.mui-bar-footer-secondary-tab~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{bottom:94px}.mui-content-padded{margin:10px}.mui-inline{display:inline-block;vertical-align:top}.mui-block{display:block!important}.mui-visibility{visibility:visible!important}.mui-hidden{display:none!important}.mui-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mui-ellipsis-2{display:-webkit-box;overflow:hidden;white-space:normal!important;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.mui-table{display:table;width:100%;table-layout:fixed}.mui-table-cell{position:relative;display:table-cell}.mui-text-left{text-align:left!important}.mui-text-center{text-align:center!important}.mui-text-justify{text-align:justify!important}.mui-text-right{text-align:right!important}.mui-pull-left{float:left}.mui-pull-right{float:right}.mui-list-unstyled{padding-left:0;list-style:none}.mui-list-inline{margin-left:-5px;padding-left:0;list-style:none}.mui-list-inline>li{display:inline-block;padding-right:5px;padding-left:5px}.mui-clearfix:after,.mui-clearfix:before{display:table;content:' '}.mui-clearfix:after{clear:both}.mui-bg-primary{background-color:#007aff}.mui-bg-positive{background-color:#4cd964}.mui-bg-negative{background-color:#dd524d}.mui-error{margin:88px 35px;padding:10px;border-radius:6px;background-color:#bbb}.mui-subtitle{font-size:15px}h1,h2,h3,h4,h5,h6{line-height:1;margin-top:5px;margin-bottom:5px}.mui-h1,h1{font-size:36px}.mui-h2,h2{font-size:30px}.mui-h3,h3{font-size:24px}.mui-h4,h4{font-size:18px}.mui-h5,h5{font-size:14px;font-weight:400;color:#8f8f94}.mui-h6,h6{font-size:12px;font-weight:400;color:#8f8f94}p{font-size:14px;margin-top:0;margin-bottom:10px;color:#8f8f94}.mui-col-xs-12{width:100%}.mui-col-xs-11{width:91.66666667%}.mui-col-xs-10{width:83.33333333%}.mui-col-xs-9{width:75%}.mui-col-xs-8{width:66.66666667%}.mui-col-xs-7{width:58.33333333%}.mui-col-xs-6{width:50%}.mui-col-xs-5{width:41.66666667%}.mui-col-xs-4{width:33.33333333%}.mui-col-xs-3{width:25%}.mui-col-xs-2{width:16.66666667%}.mui-col-xs-1{width:8.33333333%}@media (min-width:400px){.mui-col-sm-12{width:100%}.mui-col-sm-11{width:91.66666667%}.mui-col-sm-10{width:83.33333333%}.mui-col-sm-9{width:75%}.mui-col-sm-8{width:66.66666667%}.mui-col-sm-7{width:58.33333333%}.mui-col-sm-6{width:50%}.mui-col-sm-5{width:41.66666667%}.mui-col-sm-4{width:33.33333333%}.mui-col-sm-3{width:25%}.mui-col-sm-2{width:16.66666667%}.mui-col-sm-1{width:8.33333333%}}.mui-scroll-wrapper{position:absolute;z-index:1;top:0;bottom:0;left:0;overflow:hidden;width:100%;-webkit-backface-visibility:hidden}.mui-scroll{position:absolute;z-index:1;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden}.mui-scrollbar{position:absolute;z-index:9998;overflow:hidden;-webkit-transition:500ms;transition:500ms;transform:translateZ(0px);pointer-events:none;opacity:0}.mui-scrollbar-vertical{top:0;right:1px;bottom:2px;width:4px}.mui-scrollbar-vertical .mui-scrollbar-indicator{width:100%}.mui-scrollbar-horizontal{right:2px;bottom:0;left:2px;height:4px}.mui-scrollbar-horizontal .mui-scrollbar-indicator{height:100%}.mui-scrollbar-indicator{position:absolute;display:block;box-sizing:border-box;-webkit-transition:.01s cubic-bezier(.1,.57,.1,1);transition:.01s cubic-bezier(.1,.57,.1,1);transform:translate(0px,0) translateZ(0px);border:1px solid rgba(255,255,255,.80196);border-radius:2px;background:rgba(0,0,0,.39804)}.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll-wrapper,.mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll-wrapper{position:absolute;top:0;bottom:0;left:0;overflow:hidden;width:100%}.mui-plus-pullrefresh .mui-fullscreen .mui-scroll-wrapper .mui-scroll,.mui-plus-pullrefresh .mui-fullscreen .mui-slider-group .mui-scroll{position:absolute;width:100%}.mui-plus-pullrefresh .mui-scroll-wrapper,.mui-plus-pullrefresh .mui-slider-group{position:static;top:auto;bottom:auto;left:auto;overflow:auto;width:auto}.mui-plus-pullrefresh .mui-slider-group{overflow:visible}.mui-plus-pullrefresh .mui-scroll{position:static;width:auto}.mui-off-canvas-wrap .mui-bar{position:absolute!important}.mui-off-canvas-wrap{position:relative;z-index:1;overflow:hidden;width:100%;height:100%}.mui-off-canvas-wrap .mui-inner-wrap{position:relative;z-index:1;width:100%;height:100%}.mui-off-canvas-wrap .mui-inner-wrap.mui-transitioning{-webkit-transition:-webkit-transform 200ms ease;transition:transform 200ms ease}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-left{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-off-canvas-wrap .mui-inner-wrap .mui-off-canvas-right{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-off-canvas-wrap.mui-active{overflow:hidden;height:100%}.mui-off-canvas-wrap.mui-active .mui-off-canvas-backdrop{position:absolute;z-index:998;top:0;right:0;bottom:0;left:0;display:block;transition:background 200ms ease;background:rgba(0,0,0,.4);box-shadow:-4px 0 4px rgba(0,0,0,.5),4px 0 4px rgba(0,0,0,.5);-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent}.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-right{z-index:10000!important;-webkit-transform:translate3d(100%,0,0)}.mui-off-canvas-wrap.mui-slide-in .mui-off-canvas-left{z-index:10000!important;-webkit-transform:translate3d(-100%,0,0)}.mui-off-canvas-left,.mui-off-canvas-right{position:absolute;z-index:-1;top:0;bottom:0;visibility:hidden;box-sizing:content-box;width:70%;min-height:100%;background:#333;-webkit-backface-visibility:hidden;-webkit-overflow-scrolling:touch}.mui-off-canvas-left.mui-transitioning,.mui-off-canvas-right.mui-transitioning{-webkit-transition:-webkit-transform 200ms ease;transition:transform 200ms ease}.mui-off-canvas-left{left:0}.mui-off-canvas-right{right:0}.mui-loading .mui-spinner{display:block;margin:0 auto}.mui-spinner{display:inline-block;width:24px;height:24px;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:spinner-spin 1s step-end infinite;animation:spinner-spin 1s step-end infinite}.mui-spinner:after{display:block;width:100%;height:100%;content:'';background-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>');background-repeat:no-repeat;background-position:50%;background-size:100%}.mui-spinner-white:after{background-image:url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%23fff\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>')}@-webkit-keyframes spinner-spin{0%{-webkit-transform:rotate(0deg)}8.33333333%{-webkit-transform:rotate(30deg)}16.66666667%{-webkit-transform:rotate(60deg)}25%{-webkit-transform:rotate(90deg)}33.33333333%{-webkit-transform:rotate(120deg)}41.66666667%{-webkit-transform:rotate(150deg)}50%{-webkit-transform:rotate(180deg)}58.33333333%{-webkit-transform:rotate(210deg)}66.66666667%{-webkit-transform:rotate(240deg)}75%{-webkit-transform:rotate(270deg)}83.33333333%{-webkit-transform:rotate(300deg)}91.66666667%{-webkit-transform:rotate(330deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spinner-spin{0%{transform:rotate(0deg)}8.33333333%{transform:rotate(30deg)}16.66666667%{transform:rotate(60deg)}25%{transform:rotate(90deg)}33.33333333%{transform:rotate(120deg)}41.66666667%{transform:rotate(150deg)}50%{transform:rotate(180deg)}58.33333333%{transform:rotate(210deg)}66.66666667%{transform:rotate(240deg)}75%{transform:rotate(270deg)}83.33333333%{transform:rotate(300deg)}91.66666667%{transform:rotate(330deg)}100%{transform:rotate(360deg)}}.mui-btn,button,input[type=button],input[type=reset],input[type=submit]{font-size:14px;font-weight:400;line-height:1.42;position:relative;display:inline-block;margin-bottom:0;padding:6px 12px;cursor:pointer;-webkit-transition:all;transition:all;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;transition-duration:.2s;text-align:center;vertical-align:top;white-space:nowrap;color:#333;border:1px solid #ccc;border-radius:3px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;background-color:#fff;background-clip:padding-box}.mui-btn.mui-active:enabled,.mui-btn:enabled:active,button.mui-active:enabled,button:enabled:active,input[type=button].mui-active:enabled,input[type=button]:enabled:active,input[type=reset].mui-active:enabled,input[type=reset]:enabled:active,input[type=submit].mui-active:enabled,input[type=submit]:enabled:active{color:#fff;background-color:#929292}.mui-btn.mui-disabled,.mui-btn:disabled,button.mui-disabled,button:disabled,input[type=button].mui-disabled,input[type=button]:disabled,input[type=reset].mui-disabled,input[type=reset]:disabled,input[type=submit].mui-disabled,input[type=submit]:disabled{opacity:.6}.mui-btn-blue,.mui-btn-primary,input[type=submit]{color:#fff;border:1px solid #007aff;background-color:#007aff}.mui-btn-blue.mui-active:enabled,.mui-btn-blue:enabled:active,.mui-btn-primary.mui-active:enabled,.mui-btn-primary:enabled:active,input[type=submit].mui-active:enabled,input[type=submit]:enabled:active{color:#fff;border:1px solid #0062cc;background-color:#0062cc}.mui-btn-green,.mui-btn-positive,.mui-btn-success{color:#fff;border:1px solid #4cd964;background-color:#4cd964}.mui-btn-green.mui-active:enabled,.mui-btn-green:enabled:active,.mui-btn-positive.mui-active:enabled,.mui-btn-positive:enabled:active,.mui-btn-success.mui-active:enabled,.mui-btn-success:enabled:active{color:#fff;border:1px solid #2ac845;background-color:#2ac845}.mui-btn-warning,.mui-btn-yellow{color:#fff;border:1px solid #f0ad4e;background-color:#f0ad4e}.mui-btn-warning.mui-active:enabled,.mui-btn-warning:enabled:active,.mui-btn-yellow.mui-active:enabled,.mui-btn-yellow:enabled:active{color:#fff;border:1px solid #ec971f;background-color:#ec971f}.mui-btn-danger,.mui-btn-negative,.mui-btn-red{color:#fff;border:1px solid #dd524d;background-color:#dd524d}.mui-btn-danger.mui-active:enabled,.mui-btn-danger:enabled:active,.mui-btn-negative.mui-active:enabled,.mui-btn-negative:enabled:active,.mui-btn-red.mui-active:enabled,.mui-btn-red:enabled:active{color:#fff;border:1px solid #cf2d28;background-color:#cf2d28}.mui-btn-purple,.mui-btn-royal{color:#fff;border:1px solid #8a6de9;background-color:#8a6de9}.mui-btn-purple.mui-active:enabled,.mui-btn-purple:enabled:active,.mui-btn-royal.mui-active:enabled,.mui-btn-royal:enabled:active{color:#fff;border:1px solid #6641e2;background-color:#6641e2}.mui-btn-grey{color:#fff;border:1px solid #c7c7cc;background-color:#c7c7cc}.mui-btn-grey.mui-active:enabled,.mui-btn-grey:enabled:active{color:#fff;border:1px solid #acacb4;background-color:#acacb4}.mui-btn-outlined{background-color:transparent}.mui-btn-outlined.mui-btn-blue,.mui-btn-outlined.mui-btn-primary{color:#007aff}.mui-btn-outlined.mui-btn-green,.mui-btn-outlined.mui-btn-positive,.mui-btn-outlined.mui-btn-success{color:#4cd964}.mui-btn-outlined.mui-btn-warning,.mui-btn-outlined.mui-btn-yellow{color:#f0ad4e}.mui-btn-outlined.mui-btn-danger,.mui-btn-outlined.mui-btn-negative,.mui-btn-outlined.mui-btn-red{color:#dd524d}.mui-btn-outlined.mui-btn-purple,.mui-btn-outlined.mui-btn-royal{color:#8a6de9}.mui-btn-outlined.mui-btn-blue:enabled:active,.mui-btn-outlined.mui-btn-danger:enabled:active,.mui-btn-outlined.mui-btn-green:enabled:active,.mui-btn-outlined.mui-btn-negative:enabled:active,.mui-btn-outlined.mui-btn-positive:enabled:active,.mui-btn-outlined.mui-btn-primary:enabled:active,.mui-btn-outlined.mui-btn-purple:enabled:active,.mui-btn-outlined.mui-btn-red:enabled:active,.mui-btn-outlined.mui-btn-royal:enabled:active,.mui-btn-outlined.mui-btn-success:enabled:active,.mui-btn-outlined.mui-btn-warning:enabled:active,.mui-btn-outlined.mui-btn-yellow:enabled:active{color:#fff}.mui-btn-link{padding-top:6px;padding-bottom:6px;color:#007aff;border:0;background-color:transparent}.mui-btn-link.mui-active:enabled,.mui-btn-link:enabled:active{color:#0062cc;background-color:transparent}.mui-btn-block{font-size:18px;display:block;width:100%;margin-bottom:10px;padding:15px 0}.mui-btn .mui-badge{font-size:14px;margin:-2px -4px -2px 4px;background-color:rgba(0,0,0,.15)}.mui-btn .mui-badge-inverted,.mui-btn:enabled:active .mui-badge-inverted{background-color:transparent}.mui-btn-negative:enabled:active .mui-badge-inverted,.mui-btn-positive:enabled:active .mui-badge-inverted,.mui-btn-primary:enabled:active .mui-badge-inverted{color:#fff}.mui-btn-block .mui-badge{position:absolute;right:0;margin-right:10px}.mui-btn .mui-icon{font-size:inherit}.mui-btn.mui-icon{font-size:14px;line-height:1.42}.mui-btn.mui-fab{width:56px;height:56px;padding:16px;border-radius:50%;outline:0}.mui-btn.mui-fab.mui-btn-mini{width:40px;height:40px;padding:8px}.mui-btn.mui-fab .mui-icon{font-size:24px;line-height:24px;width:24px;height:24px}.mui-bar{position:fixed;z-index:10;right:0;left:0;height:44px;padding-right:10px;padding-left:10px;border-bottom:0;background-color:#f7f7f7;-webkit-box-shadow:0 0 1px rgba(0,0,0,.85);box-shadow:0 0 1px rgba(0,0,0,.85);-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-bar .mui-title{right:40px;left:40px;display:inline-block;overflow:hidden;width:auto;margin:0;text-overflow:ellipsis}.mui-bar .mui-backdrop{background:0 0}.mui-bar-header-secondary{top:44px}.mui-bar-footer{bottom:0}.mui-bar-footer-secondary{bottom:44px}.mui-bar-footer-secondary-tab{bottom:50px}.mui-bar-footer,.mui-bar-footer-secondary,.mui-bar-footer-secondary-tab{border-top:0}.mui-bar-nav{top:0;-webkit-box-shadow:0 1px 6px #ccc;box-shadow:0 1px 6px #ccc}.mui-bar-nav~.mui-content .mui-anchor{display:block;visibility:hidden;height:45px;margin-top:-45px}.mui-bar-nav.mui-bar .mui-icon{margin-right:-10px;margin-left:-10px;padding-right:10px;padding-left:10px}.mui-title{font-size:17px;font-weight:500;line-height:44px;position:absolute;display:block;width:100%;margin:0 -10px;padding:0;text-align:center;white-space:nowrap;color:#000}.mui-title a{color:inherit}.mui-bar-tab{bottom:0;display:table;width:100%;height:50px;padding:0;table-layout:fixed;border-top:0;border-bottom:0;-webkit-touch-callout:none}.mui-bar-tab .mui-tab-item{display:table-cell;overflow:hidden;width:1%;height:50px;text-align:center;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;color:#929292}.mui-bar-tab .mui-tab-item.mui-active{color:#007aff}.mui-bar-tab .mui-tab-item .mui-icon{top:3px;width:24px;height:24px;padding-top:0;padding-bottom:0}.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label{font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis}.mui-bar-tab .mui-tab-item .mui-icon:active{background:0 0}.mui-focusin>.mui-bar-header-secondary,.mui-focusin>.mui-bar-nav{position:absolute}.mui-focusin>.mui-bar~.mui-content{padding-bottom:0}.mui-bar .mui-btn{font-weight:400;position:relative;z-index:20;top:7px;margin-top:0;padding:6px 12px 7px}.mui-bar .mui-btn.mui-pull-right{margin-left:10px}.mui-bar .mui-btn.mui-pull-left{margin-right:10px}.mui-bar .mui-btn-link{font-size:16px;line-height:44px;top:0;padding:0;color:#007aff;border:0}.mui-bar .mui-btn-link.mui-active,.mui-bar .mui-btn-link:active{color:#0062cc}.mui-bar .mui-btn-block{font-size:16px;top:6px;margin-bottom:0;padding:5px 0}.mui-bar .mui-btn-nav.mui-pull-left{margin-left:-5px}.mui-bar .mui-btn-nav.mui-pull-left .mui-icon-left-nav{margin-right:-3px}.mui-bar .mui-btn-nav.mui-pull-right{margin-right:-5px}.mui-bar .mui-btn-nav.mui-pull-right .mui-icon-right-nav{margin-left:-3px}.mui-bar .mui-btn-nav:active{opacity:.3}.mui-bar .mui-icon{font-size:24px;position:relative;z-index:20;padding-top:10px;padding-bottom:10px}.mui-bar .mui-icon:active{opacity:.3}.mui-bar .mui-btn .mui-icon{top:1px;margin:0;padding:0}.mui-bar .mui-title .mui-icon{margin:0;padding:0}.mui-bar .mui-title .mui-icon.mui-icon-caret{top:4px;margin-left:-5px}.mui-bar input[type=search]{height:29px;margin:6px 0}.mui-bar .mui-input-row .mui-btn{padding:12px 10px}.mui-bar .mui-search:before{margin-top:-10px}.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear,.mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech{top:0;right:12px}.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-clear~.mui-icon-clear,.mui-bar.mui-bar-header-secondary .mui-input-row .mui-input-speech~.mui-icon-speech{top:0;right:0}.mui-bar .mui-segmented-control{top:7px;width:auto;margin:0 auto}.mui-badge{font-size:12px;line-height:1;display:inline-block;padding:3px 6px;color:#333;border-radius:100px;background-color:rgba(0,0,0,.15)}.mui-badge.mui-badge-inverted{padding:0 5px 0 0;color:#929292;background-color:transparent}.mui-badge-blue,.mui-badge-primary{color:#fff;background-color:#007aff}.mui-badge-blue.mui-badge-inverted,.mui-badge-primary.mui-badge-inverted{color:#007aff;background-color:transparent}.mui-badge-green,.mui-badge-success{color:#fff;background-color:#4cd964}.mui-badge-green.mui-badge-inverted,.mui-badge-success.mui-badge-inverted{color:#4cd964;background-color:transparent}.mui-badge-warning,.mui-badge-yellow{color:#fff;background-color:#f0ad4e}.mui-badge-warning.mui-badge-inverted,.mui-badge-yellow.mui-badge-inverted{color:#f0ad4e;background-color:transparent}.mui-badge-danger,.mui-badge-red{color:#fff;background-color:#dd524d}.mui-badge-danger.mui-badge-inverted,.mui-badge-red.mui-badge-inverted{color:#dd524d;background-color:transparent}.mui-badge-purple,.mui-badge-royal{color:#fff;background-color:#8a6de9}.mui-badge-purple.mui-badge-inverted,.mui-badge-royal.mui-badge-inverted{color:#8a6de9;background-color:transparent}.mui-icon .mui-badge{font-size:10px;line-height:1.4;position:absolute;top:-2px;left:100%;margin-left:-10px;padding:1px 5px;color:#fff;background:red}.mui-card{overflow:hidden;margin:0 15px;border:1px solid #ddd;border-radius:6px;background-color:#fff;background-clip:padding-box}.mui-content>.mui-card:first-child{margin-top:15px}.mui-card .mui-input-group .mui-input-row:last-child:after,.mui-card .mui-input-group .mui-input-row:last-child:before,.mui-card .mui-input-group:after,.mui-card .mui-input-group:before{height:0}.mui-card .mui-table-view{margin-bottom:0;border-top:0;border-bottom:0;border-radius:6px}.mui-card .mui-table-view .mui-table-view-divider:first-child{top:0;border-top-left-radius:6px;border-top-right-radius:6px}.mui-card .mui-table-view .mui-table-view-divider:last-child{border-bottom-right-radius:6px;border-bottom-left-radius:6px}.mui-card .mui-table-view:after,.mui-card .mui-table-view:before,.mui-card>.mui-table-view>.mui-table-view-cell:last-child:after,.mui-card>.mui-table-view>.mui-table-view-cell:last-child:before{height:0}.mui-table-view{position:relative;margin-top:0;margin-bottom:0;padding-left:0;list-style:none;background-color:#fff}.mui-table-view:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-icon .mui-table-view-cell .mui-navigate-right .mui-icon{font-size:20px;margin-top:-1px;margin-right:5px;margin-left:-5px}.mui-table-view-icon .mui-table-view-cell:after{left:40px}.mui-table-view-chevron .mui-table-view-cell{padding-right:65px}.mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn){margin-right:-65px}.mui-table-view-radio .mui-table-view-cell{padding-right:65px}.mui-table-view-radio .mui-table-view-cell>a:not(.mui-btn){margin-right:-65px}.mui-table-view-radio .mui-table-view-cell .mui-navigate-right:after{font-size:30px;font-weight:600;right:9px;content:'';color:#007aff}.mui-table-view-radio .mui-table-view-cell.mui-selected .mui-navigate-right:after{content:'\e472'}.mui-table-view-inverted{color:#fff;background:#333}.mui-table-view-inverted:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#222}.mui-table-view-inverted .mui-table-view-cell.mui-active,.mui-table-view-inverted .mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#242424}.mui-table-view-cell{position:relative;overflow:hidden;padding:11px 15px;background-color:inherit;-webkit-touch-callout:none}.mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-cell.mui-checkbox input[type=checkbox],.mui-table-view-cell.mui-radio input[type=radio]{top:8px}.mui-table-view-cell.mui-checkbox.mui-left,.mui-table-view-cell.mui-radio.mui-left{padding-left:58px}.mui-table-view-cell.mui-active{background-color:#eee}.mui-table-view-cell:last-child:after,.mui-table-view-cell:last-child:before{height:0}.mui-table-view-cell>a:not(.mui-btn){position:relative;display:block;overflow:hidden;margin:-11px -15px;padding:inherit;white-space:nowrap;text-overflow:ellipsis;color:inherit}.mui-table-view-cell>a:not(.mui-btn).mui-active{background-color:#eee}.mui-table-view-cell p{margin-bottom:0}.mui-table-view-cell.mui-transitioning>.mui-slider-handle,.mui-table-view-cell.mui-transitioning>.mui-slider-left .mui-btn,.mui-table-view-cell.mui-transitioning>.mui-slider-right .mui-btn{-webkit-transition:-webkit-transform 300ms ease;transition:transform 300ms ease}.mui-table-view-cell.mui-active>.mui-slider-handle{background-color:#eee}.mui-table-view-cell>.mui-slider-handle{position:relative;background-color:#fff}.mui-table-view-cell>.mui-slider-handle .mui-navigate-right:after,.mui-table-view-cell>.mui-slider-handle.mui-navigate-right:after{right:0}.mui-table-view-cell>.mui-slider-handle,.mui-table-view-cell>.mui-slider-left .mui-btn,.mui-table-view-cell>.mui-slider-right .mui-btn{-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease;-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-table-view-cell>.mui-slider-left,.mui-table-view-cell>.mui-slider-right{position:absolute;top:0;display:-webkit-box;display:-webkit-flex;display:flex;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.mui-table-view-cell>.mui-slider-left>.mui-btn,.mui-table-view-cell>.mui-slider-right>.mui-btn{position:relative;left:0;display:-webkit-box;display:-webkit-flex;display:flex;padding:0 30px;color:#fff;border:0;border-radius:0;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.mui-table-view-cell>.mui-slider-left>.mui-btn:after,.mui-table-view-cell>.mui-slider-right>.mui-btn:after{position:absolute;z-index:-1;top:0;width:600%;height:100%;content:'';background:inherit}.mui-table-view-cell>.mui-slider-left>.mui-btn.mui-icon,.mui-table-view-cell>.mui-slider-right>.mui-btn.mui-icon{font-size:30px}.mui-table-view-cell>.mui-slider-right{right:0;-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease;-webkit-transform:translateX(100%);transform:translateX(100%)}.mui-table-view-cell>.mui-slider-left{left:0;-webkit-transition:-webkit-transform 0ms ease;transition:transform 0ms ease;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.mui-table-view-cell>.mui-slider-left>.mui-btn:after{right:100%;margin-right:-1px}.mui-table-view-divider{font-weight:500;position:relative;margin-top:-1px;margin-left:0;padding-top:6px;padding-bottom:6px;padding-left:15px;color:#999;background-color:#fafafa}.mui-table-view-divider:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-divider:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view .mui-media,.mui-table-view .mui-media-body{overflow:hidden}.mui-table-view .mui-media-large .mui-media-object{line-height:80px;max-width:80px;height:80px}.mui-table-view .mui-media .mui-subtitle{color:#000}.mui-table-view .mui-media-object{line-height:42px;max-width:42px;height:42px}.mui-table-view .mui-media-object.mui-pull-left{margin-right:10px}.mui-table-view .mui-media-object.mui-pull-right{margin-left:10px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object{line-height:29px;max-width:29px;height:29px;margin:-4px 0}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object img{line-height:29px;max-width:29px;height:29px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object.mui-pull-left{margin-right:10px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-object .mui-icon{font-size:29px}.mui-table-view .mui-table-view-cell.mui-media-icon .mui-media-body:after{position:absolute;right:0;bottom:0;left:55px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view .mui-table-view-cell.mui-media-icon:after{height:0!important}.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view{display:block}.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:after,.mui-table-view.mui-unfold .mui-table-view-cell.mui-collapse .mui-table-view:before{height:0!important}.mui-table-view.mui-unfold .mui-table-view-cell.mui-media-icon.mui-collapse .mui-media-body:after{position:absolute;right:0;bottom:0;left:70px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view-cell>.mui-badge,.mui-table-view-cell>.mui-btn,.mui-table-view-cell>.mui-switch,.mui-table-view-cell>a>.mui-badge,.mui-table-view-cell>a>.mui-btn,.mui-table-view-cell>a>.mui-switch{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mui-table-view-cell .mui-navigate-left>.mui-badge,.mui-table-view-cell .mui-navigate-left>.mui-btn,.mui-table-view-cell .mui-navigate-left>.mui-switch,.mui-table-view-cell .mui-navigate-right>.mui-badge,.mui-table-view-cell .mui-navigate-right>.mui-btn,.mui-table-view-cell .mui-navigate-right>.mui-switch,.mui-table-view-cell .mui-push-left>.mui-badge,.mui-table-view-cell .mui-push-left>.mui-btn,.mui-table-view-cell .mui-push-left>.mui-switch,.mui-table-view-cell .mui-push-right>.mui-badge,.mui-table-view-cell .mui-push-right>.mui-btn,.mui-table-view-cell .mui-push-right>.mui-switch,.mui-table-view-cell>a .mui-navigate-left>.mui-badge,.mui-table-view-cell>a .mui-navigate-left>.mui-btn,.mui-table-view-cell>a .mui-navigate-left>.mui-switch,.mui-table-view-cell>a .mui-navigate-right>.mui-badge,.mui-table-view-cell>a .mui-navigate-right>.mui-btn,.mui-table-view-cell>a .mui-navigate-right>.mui-switch,.mui-table-view-cell>a .mui-push-left>.mui-badge,.mui-table-view-cell>a .mui-push-left>.mui-btn,.mui-table-view-cell>a .mui-push-left>.mui-switch,.mui-table-view-cell>a .mui-push-right>.mui-badge,.mui-table-view-cell>a .mui-push-right>.mui-btn,.mui-table-view-cell>a .mui-push-right>.mui-switch{right:35px}.mui-content>.mui-table-view:first-child{margin-top:15px}.mui-table-view-cell.mui-collapse .mui-table-view:after{left:15px}.mui-table-view-cell.mui-collapse>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse>.mui-push-right:after{content:'\e581'}.mui-table-view-cell.mui-collapse.mui-active .mui-collapse-content,.mui-table-view-cell.mui-collapse.mui-active .mui-table-view{display:block}.mui-table-view-cell.mui-collapse.mui-active>.mui-navigate-right:after,.mui-table-view-cell.mui-collapse.mui-active>.mui-push-right:after{content:'\e580'}.mui-table-view-cell.mui-collapse .mui-collapse-content{position:relative;display:none;overflow:hidden;margin:11px -15px -11px;padding:8px 15px;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease;border:1px solid #ddd;background:#fff}.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-input-group,.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-slider{width:auto;height:auto;margin:-8px -15px}.mui-table-view-cell.mui-collapse .mui-collapse-content>.mui-slider{margin:-8px -16px}.mui-table-view-cell.mui-collapse .mui-table-view{display:none;margin-top:11px;margin-right:-15px;margin-bottom:-11px;margin-left:-15px;border:0}.mui-table-view-cell.mui-collapse .mui-table-view.mui-table-view-chevron{margin-right:-65px}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell{padding-left:31px;background-position:31px 100%}.mui-table-view-cell.mui-collapse .mui-table-view .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:30px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-table-view.mui-grid-view{font-size:0;display:block;width:100%;padding:0 10px 10px 0;white-space:normal}.mui-table-view.mui-grid-view .mui-table-view-cell{font-size:17px;display:inline-block;margin-right:-4px;padding:10px 0 0 14px;text-align:center;vertical-align:middle;background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object{width:100%;max-width:100%;height:auto}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn){margin:-10px 0 0 -14px}.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn).mui-active,.mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn):active{background:0 0}.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{font-size:15px;line-height:15px;display:block;width:100%;height:15px;margin-top:8px;text-overflow:ellipsis;color:#333}.mui-table-view.mui-grid-view .mui-table-view-cell:after,.mui-table-view.mui-grid-view .mui-table-view-cell:before{height:0}.mui-grid-view.mui-grid-9{padding:1px 0;padding-right:0;background-color:#f2f2f2}.mui-grid-view.mui-grid-9 .mui-table-view-cell{margin:-1px 0 0 -1px;padding:11px 15px;vertical-align:top;border-top:1px solid #eee;border-left:1px solid #eee}.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active{background-color:#eee}.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn){margin:0;padding:10px 0}.mui-grid-view.mui-grid-9:before{height:0}.mui-grid-view.mui-grid-9 .mui-media{color:#797979}.mui-grid-view.mui-grid-9 .mui-media .mui-icon{font-size:2.4em;position:relative}.mui-slider-cell{position:relative}.mui-slider-cell>.mui-slider-handle{z-index:1}.mui-slider-cell>.mui-slider-left,.mui-slider-cell>.mui-slider-right{position:absolute;z-index:0;top:0;bottom:0}.mui-slider-cell>.mui-slider-left{left:0}.mui-slider-cell>.mui-slider-right{right:0}input,select,textarea{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:17px;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}input:focus,select:focus,textarea:focus{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-webkit-user-modify:read-write-plaintext-only}input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{line-height:21px;width:100%;height:40px;margin-bottom:15px;padding:10px 15px;-webkit-user-select:text;border:1px solid rgba(0,0,0,.2);border-radius:3px;outline:0;background-color:#fff;-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}input[type=search]{font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box;height:34px;text-align:center;border:0;border-radius:6px;background-color:rgba(0,0,0,.1)}input[type=search]:focus{text-align:left}textarea{height:auto;resize:none}select{font-size:14px;height:auto;margin-top:1px;border:0!important;background-color:#fff}select:focus{-webkit-user-modify:read-only}.mui-input-group{position:relative;padding:0;border:0;background-color:#fff}.mui-input-group:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-group:before{position:absolute;top:0;right:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-group input,.mui-input-group textarea{margin-bottom:0;border:0;border-radius:0;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.mui-input-group input[type=search]{background:0 0}.mui-input-group input:last-child{background-image:none}.mui-input-row{clear:left;overflow:hidden}.mui-input-row select{font-size:17px;height:37px;padding:0}.mui-input-row .mui-btn+input,.mui-input-row label+input,.mui-input-row:last-child{background:0 0}.mui-input-group .mui-input-row{height:40px}.mui-input-group .mui-input-row:after{position:absolute;right:0;bottom:0;left:15px;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-input-row label{font-family:'Helvetica Neue',Helvetica,sans-serif;line-height:1.1;float:left;width:35%;padding:10px 15px}.mui-input-row label~input,.mui-input-row label~select,.mui-input-row label~textarea{float:right;width:65%;margin-bottom:0;padding-left:0;border:0}.mui-input-row .mui-btn{font-family:'Helvetica Neue',Helvetica,sans-serif;line-height:1.1;float:right;width:15%;padding:10px 15px}.mui-input-row .mui-btn~input,.mui-input-row .mui-btn~select,.mui-input-row .mui-btn~textarea{float:left;width:85%;margin-bottom:0;padding-left:0;border:0}.mui-button-row{position:relative;padding-top:5px;text-align:center}.mui-input-group .mui-button-row{height:45px}.mui-input-row{position:relative}.mui-input-row.mui-input-range{overflow:visible;padding-right:20px}.mui-input-row .mui-inline{padding:8px 0}.mui-input-row .mui-input-clear~.mui-icon-clear,.mui-input-row .mui-input-speech~.mui-icon-speech{font-size:20px;position:absolute;z-index:1;top:10px;right:0;width:38px;height:38px;text-align:center;color:#999}.mui-input-row .mui-input-speech~.mui-icon-speech{font-size:24px;top:8px}.mui-input-row .mui-input-clear~.mui-icon-clear~.mui-icon-speech{display:none}.mui-input-row .mui-input-clear~.mui-icon-clear.mui-hidden~.mui-icon-speech{display:inline-block}.mui-input-row .mui-icon-speech~.mui-placeholder{right:38px}.mui-input-row.mui-search .mui-icon-clear{top:7px}.mui-input-row.mui-search .mui-icon-speech{top:5px}.mui-checkbox,.mui-radio{position:relative}.mui-checkbox label,.mui-radio label{display:inline-block;float:none;width:100%;padding-right:58px}.mui-checkbox.mui-left input[type=checkbox],.mui-radio.mui-left input[type=radio]{left:20px}.mui-checkbox.mui-left label,.mui-radio.mui-left label{padding-right:15px;padding-left:58px}.mui-checkbox input[type=checkbox],.mui-radio input[type=radio]{position:absolute;top:4px;right:20px;display:inline-block;width:28px;height:26px;border:0;outline:0!important;background-color:transparent;-webkit-appearance:none}.mui-checkbox input[type=checkbox][disabled]:before,.mui-radio input[type=radio][disabled]:before{opacity:.3}.mui-checkbox input[type=checkbox]:before,.mui-radio input[type=radio]:before{font-family:Muiicons;font-size:28px;font-weight:400;line-height:1;text-decoration:none;color:#aaa;border-radius:0;background:0 0;-webkit-font-smoothing:antialiased}.mui-checkbox input[type=checkbox]:checked:before,.mui-radio input[type=radio]:checked:before{color:#007aff}.mui-checkbox label.mui-disabled,.mui-checkbox.mui-disabled label,.mui-radio label.mui-disabled,.mui-radio.mui-disabled label{opacity:.4}.mui-radio input[type=radio]:before{content:'\e411'}.mui-radio input[type=radio]:checked:before{content:'\e441'}.mui-checkbox input[type=checkbox]:before{content:'\e411'}.mui-checkbox input[type=checkbox]:checked:before{content:'\e442'}.mui-select{position:relative}.mui-select:before{font-family:Muiicons;position:absolute;top:8px;right:21px;content:'\e581';color:rgba(170,170,170,.6)}.mui-input-row .mui-switch{float:right;margin-top:5px;margin-right:20px}.mui-input-range input[type=range]{position:relative;width:100%;height:2px;margin:17px 0;padding:0;cursor:pointer;border:0;border-radius:3px;outline:0;background-color:#999;-webkit-appearance:none!important}.mui-input-range input[type=range]::-webkit-slider-thumb{width:28px;height:28px;border-color:#0062cc;border-radius:50%;background-color:#007aff;background-clip:padding-box;-webkit-appearance:none!important}.mui-input-range label~input[type=range]{width:65%}.mui-input-range .mui-tooltip{font-size:36px;line-height:64px;position:absolute;z-index:1;top:-70px;width:64px;height:64px;text-align:center;opacity:.8;color:#333;border:1px solid #ddd;border-radius:6px;background-color:#fff;text-shadow:0 1px 0 #f3f3f3}.mui-search{position:relative}.mui-search input[type=search]{padding-left:30px}.mui-search .mui-placeholder{font-size:16px;line-height:34px;position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;display:inline-block;height:34px;text-align:center;color:#999;border:0;border-radius:6px;background:0 0}.mui-search .mui-placeholder .mui-icon{font-size:20px;color:#333}.mui-search:before{font-family:Muiicons;font-size:20px;font-weight:400;position:absolute;top:50%;right:50%;display:none;margin-top:-18px;margin-right:31px;content:'\e466'}.mui-search.mui-active:before{font-size:20px;right:auto;left:5px;display:block;margin-right:0}.mui-search.mui-active input[type=search]{text-align:left}.mui-search.mui-active .mui-placeholder{display:none}.mui-segmented-control{font-size:15px;font-weight:400;position:relative;display:table;overflow:hidden;width:100%;table-layout:fixed;border:1px solid #007aff;border-radius:3px;background-color:transparent;-webkit-touch-callout:none}.mui-segmented-control.mui-scroll-wrapper{height:38px}.mui-segmented-control.mui-scroll-wrapper .mui-scroll{width:auto;height:40px;white-space:nowrap}.mui-segmented-control.mui-scroll-wrapper .mui-control-item{display:inline-block;width:auto;padding:0 20px;border:0}.mui-segmented-control .mui-control-item{line-height:38px;display:table-cell;overflow:hidden;width:1%;-webkit-transition:background-color .1s linear;transition:background-color .1s linear;text-align:center;white-space:nowrap;text-overflow:ellipsis;color:#007aff;border-color:#007aff;border-left:1px solid #007aff}.mui-segmented-control .mui-control-item:first-child{border-left-width:0}.mui-segmented-control .mui-control-item.mui-active{color:#fff;background-color:#007aff}.mui-segmented-control.mui-segmented-control-inverted{width:100%;border:0;border-radius:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item{color:inherit;border:0}.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{color:#007aff;border-bottom:2px solid #007aff;background:0 0}.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#007aff}.mui-segmented-control-positive{border:1px solid #4cd964}.mui-segmented-control-positive .mui-control-item{color:#4cd964;border-color:inherit}.mui-segmented-control-positive .mui-control-item.mui-active{color:#fff;background-color:#4cd964}.mui-segmented-control-positive.mui-segmented-control-inverted .mui-control-item.mui-active{color:#4cd964;border-bottom:2px solid #4cd964;background:0 0}.mui-segmented-control-positive.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#4cd964}.mui-segmented-control-negative{border:1px solid #dd524d}.mui-segmented-control-negative .mui-control-item{color:#dd524d;border-color:inherit}.mui-segmented-control-negative .mui-control-item.mui-active{color:#fff;background-color:#dd524d}.mui-segmented-control-negative.mui-segmented-control-inverted .mui-control-item.mui-active{color:#dd524d;border-bottom:2px solid #dd524d;background:0 0}.mui-segmented-control-negative.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#dd524d}.mui-control-content{position:relative;display:none}.mui-control-content.mui-active{display:block}.mui-popover{position:absolute;z-index:999;display:none;width:280px;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transform:none;transform:none;opacity:0;border-radius:7px;background-color:#f7f7f7;-webkit-box-shadow:0 0 15px rgba(0,0,0,.1);box-shadow:0 0 15px rgba(0,0,0,.1)}.mui-popover .mui-popover-arrow{position:absolute;z-index:1000;top:-25px;left:0;overflow:hidden;width:26px;height:26px}.mui-popover .mui-popover-arrow:after{position:absolute;top:19px;left:0;width:26px;height:26px;content:' ';-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:3px;background:#f7f7f7}.mui-popover .mui-popover-arrow.mui-bottom{top:100%;left:-26px;margin-top:-1px}.mui-popover .mui-popover-arrow.mui-bottom:after{top:-19px;left:0}.mui-popover.mui-popover-action{bottom:0;width:100%;-webkit-transition:-webkit-transform .3s,opacity .3s;transition:transform .3s,opacity .3s;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);border-radius:0;background:0 0;-webkit-box-shadow:none;box-shadow:none}.mui-popover.mui-popover-action .mui-popover-arrow{display:none}.mui-popover.mui-popover-action.mui-popover-bottom{position:fixed}.mui-popover.mui-popover-action.mui-active{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-popover.mui-popover-action .mui-table-view{margin:8px;text-align:center;color:#007aff;border-radius:4px}.mui-popover.mui-popover-action .mui-table-view .mui-table-view-cell:after{position:absolute;right:0;bottom:0;left:0;height:1px;content:'';-webkit-transform:scaleY(.5);transform:scaleY(.5);background-color:#c8c7cc}.mui-popover.mui-popover-action .mui-table-view small{font-weight:400;line-height:1.3;display:block}.mui-popover.mui-active{display:block;opacity:1}.mui-popover .mui-bar~.mui-table-view{padding-top:44px}.mui-backdrop{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.3)}.mui-bar-backdrop.mui-backdrop{bottom:50px;background:0 0}.mui-backdrop-action.mui-backdrop{background-color:rgba(0,0,0,.3)}.mui-backdrop-action.mui-backdrop,.mui-bar-backdrop.mui-backdrop{opacity:0}.mui-backdrop-action.mui-backdrop.mui-active,.mui-bar-backdrop.mui-backdrop.mui-active{-webkit-transition:all .4s ease;transition:all .4s ease;opacity:1}.mui-popover .mui-btn-block{margin-bottom:5px}.mui-popover .mui-btn-block:last-child{margin-bottom:0}.mui-popover .mui-bar{-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-bar-nav{border-bottom:1px solid rgba(0,0,0,.15);border-top-left-radius:12px;border-top-right-radius:12px;-webkit-box-shadow:none;box-shadow:none}.mui-popover .mui-scroll-wrapper{margin:7px 0;border-radius:7px;background-clip:padding-box}.mui-popover .mui-scroll .mui-table-view{max-height:none}.mui-popover .mui-table-view{overflow:auto;max-height:300px;margin-bottom:0;border-radius:7px;background-color:#f7f7f7;background-image:none;-webkit-overflow-scrolling:touch}.mui-popover .mui-table-view:after,.mui-popover .mui-table-view:before{height:0}.mui-popover .mui-table-view .mui-table-view-cell:first-child,.mui-popover .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn){border-top-left-radius:12px;border-top-right-radius:12px}.mui-popover .mui-table-view .mui-table-view-cell:last-child,.mui-popover .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn){border-bottom-right-radius:12px;border-bottom-left-radius:12px}.mui-popover.mui-bar-popover .mui-table-view{width:106px}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell{padding:11px 15px;background-position:0 100%}.mui-popover.mui-bar-popover .mui-table-view .mui-table-view-cell>a:not(.mui-btn){margin:-11px -15px -11px -15px}.mui-pagination{display:inline-block;margin:0 auto;padding-left:0;border-radius:6px}.mui-pagination>li{display:inline}.mui-pagination>li>a,.mui-pagination>li>span{line-height:1.428571429;position:relative;float:left;margin-left:-1px;padding:6px 12px;text-decoration:none;color:#007aff;border:1px solid #ddd;background-color:#fff}.mui-pagination>li:first-child>a,.mui-pagination>li:first-child>span{margin-left:0;border-top-left-radius:6px;border-bottom-left-radius:6px;background-clip:padding-box}.mui-pagination>li:last-child>a,.mui-pagination>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px;background-clip:padding-box}.mui-pagination>li.mui-active>a,.mui-pagination>li.mui-active>a:active,.mui-pagination>li.mui-active>span,.mui-pagination>li.mui-active>span:active,.mui-pagination>li:active>a,.mui-pagination>li:active>a:active,.mui-pagination>li:active>span,.mui-pagination>li:active>span:active{z-index:2;cursor:default;color:#fff;border-color:#007aff;background-color:#007aff}.mui-pagination>li.mui-disabled>a,.mui-pagination>li.mui-disabled>a:active,.mui-pagination>li.mui-disabled>span,.mui-pagination>li.mui-disabled>span:active{opacity:.6;color:#777;border:1px solid #ddd;background-color:#fff}.mui-pagination-lg>li>a,.mui-pagination-lg>li>span{font-size:18px;padding:10px 16px}.mui-pagination-sm>li>a,.mui-pagination-sm>li>span{font-size:12px;padding:5px 10px}.mui-pager{padding-left:0;list-style:none;text-align:center}.mui-pager:after,.mui-pager:before{display:table;content:' '}.mui-pager:after{clear:both}.mui-pager li{display:inline}.mui-pager li>a,.mui-pager li>span{display:inline-block;padding:5px 14px;border:1px solid #ddd;border-radius:6px;background-color:#fff;background-clip:padding-box}.mui-pager li.mui-active>a,.mui-pager li.mui-active>span,.mui-pager li:active>a,.mui-pager li:active>span{cursor:default;text-decoration:none;color:#fff;border-color:#007aff;background-color:#007aff}.mui-pager .mui-next>a,.mui-pager .mui-next>span{float:right}.mui-pager .mui-previous>a,.mui-pager .mui-previous>span{float:left}.mui-pager .mui-disabled>a,.mui-pager .mui-disabled>a:active,.mui-pager .mui-disabled>span,.mui-pager .mui-disabled>span:active{opacity:.6;color:#777;border:1px solid #ddd;background-color:#fff}.mui-modal{position:fixed;z-index:999;top:0;overflow:hidden;width:100%;min-height:100%;-webkit-transition:-webkit-transform .25s,opacity 1ms .25s;transition:transform .25s,opacity 1ms .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0;background-color:#fff}.mui-modal.mui-active{height:100%;-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-transition-timing-function:cubic-bezier(.1,.5,.1,1);transition-timing-function:cubic-bezier(.1,.5,.1,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.mui-android .mui-modal .mui-bar{position:static}.mui-android .mui-modal .mui-bar-nav~.mui-content{padding-top:0}.mui-slider{position:relative;overflow:hidden;width:100%}.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:0}.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{border-top:1px solid #c8c7cc;border-bottom:1px solid #c8c7cc}.mui-slider .mui-slider-group{font-size:0;position:relative;-webkit-transition:all 0s linear;transition:all 0s linear;white-space:nowrap}.mui-slider .mui-slider-group .mui-slider-item{font-size:14px;position:relative;display:inline-block;width:100%;height:100%;vertical-align:top}.mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item){line-height:0;position:relative;display:block}.mui-slider .mui-slider-group .mui-slider-item img{width:100%}.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:after,.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:before{height:0}.mui-slider .mui-slider-group.mui-slider-loop{-webkit-transform:translate(-100%,0);transform:translate(-100%,0)}.mui-slider-title{line-height:30px;position:absolute;bottom:0;left:0;width:100%;height:30px;margin:0;text-align:left;text-indent:12px;opacity:.8;background-color:#000}.mui-slider-indicator{position:absolute;bottom:8px;width:100%;text-align:center;background:0 0}.mui-slider-indicator.mui-segmented-control{position:relative;bottom:auto}.mui-slider-indicator .mui-indicator{display:inline-block;width:6px;height:6px;margin:1px 6px;cursor:pointer;border-radius:50%;background:#aaa;-webkit-box-shadow:0 0 1px 1px rgba(130,130,130,.7);box-shadow:0 0 1px 1px rgba(130,130,130,.7)}.mui-slider-indicator .mui-active.mui-indicator{background:#fff}.mui-slider-indicator .mui-icon{font-size:20px;line-height:30px;width:40px;height:30px;margin:3px;text-align:center;border:1px solid #ddd}.mui-slider-indicator .mui-number{line-height:32px;display:inline-block;width:58px}.mui-slider-indicator .mui-number span{color:#ff5053}.mui-slider-progress-bar{z-index:1;height:2px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden}.mui-switch{position:relative;display:block;width:74px;height:30px;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background-color,border;transition-property:background-color,border;border:2px solid #ddd;border-radius:20px;background-color:#fff;background-clip:padding-box}.mui-switch.mui-disabled{opacity:.3}.mui-switch .mui-switch-handle{position:absolute;z-index:1;top:-1px;left:-1px;width:28px;height:28px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;-webkit-transition-property:-webkit-transform,width,left;transition-property:transform,width,left;border-radius:16px;background-color:#fff;background-clip:padding-box;-webkit-box-shadow:0 2px 5px rgba(0,0,0,.4);box-shadow:0 2px 5px rgba(0,0,0,.4)}.mui-switch:before{font-size:13px;position:absolute;top:3px;right:11px;content:'Off';text-transform:uppercase;color:#999}.mui-switch.mui-dragging{border-color:#f7f7f7;background-color:#f7f7f7}.mui-switch.mui-dragging .mui-switch-handle{width:38px}.mui-switch.mui-dragging.mui-active .mui-switch-handle{left:-11px;width:38px}.mui-switch.mui-active{border-color:#4cd964;background-color:#4cd964}.mui-switch.mui-active .mui-switch-handle{-webkit-transform:translate(43px,0);transform:translate(43px,0)}.mui-switch.mui-active:before{right:auto;left:15px;content:'On';color:#fff}.mui-switch input[type=checkbox]{display:none}.mui-switch-mini{width:47px}.mui-switch-mini:before{display:none}.mui-switch-mini.mui-active .mui-switch-handle{-webkit-transform:translate(16px,0);transform:translate(16px,0)}.mui-switch-blue.mui-active{border:2px solid #007aff;background-color:#007aff}.mui-content.mui-fade{left:0;opacity:0}.mui-content.mui-fade.mui-in{opacity:1}.mui-content.mui-sliding{z-index:2;-webkit-transition:-webkit-transform .4s;transition:transform .4s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.mui-content.mui-sliding.mui-left{z-index:1;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.mui-content.mui-sliding.mui-right{z-index:3;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.mui-navigate-left:after,.mui-navigate-right:after,.mui-push-left:after,.mui-push-right:after{font-family:Muiicons;font-size:inherit;line-height:1;position:absolute;top:50%;display:inline-block;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-decoration:none;color:#bbb;-webkit-font-smoothing:antialiased}.mui-navigate-left:after,.mui-push-left:after{left:15px;content:'\e582'}.mui-navigate-right:after,.mui-push-right:after{right:15px;content:'\e583'}.mui-pull-bottom-pocket,.mui-pull-top-pocket{position:absolute;left:0;display:block;visibility:hidden;overflow:hidden;width:100%;height:50px}.mui-plus-pullrefresh .mui-pull-bottom-pocket,.mui-plus-pullrefresh .mui-pull-top-pocket{display:none;visibility:visible}.mui-pull-top-pocket{top:0}.mui-bar-nav~.mui-content .mui-pull-top-pocket{top:44px}.mui-bar-nav~.mui-bar-header-secondary~.mui-content .mui-pull-top-pocket{top:88px}.mui-pull-bottom-pocket{position:relative;bottom:0;height:40px}.mui-pull-bottom-pocket .mui-pull-loading{visibility:hidden}.mui-pull-bottom-pocket .mui-pull-loading.mui-in{display:inline-block}.mui-pull{font-weight:700;position:absolute;right:0;bottom:10px;left:0;text-align:center;color:#777}.mui-pull-loading{margin-right:10px;-webkit-transition:-webkit-transform .4s;transition:transform .4s;-webkit-transition-duration:400ms;transition-duration:400ms;vertical-align:middle;-webkit-backface-visibility:hidden}.mui-pull-loading.mui-reverse{-webkit-transform:rotate(180deg) translateZ(0);transform:rotate(180deg) translateZ(0)}.mui-pull-caption{font-size:15px;line-height:24px;position:relative;display:inline-block;overflow:visible;margin-top:0;vertical-align:middle}.mui-pull-caption span{display:none}.mui-pull-caption span.mui-in{display:inline}.mui-toast-container{position:fixed;z-index:9999;bottom:50px;width:100%}.mui-toast-message{font-size:14px;width:270px;margin:5px auto;padding:5px;text-align:center;color:#000;border-radius:7px;background-color:#d8d8d8}.mui-numbox{position:relative;display:inline-block;overflow:hidden;width:120px;height:35px;padding:0 40px;vertical-align:top;vertical-align:middle;border:solid 1px #bbb;border-radius:3px;background-color:#efeff4}.mui-numbox [class*=mui-numbox-btn]{font-size:18px;font-weight:400;line-height:100%;position:absolute;top:0;overflow:hidden;width:40px;height:100%;padding:0;color:#555;border:none;border-radius:0;background-color:#f9f9f9}.mui-numbox [class*=mui-numbox-btn]:active{background-color:#ccc}.mui-numbox [class*=mui-numbox-btn][disabled]{color:silver}.mui-numbox .mui-numbox-btn-plus{right:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.mui-numbox .mui-numbox-btn-minus{left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.mui-numbox .mui-numbox-input{display:inline-block;overflow:hidden;width:100%!important;height:100%;margin:0;padding:0 3px!important;text-align:center;text-overflow:ellipsis;word-break:normal;border:none!important;border-right:solid 1px #ccc!important;border-left:solid 1px #ccc!important;border-radius:0!important}.mui-input-row .mui-numbox{float:right;margin:2px 8px}@font-face{font-family:Muiicons;font-weight:400;font-style:normal;src:url(../fonts/mui.ttf) format('truetype')}.mui-icon{font-family:Muiicons;font-size:24px;font-weight:400;font-style:normal;line-height:1;display:inline-block;text-decoration:none;-webkit-font-smoothing:antialiased}.mui-icon.mui-right:before{float:right;padding-left:.2em}.mui-icon-contact:before{content:'\e100'}.mui-icon-person:before{content:'\e101'}.mui-icon-personadd:before{content:'\e102'}.mui-icon-contact-filled:before{content:'\e130'}.mui-icon-person-filled:before{content:'\e131'}.mui-icon-personadd-filled:before{content:'\e132'}.mui-icon-phone:before{content:'\e200'}.mui-icon-email:before{content:'\e201'}.mui-icon-chatbubble:before{content:'\e202'}.mui-icon-chatboxes:before{content:'\e203'}.mui-icon-phone-filled:before{content:'\e230'}.mui-icon-email-filled:before{content:'\e231'}.mui-icon-chatbubble-filled:before{content:'\e232'}.mui-icon-chatboxes-filled:before{content:'\e233'}.mui-icon-weibo:before{content:'\e260'}.mui-icon-weixin:before{content:'\e261'}.mui-icon-pengyouquan:before{content:'\e262'}.mui-icon-chat:before{content:'\e263'}.mui-icon-qq:before{content:'\e264'}.mui-icon-videocam:before{content:'\e300'}.mui-icon-camera:before{content:'\e301'}.mui-icon-mic:before{content:'\e302'}.mui-icon-location:before{content:'\e303'}.mui-icon-mic-filled:before,.mui-icon-speech:before{content:'\e332'}.mui-icon-location-filled:before{content:'\e333'}.mui-icon-micoff:before{content:'\e360'}.mui-icon-image:before{content:'\e363'}.mui-icon-map:before{content:'\e364'}.mui-icon-compose:before{content:'\e400'}.mui-icon-trash:before{content:'\e401'}.mui-icon-upload:before{content:'\e402'}.mui-icon-download:before{content:'\e403'}.mui-icon-close:before{content:'\e404'}.mui-icon-redo:before{content:'\e405'}.mui-icon-undo:before{content:'\e406'}.mui-icon-refresh:before{content:'\e407'}.mui-icon-star:before{content:'\e408'}.mui-icon-plus:before{content:'\e409'}.mui-icon-minus:before{content:'\e410'}.mui-icon-checkbox:before,.mui-icon-circle:before{content:'\e411'}.mui-icon-clear:before,.mui-icon-close-filled:before{content:'\e434'}.mui-icon-refresh-filled:before{content:'\e437'}.mui-icon-star-filled:before{content:'\e438'}.mui-icon-plus-filled:before{content:'\e439'}.mui-icon-minus-filled:before{content:'\e440'}.mui-icon-circle-filled:before{content:'\e441'}.mui-icon-checkbox-filled:before{content:'\e442'}.mui-icon-closeempty:before{content:'\e460'}.mui-icon-refreshempty:before{content:'\e461'}.mui-icon-reload:before{content:'\e462'}.mui-icon-starhalf:before{content:'\e463'}.mui-icon-spinner:before{content:'\e464'}.mui-icon-spinner-cycle:before{content:'\e465'}.mui-icon-search:before{content:'\e466'}.mui-icon-plusempty:before{content:'\e468'}.mui-icon-forward:before{content:'\e470'}.mui-icon-back:before,.mui-icon-left-nav:before{content:'\e471'}.mui-icon-checkmarkempty:before{content:'\e472'}.mui-icon-home:before{content:'\e500'}.mui-icon-navigate:before{content:'\e501'}.mui-icon-gear:before{content:'\e502'}.mui-icon-paperplane:before{content:'\e503'}.mui-icon-info:before{content:'\e504'}.mui-icon-help:before{content:'\e505'}.mui-icon-locked:before{content:'\e506'}.mui-icon-more:before{content:'\e507'}.mui-icon-flag:before{content:'\e508'}.mui-icon-home-filled:before{content:'\e530'}.mui-icon-gear-filled:before{content:'\e532'}.mui-icon-info-filled:before{content:'\e534'}.mui-icon-help-filled:before{content:'\e535'}.mui-icon-more-filled:before{content:'\e537'}.mui-icon-settings:before{content:'\e560'}.mui-icon-list:before{content:'\e562'}.mui-icon-bars:before{content:'\e563'}.mui-icon-loop:before{content:'\e565'}.mui-icon-paperclip:before{content:'\e567'}.mui-icon-arrowup:before{content:'\e580'}.mui-icon-arrowdown:before{content:'\e581'}.mui-icon-arrowleft:before{content:'\e582'}.mui-icon-arrowright:before{content:'\e583'}.mui-icon-arrowthinup:before{content:'\e584'}.mui-icon-arrowthindown:before{content:'\e585'}.mui-icon-arrowthinleft:before{content:'\e586'}.mui-icon-arrowthinright:before{content:'\e587'}.mui-icon-pulldown:before{content:'\e588'}.mui-fullscreen{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.mui-fullscreen .mui-slider-group{height:100%}.mui-fullscreen .mui-segmented-control~.mui-slider-group{position:absolute;top:40px;bottom:0;width:100%;height:auto}.mui-fullscreen .mui-slider-item>a{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.mui-fullscreen .mui-off-canvas-wrap .mui-slider-item>a{top:auto;-webkit-transform:none;transform:none}.mui-bar-tab~.mui-content .mui-slider.mui-fullscreen .mui-segmented-control~.mui-slider-group{bottom:50px}.mui-android.mui-android-4-0 input:focus,.mui-android.mui-android-4-0 textarea:focus{-webkit-user-modify:inherit}.mui-ios .mui-table-view-cell{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.mui-plus-visible,.mui-wechat-visible{display:none!important}.mui-plus .mui-plus-visible,.mui-plus-hidden,.mui-wechat .mui-wechat-visible,.mui-wechat-hidden{display:block!important}.mui-plus .mui-plus-hidden,.mui-wechat .mui-wechat-hidden{display:none!important}
\ No newline at end of file
examples/hello-mui/css/mui.poppicker.css
View file @ cf92c3d8
......@@ -13,6 +13,11 @@
.mui-poppicker.mui-active {
-webkit-transform: translateY(0px);
}
/*用于将 html body 禁止滚动条*/
.mui-poppicker-active-for-page {
overflow: hidden !important;
}
.mui-android-5-1 .mui-poppicker {
bottom: -300px;
-webkit-transition-property: bottom;
......@@ -51,6 +56,12 @@
height: 200px;
border-top: solid 1px #ddd;
}
.mui-ios .mui-poppicker-body {
-webkit-perspective: 1200px;
perspective: 1200px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.mui-poppicker-body .mui-listpicker {
width: 100%;
height: 100%;
......
examples/hello-mui/examples/feedback.html 0 → 100644
View file @ cf92c3d8
<!doctype html>
<html lang="en" class="feedback">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>feedback</title>
<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">意见反馈</h1>
</header>
<div class="mui-content">
<p>问题和意见</p>
<div class="row mui-input-row">
<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
</div>
<p>图片(选填,提供问题截图)</p>
<div id='image-list' class="row image-list">
</div>
<p>QQ/邮箱</p>
<div class="mui-input-row">
<input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
</div>
<button id='submit' type="button" class="mui-btn mui-btn-green">提交</button>
</div>
<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客户面板” 能够查阅反馈信息。</p>
<script src="../js/mui.min.js"></script>
<script src='../libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
<script src='../libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
<script src='../libs/easymob-webim-sdk/json2.js'></script>
<script src="../libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
<script src='../js/feedback.js'></script>
<script src="../js/feedback-page.js"></script>
</body>
</html>
\ No newline at end of file
examples/hello-mui/js/feedback.js 0 → 100644
View file @ cf92c3d8
(function($, feedback, window, document) {
/*******************************************/
var APP_KEY = 'dcloudio#mui';
var CUSTOM_ID = 'customer';
//--
var PASSWORD = 'pass01!';
var LOCAL_STORE_KEY = 'mui://user';
var USER_PREFIX = 'mui-user-';
/*******************************************/
/**
* 生成一个 IM 用户名
**/
var createUsername = function() {
return USER_PREFIX + (new Date()).getTime();
};
/**
* 获取用户，如果在本地存储中已有用户则直接返回。
* 否则，注册新的用户
**/
feedback.getUser = function(callback) {
var storeUserText = localStorage.getItem(LOCAL_STORE_KEY);
if (storeUserText) {
if (callback) callback(JSON.parse(storeUserText));
return;
}
var newUsername = createUsername();
Easemob.im.Helper.registerUser({
username: newUsername,
password: PASSWORD,
appKey: APP_KEY,
success: function(result) {
var userInfo = {
username: newUsername,
password: PASSWORD
};
localStorage.setItem(LOCAL_STORE_KEY, JSON.stringify(userInfo));
if (callback) callback(userInfo);
},
error: function(e) {
plus.nativeUI.toast(e.message);
}
});
};
/**
* 登录环信息服务器
**/
feedback.login = function(callback) {
feedback.getUser(function(user) {
var conn = new Easemob.im.Connection();
conn.init({
onOpened: function() {
//alert("成功登录");
conn.setPresence();
if (callback) callback(user, conn);
}
});
conn.open({
user: user.username,
pwd: user.password,
appKey: APP_KEY
});
});
};
/**
* 发送反馈信息
**/
feedback.send = function(content, callback) {
feedback.login(function(user, conn) {
//发送文本消息
var msgText = '问题:' + content.question;
if (content.contact) {
msgText += '; 联系方式:' + content.contact + ';'
}
conn.sendTextMessage({
to: CUSTOM_ID,
msg: msgText,
type: "chat"
});
//如果没有截图
if (!content.images || content.images.length < 1) {
if (callback) callback();
return;
}
//如果有截图
var sendImageCount = 0;
var hasError = false;
content.images.forEach(function(fileInputId) {
//alert(fileInputId)
conn.sendPicture({
fileInputId: fileInputId,
to: CUSTOM_ID,
onFileUploadError: function(error) {
//处理图片上传失败
alert(JSON.stringify(error));
hasError = true;
},
onFileUploadComplete: function(data) {
//处理图片上传成功，如本地消息显示
sendImageCount++;
if (!hasError && sendImageCount >= content.images.length) {
if (callback) callback();
}
}
});
});
//--
});
};
})(mui, window.feedback = {}, window, document);
\ No newline at end of file
examples/hello-mui/js/mui.dtpicker.js
View file @ cf92c3d8
......@@ -5,7 +5,7 @@
* Houfeng@DCloud.io
*/
(function($) {
(function($, document) {
var domBuffer = '<div class="mui-dtpicker" data-type="datetime">\
<div class="mui-dtpicker-header">\
<button data-id="btn-cancel" class="mui-btn">取消</button>\
......@@ -70,8 +70,10 @@
self.hide();
}, false);
ui.ok.addEventListener('tap', function() {
var rs = self.callback(self.getSelected());
if (rs !== false) {
self.hide();
self.callback(self.getSelected());
}
}, false);
ui.y.addEventListener('change', function() {
self._createDay();
......@@ -123,6 +125,16 @@
}
return selected;
},
setSelectedValue: function(value) {
var self = this;
var ui = self.ui;
var parsedValue = self._parseValue(value);
ui.y.setSelectedValue(parsedValue.y, true);
ui.m.setSelectedValue(parsedValue.m, true);
ui.d.setSelectedValue(parsedValue.d, true);
ui.h.setSelectedValue(parsedValue.h, true);
ui.i.setSelectedValue(parsedValue.i, true);
},
isLeapYear: function(year) {
return (year % 4 == 0 && year % 100 != 0) || (year % 400 == 0);
},
......@@ -270,12 +282,11 @@
ui.cancel.innerText = options.buttons[0];
ui.ok.innerText = options.buttons[1];
},
_getInitValue: function() {
_parseValue: function(value) {
var self = this;
var options = self.options;
var rs = {};
if (options.value) {
var parts = options.value.replace(":", "-").replace(" ", "-").split("-");
if (value) {
var parts = value.replace(":", "-").replace(" ", "-").split("-");
rs.y = parts[0];
rs.m = parts[1];
rs.d = parts[2];
......@@ -302,7 +313,6 @@
var now = new Date();
options.beginYear = options.beginYear || (now.getFullYear() - 5);
options.endYear = options.endYear || (now.getFullYear() + 5);
var initValue = self._getInitValue();
var ui = self.ui;
//设定label
self._setLabels();
......@@ -315,14 +325,8 @@
self._createDay();
self._createHours();
self._createMinutes();
setTimeout(function() {
//设定默认值
ui.y.setSelectedValue(initValue.y);
ui.m.setSelectedValue(initValue.m);
ui.d.setSelectedValue(initValue.d);
ui.h.setSelectedValue(initValue.h);
ui.i.setSelectedValue(initValue.i);
}, 160);
self.setSelectedValue(options.value);
},
//显示
show: function(callback) {
......@@ -330,14 +334,16 @@
var ui = self.ui;
self.callback = callback || $.noop;
ui.mask.show();
ui.picker.style.webkitTransform = 'translateY(0px)';
document.body.classList.add($.className('dtpicker-active-for-page'));
ui.picker.classList.add($.className('active'));
},
hide: function() {
var self = this;
var ui = self.ui;
ui.picker.style.webkitTransform = 'translateY(300px)';
ui.mask.close()
ui.picker.classList.remove($.className('active'));
ui.mask.close();
document.body.classList.remove($.className('dtpicker-active-for-page'));
}
});
})(mui);
\ No newline at end of file
})(mui, document);
\ No newline at end of file
examples/hello-mui/js/mui.indexedlist.js
View file @ cf92c3d8
......@@ -6,6 +6,7 @@
* by Houfeng
* Houfeng@DCloud.io
**/
(function($, window, document) {
var classSelector = function(name) {
......@@ -38,15 +39,15 @@
findElements: function() {
var self = this;
self.el = self.el || {};
self.el.search = self.box.querySelector(classSelector('group-list-search'));
self.el.searchInput = self.box.querySelector(classSelector('group-list-search-input'));
self.el.searchClear = self.box.querySelector(classSelector('group-list-search') + ' ' + classSelector('icon-clear'));
self.el.bar = self.box.querySelector(classSelector('group-list-bar'));
self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('group-list-bar') + ' a'));
self.el.inner = self.box.querySelector(classSelector('group-list-inner'));
self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('group-list-item')));
self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('group-list-inner') + ' li'));
self.el.alert = self.box.querySelector(classSelector('group-list-alert'));
self.el.search = self.box.querySelector(classSelector('indexed-list-search'));
self.el.searchInput = self.box.querySelector(classSelector('indexed-list-search-input'));
self.el.searchClear = self.box.querySelector(classSelector('indexed-list-search') + ' ' + classSelector('icon-clear'));
self.el.bar = self.box.querySelector(classSelector('indexed-list-bar'));
self.el.barItems = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-bar') + ' a'));
self.el.inner = self.box.querySelector(classSelector('indexed-list-inner'));
self.el.items = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-item')));
self.el.liArray = [].slice.call(self.box.querySelectorAll(classSelector('indexed-list-inner') + ' li'));
self.el.alert = self.box.querySelector(classSelector('indexed-list-alert'));
},
caleLayout: function() {
var self = this;
......@@ -121,7 +122,7 @@
self.hiddenGroups = [];
var checkGroup = function(currentIndex, last) {
if (itemCount >= currentIndex - groupIndex - (last ? 0 : 1)) {
selectorBuffer.push(classSelector('group-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (groupIndex + 1) + ')');
self.hiddenGroups.push(liArray[groupIndex]);
};
groupIndex = currentIndex;
......@@ -129,7 +130,7 @@
}
liArray.forEach(function(item) {
var currentIndex = liArray.indexOf(item);
if (item.classList.contains($.className('group-list-group'))) {
if (item.classList.contains($.className('indexed-list-group'))) {
checkGroup(currentIndex, false);
} else {
var text = (item.innerText || '').toLowerCase();
......@@ -138,7 +139,7 @@
if (keyword && text.indexOf(keyword) < 0 &&
value.indexOf(keyword) < 0 &&
tags.indexOf(keyword) < 0) {
selectorBuffer.push(classSelector('group-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
selectorBuffer.push(classSelector('indexed-list-inner li') + ':nth-child(' + (currentIndex + 1) + ')');
itemCount++;
}
if (currentIndex >= itemTotal - 1) {
......
examples/hello-mui/js/mui.js
View file @ cf92c3d8
/*!
* =====================================================
* Mui v1.9.0 (https://github.com/dcloudio/mui)
* Mui v2.0.0 (https://github.com/dcloudio/mui)
* =====================================================
*/
/**
......@@ -469,6 +469,12 @@ var mui = (function(document, undefined) {
$(function() {
document.body.classList.add('mui-plus');
});
if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识
this.os.stream = true;
}
$(function() {
document.body.classList.add('mui-plus-stream');
});
}
}
detect.call($, navigator.userAgent);
......@@ -845,7 +851,7 @@ var mui = (function(document, undefined) {
};
//简单的wrap对象_mid
var mid = function(obj) {
return obj._mid || (obj._mid = _mid++);
return obj && (obj._mid || (obj._mid = _mid++));
};
//事件委托对象绑定的事件回调列表
var delegateFns = {};
......@@ -1009,16 +1015,37 @@ var mui = (function(document, undefined) {
return $.registerHandler('gestures', gesture);
};
var round = Math.round;
var abs = Math.abs;
var sqrt = Math.sqrt;
var atan = Math.atan;
var atan2 = Math.atan2;
/**
* distance
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getDistance = function(p1, p2) {
var x = p2.x - p1.x;
var y = p2.y - p1.y;
return Math.sqrt((x * x) + (y * y));
var getDistance = function(p1, p2, props) {
if (!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return sqrt((x * x) + (y * y));
};
/**
* scale
* @param {Object} starts
* @param {Object} moves
*/
var getScale = function(starts, moves) {
if (starts.length >= 2 && moves.length >= 2) {
var props = ['pageX', 'pageY'];
return getDistance(moves[1], moves[0], props) / getDistance(starts[1], starts[0], props);
}
return 1;
};
/**
* angle
......@@ -1026,25 +1053,32 @@ var mui = (function(document, undefined) {
* @param {type} p2
* @returns {Number}
*/
var getAngle = function(p1, p2) {
return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
var getAngle = function(p1, p2, props) {
if (!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return atan2(y, x) * 180 / Math.PI;
};
/**
* direction
* @param {type} angle
* @returns {unresolved}
* @param {Object} x
* @param {Object} y
*/
var getDirectionByAngle = function(angle) {
if (angle < -45 && angle > -135) {
return 'up';
} else if (angle >= 45 && angle < 135) {
return 'down';
} else if (angle >= 135 || angle <= -135) {
return 'left';
} else if (angle >= -45 && angle <= 45) {
return 'right';
var getDirection = function(x, y) {
if (x === y) {
return '';
}
return null;
if (abs(x) >= abs(y)) {
return x > 0 ? 'left' : 'right';
}
return y > 0 ? 'up' : 'down';
};
var getRotation = function(start, end) {
var props = ['pageX', 'pageY'];
return getAngle(end[1], end[0], props) - getAngle(start[1], start[0], props);
};
/**
* detect gestures
......@@ -1064,100 +1098,276 @@ var mui = (function(document, undefined) {
}
});
};
var detectTouchStart = function(event) {
$.gestures.stoped = false;
var now = $.now();
var point = event.touches ? event.touches[0] : event;
$.gestures.touch = {
target: event.target,
lastTarget: ($.gestures.touch && $.gestures.touch.lastTarget ? $.gestures.touch.lastTarget : null),
startTime: now,
touchTime: 0,
flickStartTime: now,
lastTapTime: ($.gestures.touch && $.gestures.touch.lastTapTime ? $.gestures.touch.lastTapTime : 0),
start: {
x: point.pageX,
y: point.pageY
},
flickStart: {
x: point.pageX,
y: point.pageY
},
flickDistanceX: 0,
flickDistanceY: 0,
move: {
x: 0,
y: 0
},
deltaX: 0,
deltaY: 0,
lastDeltaX: 0,
lastDeltaY: 0,
angle: '',
direction: '',
lockDirection: false,
startDirection: '',
distance: 0,
drag: false,
swipe: false,
hold: false,
gesture: event
/**
* px per ms
* @param {Object} deltaTime
* @param {Object} x
* @param {Object} y
*/
var getVelocity = function(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
};
var hasParent = function(node, parent) {
while (node) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
};
var uniqueArray = function(src, key, sort) {
var results = [];
var values = [];
var i = 0;
while (i < src.length) {
var val = key ? src[i][key] : src[i];
if (values.indexOf(val) < 0) {
results.push(src[i]);
}
values[i] = val;
i++;
}
if (sort) {
if (!key) {
results = results.sort();
} else {
results = results.sort(function sortUniqueArray(a, b) {
return a[key] > b[key];
});
}
}
detect(event, $.gestures.touch);
return results;
};
var getMultiCenter = function(touches) {
var touchesLength = touches.length;
if (touchesLength === 1) {
return {
x: round(touches[0].pageX),
y: round(touches[0].pageY)
};
var detectTouchMove = function(event) {
if ($.gestures.stoped || !$.gestures.touch) {
return;
}
var touch = $.gestures.touch;
if (event.target != touch.target) {
return;
var x = 0;
var y = 0;
var i = 0;
while (i < touchesLength) {
x += touches[i].pageX;
y += touches[i].pageY;
i++;
}
var now = $.now();
var point = event.touches ? event.touches[0] : event;
touch.touchTime = now - touch.startTime;
touch.move = {
x: point.pageX,
y: point.pageY
};
if (now - touch.flickStartTime > 300) {
touch.flickStartTime = now;
touch.flickStart = touch.move;
}
touch.distance = getDistance(touch.start, touch.move);
touch.angle = getAngle(touch.start, touch.move);
touch.direction = getDirectionByAngle(touch.angle);
touch.lastDeltaX = touch.deltaX;
touch.lastDeltaY = touch.deltaY;
touch.deltaX = touch.move.x - touch.start.x;
touch.deltaY = touch.move.y - touch.start.y;
touch.gesture = event;
detect(event, touch);
return {
x: round(x / touchesLength),
y: round(y / touchesLength)
};
var detectTouchEnd = function(event) {
if ($.gestures.stoped || !$.gestures.touch) {
return;
};
var multiTouch = function() {
return $.options.gestureConfig.pinch;
};
var copySimpleTouchData = function(touch) {
var touches = [];
var i = 0;
while (i < touch.touches.length) {
touches[i] = {
pageX: round(touch.touches[i].pageX),
pageY: round(touch.touches[i].pageY)
};
i++;
}
var touch = $.gestures.touch;
if (event.target != touch.target) {
return;
return {
timestamp: $.now(),
gesture: touch.gesture,
touches: touches,
center: getMultiCenter(touch.touches),
deltaX: touch.deltaX,
deltaY: touch.deltaY
};
};
var calDelta = function(touch) {
var session = $.gestures.session;
var center = touch.center;
var offset = session.offsetDelta || {};
var prevDelta = session.prevDelta || {};
var prevTouch = session.prevTouch || {};
if (touch.gesture.type === $.EVENT_START || touch.gesture.type === $.EVENT_END) {
prevDelta = session.prevDelta = {
x: prevTouch.deltaX || 0,
y: prevTouch.deltaY || 0
};
offset = session.offsetDelta = {
x: center.x,
y: center.y
};
}
var now = $.now();
touch.touchTime = now - touch.startTime;
touch.flickTime = now - touch.flickStartTime;
touch.flickDistanceX = touch.move.x - touch.flickStart.x;
touch.flickDistanceY = touch.move.y - touch.flickStart.y;
touch.gesture = event;
touch.deltaX = prevDelta.x + (center.x - offset.x);
touch.deltaY = prevDelta.y + (center.y - offset.y);
};
var calTouchData = function(touch) {
var session = $.gestures.session;
var touches = touch.touches;
var touchesLength = touches.length;
detect(event, touch);
if (!session.firstTouch) {
session.firstTouch = copySimpleTouchData(touch);
}
if (multiTouch() && touchesLength > 1 && !session.firstMultiTouch) {
session.firstMultiTouch = copySimpleTouchData(touch);
} else if (touchesLength === 1) {
session.firstMultiTouch = false;
}
var firstTouch = session.firstTouch;
var firstMultiTouch = session.firstMultiTouch;
var offsetCenter = firstMultiTouch ? firstMultiTouch.center : firstTouch.center;
var center = touch.center = getMultiCenter(touches);
touch.timestamp = $.now();
touch.deltaTime = touch.timestamp - firstTouch.timestamp;
touch.angle = getAngle(offsetCenter, center);
touch.distance = getDistance(offsetCenter, center);
calDelta(touch);
touch.offsetDirection = getDirection(touch.deltaX, touch.deltaY);
touch.scale = firstMultiTouch ? getScale(firstMultiTouch.touches, touches) : 1;
touch.rotation = firstMultiTouch ? getRotation(firstMultiTouch.touches, touches) : 0;
calIntervalTouchData(touch);
};
var CAL_INTERVAL = 25;
var calIntervalTouchData = function(touch) {
var session = $.gestures.session;
var last = session.lastInterval || touch;
var deltaTime = touch.timestamp - last.timestamp;
var velocity;
var velocityX;
var velocityY;
var direction;
if (touch.gesture.type != $.EVENT_CANCEL && (deltaTime > CAL_INTERVAL || last.velocity === undefined)) {
var deltaX = last.deltaX - touch.deltaX;
var deltaY = last.deltaY - touch.deltaY;
var v = getVelocity(deltaTime, deltaX, deltaY);
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY);
session.lastInterval = touch;
} else {
velocity = last.velocity;
velocityX = last.velocityX;
velocityY = last.velocityY;
direction = last.direction;
}
touch.velocity = velocity;
touch.velocityX = velocityX;
touch.velocityY = velocityY;
touch.direction = direction;
};
var getTouches = function(event, touch) {
var allTouches = $.slice.call(event.touches);
var type = event.type;
var targetTouches = [];
var changedTargetTouches = [];
$.gestures.session || ($.gestures.session = {
targetIds: {}
});
if ((type === $.EVENT_START || type === $.EVENT_MOVE) && allTouches.length === 1) {
if (type === $.EVENT_START) { //first
touch.isFirst = true;
$.gestures.touch = $.gestures.session = {
firstTarget: event.target,
targetIds: {}
};
}
var targetIds = $.gestures.session.targetIds;
targetIds[allTouches[0].identifier] = true;
targetTouches = allTouches;
changedTargetTouches = allTouches;
touch.target = event.target;
} else {
var i = 0;
var targetTouches = [];
var changedTargetTouches = [];
var targetIds = $.gestures.session.targetIds;
var changedTouches = $.slice.call(event.changedTouches);
touch.target = event.target;
targetTouches = allTouches.filter(function(touch) {
return true; //return hasParent(touch.target, touch.firstTarget);
});
if (type === $.EVENT_START) {
i = 0;
while (i < targetTouches.length) {
targetIds[targetTouches[i].identifier] = true;
i++;
}
}
i = 0;
while (i < changedTouches.length) {
if (targetIds[changedTouches[i].identifier]) {
changedTargetTouches.push(changedTouches[i]);
}
if (type === $.EVENT_END || type === $.EVENT_CANCEL) {
delete targetIds[changedTouches[i].identifier];
}
i++;
}
if (!changedTargetTouches.length) {
return false;
}
}
targetTouches = uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true);
var touchesLength = targetTouches.length;
var changedTouchesLength = changedTargetTouches.length;
window.addEventListener($.EVENT_START, detectTouchStart);
window.addEventListener($.EVENT_MOVE, detectTouchMove);
window.addEventListener($.EVENT_END, detectTouchEnd);
window.addEventListener($.EVENT_CANCEL, detectTouchEnd);
touch.isFinal = ((type === $.EVENT_END || type === $.EVENT_CANCEL) && (touchesLength - changedTouchesLength === 0));
touch.touches = targetTouches;
touch.changedTouches = changedTargetTouches;
return true;
};
var handleTouchEvent = function(event) {
var touch = {
gesture: event
};
var touches = getTouches(event, touch);
if (!touches) {
return;
}
calTouchData(touch);
detect(event, touch);
$.gestures.session.prevTouch = touch;
};
window.addEventListener($.EVENT_START, handleTouchEvent);
window.addEventListener($.EVENT_MOVE, handleTouchEvent);
window.addEventListener($.EVENT_END, handleTouchEvent);
window.addEventListener($.EVENT_CANCEL, handleTouchEvent);
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
......@@ -1185,15 +1395,31 @@ var mui = (function(document, undefined) {
* @returns {undefined}
*/
(function($, name) {
var flickStartTime = 0;
var handle = function(event, touch) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var session = $.gestures.session;
var options = this.options;
if (touch.direction && options.flickMaxTime > touch.flickTime && touch.distance > options.flickMinDistince) {
var now = $.now();
switch (event.type) {
case $.EVENT_MOVE:
if (now - flickStartTime > 300) {
flickStartTime = now;
session.flickStart = touch.center;
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) {
touch.flick = true;
touch.flickTime = now - flickStartTime;
touch.flickDistanceX = touch.center.x - session.flickStart.x;
touch.flickDistanceY = touch.center.y - session.flickStart.y;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
break;
}
};
/**
* mui gesture flick
......@@ -1218,8 +1444,9 @@ var mui = (function(document, undefined) {
var handle = function(event, touch) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options;
if (touch.direction && options.swipeMaxTime > touch.touchTime && touch.distance > options.swipeMinDistince) {
if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
touch.swipe = true;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
}
......@@ -1245,31 +1472,35 @@ var mui = (function(document, undefined) {
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if (touch.direction) { //drag
//修正direction
//默认锁定单向drag(后续可能需要额外配置支持)
if (touch.lockDirection && touch.startDirection) {
if (touch.startDirection && touch.startDirection !== touch.direction) {
if (touch.startDirection === 'up' || touch.startDirection === 'down') {
if (!touch.direction) {
return;
}
//修正direction,可在session期间自行锁定拖拽方向，方便开发scroll类不同方向拖拽插件嵌套
if (session.lockDirection && session.startDirection) {
if (session.startDirection && session.startDirection !== touch.direction) {
if (session.startDirection === 'up' || session.startDirection === 'down') {
touch.direction = touch.deltaY < 0 ? 'up' : 'down';
} else {
touch.direction = touch.deltaX < 0 ? 'left' : 'right';
}
}
}
if (!touch.drag) {
touch.drag = true;
if (!session.drag) {
session.drag = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (touch.drag) {
if (session.drag && touch.isFinal) {
$.trigger(event.target, name + 'end', touch);
}
break;
......@@ -1282,7 +1513,9 @@ var mui = (function(document, undefined) {
name: name,
index: 20,
handle: handle,
options: {}
options: {
fingers: 1
}
});
})(mui, 'drag');
/**
......@@ -1292,24 +1525,34 @@ var mui = (function(document, undefined) {
* @returns {undefined}
*/
(function($, name) {
var lastTarget;
var lastTapTime;
var handle = function(event, touch) {
//if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
if (event.type === $.EVENT_END) { //ignore touchcancel
var options = this.options;
if (touch.distance < options.tapMaxDistance && touch.touchTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && touch.lastTarget && (touch.lastTarget === event.target)) { //same target
if (touch.lastTapTime && (touch.startTime - touch.lastTapTime) < options.tapMaxInterval) {
$.trigger(event.target, 'doubletap', touch);
touch.lastTapTime = $.now();
touch.lastTarget = event.target;
switch (event.type) {
case $.EVENT_END:
if (!touch.isFinal) {
return;
}
var target = event.target;
if (!target || (target.disabled || target.classList.contains('mui-disabled'))) {
return;
}
$.trigger(event.target, name, touch);
touch.lastTapTime = $.now();
touch.lastTarget = event.target;
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && lastTarget && (lastTarget === target)) { //same target
if (lastTapTime && (touch.timestamp - lastTapTime) < options.tapMaxInterval) {
$.trigger(target, 'doubletap', touch);
lastTapTime = $.now();
lastTarget = target;
return;
}
}
$.trigger(target, name, touch);
lastTapTime = $.now();
lastTarget = event.target;
}
break;
}
};
/**
* mui gesture tap
......@@ -1319,6 +1562,7 @@ var mui = (function(document, undefined) {
index: 30,
handle: handle,
options: {
fingers: 1,
tapMaxInterval: 300,
tapMaxDistance: 5,
tapMaxTime: 250
......@@ -1339,9 +1583,7 @@ var mui = (function(document, undefined) {
case $.EVENT_START:
clearTimeout(timer);
timer = setTimeout(function() {
if (!touch.drag) {
$.trigger(event.target, name, touch);
}
}, options.holdTimeout);
break;
case $.EVENT_MOVE:
......@@ -1363,6 +1605,7 @@ var mui = (function(document, undefined) {
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 500,
holdThreshold: 2
}
......@@ -1380,18 +1623,20 @@ var mui = (function(document, undefined) {
var options = this.options;
switch (event.type) {
case $.EVENT_START:
clearTimeout(timer);
if ($.options.gestureConfig.hold) {
timer && clearTimeout(timer);
timer = setTimeout(function() {
touch.hold = true;
$.trigger(event.target, name, touch);
}, options.holdTimeout);
}
break;
case $.EVENT_MOVE:
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
clearTimeout(timer);
if ($.options.gestureConfig.hold && touch.hold) {
if (timer) {
clearTimeout(timer) && (timer = null);
$.trigger(event.target, 'release', touch);
}
break;
......@@ -1405,6 +1650,7 @@ var mui = (function(document, undefined) {
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 0
}
});
......@@ -1423,7 +1669,8 @@ var mui = (function(document, undefined) {
hold: false,
flick: true,
swipe: true,
drag: true
drag: true,
pinch: false
}
};
/**
......@@ -2051,6 +2298,11 @@ var mui = (function(document, undefined) {
$(offCanvas).offCanvas('close');
return true;
}
var previewImage = $.isFunction($.getPreviewImage) && $.getPreviewImage();
if (previewImage && previewImage.isShown()) {
previewImage.close();
return true;
}
}
});
}
......@@ -2897,29 +3149,6 @@ var mui = (function(document, undefined) {
this.indicators.push(new Indicator(this, indicators[i]));
}
this.wrapper.addEventListener('scrollend', function() {
self.indicators.map(function(indicator) {
indicator.fade();
});
});
this.wrapper.addEventListener('scrollstart', function() {
self.indicators.map(function(indicator) {
indicator.fade(1);
});
});
// this.wrapper.addEventListener('beforescrollstart', function() {
// self.indicators.map(function(indicator) {
// indicator.fade(1, true);
// });
// });
this.wrapper.addEventListener('refresh', function() {
self.indicators.map(function(indicator) {
indicator.refresh();
});
});
},
_initSnap: function() {
this.currentPage = {};
......@@ -2998,26 +3227,48 @@ var mui = (function(document, undefined) {
pageX: 0
};
},
_initEvent: function() {
window.addEventListener('orientationchange', this);
window.addEventListener('resize', this);
this.scroller.addEventListener('webkitTransitionEnd', this);
this.wrapper.addEventListener('touchstart', this);
this.wrapper.addEventListener('touchcancel', this);
this.wrapper.addEventListener('touchend', this);
this.wrapper.addEventListener('drag', this);
this.wrapper.addEventListener('dragend', this);
this.wrapper.addEventListener('flick', this);
this.wrapper.addEventListener('scrollend', this);
_initEvent: function(detach) {
var action = detach ? 'removeEventListener' : 'addEventListener';
window[action]('orientationchange', this);
window[action]('resize', this);
this.scroller[action]('webkitTransitionEnd', this);
this.wrapper[action]('touchstart', this);
this.wrapper[action]('touchcancel', this);
this.wrapper[action]('touchend', this);
this.wrapper[action]('drag', this);
this.wrapper[action]('dragend', this);
this.wrapper[action]('flick', this);
this.wrapper[action]('scrollend', this);
if (this.options.scrollX) {
this.wrapper.addEventListener('swiperight', this);
this.wrapper[action]('swiperight', this);
}
var segmentedControl = this.wrapper.querySelector('.mui-segmented-control');
if (segmentedControl) { //靠，这个bug排查了一下午，阻止hash跳转，一旦hash跳转会导致可拖拽选项卡的tab不见
mui(segmentedControl).on('click', 'a', $.preventDefault);
mui(segmentedControl)[detach ? 'off' : 'on']('click', 'a', $.preventDefault);
}
this.wrapper[action]('scrollend', this._handleIndicatorScrollend.bind(this));
this.wrapper[action]('scrollstart', this._handleIndicatorScrollstart.bind(this));
this.wrapper[action]('refresh', this._handleIndicatorRefresh.bind(this));
},
_handleIndicatorScrollend: function() {
this.indicators.map(function(indicator) {
indicator.fade();
});
},
_handleIndicatorScrollstart: function() {
this.indicators.map(function(indicator) {
indicator.fade(1);
});
},
_handleIndicatorRefresh: function() {
this.indicators.map(function(indicator) {
indicator.refresh();
});
},
handleEvent: function(e) {
if (this.stopped) {
......@@ -3113,8 +3364,8 @@ var mui = (function(document, undefined) {
// if (direction !== 'left' && direction !== 'right') {
// isReturn = true;
// } else {
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
// }
}
} else if (this.options.scrollY && !this.moved) {
......@@ -3129,8 +3380,8 @@ var mui = (function(document, undefined) {
// }
// }
if (!this.moved) {
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
}
} else if (this.options.scrollX && !this.moved) {
isReturn = true;
......@@ -3156,8 +3407,8 @@ var mui = (function(document, undefined) {
deltaX = detail.deltaX;
deltaY = detail.deltaY;
} else { //move
deltaX = detail.deltaX - detail.lastDeltaX;
deltaY = detail.deltaY - detail.lastDeltaY;
deltaX = detail.deltaX - $.gestures.session.prevTouch.deltaX;
deltaY = detail.deltaY - $.gestures.session.prevTouch.deltaY;
}
var absDeltaX = Math.abs(detail.deltaX);
var absDeltaY = Math.abs(detail.deltaY);
......@@ -3431,6 +3682,7 @@ var mui = (function(document, undefined) {
}
this.lastX = this.x;
this.lastY = this.y;
$.trigger(this.scroller, 'scroll', this);
},
reLayout: function() {
this.wrapper.offsetHeight;
......@@ -3503,6 +3755,11 @@ var mui = (function(document, undefined) {
},
gotoPage: function(index) {
this._gotoPage(index);
},
destory: function() {
this._initEvent(true); //detach
delete $.data[this.wrapper.getAttribute('data-scroll')];
this.wrapper.setAttribute('data-scroll', '');
}
});
//Indicator
......@@ -3719,9 +3976,13 @@ var mui = (function(document, undefined) {
},
//API
resetPosition: function(time) {
if (this.pulldown && this.y >= this.options.down.height) {
if (this.pulldown) {
if (this.y >= this.options.down.height) {
this.pulldownLoading(undefined, time || 0);
return true;
} else {
this.topPocket.classList.remove(CLASS_VISIBILITY);
}
}
return this._super(time);
},
......@@ -3810,7 +4071,9 @@ var mui = (function(document, undefined) {
} else {
pullRefreshApi = $.data[id];
}
if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
pullRefreshApi.pulldownLoading(options.down.autoY);
} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
pullRefreshApi.pullupLoading();
}
//暂不提供这种调用方式吧
......@@ -3844,10 +4107,10 @@ var mui = (function(document, undefined) {
var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
var SELECTOR_SLIDER_PROGRESS_BAR = '.mui-slider-progress-bar';
var Slider = $.Scroll.extend({
var Slider = $.Slider = $.Scroll.extend({
init: function(element, options) {
this._super(element, $.extend(true, {
fingers: 1,
interval: 0, //设置为0，则不定时轮播
scrollY: false,
scrollX: true,
......@@ -3886,11 +4149,8 @@ var mui = (function(document, undefined) {
this._initTimer();
}
},
_initEvent: function() {
_triggerSlide: function() {
var self = this;
self._super();
self.wrapper.addEventListener('swiperight', $.stopPropagation);
self.wrapper.addEventListener('scrollend', function() {
self.isInTransition = false;
var page = self.currentPage;
self.slideNumber = self._fixedSlideNumber();
......@@ -3903,14 +4163,15 @@ var mui = (function(document, undefined) {
}
if (self.lastSlideNumber != self.slideNumber) {
self.lastSlideNumber = self.slideNumber;
self.lastPage = self.currentPage;
$.trigger(self.wrapper, 'slide', {
slideNumber: self.slideNumber
});
}
self._initTimer();
});
self.wrapper.addEventListener('slide', function(e) {
},
_handleSlide: function(e) {
var self = this;
if (e.target !== self.wrapper) {
return;
}
......@@ -3956,21 +4217,32 @@ var mui = (function(document, undefined) {
}
}
e.stopPropagation();
});
self.wrapper.addEventListener($.eventName('shown', 'tab'), function(e) { //tab
},
_handleTabShow: function(e) {
var self = this;
self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
});
//indicator
var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
if (indicator) {
indicator.addEventListener('tap', function(event) {
},
_handleIndicatorTap: function(event) {
var target = event.target;
if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
event.stopPropagation();
}
});
},
_initEvent: function(detach) {
var self = this;
self._super(detach);
var action = detach ? 'removeEventListener' : 'addEventListener';
self.wrapper[action]('swiperight', $.stopPropagation);
self.wrapper[action]('scrollend', self._triggerSlide.bind(this));
self.wrapper[action]('slide', self._handleSlide.bind(this));
self.wrapper[action]($.eventName('shown', 'tab'), self._handleTabShow.bind(this));
//indicator
var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
if (indicator) {
indicator[action]('tap', self._handleIndicatorTap.bind(this));
}
},
_drag: function(e) {
......@@ -4050,7 +4322,7 @@ var mui = (function(document, undefined) {
// return;
// }
if (e.type === 'flick') {
if (detail.touchTime < 200) { //flick，太容易触发，额外校验一下touchtime
if (detail.deltaTime < 200) { //flick，太容易触发，额外校验一下deltaTime
this.x = this._getPage((this.slideNumber + (direction === 'right' ? -1 : 1)), true).x;
}
this.resetPosition(this.options.bounceTime);
......@@ -4153,6 +4425,11 @@ var mui = (function(document, undefined) {
} else {
this._super();
}
},
destory: function() {
this._initEvent(true); //detach
delete $.data[this.wrapper.getAttribute('data-slider')];
this.wrapper.setAttribute('data-slider', '');
}
});
$.fn.slider = function(options) {
......@@ -4325,10 +4602,16 @@ var mui = (function(document, undefined) {
});
}
},
pulldownLoading: function() {
pulldownLoading: function() { //该方法是子页面调用的
var callback = $.options.pullRefresh.down.callback;
callback && callback.call(this);
},
_pulldownLoading: function() { //该方法是子页面调用的
var self = this;
$.plusReady(function() {
plus.webview.getWebviewById(self.options.webviewId).evalJS("mui&&mui.options.pullRefresh.down&&mui.options.pullRefresh.down.callback()");
});
},
endPulldownToRefresh: function() { //该方法是子页面调用的
var webview = plus.webview.currentWebview();
webview.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
......@@ -4430,7 +4713,9 @@ var mui = (function(document, undefined) {
} else {
pullRefreshApi = $.data[id];
}
if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
pullRefreshApi._pulldownLoading(); //parent webview
} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
pullRefreshApi.pullupLoading();
}
return pullRefreshApi;
......@@ -4533,10 +4818,10 @@ var mui = (function(document, undefined) {
case 'drag':
var detail = e.detail;
if (!this.startX) {
this.startX = detail.move.x;
this.startX = detail.center.x;
this.lastX = this.startX;
} else {
this.lastX = detail.move.x;
this.lastX = detail.center.x;
}
if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
if (this.slideIn) {
......@@ -4556,8 +4841,8 @@ var mui = (function(document, undefined) {
this.startX = this.lastX;
this.isDragging = true;
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
this.scroller.classList.remove(CLASS_TRANSITIONING);
this.offsetX = this.getTranslateX();
......@@ -4943,7 +5228,11 @@ var mui = (function(document, undefined) {
var CLASS_ACTION = 'mui-action';
var handle = function(event, target) {
if (target.className && ~target.className.indexOf(CLASS_ACTION)) {
var className = target.className || '';
if (typeof className !== 'string') { //svg className(SVGAnimatedString)
className = '';
}
if (className && ~className.indexOf(CLASS_ACTION)) {
if (target.classList.contains('mui-action-back')) {
event.preventDefault();
}
......@@ -5691,7 +5980,7 @@ var mui = (function(document, undefined) {
timer = $.later(function() {
toggleActive(true);
}, 100);
} else{
} else {
toggleActive(true);
}
}
......@@ -5972,8 +6261,8 @@ var mui = (function(document, undefined) {
sliderHandle && toggleEvents(cell, true);
});
var radioOrCheckboxClick = function(event) {
var type = event.target&&event.target.type||'';
if(type==='radio'||type==='checkbox'){
var type = event.target && event.target.type || '';
if (type === 'radio' || type === 'checkbox') {
return;
}
var classList = cell.classList;
......
examples/hello-mui/js/mui.listpicker.js
View file @ cf92c3d8
......@@ -5,9 +5,9 @@
* Houfeng@DCloud.io
*/
(function($) {
(function($, document) {
//create dom
//创建 DOM
$.dom = function(str) {
if (typeof(str) !== 'string') {
if ((str instanceof Array) || (str[0] && str.length)) {
......@@ -23,6 +23,8 @@
return [].slice.call($.__create_dom_div__.childNodes);
};
var _listpickerId = 0;
var ListPicker = $.ListPicker = $.Class.extend({
init: function(box, options) {
var self = this;
......@@ -31,16 +33,23 @@
}
self.box = box;
//避免重复初始化开始
if (self.box.__listpicker_inited) return;
self.box.__listpicker_inited = true;
if (self.box.listpickerId) return;
self.listpickerId = self.box.listpickerId = "listpicker-" + (++_listpickerId);
//避免重复初始化结束
self.box.setAttribute('data-listpicker-id', self.box.listpickerId);
//处理 options
options = options || {};
options.fiexdDur = options.fiexdDur || 150;
//ios 默认用 h5 模式
if (options.enabledH5 === null || typeof options.enabledH5 === 'undefined') {
options.enabledH5 = $.os.ios;
options.highlightStyle = options.highlightStyle || 'color: green;';
//在 ios 上启用 h5 模式，
if ($.os.ios) {
options.enabledH5 = true;
}
//如果没有设定 enabled3d，将默认用 3d 模式
if (options.enabled3d === null || typeof options.enabled3d === 'undefined') {
options.enabled3d = $.os.ios;
}
//options.enabledH5 = true;
//
self.options = options;
self._create();
self._handleShim();
......@@ -53,7 +62,9 @@
self.boxInner = $('.mui-listpicker-inner', self.box)[0];
self.boxHeight = self.box.offsetHeight;
self.list = $('ul', self.boxInner)[0];
var firstItem = $('li', self.list)[0];
//refresh 中会执行 self.itemElementArray = [].slice.call($('li', self.list));
self.refresh();
var firstItem = self.itemElementArray[0];
self.itemHeight = 0;
if (firstItem) {
self.itemHeight = firstItem.offsetHeight;
......@@ -64,19 +75,31 @@
self.list.innerHTML = '';
}
self.list.style.paddingTop = self.list.style.paddingBottom = (self.boxHeight / 2 - self.itemHeight / 2) + 'px';
//创建中间选中项的高亮行
self.rule = $.dom('<div class="mui-listpicker-rule"> </div>')[0];
self.rule.style.height = self.itemHeight + 'px';
self.rule.style.marginTop = -(self.itemHeight / 2) + 'px';
self.box.appendChild(self.rule);
if ($.os.ios) {
self.boxInner.classList.add('mui-listpicker-inner-ios');
self.middle = self.boxInner.offsetHeight / 2;
self.showLine = parseInt((self.boxInner.offsetHeight / self.itemHeight).toFixed(0));
//是否启用 3d 效果
if (self.options.enabled3d) {
self.box.classList.add('three-dimensional');
}
},
//根据 options 处理不同平台兼容问题
_handleShim: function() {
var self = this;
if (self.options.enabledH5) {
self.options.fiexdDur *= 2;
self._scrollerApi = $(self.boxInner).scroll();
self.boxInner.classList.add($.className('scroll-wrapper'));
self.list.classList.add($.className('scroll'));
self._scrollerApi = $(self.boxInner).scroll({
deceleration: 0.002
});
//增加惯性滚动时的 scroll 触发处理
//shimTetTranslate(self._scrollerApi);
//--
self.setScrollTop = function(y, dur, callback) {
self._scrollerApi.scrollTo(0, -y, dur);
};
......@@ -102,7 +125,7 @@
if (!self.isTouchDown || !$.os.ios) {
$.trigger(self.boxInner, 'scrollend');
}
}, 100);
}, 150);
}, false);
self.aniScrollTop = function(y, dur, callback) {
self.disabledScroll = true;
......@@ -151,34 +174,39 @@
_handleHighlight: function() {
var self = this;
var scrollTop = self.getScrollTop();
var fiexd = (scrollTop / self.itemHeight).toFixed(0);
var itemElements = $('li', self.list);
for (var index in itemElements) {
var itemElement = itemElements[index];
if (!itemElement || !itemElement.classList) continue;
var fiexd = parseInt((scrollTop / self.itemHeight).toFixed(0));
var lastIndex = self.itemElementArray.length - 1;
var displayRange = parseInt((self.showLine / 2).toFixed(0));
var displayBegin = fiexd - displayRange;
var displayEnd = fiexd + displayRange;
if (displayBegin < 0) {
displayBegin = 0;
}
if (displayEnd > lastIndex) {
displayEnd = lastIndex;
}
//高亮选中行开始
for (var index = displayBegin; index <= displayEnd; index++) {
var itemElement = self.itemElementArray[index];
if (index == fiexd) {
itemElement.classList.add('mui-listpicker-highlight');
itemElement.classList.add($.className('listpicker-item-selected'));
//itemElement.classList.remove($.className('listpicker-item-before'));
//itemElement.classList.remove($.className('listpicker-item-after'));
} else {
itemElement.classList.remove('mui-listpicker-highlight');
}
//itemElement.classList.add($.className('listpicker-item-' + (fiexd > index ? 'before' : 'after')));
itemElement.classList.remove($.className('listpicker-item-selected'));
}
/*
var opacity = 1;
for (var index = fiexd; index >= 0; index--) {
var itemElement = itemElements[index];
itemElement.style.opacity = opacity;
opacity -= 0.25;
if (opacity < 0) opacity = 0;
if (self.options.enabled3d) {
//3d 处理开始
var itemOffset = self.middle - (itemElement.offsetTop - scrollTop + self.itemHeight / 2) + 1;
var percentage = itemOffset / self.itemHeight;
var angle = (18 * percentage);
//if (angle > 180) angle = 180;
//if (angle < -180) angle = -180;
itemElement.style.webkitTransform = 'rotateX(' + angle + 'deg) translate3d(0px,0px,' + (0 - Math.abs(percentage * 12)) + 'px)';
//3d 处理结束
}
opacity = 1;
var length = itemElements.length;
for (var index = fiexd; index < itemElements.length; index++) {
var itemElement = itemElements[index];
itemElement.style.opacity = opacity;
opacity -= 0.25;
if (opacity < 0) opacity = 0;
}
*/
},
_triggerChange: function() {
var self = this;
......@@ -253,6 +281,10 @@
value: itemElement.getAttribute('data-value')
};
},
refresh: function() {
var self = this;
self.itemElementArray = [].slice.call($('li', self.list));
},
setItems: function(items) {
var self = this;
var buffer = [];
......@@ -265,10 +297,10 @@
buffer.push("<li data-value='" + item.value + "' data-item='" + itemJson + "'>" + item.text + "</li>");
};
self.list.innerHTML = buffer.join('');
//self._scrollEndHandle();
if (self._scrollerApi && self._scrollerApi.refresh) {
self._scrollerApi.refresh();
}
self.refresh();
self._handleHighlight();
self._triggerChange();
},
......@@ -349,18 +381,19 @@
new ListPicker(element, options);
} else {
var optionsText = element.getAttribute('data-listpicker-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.enabledH5 = element.getAttribute('data-listpicker-enabledh5') || options.enabledH5;
options.fixedDur = element.getAttribute('data-listpicker-fixddur') || options.fixedDur;
new ListPicker(element, options);
var _options = optionsText ? JSON.parse(optionsText) : {};
_options.enabledH5 = element.getAttribute('data-listpicker-enabledh5') || _options.enabledH5;
_options.enabled3d = element.getAttribute('data-listpicker-enabled3d') || _options.enabled3d;
_options.fixedDur = element.getAttribute('data-listpicker-fixddur') || _options.fixedDur;
new ListPicker(element, _options);
}
});
return this;
};
//auto apply
//自动初始化
$.ready(function() {
$('.mui-listpicker').listpicker();
});
})(mui);
\ No newline at end of file
})(mui, document);
\ No newline at end of file
examples/hello-mui/js/mui.min.js
View file @ cf92c3d8
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.poppicker.js
View file @ cf92c3d8
......@@ -6,7 +6,7 @@
* Houfeng@DCloud.io
*/
(function($) {
(function($, document) {
var panelBuffer = '<div class="mui-poppicker">\
<div class="mui-poppicker-header">\
......@@ -44,9 +44,11 @@
self.hide();
}, false);
self.ok.addEventListener('tap', function(event) {
self.hide();
if (self.callback) {
self.callback(self.getSelectedItems());
var rs = self.callback(self.getSelectedItems());
if (rs !== false) {
self.hide();
}
}
}, false);
self.mask[0].addEventListener('tap', function() {
......@@ -67,7 +69,7 @@
self.pickers.push(picker);
picker.addEventListener('change', function(event) {
var nextPicker = this.nextSibling;
if (nextPicker && nextPicker.__listpicker_inited) {
if (nextPicker && nextPicker.listpickerId) {
var eventData = event.detail || {};
var preItem = eventData.item || {};
nextPicker.setItems(preItem.children);
......@@ -87,7 +89,7 @@
var items = [];
for (var i in self.pickers) {
var picker = self.pickers[i];
items.push(picker.getSelectedItem());
items.push(picker.getSelectedItem() || {});
}
return items;
},
......@@ -96,6 +98,7 @@
var self = this;
self.callback = callback;
self.mask.show();
document.body.classList.add($.className('poppicker-active-for-page'));
self.panel.classList.add($.className('active'));
},
//隐藏
......@@ -103,7 +106,8 @@
var self = this;
self.panel.classList.remove($.className('active'));
self.mask.close();
document.body.classList.remove($.className('poppicker-active-for-page'));
}
});
})(mui);
\ No newline at end of file
})(mui, document);
\ No newline at end of file
examples/hello-mui/js/mui.previewimage.js 0 → 100644
View file @ cf92c3d8
(function($, window) {
var template = '<div id="{{id}}" class="mui-slider mui-preview-image mui-fullscreen"><div class="mui-preview-header">{{header}}</div><div class="mui-slider-group"></div><div class="mui-preview-footer mui-hidden">{{footer}}</div><div class="mui-preview-loading"><span class="mui-spinner mui-spinner-white"></span></div></div>';
var itemTemplate = '<div class="mui-slider-item mui-zoom-wrapper {{className}}"><div class="mui-zoom-scroller"><img src="{{src}}" data-preview-lazyload="{{lazyload}}" style="{{style}}" class="mui-zoom"></div></div>';
var defaultGroupName = '__DEFAULT';
var div = document.createElement('div');
var imgId = 0;
var PreviewImage = function(options) {
this.options = $.extend(true, {
id: '__MUI_PREVIEWIMAGE',
zoom: true,
header: '<span class="mui-preview-indicator"></span>',
footer: ''
}, options || {});
this.init();
this.initEvent();
};
var proto = PreviewImage.prototype;
proto.init = function() {
var options = this.options;
var el = document.getElementById(this.options.id);
if (!el) {
div.innerHTML = template.replace(/\{\{id\}\}/g, this.options.id).replace('{{header}}', options.header).replace('{{footer}}', options.footer);
document.body.appendChild(div.firstElementChild);
el = document.getElementById(this.options.id);
}
//自动启用
$.options.gestureConfig.pinch = true;
$.options.gestureConfig.doubletap = true;
this.element = el;
this.scroller = this.element.querySelector($.classSelector('.slider-group'));
this.indicator = this.element.querySelector($.classSelector('.preview-indicator'));
this.loader = this.element.querySelector($.classSelector('.preview-loading'));
if (options.footer) {
this.element.querySelector($.classSelector('.preview-footer')).classList.remove($.className('hidden'));
}
this.addImages();
};
proto.initEvent = function() {
var self = this;
$(document.body).on('tap', 'img[data-preview-src]', function() {
self.open(this);
});
var laterClose = null;
this.loader.addEventListener('tap', function(e) {
laterClose = $.later(function() {
self.close();
}, 300);
});
this.scroller.addEventListener('tap', function() {
laterClose = $.later(function() {
self.close();
}, 300);
});
this.scroller.addEventListener('doubletap', function() {
laterClose && laterClose.cancel();
laterClose = null;
});
this.element.addEventListener('slide', function(e) {
if (self.options.zoom) {
var lastZoomerEl = self.element.querySelector('.mui-zoom-wrapper:nth-child(' + (self.lastIndex + 1) + ')');
if (lastZoomerEl) {
$(lastZoomerEl).zoom().setZoom(1);
}
}
var slideNumber = e.detail.slideNumber;
self.lastIndex = slideNumber;
self.indicator && (self.indicator.innerText = (slideNumber + 1) + '/' + self.currentGroup.length);
self._loadItem(slideNumber);
});
};
proto.addImages = function(group, index) {
this.groups = {};
var imgs = [];
if (group) {
if (group === defaultGroupName) {
imgs = document.querySelectorAll("img[data-preview-src]:not([data-preview-group])");
} else {
imgs = document.querySelectorAll("img[data-preview-src][data-preview-group='" + group + "']");
}
} else {
imgs = document.querySelectorAll("img[data-preview-src]");
}
if (imgs.length) {
for (var i = 0, len = imgs.length; i < len; i++) {
this.addImage(imgs[i]);
}
}
};
proto.addImage = function(img) {
var group = img.getAttribute('data-preview-group');
group = group || defaultGroupName;
if (!this.groups[group]) {
this.groups[group] = [];
}
if (img.__mui_img_data) {
this.groups[group].push(img.__mui_img_data);
} else {
var src = img.getAttribute('src');
var lazyload = img.getAttribute('data-preview-src');
if (!lazyload) {
lazyload = src;
}
var imgObj = {
src: src,
lazyload: src === lazyload ? '' : lazyload,
loaded: src === lazyload ? true : false,
sWidth: 0,
sHeight: 0,
sTop: 0,
sLeft: 0,
sScale: 1,
el: img
};
this.groups[group].push(imgObj);
img.__mui_img_data = imgObj;
}
};
proto.empty = function() {
this.scroller.innerHTML = '';
};
proto.openByGroup = function(index, group, anchorEl) {
index = Math.min(Math.max(0, index), this.groups[group].length - 1);
this.refresh(index, this.groups[group], anchorEl);
};
proto._initImgData = function(itemData, imgEl) {
if (!itemData.sWidth) {
var img = itemData.el;
itemData.sWidth = img.offsetWidth;
itemData.sHeight = img.offsetHeight;
var offset = $.offset(img);
itemData.sTop = offset.top;
itemData.sLeft = offset.left;
itemData.sScale = Math.max(itemData.sWidth / window.innerWidth, itemData.sHeight / window.innerHeight);
}
imgEl.style.webkitTransform = 'translate3d(0,0,0) scale(' + itemData.sScale + ')';
};
proto.refresh = function(index, groupArray, anchorEl) {
this.currentGroup = groupArray;
// anchorEl && this.position(anchorEl);
//重新生成slider
var length = groupArray.length;
var itemHtml = [];
var currentRange = this.getRangeByIndex(index, length);
var from = currentRange.from;
var to = currentRange.to + 1;
var currentIndex = index;
var className = '';
var itemStr = '';
var wWidth = window.innerWidth;
var wHeight = window.innerHeight;
for (var i = 0; from < to; from++, i++) {
var itemData = groupArray[from];
var style = '';
if (itemData.sWidth) {
style = '-webkit-transform:translate3d(0,0,0) scale(' + itemData.sScale + ');transform:translate3d(0,0,0) scale(' + itemData.sScale + ')';
}
itemStr = itemTemplate.replace('{{src}}', itemData.src).replace('{{lazyload}}', itemData.lazyload).replace('{{style}}', style);
if (from === index) {
currentIndex = i;
className = $.className('active');
} else {
className = '';
}
itemHtml.push(itemStr.replace('{{className}}', className));
}
this.scroller.innerHTML = itemHtml.join('');
this.element.classList.add($.className('preview-in'));
this.lastIndex = currentIndex;
this.element.offsetHeight;
$(this.element).slider().gotoItem(currentIndex, 0);
this.indicator && (this.indicator.innerText = (currentIndex + 1) + '/' + this.currentGroup.length);
this._loadItem(currentIndex);
};
proto._getScale = function(from, to) {
var scaleX = from.width / to.width;
var scaleY = from.height / to.height;
var scale = 1;
if (scaleX <= scaleY) {
scale = from.height / (to.height * scaleX);
} else {
scale = from.width / (to.width * scaleY);
}
return scale;
};
proto._imgTransitionEnd = function(e) {
var img = e.target;
img.classList.remove($.className('transitioning'));
img.removeEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
};
proto._closeTransitionEnd = function(e) {
var img = e.target;
img.classList.remove($.className('transitioning'));
img.removeEventListener('webkitTransitionEnd', this._closeTransitionEnd.bind(this));
this.element.classList.remove($.className('preview-in'));
this.element.classList.remove($.className('transitioning'));
};
proto._loadItem = function(index, callback) { //TODO 暂时仅支持img
var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (index + 1) + ')'));
var itemData = this.currentGroup[index];
var imgEl = itemEl.querySelector('img');
this._initImgData(itemData, imgEl);
if (!itemData.loaded && imgEl.getAttribute('data-preview-lazyload')) {
var self = this;
self.loader.classList.add($.className('active'));
imgEl && this.loadImage(imgEl, function() {
itemData.loaded = true;
imgEl.src = itemData.lazyload;
self._initZoom(itemEl, this.width, this.height);
imgEl.classList.add($.className('transitioning'));
imgEl.addEventListener('webkitTransitionEnd', self._imgTransitionEnd.bind(self));
imgEl.setAttribute('style', '');
imgEl.offsetHeight;
callback && callback.call(itemEl);
self.loader.classList.remove($.className('active'));
});
} else {
itemData.lazyload && (imgEl.src = itemData.lazyload);
this._initZoom(itemEl, imgEl.width, imgEl.height);
imgEl.classList.add($.className('transitioning'));
imgEl.addEventListener('webkitTransitionEnd', this._imgTransitionEnd.bind(this));
imgEl.setAttribute('style', '');
imgEl.offsetHeight;
callback && callback.call(itemEl);
}
this._preloadItem(index + 1);
this._preloadItem(index - 1);
};
proto._preloadItem = function(index) {
var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (index + 1) + ')'));
if (itemEl) {
var itemData = this.currentGroup[index];
if (!itemData.sWidth) {
var imgEl = itemEl.querySelector('img');
this._initImgData(itemData, imgEl);
}
}
};
proto._initZoom = function(zoomWrapperEl, zoomerWidth, zoomerHeight) {
if (!this.options.zoom) {
return;
}
if (zoomWrapperEl.getAttribute('data-zoomer')) {
return;
}
var zoomEl = zoomWrapperEl.querySelector($.classSelector('.zoom'));
if (zoomEl.tagName === 'IMG') {
var self = this;
var maxZoom = self._getScale({
width: zoomWrapperEl.offsetWidth,
height: zoomWrapperEl.offsetHeight
}, {
width: zoomerWidth,
height: zoomerHeight
});
$(zoomWrapperEl).zoom({
maxZoom: Math.max(maxZoom, 1)
});
} else {
$(zoomWrapperEl).zoom();
}
};
proto.loadImage = function(imgEl, callback) {
var onReady = function() {
callback && callback.call(this);
};
var img = new Image();
img.onload = onReady;
img.onerror = onReady;
img.src = imgEl.getAttribute('data-preview-lazyload');
};
proto.getRangeByIndex = function(index, length) {
return {
from: 0,
to: length - 1
};
// var from = Math.max(index - 1, 0);
// var to = Math.min(index + 1, length);
// if (index === length - 1) {
// from = Math.max(length - 3, 0);
// to = length - 1;
// }
// if (index === 0) {
// from = 0;
// to = Math.min(2, length - 1);
// }
// return {
// from: from,
// to: to
// };
};
proto.open = function(index, group) {
if (typeof index === "number") {
group = group || defaultGroupName;
this.addImages(group, index); //刷新当前group
this.openByGroup(index, group);
} else {
group = index.getAttribute('data-preview-group');
group = group || defaultGroupName;
this.addImages(group, index); //刷新当前group
this.openByGroup(this.groups[group].indexOf(index.__mui_img_data), group, index);
}
};
proto.close = function(index, group) {
this.element.classList.add($.className('transitioning'));
var itemEl = this.scroller.querySelector($.classSelector('.slider-item:nth-child(' + (this.lastIndex + 1) + ')'));
var imgEl = itemEl.querySelector('img');
if (imgEl) {
imgEl.classList.add($.className('transitioning'));
var itemData = this.currentGroup[this.lastIndex];
var sLeft = itemData.sLeft - window.pageXOffset;
var sTop = itemData.sTop - window.pageYOffset;
if (sTop > window.innerHeight || sLeft > window.innerWidth || sTop < 0 || sLeft < 0) { //out viewport
imgEl.addEventListener('webkitTransitionEnd', this._closeTransitionEnd.bind(this));
imgEl.style.opacity = 0;
imgEl.style.webkitTransform = 'scale(' + itemData.sScale + ')';
} else {
var left = (window.innerWidth - itemData.sWidth) / 2;
var top = (window.innerHeight - itemData.sHeight) / 2;
imgEl.addEventListener('webkitTransitionEnd', this._closeTransitionEnd.bind(this));
imgEl.style.webkitTransform = 'translate3d(' + (sLeft - left) + 'px,' + (sTop - top) + 'px,0) scale(' + itemData.sScale + ')';
}
}
var zoomers = this.element.querySelectorAll($.classSelector('.zoom-wrapper'));
for (var i = 0, len = zoomers.length; i < len; i++) {
$(zoomers[i]).zoom().destory();
}
// $(this.element).slider().destory();
// this.empty();
};
proto.isShown = function() {
return this.element.classList.contains($.className('preview-in'));
};
var previewImageApi = null;
$.previewImage = function(options) {
if (!previewImageApi) {
previewImageApi = new PreviewImage(options);
}
return previewImageApi;
};
$.getPreviewImage = function() {
return previewImageApi;
}
})(mui, window);
\ No newline at end of file
examples/hello-mui/js/mui.pullToRefresh.js
View file @ cf92c3d8
......@@ -178,8 +178,8 @@
this.isDragging = true;
this.removing = false;
this.startDeltaY = detail.deltaY;
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
this._pullStart(this.startDeltaY);
}
}
......
examples/hello-mui/js/mui.view.js
View file @ cf92c3d8
......@@ -41,7 +41,7 @@
init: function(element, options) {
this.view = this.element = element;
this.options = $.extend({
animateNavbar: true,
animateNavbar: 'ios', //ios
swipeBackPageActiveArea: 30,
hardwareAccelerated: true
}, options);
......@@ -64,7 +64,7 @@
this._initDefaultPage();
this._initNavBar();
this.navbars && this._initNavBar();
this.initEvent();
},
......@@ -122,19 +122,19 @@
return shadow;
}(),
_removePage: function(page, navbar) {
this._removeNavbar(page, navbar);
navbar && this._removeNavbar(page, navbar);
document.body.appendChild(page);
this._cleanPageClass(page);
},
_prependPage: function(page) {
var navbar = page.querySelector(SELECTOR_NAVBAR_INNER);
this._prependNavbar(navbar);
navbar && this._prependNavbar(navbar);
page.classList.add(CLASS_PAGE_LEFT);
this.pages.insertBefore(page, this.pages.firstElementChild);
},
_appendPage: function(page) {
var navbar = page.querySelector(SELECTOR_NAVBAR_INNER);
this._appendNavbar(navbar);
navbar && this._appendNavbar(navbar);
page.classList.add(CLASS_PAGE_CENTER);
this.pages.appendChild(page);
},
......@@ -190,6 +190,9 @@
el.style.opacity = '';
}
},
_isAnimateNavbarIOS: function() {
return $.os.ios && this.options.animateNavbar === 'ios';
},
_webkitTransitionEnd: function(event) {
this.dragging = this.moved = false;
if (this.activePage !== event.target) {
......@@ -203,7 +206,7 @@
this.activePageClassList.remove(CLASS_TRANSITIONING);
var self = this;
if ($.os.ios && this.options.animateNavbar && this.previousNavElements && this.activeNavElements) {
if (this._isAnimateNavbarIOS() && this.previousNavElements && this.activeNavElements) {
var isBack = this.isBack;
$.each(this.previousNavElements, function(i, el) {
el.classList.remove(CLASS_TRANSITIONING);
......@@ -222,8 +225,8 @@
this._cleanStyle(this.activeNavBackIcon);
}
} else {
this.previousNavbar.classList.remove(CLASS_TRANSITIONING);
this.activeNavbar.classList.remove(CLASS_TRANSITIONING);
this.previousNavbar && this.previousNavbar.classList.remove(CLASS_TRANSITIONING);
this.activeNavbar && this.activeNavbar.classList.remove(CLASS_TRANSITIONING);
this._cleanStyle(this.previousNavbar);
this._cleanStyle(this.activeNavbar);
}
......@@ -238,12 +241,14 @@
this._removePage(this.activePage, this.activeNavbar);
this.previousPageClassList.remove(CLASS_PAGE_LEFT);
this.previousPageClassList.add(CLASS_PAGE_CENTER);
if (this.previousNavbar) {
this.previousNavbar.classList.remove(CLASS_NAVBAR_LEFT);
this.previousNavbar.classList.add(CLASS_NAVBAR_CENTER);
}
if (this.history.length > 0) {
this._prependPage(this.history.pop());
}
this._initNavBar();
this.navbars && this._initNavBar();
this._trigger('pageBack', this.activePage);
this._trigger('pageShow', this.previousPage);
} else {
......@@ -287,10 +292,10 @@
this.previousPageClassList.remove(CLASS_TRANSITIONING);
this.activePageClassList.remove(CLASS_TRANSITIONING);
if (this.options.animateNavbar && this.navbars) {
if (this.navbars) {
this.previousNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_LEFT);
this.activeNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_CENTER);
if (this.previousNavbar && this.activeNavbar) {
if (this._isAnimateNavbarIOS() && this.previousNavbar && this.activeNavbar) {
this.previousNavElements = this.previousNavbar.querySelectorAll(SELECTOR_LEFT + ',' + SELECTOR_CENTER + ',' + SELECTOR_RIGHT);
this.activeNavElements = this.activeNavbar.querySelectorAll(SELECTOR_LEFT + ',' + SELECTOR_CENTER + ',' + SELECTOR_RIGHT);
this.previousNavBackIcon = this.previousNavbar.querySelector(SELECTOR_LEFT + SELECTOR_BTN_NAV + ' ' + SELECTOR_ICON);
......@@ -304,7 +309,7 @@
return false;
},
_initNavBar: function() {
if (this.options.animateNavbar && this.navbars) {
if (this._isAnimateNavbarIOS() && this.navbars) {
var inners = this.navbars.querySelectorAll(SELECTOR_NAVBAR_INNER);
var inner, left, right, center, leftWidth, rightWidth, centerWidth, noLeft, onRight, currLeft, diff, navbarWidth;
for (var i = 0, len = inners.length; i < len; i++) {
......@@ -371,7 +376,7 @@
}
var detail = event.detail;
if (!this.dragging) {
if ((detail.start.x - this.view.offsetLeft) < this.options.swipeBackPageActiveArea) {
if (($.gestures.session.firstTouch.center.x - this.view.offsetLeft) < this.options.swipeBackPageActiveArea) {
this.isBack = true;
this._initPageTransform();
}
......@@ -380,10 +385,10 @@
var deltaX = 0;
if (!this.moved) { //start
deltaX = detail.deltaX;
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
} else { //move
deltaX = detail.deltaX - detail.lastDeltaX;
deltaX = detail.deltaX - ($.gestures.session.prevTouch && $.gestures.session.prevTouch.deltaX || 0);
}
var newX = this.x + deltaX;
if (newX < 0 || newX > this.maxScrollX) {
......@@ -432,9 +437,10 @@
this.previousPageClassList.add(CLASS_TRANSITIONING);
this.activePageClassList.add(CLASS_TRANSITIONING);
var self = this;
if (this.options.animateNavbar && this.previousNavElements && this.activeNavElements) {
if (this.previousNavbar && this.activeNavbar) {
this.previousNavbar.classList.add(CLASS_TRANSITIONING);
this.activeNavbar.classList.add(CLASS_TRANSITIONING);
if (this._isAnimateNavbarIOS() && this.previousNavElements && this.activeNavElements) {
$.each(this.previousNavElements, function(i, el) {
el.classList.add(CLASS_TRANSITIONING);
self._cleanStyle(el);
......@@ -452,6 +458,7 @@
this.activeNavBackIcon.classList.add(CLASS_TRANSITIONING);
}
}
}
},
_clearRequestAnimationFrame: function() {
if (this.requestAnimationFrame) {
......@@ -478,7 +485,16 @@
_setNavbarTranslate: function(x, y) {
var percentage = x / this.maxScrollX;
//only for ios
if ($.os.ios && this.options.animateNavbar && this.previousNavElements && this.activeNavElements) {
if (this._isAnimateNavbarIOS()) {
if (this.previousNavElements && this.activeNavElements) {
this.animateNavbarByIOS(percentage);
}
} else { //pop-in
this.activeNavbar.style.opacity = 1 - percentage * 1.3;
this.previousNavbar.style.opacity = percentage * 1.3 - 0.3;
}
},
animateNavbarByIOS: function(percentage) {
var i, len, style, el;
for (i = 0, len = this.activeNavElements.length; i < len; i++) {
el = this.activeNavElements[i];
......@@ -504,23 +520,15 @@
}
}
}
} else {
this.activeNavbar.style.opacity = 1 - percentage * 1.3;
this.previousNavbar.style.opacity = percentage * 1.3 - 0.3;
}
},
setTranslate: function(x, y) {
this.x = x;
this.y = y;
this.previousPage.style.opacity = 0.9 + 0.1 * x / this.maxScrollX;
if ($.os.ios) { //only for ios
this.previousPage.style['webkitTransform'] = this._getTranslateStr((x / 5 - this.maxScrollX / 5), y);
}
this.previousPage.style['webkitTransform'] = this._getTranslateStr((x / 6 - this.maxScrollX / 6), y);
this.activePage.style['webkitTransform'] = this._getTranslateStr(x, y);
if (this.options.animateNavbar) {
this._setNavbarTranslate(x, y);
}
this.navbars && this._setNavbarTranslate(x, y);
this.lastX = this.x;
this.lastY = this.y;
},
......@@ -549,28 +557,31 @@
var nextPage = document.querySelector(pageSelector);
if (nextPage) {
var nextNavbar = nextPage.querySelector(SELECTOR_NAVBAR_INNER);
var previousNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_LEFT);
var activeNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_CENTER);
var previousPage = this.pages.querySelector(SELECTOR_PAGE_LEFT);
var activePage = this.pages.querySelector(SELECTOR_PAGE_CENTER);
if (previousNavbar && previousPage) {
this._removePage(previousPage, previousNavbar);
this.history.push(previousPage); //add to history
var previousNavbar;
var activeNavbar;
if (this.navbars) {
previousNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_LEFT);
activeNavbar = this.navbars.querySelector(SELECTOR_NAVBAR_CENTER);
}
if (activeNavbar) {
activeNavbar.classList.remove(CLASS_NAVBAR_CENTER);
activeNavbar.classList.add(CLASS_NAVBAR_LEFT);
}
if (previousPage) {
this._removePage(previousPage, previousNavbar);
this.history.push(previousPage); //add to history
}
if (activePage) {
activePage.classList.remove(CLASS_PAGE_CENTER);
activePage.style.webkitTransform = 'translate3d(0,0,0)';
activePage.classList.add(CLASS_PAGE_LEFT);
}
nextPage.style.webkitTransform = 'translate3d(100%,0,0)';
this._appendPage(nextPage);
nextPage.appendChild(this.shadow); //shadow
......@@ -579,14 +590,18 @@
this.ratio = 1;
this._initPageTransform();
this._initNavBar();
this._setNavbarTranslate(this.maxScrollX, 0);
this.navbars && this._initNavBar();
this.navbars && this._setNavbarTranslate(this.maxScrollX, 0);
//force
this.previousPage.offsetHeight;
this.activePage.offsetHeight;
if (this.navbars) {
this.previousNavbar.offsetHeight;
this.activeNavbar.offsetHeight;
}
this._trigger('pageBeforeShow', this.activePage);
this._prepareTransition();
......
examples/hello-mui/js/mui.zoom.js 0 → 100644
View file @ cf92c3d8
(function($, window) {
var CLASS_ZOOM = $.className('zoom');
var CLASS_ZOOM_SCROLLER = $.className('zoom-scroller');
var SELECTOR_ZOOM = '.' + CLASS_ZOOM;
var SELECTOR_ZOOM_SCROLLER = '.' + CLASS_ZOOM_SCROLLER;
var EVENT_PINCH_START = 'pinchstart';
var EVENT_PINCH = 'pinch';
var EVENT_PINCH_END = 'pinchend';
if ('ongesturestart' in window) {
EVENT_PINCH_START = 'gesturestart';
EVENT_PINCH = 'gesturechange';
EVENT_PINCH_END = 'gestureend';
}
$.Zoom = function(element, options) {
var zoom = this;
zoom.options = $.extend($.Zoom.defaults, options);
zoom.wrapper = zoom.element = element;
zoom.scroller = element.querySelector(SELECTOR_ZOOM_SCROLLER);
zoom.scrollerStyle = zoom.scroller && zoom.scroller.style;
zoom.zoomer = element.querySelector(SELECTOR_ZOOM);
zoom.zoomerStyle = zoom.zoomer && zoom.zoomer.style;
zoom.init = function() {
zoom.initEvents();
};
zoom.initEvents = function(detach) {
var action = detach ? 'removeEventListener' : 'addEventListener';
var target = zoom.scroller;
target[action](EVENT_PINCH_START, zoom.onPinchstart);
target[action](EVENT_PINCH, zoom.onPinch);
target[action](EVENT_PINCH_END, zoom.onPinchend);
target[action]('touchstart', zoom.onTouchstart);
target[action]('touchmove', zoom.onTouchMove);
target[action]('touchcancel', zoom.onTouchEnd);
target[action]('touchend', zoom.onTouchEnd);
target[action]('drag', function(e) {
if (imageIsMoved || isGesturing) {
e.stopPropagation();
}
});
target[action]('doubletap', function(e) {
zoom.toggleZoom(e.detail.center);
});
};
zoom.transition = function(style, time) {
time = time || 0;
style['webkitTransitionDuration'] = time + 'ms';
return zoom;
};
zoom.translate = function(style, x, y) {
x = x || 0;
y = y || 0;
style['webkitTransform'] = 'translate3d(' + x + 'px,' + y + 'px,0px)';
return zoom;
};
zoom.scale = function(style, scale) {
scale = scale || 1;
style['webkitTransform'] = 'translate3d(0,0,0) scale(' + scale + ')';
return zoom;
};
zoom.scrollerTransition = function(time) {
return zoom.transition(zoom.scrollerStyle, time);
};
zoom.scrollerTransform = function(x, y) {
return zoom.translate(zoom.scrollerStyle, x, y);
};
zoom.zoomerTransition = function(time) {
return zoom.transition(zoom.zoomerStyle, time);
};
zoom.zoomerTransform = function(scale) {
return zoom.scale(zoom.zoomerStyle, scale);
};
// Gestures
var scale = 1,
currentScale = 1,
isScaling = false,
isGesturing = false;
zoom.onPinchstart = function(e) {
isGesturing = true;
};
zoom.onPinch = function(e) {
if (!isScaling) {
zoom.zoomerTransition(0);
isScaling = true;
}
scale = (e.detail ? e.detail.scale : e.scale) * currentScale;
if (scale > zoom.options.maxZoom) {
scale = zoom.options.maxZoom - 1 + Math.pow((scale - zoom.options.maxZoom + 1), 0.5);
}
if (scale < zoom.options.minZoom) {
scale = zoom.options.minZoom + 1 - Math.pow((zoom.options.minZoom - scale + 1), 0.5);
}
zoom.zoomerTransform(scale);
};
zoom.onPinchend = function(e) {
scale = Math.max(Math.min(scale, zoom.options.maxZoom), zoom.options.minZoom);
zoom.zoomerTransition(zoom.options.speed).zoomerTransform(scale);
currentScale = scale;
isScaling = false;
};
zoom.setZoom = function(newScale) {
scale = currentScale = newScale;
zoom.scrollerTransition(zoom.options.speed).scrollerTransform(0, 0);
zoom.zoomerTransition(zoom.options.speed).zoomerTransform(scale);
};
zoom.toggleZoom = function(position) {
if (scale && scale !== 1) {
scale = currentScale = 1;
zoom.scrollerTransition(zoom.options.speed).scrollerTransform(0, 0);
} else {
scale = currentScale = zoom.options.maxZoom;
if (position) {
var offset = $.offset(zoom.zoomer);
var top = offset.top;
var left = offset.left;
var offsetX = (position.x - left) * scale;
var offsetY = (position.y - top) * scale;
this._cal();
if (offsetX >= imageMaxX && offsetX <= (imageMaxX + wrapperWidth)) { //center
offsetX = imageMaxX - offsetX + wrapperWidth / 2;
} else if (offsetX < imageMaxX) { //left
offsetX = imageMaxX - offsetX + wrapperWidth / 2;
} else if (offsetX > (imageMaxX + wrapperWidth)) { //right
offsetX = imageMaxX + wrapperWidth - offsetX - wrapperWidth / 2;
}
if (offsetY >= imageMaxY && offsetY <= (imageMaxY + wrapperHeight)) { //middle
offsetY = imageMaxY - offsetY + wrapperHeight / 2;
} else if (offsetY < imageMaxY) { //top
offsetY = imageMaxY - offsetY + wrapperHeight / 2;
} else if (offsetY > (imageMaxY + wrapperHeight)) { //bottom
offsetY = imageMaxY + wrapperHeight - offsetY - wrapperHeight / 2;
}
offsetX = Math.min(Math.max(offsetX, imageMinX), imageMaxX);
offsetY = Math.min(Math.max(offsetY, imageMinY), imageMaxY);
zoom.scrollerTransition(zoom.options.speed).scrollerTransform(offsetX, offsetY);
} else {
zoom.scrollerTransition(zoom.options.speed).scrollerTransform(0, 0);
}
}
zoom.zoomerTransition(zoom.options.speed).zoomerTransform(scale);
};
zoom._cal = function() {
wrapperWidth = zoom.wrapper.offsetWidth;
wrapperHeight = zoom.wrapper.offsetHeight;
imageWidth = zoom.zoomer.offsetWidth;
imageHeight = zoom.zoomer.offsetHeight;
var scaledWidth = imageWidth * scale;
var scaledHeight = imageHeight * scale;
imageMinX = Math.min((wrapperWidth / 2 - scaledWidth / 2), 0);
imageMaxX = -imageMinX;
imageMinY = Math.min((wrapperHeight / 2 - scaledHeight / 2), 0);
imageMaxY = -imageMinY;
};
var wrapperWidth, wrapperHeight, imageIsTouched, imageIsMoved, imageCurrentX, imageCurrentY, imageMinX, imageMinY, imageMaxX, imageMaxY, imageWidth, imageHeight, imageTouchesStart = {},
imageTouchesCurrent = {},
imageStartX, imageStartY, velocityPrevPositionX, velocityPrevTime, velocityX, velocityPrevPositionY, velocityY;
zoom.onTouchstart = function(e) {
e.preventDefault();
imageIsTouched = true;
imageTouchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
imageTouchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
};
zoom.onTouchMove = function(e) {
e.preventDefault();
if (!imageIsTouched) return;
if (!imageIsMoved) {
wrapperWidth = zoom.wrapper.offsetWidth;
wrapperHeight = zoom.wrapper.offsetHeight;
imageWidth = zoom.zoomer.offsetWidth;
imageHeight = zoom.zoomer.offsetHeight;
var translate = $.parseTranslateMatrix($.getStyles(zoom.scroller, 'webkitTransform'));
imageStartX = translate.x || 0;
imageStartY = translate.y || 0;
zoom.scrollerTransition(0);
}
var scaledWidth = imageWidth * scale;
var scaledHeight = imageHeight * scale;
if (scaledWidth < wrapperWidth && scaledHeight < wrapperHeight) return;
imageMinX = Math.min((wrapperWidth / 2 - scaledWidth / 2), 0);
imageMaxX = -imageMinX;
imageMinY = Math.min((wrapperHeight / 2 - scaledHeight / 2), 0);
imageMaxY = -imageMinY;
imageTouchesCurrent.x = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
imageTouchesCurrent.y = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
if (!imageIsMoved && !isScaling) {
// if (Math.abs(imageTouchesCurrent.y - imageTouchesStart.y) < Math.abs(imageTouchesCurrent.x - imageTouchesStart.x)) {
//TODO 此处需要优化，当遇到长图，需要上下滚动时，下列判断会导致滚动不流畅
if (
(Math.floor(imageMinX) === Math.floor(imageStartX) && imageTouchesCurrent.x < imageTouchesStart.x) ||
(Math.floor(imageMaxX) === Math.floor(imageStartX) && imageTouchesCurrent.x > imageTouchesStart.x)
) {
imageIsTouched = false;
return;
}
// }
}
imageIsMoved = true;
imageCurrentX = imageTouchesCurrent.x - imageTouchesStart.x + imageStartX;
imageCurrentY = imageTouchesCurrent.y - imageTouchesStart.y + imageStartY;
if (imageCurrentX < imageMinX) {
imageCurrentX = imageMinX + 1 - Math.pow((imageMinX - imageCurrentX + 1), 0.8);
}
if (imageCurrentX > imageMaxX) {
imageCurrentX = imageMaxX - 1 + Math.pow((imageCurrentX - imageMaxX + 1), 0.8);
}
if (imageCurrentY < imageMinY) {
imageCurrentY = imageMinY + 1 - Math.pow((imageMinY - imageCurrentY + 1), 0.8);
}
if (imageCurrentY > imageMaxY) {
imageCurrentY = imageMaxY - 1 + Math.pow((imageCurrentY - imageMaxY + 1), 0.8);
}
//Velocity
if (!velocityPrevPositionX) velocityPrevPositionX = imageTouchesCurrent.x;
if (!velocityPrevPositionY) velocityPrevPositionY = imageTouchesCurrent.y;
if (!velocityPrevTime) velocityPrevTime = $.now();
velocityX = (imageTouchesCurrent.x - velocityPrevPositionX) / ($.now() - velocityPrevTime) / 2;
velocityY = (imageTouchesCurrent.y - velocityPrevPositionY) / ($.now() - velocityPrevTime) / 2;
if (Math.abs(imageTouchesCurrent.x - velocityPrevPositionX) < 2) velocityX = 0;
if (Math.abs(imageTouchesCurrent.y - velocityPrevPositionY) < 2) velocityY = 0;
velocityPrevPositionX = imageTouchesCurrent.x;
velocityPrevPositionY = imageTouchesCurrent.y;
velocityPrevTime = $.now();
zoom.scrollerTransform(imageCurrentX, imageCurrentY);
};
zoom.onTouchEnd = function(e) {
if (!e.touches.length) {
isGesturing = false;
}
if (!imageIsTouched || !imageIsMoved) {
imageIsTouched = false;
imageIsMoved = false;
return;
}
imageIsTouched = false;
imageIsMoved = false;
var momentumDurationX = 300;
var momentumDurationY = 300;
var momentumDistanceX = velocityX * momentumDurationX;
var newPositionX = imageCurrentX + momentumDistanceX;
var momentumDistanceY = velocityY * momentumDurationY;
var newPositionY = imageCurrentY + momentumDistanceY;
if (velocityX !== 0) momentumDurationX = Math.abs((newPositionX - imageCurrentX) / velocityX);
if (velocityY !== 0) momentumDurationY = Math.abs((newPositionY - imageCurrentY) / velocityY);
var momentumDuration = Math.max(momentumDurationX, momentumDurationY);
imageCurrentX = newPositionX;
imageCurrentY = newPositionY;
var scaledWidth = imageWidth * scale;
var scaledHeight = imageHeight * scale;
imageMinX = Math.min((wrapperWidth / 2 - scaledWidth / 2), 0);
imageMaxX = -imageMinX;
imageMinY = Math.min((wrapperHeight / 2 - scaledHeight / 2), 0);
imageMaxY = -imageMinY;
imageCurrentX = Math.max(Math.min(imageCurrentX, imageMaxX), imageMinX);
imageCurrentY = Math.max(Math.min(imageCurrentY, imageMaxY), imageMinY);
zoom.scrollerTransition(momentumDuration).scrollerTransform(imageCurrentX, imageCurrentY);
};
zoom.destory = function() {
zoom.initEvents(true); //detach
delete $.data[zoom.wrapper.getAttribute('data-zoomer')];
zoom.wrapper.setAttribute('data-zoomer', '');
}
zoom.init();
return zoom;
};
$.Zoom.defaults = {
speed: 300,
maxZoom: 3,
minZoom: 1,
};
$.fn.zoom = function(options) {
var zoomApis = [];
this.each(function() {
var zoomApi = null;
var self = this;
var id = self.getAttribute('data-zoomer');
if (!id) {
id = ++$.uuid;
$.data[id] = zoomApi = new $.Zoom(self, options);
self.setAttribute('data-zoomer', id);
} else {
zoomApi = $.data[id];
}
zoomApis.push(zoomApi);
});
return zoomApis.length === 1 ? zoomApis[0] : zoomApis;
};
})(mui, window);
\ No newline at end of file
examples/hello-mui/list.html
View file @ cf92c3d8
......@@ -358,6 +358,11 @@
chat（聊天窗口）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/feedback.html">
feedback（问题反馈）
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/imageviewer.html">
image viewer（图片预览）
......
js/actions.js
View file @ cf92c3d8
......@@ -8,7 +8,11 @@
var CLASS_ACTION = $.className('action');
var handle = function(event, target) {
if (target.className && ~target.className.indexOf(CLASS_ACTION)) {
var className = target.className || '';
if (typeof className !== 'string') { //svg className(SVGAnimatedString)
className = '';
}
if (className && ~className.indexOf(CLASS_ACTION)) {
if (target.classList.contains($.className('action-back'))) {
event.preventDefault();
}
......
js/mui.back.5+.js
View file @ cf92c3d8
......@@ -21,6 +21,11 @@
$(offCanvas).offCanvas('close');
return true;
}
var previewImage = $.isFunction($.getPreviewImage) && $.getPreviewImage();
if (previewImage && previewImage.isShown()) {
previewImage.close();
return true;
}
}
});
}
......
js/mui.class.scroll.js
View file @ cf92c3d8
......@@ -113,29 +113,6 @@
this.indicators.push(new Indicator(this, indicators[i]));
}
this.wrapper.addEventListener('scrollend', function() {
self.indicators.map(function(indicator) {
indicator.fade();
});
});
this.wrapper.addEventListener('scrollstart', function() {
self.indicators.map(function(indicator) {
indicator.fade(1);
});
});
// this.wrapper.addEventListener('beforescrollstart', function() {
// self.indicators.map(function(indicator) {
// indicator.fade(1, true);
// });
// });
this.wrapper.addEventListener('refresh', function() {
self.indicators.map(function(indicator) {
indicator.refresh();
});
});
},
_initSnap: function() {
this.currentPage = {};
......@@ -214,26 +191,48 @@
pageX: 0
};
},
_initEvent: function() {
window.addEventListener('orientationchange', this);
window.addEventListener('resize', this);
_initEvent: function(detach) {
var action = detach ? 'removeEventListener' : 'addEventListener';
window[action]('orientationchange', this);
window[action]('resize', this);
this.scroller.addEventListener('webkitTransitionEnd', this);
this.scroller[action]('webkitTransitionEnd', this);
this.wrapper.addEventListener('touchstart', this);
this.wrapper.addEventListener('touchcancel', this);
this.wrapper.addEventListener('touchend', this);
this.wrapper.addEventListener('drag', this);
this.wrapper.addEventListener('dragend', this);
this.wrapper.addEventListener('flick', this);
this.wrapper.addEventListener('scrollend', this);
this.wrapper[action]('touchstart', this);
this.wrapper[action]('touchcancel', this);
this.wrapper[action]('touchend', this);
this.wrapper[action]('drag', this);
this.wrapper[action]('dragend', this);
this.wrapper[action]('flick', this);
this.wrapper[action]('scrollend', this);
if (this.options.scrollX) {
this.wrapper.addEventListener('swiperight', this);
this.wrapper[action]('swiperight', this);
}
var segmentedControl = this.wrapper.querySelector($.classSelector('.segmented-control'));
if (segmentedControl) { //靠，这个bug排查了一下午，阻止hash跳转，一旦hash跳转会导致可拖拽选项卡的tab不见
mui(segmentedControl).on('click', 'a', $.preventDefault);
mui(segmentedControl)[detach ? 'off' : 'on']('click', 'a', $.preventDefault);
}
this.wrapper[action]('scrollend', this._handleIndicatorScrollend.bind(this));
this.wrapper[action]('scrollstart', this._handleIndicatorScrollstart.bind(this));
this.wrapper[action]('refresh', this._handleIndicatorRefresh.bind(this));
},
_handleIndicatorScrollend: function() {
this.indicators.map(function(indicator) {
indicator.fade();
});
},
_handleIndicatorScrollstart: function() {
this.indicators.map(function(indicator) {
indicator.fade(1);
});
},
_handleIndicatorRefresh: function() {
this.indicators.map(function(indicator) {
indicator.refresh();
});
},
handleEvent: function(e) {
if (this.stopped) {
......@@ -329,8 +328,8 @@
// if (direction !== 'left' && direction !== 'right') {
// isReturn = true;
// } else {
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
// }
}
} else if (this.options.scrollY && !this.moved) {
......@@ -345,8 +344,8 @@
// }
// }
if (!this.moved) {
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
}
} else if (this.options.scrollX && !this.moved) {
isReturn = true;
......@@ -372,8 +371,8 @@
deltaX = detail.deltaX;
deltaY = detail.deltaY;
} else { //move
deltaX = detail.deltaX - detail.lastDeltaX;
deltaY = detail.deltaY - detail.lastDeltaY;
deltaX = detail.deltaX - $.gestures.session.prevTouch.deltaX;
deltaY = detail.deltaY - $.gestures.session.prevTouch.deltaY;
}
var absDeltaX = Math.abs(detail.deltaX);
var absDeltaY = Math.abs(detail.deltaY);
......@@ -647,6 +646,7 @@
}
this.lastX = this.x;
this.lastY = this.y;
$.trigger(this.scroller, 'scroll', this);
},
reLayout: function() {
this.wrapper.offsetHeight;
......@@ -719,6 +719,11 @@
},
gotoPage: function(index) {
this._gotoPage(index);
},
destory: function() {
this._initEvent(true); //detach
delete $.data[this.wrapper.getAttribute('data-scroll')];
this.wrapper.setAttribute('data-scroll', '');
}
});
//Indicator
......
js/mui.class.scroll.pullrefresh.js
View file @ cf92c3d8
......@@ -41,9 +41,13 @@
},
//API
resetPosition: function(time) {
if (this.pulldown && this.y >= this.options.down.height) {
if (this.pulldown) {
if (this.y >= this.options.down.height) {
this.pulldownLoading(undefined, time || 0);
return true;
} else {
this.topPocket.classList.remove(CLASS_VISIBILITY);
}
}
return this._super(time);
},
......@@ -132,7 +136,9 @@
} else {
pullRefreshApi = $.data[id];
}
if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
pullRefreshApi.pulldownLoading(options.down.autoY);
} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
pullRefreshApi.pullupLoading();
}
//暂不提供这种调用方式吧
......
js/mui.class.scroll.slider.js
View file @ cf92c3d8
......@@ -18,10 +18,10 @@
var SELECTOR_SLIDER_INDICATOR = '.' + CLASS_SLIDER_INDICATOR;
var SELECTOR_SLIDER_PROGRESS_BAR = $.classSelector('.slider-progress-bar');
var Slider = $.Scroll.extend({
var Slider = $.Slider = $.Scroll.extend({
init: function(element, options) {
this._super(element, $.extend(true, {
fingers: 1,
interval: 0, //设置为0，则不定时轮播
scrollY: false,
scrollX: true,
......@@ -60,11 +60,8 @@
this._initTimer();
}
},
_initEvent: function() {
_triggerSlide: function() {
var self = this;
self._super();
self.wrapper.addEventListener('swiperight', $.stopPropagation);
self.wrapper.addEventListener('scrollend', function() {
self.isInTransition = false;
var page = self.currentPage;
self.slideNumber = self._fixedSlideNumber();
......@@ -77,14 +74,15 @@
}
if (self.lastSlideNumber != self.slideNumber) {
self.lastSlideNumber = self.slideNumber;
self.lastPage = self.currentPage;
$.trigger(self.wrapper, 'slide', {
slideNumber: self.slideNumber
});
}
self._initTimer();
});
self.wrapper.addEventListener('slide', function(e) {
},
_handleSlide: function(e) {
var self = this;
if (e.target !== self.wrapper) {
return;
}
......@@ -130,21 +128,32 @@
}
}
e.stopPropagation();
});
self.wrapper.addEventListener($.eventName('shown', 'tab'), function(e) { //tab
},
_handleTabShow: function(e) {
var self = this;
self.gotoItem((e.detail.tabNumber || 0), self.options.bounceTime);
});
//indicator
var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
if (indicator) {
indicator.addEventListener('tap', function(event) {
},
_handleIndicatorTap: function(event) {
var target = event.target;
if (target.classList.contains(CLASS_ACTION_PREVIOUS) || target.classList.contains(CLASS_ACTION_NEXT)) {
self[target.classList.contains(CLASS_ACTION_PREVIOUS) ? 'prevItem' : 'nextItem']();
event.stopPropagation();
}
});
},
_initEvent: function(detach) {
var self = this;
self._super(detach);
var action = detach ? 'removeEventListener' : 'addEventListener';
self.wrapper[action]('swiperight', $.stopPropagation);
self.wrapper[action]('scrollend', self._triggerSlide.bind(this));
self.wrapper[action]('slide', self._handleSlide.bind(this));
self.wrapper[action]($.eventName('shown', 'tab'), self._handleTabShow.bind(this));
//indicator
var indicator = self.wrapper.querySelector(SELECTOR_SLIDER_INDICATOR);
if (indicator) {
indicator[action]('tap', self._handleIndicatorTap.bind(this));
}
},
_drag: function(e) {
......@@ -224,7 +233,7 @@
// return;
// }
if (e.type === 'flick') {
if (detail.touchTime < 200) { //flick，太容易触发，额外校验一下touchtime
if (detail.deltaTime < 200) { //flick，太容易触发，额外校验一下deltaTime
this.x = this._getPage((this.slideNumber + (direction === 'right' ? -1 : 1)), true).x;
}
this.resetPosition(this.options.bounceTime);
......@@ -327,6 +336,11 @@
} else {
this._super();
}
},
destory: function() {
this._initEvent(true); //detach
delete $.data[this.wrapper.getAttribute('data-slider')];
this.wrapper.setAttribute('data-slider', '');
}
});
$.fn.slider = function(options) {
......
js/mui.detect.5+.js
View file @ cf92c3d8
......@@ -12,6 +12,12 @@
$(function() {
document.body.classList.add($.className('plus'));
});
if (ua.match(/StreamApp/i)) { //TODO 最好有流应用自己的标识
this.os.stream = true;
}
$(function() {
document.body.classList.add($.className('plus-stream'));
});
}
}
detect.call($, navigator.userAgent);
......
js/mui.event.js
View file @ cf92c3d8
......@@ -41,7 +41,7 @@
};
//简单的wrap对象_mid
var mid = function(obj) {
return obj._mid || (obj._mid = _mid++);
return obj && (obj._mid || (obj._mid = _mid++));
};
//事件委托对象绑定的事件回调列表
var delegateFns = {};
......
js/mui.gestures.drag.js
View file @ cf92c3d8
......@@ -6,31 +6,35 @@
*/
(function($, name) {
var handle = function(event, touch) {
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if (touch.direction) { //drag
//修正direction
//默认锁定单向drag(后续可能需要额外配置支持)
if (touch.lockDirection && touch.startDirection) {
if (touch.startDirection && touch.startDirection !== touch.direction) {
if (touch.startDirection === 'up' || touch.startDirection === 'down') {
if (!touch.direction) {
return;
}
//修正direction,可在session期间自行锁定拖拽方向，方便开发scroll类不同方向拖拽插件嵌套
if (session.lockDirection && session.startDirection) {
if (session.startDirection && session.startDirection !== touch.direction) {
if (session.startDirection === 'up' || session.startDirection === 'down') {
touch.direction = touch.deltaY < 0 ? 'up' : 'down';
} else {
touch.direction = touch.deltaX < 0 ? 'left' : 'right';
}
}
}
if (!touch.drag) {
touch.drag = true;
if (!session.drag) {
session.drag = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (touch.drag) {
if (session.drag && touch.isFinal) {
$.trigger(event.target, name + 'end', touch);
}
break;
......@@ -43,6 +47,8 @@
name: name,
index: 20,
handle: handle,
options: {}
options: {
fingers: 1
}
});
})(mui, 'drag');
\ No newline at end of file
js/mui.gestures.flick.js
View file @ cf92c3d8
......@@ -5,15 +5,31 @@
* @returns {undefined}
*/
(function($, name) {
var flickStartTime = 0;
var handle = function(event, touch) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var session = $.gestures.session;
var options = this.options;
if (touch.direction && options.flickMaxTime > touch.flickTime && touch.distance > options.flickMinDistince) {
var now = $.now();
switch (event.type) {
case $.EVENT_MOVE:
if (now - flickStartTime > 300) {
flickStartTime = now;
session.flickStart = touch.center;
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if (session.flickStart && options.flickMaxTime > (now - flickStartTime) && touch.distance > options.flickMinDistince) {
touch.flick = true;
touch.flickTime = now - flickStartTime;
touch.flickDistanceX = touch.center.x - session.flickStart.x;
touch.flickDistanceY = touch.center.y - session.flickStart.y;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
break;
}
};
/**
* mui gesture flick
......
js/mui.gestures.hold.js
View file @ cf92c3d8
......@@ -10,18 +10,20 @@
var options = this.options;
switch (event.type) {
case $.EVENT_START:
clearTimeout(timer);
if ($.options.gestureConfig.hold) {
timer && clearTimeout(timer);
timer = setTimeout(function() {
touch.hold = true;
$.trigger(event.target, name, touch);
}, options.holdTimeout);
}
break;
case $.EVENT_MOVE:
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
clearTimeout(timer);
if ($.options.gestureConfig.hold && touch.hold) {
if (timer) {
clearTimeout(timer) && (timer = null);
$.trigger(event.target, 'release', touch);
}
break;
......@@ -35,6 +37,7 @@
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 0
}
});
......
js/mui.gestures.js
View file @ cf92c3d8
......@@ -36,16 +36,37 @@
return $.registerHandler('gestures', gesture);
};
var round = Math.round;
var abs = Math.abs;
var sqrt = Math.sqrt;
var atan = Math.atan;
var atan2 = Math.atan2;
/**
* distance
* @param {type} p1
* @param {type} p2
* @returns {Number}
*/
var getDistance = function(p1, p2) {
var x = p2.x - p1.x;
var y = p2.y - p1.y;
return Math.sqrt((x * x) + (y * y));
var getDistance = function(p1, p2, props) {
if (!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return sqrt((x * x) + (y * y));
};
/**
* scale
* @param {Object} starts
* @param {Object} moves
*/
var getScale = function(starts, moves) {
if (starts.length >= 2 && moves.length >= 2) {
var props = ['pageX', 'pageY'];
return getDistance(moves[1], moves[0], props) / getDistance(starts[1], starts[0], props);
}
return 1;
};
/**
* angle
......@@ -53,25 +74,32 @@
* @param {type} p2
* @returns {Number}
*/
var getAngle = function(p1, p2) {
return Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
var getAngle = function(p1, p2, props) {
if (!props) {
props = ['x', 'y'];
}
var x = p2[props[0]] - p1[props[0]];
var y = p2[props[1]] - p1[props[1]];
return atan2(y, x) * 180 / Math.PI;
};
/**
* direction
* @param {type} angle
* @returns {unresolved}
* @param {Object} x
* @param {Object} y
*/
var getDirectionByAngle = function(angle) {
if (angle < -45 && angle > -135) {
return 'up';
} else if (angle >= 45 && angle < 135) {
return 'down';
} else if (angle >= 135 || angle <= -135) {
return 'left';
} else if (angle >= -45 && angle <= 45) {
return 'right';
}
return null;
var getDirection = function(x, y) {
if (x === y) {
return '';
}
if (abs(x) >= abs(y)) {
return x > 0 ? 'left' : 'right';
}
return y > 0 ? 'up' : 'down';
};
var getRotation = function(start, end) {
var props = ['pageX', 'pageY'];
return getAngle(end[1], end[0], props) - getAngle(start[1], start[0], props);
};
/**
* detect gestures
......@@ -91,100 +119,276 @@
}
});
};
var detectTouchStart = function(event) {
$.gestures.stoped = false;
var now = $.now();
var point = event.touches ? event.touches[0] : event;
$.gestures.touch = {
target: event.target,
lastTarget: ($.gestures.touch && $.gestures.touch.lastTarget ? $.gestures.touch.lastTarget : null),
startTime: now,
touchTime: 0,
flickStartTime: now,
lastTapTime: ($.gestures.touch && $.gestures.touch.lastTapTime ? $.gestures.touch.lastTapTime : 0),
start: {
x: point.pageX,
y: point.pageY
},
flickStart: {
x: point.pageX,
y: point.pageY
},
flickDistanceX: 0,
flickDistanceY: 0,
move: {
x: 0,
y: 0
},
deltaX: 0,
deltaY: 0,
lastDeltaX: 0,
lastDeltaY: 0,
angle: '',
direction: '',
lockDirection: false,
startDirection: '',
distance: 0,
drag: false,
swipe: false,
hold: false,
gesture: event
/**
* px per ms
* @param {Object} deltaTime
* @param {Object} x
* @param {Object} y
*/
var getVelocity = function(deltaTime, x, y) {
return {
x: x / deltaTime || 0,
y: y / deltaTime || 0
};
};
var hasParent = function(node, parent) {
while (node) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
};
detect(event, $.gestures.touch);
var uniqueArray = function(src, key, sort) {
var results = [];
var values = [];
var i = 0;
while (i < src.length) {
var val = key ? src[i][key] : src[i];
if (values.indexOf(val) < 0) {
results.push(src[i]);
}
values[i] = val;
i++;
}
if (sort) {
if (!key) {
results = results.sort();
} else {
results = results.sort(function sortUniqueArray(a, b) {
return a[key] > b[key];
});
}
}
return results;
};
var getMultiCenter = function(touches) {
var touchesLength = touches.length;
if (touchesLength === 1) {
return {
x: round(touches[0].pageX),
y: round(touches[0].pageY)
};
var detectTouchMove = function(event) {
if ($.gestures.stoped || !$.gestures.touch) {
return;
}
var touch = $.gestures.touch;
if (event.target != touch.target) {
return;
var x = 0;
var y = 0;
var i = 0;
while (i < touchesLength) {
x += touches[i].pageX;
y += touches[i].pageY;
i++;
}
var now = $.now();
var point = event.touches ? event.touches[0] : event;
touch.touchTime = now - touch.startTime;
touch.move = {
x: point.pageX,
y: point.pageY
};
if (now - touch.flickStartTime > 300) {
touch.flickStartTime = now;
touch.flickStart = touch.move;
}
touch.distance = getDistance(touch.start, touch.move);
touch.angle = getAngle(touch.start, touch.move);
touch.direction = getDirectionByAngle(touch.angle);
touch.lastDeltaX = touch.deltaX;
touch.lastDeltaY = touch.deltaY;
touch.deltaX = touch.move.x - touch.start.x;
touch.deltaY = touch.move.y - touch.start.y;
touch.gesture = event;
detect(event, touch);
return {
x: round(x / touchesLength),
y: round(y / touchesLength)
};
var detectTouchEnd = function(event) {
if ($.gestures.stoped || !$.gestures.touch) {
return;
};
var multiTouch = function() {
return $.options.gestureConfig.pinch;
};
var copySimpleTouchData = function(touch) {
var touches = [];
var i = 0;
while (i < touch.touches.length) {
touches[i] = {
pageX: round(touch.touches[i].pageX),
pageY: round(touch.touches[i].pageY)
};
i++;
}
var touch = $.gestures.touch;
if (event.target != touch.target) {
return;
return {
timestamp: $.now(),
gesture: touch.gesture,
touches: touches,
center: getMultiCenter(touch.touches),
deltaX: touch.deltaX,
deltaY: touch.deltaY
};
};
var calDelta = function(touch) {
var session = $.gestures.session;
var center = touch.center;
var offset = session.offsetDelta || {};
var prevDelta = session.prevDelta || {};
var prevTouch = session.prevTouch || {};
if (touch.gesture.type === $.EVENT_START || touch.gesture.type === $.EVENT_END) {
prevDelta = session.prevDelta = {
x: prevTouch.deltaX || 0,
y: prevTouch.deltaY || 0
};
offset = session.offsetDelta = {
x: center.x,
y: center.y
};
}
var now = $.now();
touch.touchTime = now - touch.startTime;
touch.flickTime = now - touch.flickStartTime;
touch.flickDistanceX = touch.move.x - touch.flickStart.x;
touch.flickDistanceY = touch.move.y - touch.flickStart.y;
touch.gesture = event;
touch.deltaX = prevDelta.x + (center.x - offset.x);
touch.deltaY = prevDelta.y + (center.y - offset.y);
};
var calTouchData = function(touch) {
var session = $.gestures.session;
var touches = touch.touches;
var touchesLength = touches.length;
if (!session.firstTouch) {
session.firstTouch = copySimpleTouchData(touch);
}
if (multiTouch() && touchesLength > 1 && !session.firstMultiTouch) {
session.firstMultiTouch = copySimpleTouchData(touch);
} else if (touchesLength === 1) {
session.firstMultiTouch = false;
}
var firstTouch = session.firstTouch;
var firstMultiTouch = session.firstMultiTouch;
var offsetCenter = firstMultiTouch ? firstMultiTouch.center : firstTouch.center;
var center = touch.center = getMultiCenter(touches);
touch.timestamp = $.now();
touch.deltaTime = touch.timestamp - firstTouch.timestamp;
touch.angle = getAngle(offsetCenter, center);
touch.distance = getDistance(offsetCenter, center);
calDelta(touch);
touch.offsetDirection = getDirection(touch.deltaX, touch.deltaY);
touch.scale = firstMultiTouch ? getScale(firstMultiTouch.touches, touches) : 1;
touch.rotation = firstMultiTouch ? getRotation(firstMultiTouch.touches, touches) : 0;
calIntervalTouchData(touch);
detect(event, touch);
};
var CAL_INTERVAL = 25;
var calIntervalTouchData = function(touch) {
var session = $.gestures.session;
var last = session.lastInterval || touch;
var deltaTime = touch.timestamp - last.timestamp;
var velocity;
var velocityX;
var velocityY;
var direction;
if (touch.gesture.type != $.EVENT_CANCEL && (deltaTime > CAL_INTERVAL || last.velocity === undefined)) {
var deltaX = last.deltaX - touch.deltaX;
var deltaY = last.deltaY - touch.deltaY;
var v = getVelocity(deltaTime, deltaX, deltaY);
velocityX = v.x;
velocityY = v.y;
velocity = (abs(v.x) > abs(v.y)) ? v.x : v.y;
direction = getDirection(deltaX, deltaY);
session.lastInterval = touch;
} else {
velocity = last.velocity;
velocityX = last.velocityX;
velocityY = last.velocityY;
direction = last.direction;
}
touch.velocity = velocity;
touch.velocityX = velocityX;
touch.velocityY = velocityY;
touch.direction = direction;
};
var getTouches = function(event, touch) {
var allTouches = $.slice.call(event.touches);
var type = event.type;
var targetTouches = [];
var changedTargetTouches = [];
$.gestures.session || ($.gestures.session = {
targetIds: {}
});
if ((type === $.EVENT_START || type === $.EVENT_MOVE) && allTouches.length === 1) {
if (type === $.EVENT_START) { //first
touch.isFirst = true;
$.gestures.touch = $.gestures.session = {
firstTarget: event.target,
targetIds: {}
};
}
var targetIds = $.gestures.session.targetIds;
targetIds[allTouches[0].identifier] = true;
targetTouches = allTouches;
changedTargetTouches = allTouches;
touch.target = event.target;
} else {
var i = 0;
var targetTouches = [];
var changedTargetTouches = [];
var targetIds = $.gestures.session.targetIds;
var changedTouches = $.slice.call(event.changedTouches);
window.addEventListener($.EVENT_START, detectTouchStart);
window.addEventListener($.EVENT_MOVE, detectTouchMove);
window.addEventListener($.EVENT_END, detectTouchEnd);
window.addEventListener($.EVENT_CANCEL, detectTouchEnd);
touch.target = event.target;
targetTouches = allTouches.filter(function(touch) {
return true; //return hasParent(touch.target, touch.firstTarget);
});
if (type === $.EVENT_START) {
i = 0;
while (i < targetTouches.length) {
targetIds[targetTouches[i].identifier] = true;
i++;
}
}
i = 0;
while (i < changedTouches.length) {
if (targetIds[changedTouches[i].identifier]) {
changedTargetTouches.push(changedTouches[i]);
}
if (type === $.EVENT_END || type === $.EVENT_CANCEL) {
delete targetIds[changedTouches[i].identifier];
}
i++;
}
if (!changedTargetTouches.length) {
return false;
}
}
targetTouches = uniqueArray(targetTouches.concat(changedTargetTouches), 'identifier', true);
var touchesLength = targetTouches.length;
var changedTouchesLength = changedTargetTouches.length;
touch.isFinal = ((type === $.EVENT_END || type === $.EVENT_CANCEL) && (touchesLength - changedTouchesLength === 0));
touch.touches = targetTouches;
touch.changedTouches = changedTargetTouches;
return true;
};
var handleTouchEvent = function(event) {
var touch = {
gesture: event
};
var touches = getTouches(event, touch);
if (!touches) {
return;
}
calTouchData(touch);
detect(event, touch);
$.gestures.session.prevTouch = touch;
};
window.addEventListener($.EVENT_START, handleTouchEvent);
window.addEventListener($.EVENT_MOVE, handleTouchEvent);
window.addEventListener($.EVENT_END, handleTouchEvent);
window.addEventListener($.EVENT_CANCEL, handleTouchEvent);
//fixed hashchange(android)
window.addEventListener($.EVENT_CLICK, function(e) {
//TODO 应该判断当前target是不是在targets.popover内部，而不是非要相等
......
js/mui.gestures.longtap.js
View file @ cf92c3d8
......@@ -12,9 +12,7 @@
case $.EVENT_START:
clearTimeout(timer);
timer = setTimeout(function() {
if (!touch.drag) {
$.trigger(event.target, name, touch);
}
}, options.holdTimeout);
break;
case $.EVENT_MOVE:
......@@ -36,6 +34,7 @@
index: 10,
handle: handle,
options: {
fingers: 1,
holdTimeout: 500,
holdThreshold: 2
}
......
js/mui.gestures.pinch.js 0 → 100644
View file @ cf92c3d8
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(event.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(event.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(event.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
$.trigger(event.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.registerGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
\ No newline at end of file
js/mui.gestures.swipe.js
View file @ cf92c3d8
......@@ -8,8 +8,9 @@
var handle = function(event, touch) {
if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
var options = this.options;
if (touch.direction && options.swipeMaxTime > touch.touchTime && touch.distance > options.swipeMinDistince) {
if (touch.direction && options.swipeMaxTime > touch.deltaTime && touch.distance > options.swipeMinDistince) {
touch.swipe = true;
$.trigger(event.target, name, touch);
$.trigger(event.target, name + touch.direction, touch);
}
}
......
js/mui.gestures.tap.js
View file @ cf92c3d8
......@@ -5,23 +5,33 @@
* @returns {undefined}
*/
(function($, name) {
var lastTarget;
var lastTapTime;
var handle = function(event, touch) {
//if (event.type === $.EVENT_END || event.type === $.EVENT_CANCEL) {
if (event.type === $.EVENT_END) { //ignore touchcancel
var options = this.options;
if (touch.distance < options.tapMaxDistance && touch.touchTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && touch.lastTarget && (touch.lastTarget === event.target)) { //same target
if (touch.lastTapTime && (touch.startTime - touch.lastTapTime) < options.tapMaxInterval) {
$.trigger(event.target, 'doubletap', touch);
touch.lastTapTime = $.now();
touch.lastTarget = event.target;
switch (event.type) {
case $.EVENT_END:
if (!touch.isFinal) {
return;
}
var target = event.target;
if (!target || (target.disabled || target.classList.contains($.className('disabled')))) {
return;
}
if (touch.distance < options.tapMaxDistance && touch.deltaTime < options.tapMaxTime) {
if ($.options.gestureConfig.doubletap && lastTarget && (lastTarget === target)) { //same target
if (lastTapTime && (touch.timestamp - lastTapTime) < options.tapMaxInterval) {
$.trigger(target, 'doubletap', touch);
lastTapTime = $.now();
lastTarget = target;
return;
}
}
$.trigger(event.target, name, touch);
touch.lastTapTime = $.now();
touch.lastTarget = event.target;
$.trigger(target, name, touch);
lastTapTime = $.now();
lastTarget = event.target;
}
break;
}
};
/**
......@@ -32,6 +42,7 @@
index: 30,
handle: handle,
options: {
fingers: 1,
tapMaxInterval: 300,
tapMaxDistance: 5,
tapMaxTime: 250
......
js/mui.init.js
View file @ cf92c3d8
......@@ -12,7 +12,8 @@
hold: false,
flick: true,
swipe: true,
drag: true
drag: true,
pinch: false
}
};
/**
......
js/mui.offcanvas.js
View file @ cf92c3d8
......@@ -95,10 +95,10 @@
case 'drag':
var detail = e.detail;
if (!this.startX) {
this.startX = detail.move.x;
this.startX = detail.center.x;
this.lastX = this.startX;
} else {
this.lastX = detail.move.x;
this.lastX = detail.center.x;
}
if (!this.isDragging && Math.abs(this.lastX - this.startX) > this.options.dragThresholdX && (detail.direction === 'left' || (detail.direction === 'right'))) {
if (this.slideIn) {
......@@ -118,8 +118,8 @@
this.startX = this.lastX;
this.isDragging = true;
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
this.scroller.classList.remove(CLASS_TRANSITIONING);
this.offsetX = this.getTranslateX();
......
js/mui.view.js
View file @ cf92c3d8
......@@ -85,8 +85,8 @@
if (this.previousPage && this.activePage) {
this.dragging = true;
$.gestures.touch.lockDirection = true; //锁定方向
$.gestures.touch.startDirection = detail.direction;
$.gestures.session.lockDirection = true; //锁定方向
$.gestures.session.startDirection = detail.direction;
}
}
}
......
js/pullrefresh.5+.js
View file @ cf92c3d8
......@@ -132,10 +132,16 @@
});
}
},
pulldownLoading: function() {
pulldownLoading: function() { //该方法是子页面调用的
var callback = $.options.pullRefresh.down.callback;
callback && callback.call(this);
},
_pulldownLoading: function() { //该方法是子页面调用的
var self = this;
$.plusReady(function() {
plus.webview.getWebviewById(self.options.webviewId).evalJS("mui&&mui.options.pullRefresh.down&&mui.options.pullRefresh.down.callback()");
});
},
endPulldownToRefresh: function() { //该方法是子页面调用的
var webview = plus.webview.currentWebview();
webview.parent().evalJS("mui&&mui(document.querySelector('.mui-content')).pullRefresh('" + JSON.stringify({
......@@ -237,7 +243,9 @@
} else {
pullRefreshApi = $.data[id];
}
if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
if (options.down && options.down.auto) { //如果设置了auto，则自动下拉一次
pullRefreshApi._pulldownLoading(); //parent webview
} else if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
pullRefreshApi.pullupLoading();
}
return pullRefreshApi;
......
js/tableviews.js
View file @ cf92c3d8
......@@ -145,7 +145,7 @@
timer = $.later(function() {
toggleActive(true);
}, 100);
} else{
} else {
toggleActive(true);
}
}
......@@ -426,8 +426,8 @@
sliderHandle && toggleEvents(cell, true);
});
var radioOrCheckboxClick = function(event) {
var type = event.target&&event.target.type||'';
if(type==='radio'||type==='checkbox'){
var type = event.target && event.target.type || '';
if (type === 'radio' || type === 'checkbox') {
return;
}
var classList = cell.classList;
......
package.json
View file @ cf92c3d8
{
"name": "mui",
"description": "Build mobile apps with simple HTML, CSS, and JS components.",
"version": "1.9.0",
"version": "2.0.0",
"keywords": [
"css",
"fonts",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment