UI更新
宇天
parent
b1bcf6d14d
commit
a259a4693b
|
|
@ -1,14 +1,13 @@
|
|||
$ct: #3fc2a7 #19b491 #16967a;
|
||||
$cg: #58d68d #2ecc71 #27ae60;
|
||||
$cpp: #ac61ce #9b59b6 #8e44ad;
|
||||
$cb: #52a3de #2d8dd6 #2776b1;
|
||||
$cb: #66b1ff #409eff #3a8ee6;
|
||||
$cr: #ff5061 #eb3b48 #ce3742;
|
||||
$co: #ffb618 #f39c12 #e67e22;
|
||||
$cp: #f3f5fb #e8ebf4 #dae1e9;
|
||||
$cgr: #98acae #8a9b9c #748182;
|
||||
$cgr: #aabac3 #90a3ae #7e909a;
|
||||
$cd: #62778d #526273 #425064;
|
||||
|
||||
@mixin ts($c: all, $t: .2s, $m: ease-in-out){
|
||||
transition:$c $t $m;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="lib/css/reset-basic.css" rel="stylesheet">
|
||||
<link href="lib/css/elem-ui.css" rel="stylesheet">
|
||||
<link href="css/common.css" rel="stylesheet">
|
||||
<link href="css/app.css" rel="stylesheet">
|
||||
<link href="css/modules.css" rel="stylesheet">
|
||||
<script>window.LIBS_BASE_URL = location.origin + '/lib';</script>
|
||||
<script type="module" src="js/app.js"></script>
|
||||
</head>
|
||||
<body class="do-fn-noselect" anot="app" :css="{'background-image': coverBG}">
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
*/
|
||||
|
||||
import '/lib/anot.js'
|
||||
import layer from '/lib/layer/index.js'
|
||||
import store from '/lib/store/index.js'
|
||||
import '/lib/layer/next.js'
|
||||
import '/lib/store/index.js'
|
||||
import AudioPlayer from '/lib/audio/index.js'
|
||||
import Lyrics from '/lib/lyrics/index.js'
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@
|
|||
|
||||
'use strict'
|
||||
|
||||
import '/lib/form/index.js'
|
||||
import '/lib/form/input.js'
|
||||
import '/lib/form/button.js'
|
||||
import '/lib/form/select.js'
|
||||
|
||||
const {
|
||||
remote: { app, dialog },
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.do-pager{display:block;height:auto;text-align:center;font-size:14px;color:#8a9b9c}.do-pager.mini{line-height:30px}.do-pager.mini .button,.do-pager.mini .page{min-width:30px;height:30px}.do-pager.medium{line-height:35px}.do-pager.medium .button,.do-pager.medium .page{min-width:35px;height:35px}.do-pager.large{line-height:40px}.do-pager.large .button,.do-pager.large .page{min-width:40px;height:40px}.do-pager .button,.do-pager .page{display:inline-block;border:0;color:#8a9b9c;text-decoration:none;cursor:pointer;vertical-align:top;font-size:14px;font-weight:100;-webkit-appearance:none;-moz-appearance:none;appearance:none}.do-pager .button{font-size:18px}.do-pager .curr,.do-pager .disabled{cursor:default}.do-pager.skin-1{width:100%}.do-pager.skin-1 .page,.do-pager.skin-1 .button,.do-pager.skin-1 .disabled,.do-pager.skin-1 .curr{padding:0 8px;margin:0 3px}.do-pager.skin-1 .curr{font-weight:bold;font-size:15px}.do-pager.skin-1 .page.disabled{min-width:0;padding:0;background:none;color:#8a9b9c}.do-pager.skin-1 .page.disabled:hover,.do-pager.skin-1 .page.disabled:active{background:none}.do-pager.skin-1 .page.curr{background:none;color:#8a9b9c}.do-pager.skin-1 .page.curr:hover,.do-pager.skin-1 .page.curr:active{background:none}.do-pager.skin-1 .button[disabled]{cursor:not-allowed}.do-pager.skin-1 .total-box,.do-pager.skin-1 .input-box{display:inline-block;padding:0 8px}.do-pager.skin-1 .input-box input{display:inline-block;width:40px;height:30px;padding:0 3px;font-size:14px;background:#fff;border:1px solid #ddd;text-align:center}.do-pager.skin-2{float:right;width:auto}.do-pager.skin-2 .page,.do-pager.skin-2 .button,.do-pager.skin-2 .disabled,.do-pager.skin-2 .curr{float:left;margin:0;padding:0 5px;color:#fff}.do-pager.skin-2 .page.disabled{display:none}.do-pager.skin-2 .button[disabled]{cursor:not-allowed}.do-pager.skin-2 .input-box{display:none}.do-pager.skin-2 .total-box{float:left;display:inline-block;padding:0 8px}.do-pager.plain .page,.do-pager.plain .button{background:#e8ebf4;color:#8a9b9c}.do-pager.plain .page:hover,.do-pager.plain .button:hover{background:#f3f5fb}.do-pager.plain .page:active,.do-pager.plain .button:active{background:#dae1e9}.do-pager.plain .button[disabled]{background:#e8ebf4}.do-pager.plain.skin-2 .curr{background:#dae1e9}.do-pager.grey .page,.do-pager.grey .button{background:#8a9b9c;color:#fff}.do-pager.grey .page:hover,.do-pager.grey .button:hover{background:#98acae}.do-pager.grey .page:active,.do-pager.grey .button:active{background:#748182}.do-pager.grey .button[disabled]{background:#8a9b9c}.do-pager.grey.skin-2 .curr{background:#748182}.do-pager.dark .page,.do-pager.dark .button{background:#526273;color:#fff}.do-pager.dark .page:hover,.do-pager.dark .button:hover{background:#526273}.do-pager.dark .page:active,.do-pager.dark .button:active{background:#425064}.do-pager.dark .button[disabled]{background:#526273}.do-pager.dark.skin-2 .curr{background:#425064}.do-pager.red .page,.do-pager.red .button{background:#eb3b48;color:#fff}.do-pager.red .page:hover,.do-pager.red .button:hover{background:#ff5061}.do-pager.red .page:active,.do-pager.red .button:active{background:#ce3742}.do-pager.red .button[disabled]{background:#eb3b48}.do-pager.red.skin-2 .curr{background:#ce3742}.do-pager.orange .page,.do-pager.orange .button{background:#f39c12;color:#fff}.do-pager.orange .page:hover,.do-pager.orange .button:hover{background:#ffb618}.do-pager.orange .page:active,.do-pager.orange .button:active{background:#e67e22}.do-pager.orange .button[disabled]{background:#f39c12}.do-pager.orange.skin-2 .curr{background:#e67e22}.do-pager.green .page,.do-pager.green .button{background:#2ecc71;color:#fff}.do-pager.green .page:hover,.do-pager.green .button:hover{background:#58d68d}.do-pager.green .page:active,.do-pager.green .button:active{background:#27ae60}.do-pager.green .button[disabled]{background:#2ecc71}.do-pager.green.skin-2 .curr{background:#27ae60}.do-pager.teal .page,.do-pager.teal .button{background:#19b491;color:#fff}.do-pager.teal .page:hover,.do-pager.teal .button:hover{background:#3fc2a7}.do-pager.teal .page:active,.do-pager.teal .button:active{background:#16967a}.do-pager.teal .button[disabled]{background:#19b491}.do-pager.teal.skin-2 .curr{background:#16967a}.do-pager.blue .page,.do-pager.blue .button{background:#2d8dd6;color:#fff}.do-pager.blue .page:hover,.do-pager.blue .button:hover{background:#52a3de}.do-pager.blue .page:active,.do-pager.blue .button:active{background:#2776b1}.do-pager.blue .button[disabled]{background:#2d8dd6}.do-pager.blue.skin-2 .curr{background:#2776b1}.do-pager.purple .page,.do-pager .button .page{background:#9b59b6;color:#fff}.do-pager.purple .page:hover,.do-pager .button .page:hover{background:#ac61ce}.do-pager.purple .page:active,.do-pager .button .page:active{background:#8e44ad}.do-pager.purple .button[disabled],.do-pager .button .button[disabled]{background:#9b59b6}.do-pager.purple.skin-2 .curr,.do-pager .button.skin-2 .curr{background:#8e44ad}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,15 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2019-09-01 23:16:06
|
||||
* @version v2.0.1
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
import SVG_DICT from"./svg.js";export default class Icon extends HTMLElement{static get observedAttributes(){return["is"]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{is:""},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML="<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{display:inline-block;color:#526273}:host(:not([is])){display:none}.icon{display:block;width:var(--size, 32px);height:var(--size, 32px);fill:currentColor}.icon.load{animation:load 1.5s linear infinite}.icon circle{stroke:currentColor;animation:circle 1.5s ease-in-out infinite}:host([size='large']) .icon{width:42px;height:42px}:host([size='medium']) .icon{width:38px;height:38px}:host([size='mini']) .icon{width:20px;height:20px}:host([color='red']){color:#ff5061}:host([color='blue']){color:#66b1ff}:host([color='green']){color:#58d68d}:host([color='teal']){color:#3fc2a7}:host([color='orange']){color:#ffb618}:host([color='dark']){color:#62778d}:host([color='purple']){color:#ac61ce}:host([color='grey']){color:#aabac3}@keyframes circle{0%{stroke-dasharray:0, 3812px;stroke-dashoffset:0}50%{stroke-dasharray:1906px, 3812px;stroke-dashoffset:-287px}100%{stroke-dasharray:1906px, 3812px;stroke-dashoffset:-2393px}}@keyframes load{to{transform:rotate(360deg)}}\n</style> <svg class=\"icon\" viewBox=\"0 0 1024 1024\"></svg> ",this.__ICO__=this.root.lastElementChild,this.drawPath()}drawPath(){var{is:o}=this.props,t=SVG_DICT[o];this.__ICO__&&o&&t&&(this.__ICO__.innerHTML="loading"===o?t:`<path d="${t}" />`,this.__ICO__.classList.toggle("load","loading"===o))}get is(){return this.props.is}set is(o){this.props.is=o,this.drawPath()}attributeChangedCallback(o,t,e){if(t!==e)switch(o){case"is":this.is=e,e||this.removeAttribute("is")}}};
|
||||
|
||||
if(!customElements.get('wc-icon')){
|
||||
customElements.define('wc-icon', Icon)
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1,225 @@
|
|||
"use strict";function serialize(e,t,r){let o;if(Array.isArray(t))t.forEach(function(t,a){o=e?`${e}[${Array.isArray(t)?a:""}]`:a,"object"==typeof t?serialize(o,t,r):r(o,t)});else for(let a in t)o=e?`${e}[${a}]`:a,"object"==typeof t[a]?serialize(o,t[a],r):r(o,t[a])}const toS=Object.prototype.toString,doc=window.document,encode=encodeURIComponent,decode=decodeURIComponent,TagHooks=function(){this.option=doc.createElement("select"),this.thead=doc.createElement("table"),this.td=doc.createElement("tr"),this.area=doc.createElement("map"),this.tr=doc.createElement("tbody"),this.col=doc.createElement("colgroup"),this.legend=doc.createElement("fieldset"),this._default=doc.createElement("div"),this.g=doc.createElementNS("http://www.w3.org/2000/svg","svg"),this.optgroup=this.option,this.tbody=this.tfoot=this.colgroup=this.caption=this.thead,this.th=this.td,"circle,defs,ellipse,image,line,path,polygon,polyline,rect,symbol,text,use".replace(/,/g,e=>{this[e]=this.g})},Helper={tagHooks:new TagHooks,rtagName:/<([\w:]+)/,rxhtml:/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,scriptTypes:{"text/javascript":1,"text/ecmascript":1,"application/ecmascript":1,"application/javascript":1},rhtml:/<|&#?\w+;/};export default{parseJS:function(code){if(code=(code+"").trim(),code)if(1===code.indexOf("use strict")){let e=doc.createElement("script");e.text=code,doc.head.appendChild(e).parentNode.removeChild(e)}else eval(code)},parseXML:function(e,t,r){try{t=(new DOMParser).parseFromString(e,"text/xml")}catch(e){t=void 0}return t&&t.documentElement&&!t.getElementsByTagName("parsererror").length||console.error("Invalid XML: "+e),t},parseHTML:function(e){let t=doc.createDocumentFragment().cloneNode(!1);if("string"!=typeof e)return t;if(!Helper.rhtml.test(e))return t.appendChild(document.createTextNode(e)),t;e=e.replace(Helper.rxhtml,"<$1></$2>").trim();let r=(Helper.rtagName.exec(e)||["",""])[1].toLowerCase(),o=Helper.tagHooks[r]||Helper.tagHooks._default,a=null;o.innerHTML=e;let i=o.getElementsByTagName("script");if(i.length)for(let e,t=0;e=i[t++];)if(Helper.scriptTypes[e.type]){let t=doc.createElement("script").cloneNode(!1);e.attributes.forEach(function(e){t.setAttribute(e.name,e.value)}),t.text=e.text,e.parentNode.replaceChild(t,e)}for(;a=o.firstChild;)t.appendChild(a);return t},parseForm:function(e){let t={},r=!1;for(let o,a=0;o=e.elements[a++];)switch(o.type){case"select-one":case"select-multiple":if(o.name.length&&!o.disabled)for(let e,r=0;e=o.options[r++];)e.selected&&(t[o.name]=e.value||e.text);break;case"file":o.name.length&&!o.disabled&&(t[o.name]=o.files[0],r=!0);break;case void 0:case"submit":case"reset":case"button":break;case"radio":case"checkbox":if(!o.checked)break;default:o.name.length&&!o.disabled&&(t[o.name]=o.value)}return r?this.mkFormData(t):t},mkFormData(e){let t=new FormData;for(let r in e){let o=e[r];Array.isArray(o)?o.forEach(function(e){t.append(r+"[]",e)}):t.append(r,e[r])}return t},param:function(e){if(!e||"string"==typeof e||"number"==typeof e)return e;let t=[];return"object"==typeof e&&serialize("",e,function(e,r){/native code/.test(r)||(r="function"==typeof r?r():r,r="[object File]"!==toS.call(r)?encode(r):r,t.push(encode(e)+"="+r))}),t.join("&")}};
|
||||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2016-11-26 16:35:45
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
function serialize(p, obj, q) {
|
||||
let k
|
||||
if (Array.isArray(obj)) {
|
||||
obj.forEach(function(it, i) {
|
||||
k = p ? `${p}[${Array.isArray(it) ? i : ''}]` : i
|
||||
// k = p ? p + '[' + (Array.isArray(it) ? i : '') + ']' : i
|
||||
if (typeof it === 'object') {
|
||||
serialize(k, it, q)
|
||||
} else {
|
||||
q(k, it)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
for (let i in obj) {
|
||||
k = p ? `${p}[${i}]` : i
|
||||
// k = p ? p + '[' + i + ']' : i
|
||||
if (typeof obj[i] === 'object') {
|
||||
serialize(k, obj[i], q)
|
||||
} else {
|
||||
q(k, obj[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const toS = Object.prototype.toString
|
||||
const doc = window.document
|
||||
const encode = encodeURIComponent
|
||||
const decode = decodeURIComponent
|
||||
|
||||
const TagHooks = function() {
|
||||
this.option = doc.createElement('select')
|
||||
this.thead = doc.createElement('table')
|
||||
this.td = doc.createElement('tr')
|
||||
this.area = doc.createElement('map')
|
||||
this.tr = doc.createElement('tbody')
|
||||
this.col = doc.createElement('colgroup')
|
||||
this.legend = doc.createElement('fieldset')
|
||||
this._default = doc.createElement('div')
|
||||
this.g = doc.createElementNS('http://www.w3.org/2000/svg', 'svg')
|
||||
|
||||
this.optgroup = this.option
|
||||
this.tbody = this.tfoot = this.colgroup = this.caption = this.thead
|
||||
this.th = this.td
|
||||
|
||||
'circle,defs,ellipse,image,line,path,polygon,polyline,rect,symbol,text,use'.replace(
|
||||
/,/g,
|
||||
m => {
|
||||
this[m] = this.g //处理svg
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
const Helper = {
|
||||
tagHooks: new TagHooks(),
|
||||
rtagName: /<([\w:]+)/,
|
||||
rxhtml: /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,
|
||||
scriptTypes: {
|
||||
'text/javascript': 1,
|
||||
'text/ecmascript': 1,
|
||||
'application/ecmascript': 1,
|
||||
'application/javascript': 1
|
||||
},
|
||||
rhtml: /<|&#?\w+;/
|
||||
}
|
||||
|
||||
export default {
|
||||
parseJS: function(code) {
|
||||
code = (code + '').trim()
|
||||
if (code) {
|
||||
if (code.indexOf('use strict') === 1) {
|
||||
let script = doc.createElement('script')
|
||||
script.text = code
|
||||
doc.head.appendChild(script).parentNode.removeChild(script)
|
||||
} else {
|
||||
eval(code)
|
||||
}
|
||||
}
|
||||
},
|
||||
parseXML: function(data, xml, tmp) {
|
||||
try {
|
||||
tmp = new DOMParser()
|
||||
xml = tmp.parseFromString(data, 'text/xml')
|
||||
} catch (e) {
|
||||
xml = void 0
|
||||
}
|
||||
|
||||
if (
|
||||
!xml ||
|
||||
!xml.documentElement ||
|
||||
xml.getElementsByTagName('parsererror').length
|
||||
) {
|
||||
console.error('Invalid XML: ' + data)
|
||||
}
|
||||
return xml
|
||||
},
|
||||
parseHTML: function(html) {
|
||||
let fragment = doc.createDocumentFragment().cloneNode(false)
|
||||
|
||||
if (typeof html !== 'string') {
|
||||
return fragment
|
||||
}
|
||||
|
||||
if (!Helper.rhtml.test(html)) {
|
||||
fragment.appendChild(document.createTextNode(html))
|
||||
return fragment
|
||||
}
|
||||
|
||||
html = html.replace(Helper.rxhtml, '<$1></$2>').trim()
|
||||
let tag = (Helper.rtagName.exec(html) || ['', ''])[1].toLowerCase()
|
||||
let wrap = Helper.tagHooks[tag] || Helper.tagHooks._default
|
||||
let firstChild = null
|
||||
|
||||
//使用innerHTML生成的script节点不会触发请求与执行text属性
|
||||
wrap.innerHTML = html
|
||||
let script = wrap.getElementsByTagName('script')
|
||||
if (script.length) {
|
||||
for (let i = 0, el; (el = script[i++]); ) {
|
||||
if (Helper.scriptTypes[el.type]) {
|
||||
let tmp = doc.createElement('script').cloneNode(false)
|
||||
el.attributes.forEach(function(attr) {
|
||||
tmp.setAttribute(attr.name, attr.value)
|
||||
})
|
||||
tmp.text = el.text
|
||||
el.parentNode.replaceChild(tmp, el)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
while ((firstChild = wrap.firstChild)) {
|
||||
fragment.appendChild(firstChild)
|
||||
}
|
||||
|
||||
return fragment
|
||||
},
|
||||
parseForm: function(form) {
|
||||
let data = {}
|
||||
let hasAttach = false
|
||||
for (let i = 0, field; (field = form.elements[i++]); ) {
|
||||
switch (field.type) {
|
||||
case 'select-one':
|
||||
case 'select-multiple':
|
||||
if (field.name.length && !field.disabled) {
|
||||
for (let j = 0, opt; (opt = field.options[j++]); ) {
|
||||
if (opt.selected) {
|
||||
data[field.name] = opt.value || opt.text
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'file':
|
||||
if (field.name.length && !field.disabled) {
|
||||
data[field.name] = field.files[0]
|
||||
hasAttach = true
|
||||
}
|
||||
break
|
||||
case undefined:
|
||||
case 'submit':
|
||||
case 'reset':
|
||||
case 'button':
|
||||
break //按钮啥的, 直接忽略
|
||||
case 'radio':
|
||||
case 'checkbox':
|
||||
// 只处理选中的
|
||||
if (!field.checked) break
|
||||
default:
|
||||
if (field.name.length && !field.disabled) {
|
||||
data[field.name] = field.value
|
||||
}
|
||||
}
|
||||
}
|
||||
// 如果有附件, 改为FormData
|
||||
if (hasAttach) {
|
||||
return this.mkFormData(data)
|
||||
} else {
|
||||
return data
|
||||
}
|
||||
},
|
||||
mkFormData(data) {
|
||||
let form = new FormData()
|
||||
for (let i in data) {
|
||||
let el = data[i]
|
||||
if (Array.isArray(el)) {
|
||||
el.forEach(function(it) {
|
||||
form.append(i + '[]', it)
|
||||
})
|
||||
} else {
|
||||
form.append(i, data[i])
|
||||
}
|
||||
}
|
||||
return form
|
||||
},
|
||||
param: function(obj) {
|
||||
if (!obj || typeof obj === 'string' || typeof obj === 'number') {
|
||||
return obj
|
||||
}
|
||||
|
||||
let arr = []
|
||||
let q = function(k, v) {
|
||||
if (/native code/.test(v)) {
|
||||
return
|
||||
}
|
||||
|
||||
v = typeof v === 'function' ? v() : v
|
||||
v = toS.call(v) !== '[object File]' ? encode(v) : v
|
||||
|
||||
arr.push(encode(k) + '=' + v)
|
||||
}
|
||||
|
||||
if (typeof obj === 'object') {
|
||||
serialize('', obj, q)
|
||||
}
|
||||
|
||||
return arr.join('&')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2019-09-01 23:16:06
|
||||
* @version v2.0.1
|
||||
*
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
import{bind,ebind,unbind}from"../utils.js";const IS_FF=!!window.sidebar;export default class Scroll extends HTMLElement{static get observedAttributes(){return[]}constructor(){super(),Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),Object.defineProperty(this,"props",{value:{},writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{overflow:hidden;position:relative;display:flex;width:100%}:host .container{overflow:hidden;position:relative;width:100%;height:100%}.is-horizontal,.is-vertical{visibility:hidden;position:absolute;z-index:10240;opacity:0;transition:opacity 0.3s linear, visibility 0.3s linear}.is-horizontal .thumb,.is-vertical .thumb{display:block;border-radius:3px;background:rgba(44,47,53,0.25);cursor:default}.is-horizontal .thumb:hover,.is-vertical .thumb:hover{background:rgba(44,47,53,0.5)}.is-horizontal{left:0;bottom:1px;width:100%;height:6px}.is-horizontal .thumb{width:0;height:6px}.is-vertical{top:0;right:1px;width:6px;height:100%}.is-vertical .thumb{width:6px;height:0}:host(:hover) .is-horizontal,:host(:hover) .is-vertical{visibility:visible;opacity:1}\n</style> <div class="container"><slot></slot></div> <div class="is-horizontal"><span class="thumb"></span></div> <div class="is-vertical"><span class="thumb"></span></div> ',this.__BOX__=this.root.children[1],this.__X__=this.root.children[2].children[0],this.__Y__=this.root.children[3].children[0]}get scrollTop(){return this.__BOX__.scrollTop}set scrollTop(t){if((t=+t)==t){var{sh:s,oh:i,yh:e}=this.props;this.__BOX__.scrollTop=t;var o=this.__BOX__.scrollTop/(s-i)*(i-e);this.props.thumbY=o,this.__Y__.style.transform=`translateY(${o}px)`}}get scrollLeft(){return this.__BOX__.scrollLeft}set scrollLeft(t){if(n=+n,n==n){var{sw:s,ow:i,xw:e}=this.props;this.__BOX__.scrollLeft=n;var o=this.__BOX__.scrollLeft/(s-i)*(i-e);this.props.thumbX=o,this.__X__.style.transform=`translateX(${o}px)`}}get scrollHeight(){return this.__BOX__.scrollHeight}_fetchScrollX(t){var{sw:s,ow:i,xw:e}=this.props;return t<0?t=0:t>i-e&&(t=i-e),this.__BOX__.scrollLeft=t/(i-e)*(s-i),this.__X__.style.transform=`translateX(${t}px)`,t}_fetchScrollY(t){var{sh:s,oh:i,yh:e}=this.props;return t<0?t=0:t>i-e&&(t=i-e),this.__BOX__.scrollTop=t/(i-e)*(s-i),this.__Y__.style.transform=`translateY(${t}px)`,t}connectedCallback(){this._initFn=bind(this.__BOX__,"mouseenter",t=>{var s=this.__BOX__.offsetWidth,i=this.__BOX__.scrollWidth,e=this.__BOX__.offsetHeight,o=this.__BOX__.scrollHeight,r=e*e/o>>0,h=s*s/i>>0;r<50&&(r=50),h<50&&(h=50),h===s&&(h=0),r===e&&(r=0),this.props.oh=e,this.props.sh=o,this.props.ow=s,this.props.sw=i,this.props.yh=r,this.props.xw=h,this.__X__.style.width=h+"px",this.__Y__.style.height=r+"px"}),this._wheelFn=ebind(this.__BOX__,"wheel",t=>{t.preventDefault();var{sh:s,oh:i,yh:e,sw:o,ow:r,xw:h}=this.props;if(h||e){var l,_;if(IS_FF)l=t.deltaMode?10*t.deltaX:t.deltaX,_=t.deltaMode?10*t.deltaY:t.deltaY;else{var n=Math.abs(t.wheelDelta);n<120?(l=t.deltaX,_=t.deltaY):(l=t.deltaX/(n/120),_=t.deltaY/(n/120))}if(this.__BOX__.scrollTop+=_,this.__BOX__.scrollLeft+=l,h){var a=this.__BOX__.scrollLeft/(o-r)*(r-h);this.props.thumbX=a,this.__X__.style.transform=`translateX(${a}px)`}if(e){var p=this.__BOX__.scrollTop/(s-i)*(i-e);this.props.thumbY=p,this.__Y__.style.transform=`translateY(${p}px)`}}});var t,s,i,e,o=o=>{var{thumbY:r,thumbX:h}=this.props;null!==t&&(i=this._fetchScrollX(h+o.pageX-t)),null!==s&&(e=this._fetchScrollY(r+o.pageY-s))},r=h=>{t=null,s=null,this.props.thumbX=i,this.props.thumbY=e,unbind(document,"mousemove",o),unbind(document,"mouseup",r)};bind(this.__Y__,"mousedown",t=>{s=t.pageY,this.props.thumbY||(this.props.thumbY=0),bind(document,"mousemove",o),bind(document,"mouseup",r)}),bind(this.__X__,"mousedown",s=>{t=s.pageX,this.props.thumbX||(this.props.thumbX=0),bind(document,"mousemove",o),bind(document,"mouseup",r)})}disconnectedCallback(){unbind(this.__BOX__,"mouseenter",this._initFn),unbind(this.__BOX__,"wheel",this._wheelFn)}};
|
||||
|
||||
if(!customElements.get('wc-scroll')){
|
||||
customElements.define('wc-scroll', Scroll)
|
||||
}
|
||||
Reference in New Issue