+
+
+
+
+
+
+ ${this.cancelText}
+ +${this.previewText}
+
+
@@ -100,19 +89,6 @@ export class StarClock extends LitElement {
return nothing
}
}
- modeChange(mode: any) {
- if (mode === 'light') {
- return {
- hour: lightHour,
- minute: lightMinute,
- }
- } else {
- return {
- hour: darkHour,
- minute: darkMinute,
- }
- }
- }
dateUpdated(date: any) {
let timeMy = new Date(date)
let hour = timeMy.getHours()
@@ -122,14 +98,15 @@ export class StarClock extends LitElement {
let minuteTime = Number(minute || 0) + secondTime / 60 //获取分针时间
let hourTime = Number(hour || 0) + minuteTime / 60 //获取时针时间
hourTime >= 12 ? (hourTime -= 12) : '' //24小时转换为12小时
- this.rotateSecond = (secondTime / 60) * 360
- this.rotateMinute = (minuteTime / 60) * 360
- this.rotateHour = (hourTime / 12) * 360
- this.style.setProperty('--rotateSecond', this.rotateSecond + 'deg')
- this.style.setProperty('--rotateMinute', this.rotateMinute + 'deg')
- this.style.setProperty('--rotateHour', this.rotateHour + 'deg')
+ let rotateSecond = ((secondTime / 60) * 360).toFixed(1)
+ let rotateMinute = ((minuteTime / 60) * 360).toFixed(1)
+ let rotateHour = ((hourTime / 12) * 360).toFixed(1)
+ this.style.setProperty('--rotateSecond', rotateSecond + 'deg')
+ this.style.setProperty('--rotateMinute', rotateMinute + 'deg')
+ this.style.setProperty('--rotateHour', rotateHour + 'deg')
}
protected firstUpdated() {
+ this.resize()
this.dateUpdated('00:00:00')
setInterval(() => {
this.dateUpdated(new Date())
diff --git a/src/components/dock/dock.ts b/src/components/dock/dock.ts
index 632003a..b0b1ef0 100644
--- a/src/components/dock/dock.ts
+++ b/src/components/dock/dock.ts
@@ -149,9 +149,6 @@ export default class StarDock extends StarBaseElement {
target.master.remove()
return target
}
- realRemoveChild = (element: HTMLElement) => {
- element
- }
realInsertBefore = (element: HTMLElement, reference: HTMLElement) => {
element.style.order = reference.style.order
@@ -187,7 +184,7 @@ export default class StarDock extends StarBaseElement {
this.recorderChild()
if (this._children.length) {
- this._gridSize = this._children[0].master.offsetWidth
+ this._gridSize = this._children[0].master.offsetWidth || this._gridSize
}
}
@@ -220,6 +217,8 @@ export default class StarDock extends StarBaseElement {
for (const child of children) {
if (
child.master === element ||
+ child.container === element ||
+ child.element === element ||
child.master.compareDocumentPosition(element) & 16
) {
return child
@@ -280,9 +279,7 @@ export default class StarDock extends StarBaseElement {
break
case 'holdstart':
- if (this._dnd.delay > 0) {
- this.startDrag()
- }
+ this.startDrag()
break
case 'holdmove':
@@ -388,17 +385,21 @@ export default class StarDock extends StarBaseElement {
set sortMode(value) {
if (value) {
- this._dnd.delay = 0
this.gestureDetector.setOption('holdThreshold', 100)
this.setAttribute('sort-mode', '')
} else {
- this._dnd.delay = DEFAULT_DND_TIMEOUT
this.gestureDetector.setOption('holdThreshold', DEFAULT_DND_TIMEOUT)
this.removeAttribute('sort-mode')
}
this._sortMode = value
}
+ get elements() {
+ return this._children.map((child) => {
+ return child.element
+ })
+ }
+
/**
* 处理拖拽节点进入 dock 或者在 dock 上悬浮移动时的方法
* @param info 拖拽节点和其中心点坐标
diff --git a/src/components/grid-container/container.ts b/src/components/grid-container/container.ts
index a44ef47..49c6fc6 100644
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@@ -570,6 +570,7 @@ export class GaiaContainer extends StarBaseElement {
column: child.column,
anchorCoordinate: child.anchorCoordinate,
folderName: child.folderName,
+ createTime: child.createTime,
}
} else {
return null
diff --git a/src/components/grid-container/gaia-container-child.ts b/src/components/grid-container/gaia-container-child.ts
index c5f97c3..8837faf 100644
--- a/src/components/grid-container/gaia-container-child.ts
+++ b/src/components/grid-container/gaia-container-child.ts
@@ -55,6 +55,8 @@ export default class GaiaContainerChild {
center: {x: number; y: number} = {x: 0, y: 0}
// 影子容器，用于判断旋转屏幕后能否容纳该组件
_shadowContainer!: HTMLElement
+ // 建立时间, 用于区分不同小组件
+ createTime: number = new Date().getTime()
constructor(
element: HTMLElement | undefined,
diff --git a/src/components/grid-container/gaia-container-folder.ts b/src/components/grid-container/gaia-container-folder.ts
index d232c45..a51ca9a 100644
--- a/src/components/grid-container/gaia-container-folder.ts
+++ b/src/components/grid-container/gaia-container-folder.ts
@@ -34,7 +34,7 @@ export default class GaiaContainerFolder extends GaiaContainerChild {
constructor(manager: GaiaContainer, name?: string) {
super(undefined, 1, 1, undefined, manager)
this.name = this.checkAndGetFolderName(name)
- this._id = `folder-${new Date().getTime()}`
+ this._id = `folder-${this.createTime}`
this.init()
}
diff --git a/src/components/picker/datepicker.css.ts b/src/components/picker/datepicker.css.ts
index f043fe9..61b62c7 100644
--- a/src/components/picker/datepicker.css.ts
+++ b/src/components/picker/datepicker.css.ts
@@ -113,7 +113,7 @@ export default css`
}
.p-select-title {
-webkit-flex: 1;
- font-size: 18px;
+ font-size: 28px;
color: #333;
text-align: center;
}
@@ -168,7 +168,6 @@ export default css`
}
.p-select-body {
position: relative;
- margin: 20px auto;
width: 100%;
display: -webkit-flex;
-webkit-align-items: center;
@@ -463,6 +462,13 @@ export default css`
line-height: 30px;
letter-spacing: 1px;
color: #262626;
+ /* 字符间距 */
+ letter-spacing: 1px;
+ }
+
+ /* 选项栏flex布局 */
+ .p-select-btn {
+ -webkit-flex: 1;
}
/**图标样式 */
@@ -476,7 +482,13 @@ export default css`
border-radius: 0px;
position: absolute;
top: 29px;
- left: 532px;
+ right: 40px;
+ }
+ .p-select-back-btn {
+ border-radius: 0px;
+ position: absolute;
+ top: 29px;
+ left: 40px;
}
/* 滚轮不选项透明化 */
.hasSelected {
@@ -484,4 +496,14 @@ export default css`
font-size: 36px !important;
color: #1d98f0 !important;
}
+
+ /* 日期选择器相关 */
+ .p-select-date {
+ display: none;
+ -webkit-flex: 1;
+ }
+ .p-select-time {
+ display: flex;
+ -webkit-flex: 1;
+ }
`
diff --git a/src/components/picker/datepicker.ts b/src/components/picker/datepicker.ts
index 3e2e9d6..27a3339 100644
--- a/src/components/picker/datepicker.ts
+++ b/src/components/picker/datepicker.ts
@@ -10,6 +10,9 @@ import datepickerCss from './datepicker.css.js'
import check from './svg/check.svg'
import close_lm from './svg/close_lm.svg'
+/**
+ * 属性复制函数，将除参数一外的参数值赋值给参数一对应的项
+ */
function extend(..._args: any[]) {
let name, options, /* src, */ copy
let length = arguments.length
@@ -29,27 +32,33 @@ function extend(..._args: any[]) {
return target
}
-function isPC() {
- let userAgentInfo = navigator.userAgent
- let Agents = [
- 'Android',
- 'iPhone',
- 'SymbianOS',
- 'Windows Phone',
- 'iPad',
- 'iPod',
- ]
- let flag = true
- for (let i = 0; i < Agents.length; i++) {
- if (userAgentInfo.indexOf(Agents[i]) > 0) {
- flag = false
- break
- }
- }
- return flag
-}
+/**
+ * 判断设备类型：PC为true，移动设备为false
+ * 用于后续响应事件类型选择：click或touch
+ */
+// function isPC() {
+// let userAgentInfo = navigator.userAgent
+// let Agents = [
+// 'Android',
+// 'iPhone',
+// 'SymbianOS',
+// 'Windows Phone',
+// 'iPad',
+// 'iPod',
+// ]
+// let flag = true
+// for (let i = 0; i < Agents.length; i++) {
+// if (userAgentInfo.indexOf(Agents[i]) > 0) {
+// flag = false
+// break
+// }
+// }
+// return flag
+// }
-// picker初始选项
+/**
+ * 定义Picker参数类型
+ */
export interface options {
wheels: pickerwheel[]
container: string
@@ -71,7 +80,10 @@ export interface options {
startDate?: ''
}
-// 时间选择器选项——此处为后续优化部分
+/**
+ * TimerPicker参数类型
+ * 后续与Picker选项结合优化为基础参数类型
+ */
export interface opt {
container: string
scrollType: string
@@ -89,28 +101,47 @@ export interface opt {
cancel: Function
}
+/**
+ * 定义选择项类型
+ * json数据对，其中value为数据值，display为显示内容
+ */
export type itemdate = {
value: number
display: string
}
-// 定义滚轮内容类型
+/**
+ * 定义滚轮内容类型
+ * infinite：是否为无限滚动
+ * selected：初始选项
+ * data：选择器选项数组
+ * label：滚轮之间间隔标志，如‘-’
+ */
export type pickerwheel = {
- // 无限滚动
infinite: boolean
- // 被选项
selected: number
- // 滚轮数据
data: Array
${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
@@ -74,15 +69,9 @@ export class StarClock extends LitElement {
`
)}
- .hour})
- .minute})
- 
+
+
+
'
html += '
'
@@ -354,6 +558,10 @@ export class PickerBase extends LitElement {
node.innerHTML = html
_this.shadowRoot!.querySelector(_this.option.container)!.appendChild(node)
}
+
+ /**
+ * 选项边界判断，用于判断是否滑动一个选项的高度
+ */
function snap(pos: number) {
let pos1 = Math.round(pos),
n1 = Math.round(pos1 % _this.itemHeight),
@@ -365,6 +573,10 @@ export class PickerBase extends LitElement {
return pos - n1 + (pos1 > 0 ? _this.itemHeight : -_this.itemHeight)
}
}
+
+ /**
+ * 获取处在显示位置的选项值
+ */
function getVal(
pos: number,
data: itemdate[],
@@ -387,7 +599,10 @@ export class PickerBase extends LitElement {
}
return result
}
- // item定位
+
+ /**
+ * 定位选项位置
+ */
function getPosition(el: any) {
let style = getComputedStyle(el),
matrix = style.transform,
@@ -396,6 +611,10 @@ export class PickerBase extends LitElement {
px = Number(matrixlist[13] || matrixlist[5])
return px
}
+
+ /**
+ * 移除滚轮
+ */
function destroy() {
_this.rs = {
result: [],
@@ -408,6 +627,10 @@ export class PickerBase extends LitElement {
box!.remove()
}, 300)
}
+
+ /**
+ * 滚轮类
+ */
class Scroll {
el: any
wheel: any
@@ -449,19 +672,19 @@ export class PickerBase extends LitElement {
init() {
this.Run(0, this.opt.scrollY)
- if (isPC()) {
- this.el.addEventListener(
- 'mousedown',
- this.touchStart.bind(this),
- false
- )
- this.el.addEventListener(
- 'mousemove',
- this.touchMove.bind(this),
- false
- )
- this.el.addEventListener('mouseup', this.touchEnd.bind(this), false)
- } else {
+ // if (isPC()) {
+ // this.el.addEventListener(
+ // 'mousedown',
+ // this.touchStart.bind(this),
+ // false
+ // )
+ // this.el.addEventListener(
+ // 'mousemove',
+ // this.touchMove.bind(this),
+ // false
+ // )
+ // this.el.addEventListener('mouseup', this.touchEnd.bind(this), false)
+ // } else {
this.el.addEventListener(
'touchstart',
this.touchStart.bind(this),
@@ -478,9 +701,8 @@ export class PickerBase extends LitElement {
this.touchEnd.bind(this),
false
)
- }
+ // }
- // let self = this
if (_this.option.scrollType == '3d') {
//3d点击事件
this.itemClick(this.opt.item3d)
@@ -791,15 +1013,18 @@ export class PickerBase extends LitElement {
this.scrollTo(_this.rs.result[this.index].value, 0)
}
}
+
+ /**
+ * 初始化函数
+ */
this.init = function init(wheels: any, target: any, _isInput: any) {
//创建DOM
createEL(wheels)
let el = _this.shadowRoot!.querySelectorAll('.p-select-item')
for (let i = 0; i < el.length; i++) {
- //滚动栏
+ // 创建滚动栏
let scroll = new Scroll(el[i], wheels[i], i)
-
- //初始结果
+ // 初始结果
let res = getVal(
scroll.opt.scrollY,
scroll.opt.data,
@@ -813,10 +1038,52 @@ export class PickerBase extends LitElement {
//传出初始结果
_this.option.init(_this.rs)
- let submitBtn = _this.shadowRoot!.querySelector('.p-select-submit-btn'),
- cancelBtn = _this.shadowRoot!.querySelector('.p-select-cancel-btn')
+ let submitBtn = _this.shadowRoot!.querySelector('.p-select-submit-btn') as HTMLElement
+ let cancelBtn = _this.shadowRoot!.querySelector('.p-select-cancel-btn') as HTMLElement
+ // 日期选择器点击标题事件
+ if(this.opt.headResult) {
+ let title = this.shadowRoot!.querySelector(
+ '.p-select-title'
+ ) as HTMLElement
+ let datepart = _this.shadowRoot!.querySelector('.p-select-date') as HTMLElement
+ let timepart = _this.shadowRoot!.querySelector('.p-select-time') as HTMLElement
+ let backbtn = _this.shadowRoot!.querySelector('.p-select-back-btn') as HTMLElement
+ // let dayitem = _this.shadowRoot!.querySelector('.p-dayitem') as HTMLElement
+ // let dayitemwheel = _this.shadowRoot!.querySelector('.p-dayitem-wheel') as HTMLElement
+ title.addEventListener(
+ 'click',
+ function () {
+ datepart.style.display = 'flex'
+ backbtn.style.display = 'flex'
+ timepart.style.display = 'none'
+ cancelBtn.style.display = 'none'
+ submitBtn.style.display = 'none'
+ },
+ false
+ )
+ backbtn.addEventListener('click',function(){
+ datepart.style.display = 'none'
+ backbtn.style.display = 'none'
+ timepart.style.display = 'flex'
+ cancelBtn.style.display = 'flex'
+ submitBtn.style.display = 'flex'
+ // dayitem.innerHTML = updateItems(
+ // wheels[2],
+ // -_this.itemSize2d,
+ // _this.itemSize2d,
+ // false
+ // )
+ // dayitemwheel.innerHTML = updateItems(
+ // wheels[2],
+ // -_this.itemSize3d,
+ // _this.itemSize3d,
+ // true
+ // )
+ })
+ }
+
// mask = _this.shadowRoot!.querySelector('.p-select-mask')
- submitBtn!.addEventListener(
+ submitBtn.addEventListener(
'click',
function () {
let attr_rs = [],
@@ -840,7 +1107,7 @@ export class PickerBase extends LitElement {
},
false
)
- cancelBtn!.addEventListener(
+ cancelBtn.addEventListener(
'click',
function () {
_this.option.cancel()
@@ -866,6 +1133,9 @@ export class PickerBase extends LitElement {
}
}
+ /**
+ * Picker初始化函数
+ */
public initPicker(el: string, opt: any) {
const _this = this
this.clickTarget = _this.shadowRoot!.querySelectorAll(
@@ -929,10 +1199,10 @@ export class PickerBase extends LitElement {
scrollType: '3d',
background: 'light',
showLabel: true, //是否显示label
- labelType: 'symbol', //label样式：symbol符号 text文字 split分割(需date和time同时存在)
+ labelType: 'text', //label样式：symbol符号 text文字 split分割(需date和time同时存在)
display: 'center', //显示位置
headResult: false, //头部显示结果信息
- date: false,
+ date: true,
time: true,
beginYear: new Date().getFullYear() - 100,
endYear: new Date().getFullYear() + 100,
@@ -990,34 +1260,21 @@ export class PickerBase extends LitElement {
]
// 年、月、日、时、分，数据初始化初始化
public initDateInfo() {
- // 年
for (let i = this.beginYear; i <= this.endYear; i++) {
this.yearData.push({value: i, display: this.addZero(i)})
}
- // 月
for (let i = 1; i <= 12; i++) {
this.monthData.push({value: i, display: this.addZero(i)})
}
- // 日
for (let i = 1; i <= 31; i++) {
this.dayData.push({value: i, display: this.addZero(i)})
}
- // 时
for (let i = 0; i <= 23; i++) {
this.hourData.push({value: i, display: this.addZero(i)})
}
- // 分
for (let i = 0; i <= 59; i++) {
this.minuteData.push({value: i, display: this.addZero(i)})
}
- // 判断显示日期/时间
- if (!this.opt.date) {
- this.wheels.splice(0, 3)
- }
- if (!this.opt.time) {
- this.wheels.splice(3, 5)
- this.wheels[2].label = ' '
- }
// Label控制
if (!this.opt.showLabel) {
for (let i = 0; i < this.wheels!.length; i++) {
@@ -1025,21 +1282,9 @@ export class PickerBase extends LitElement {
}
} else {
if (this.opt.labelType == 'text') {
- if (this.wheels.length == 5) {
- var text = ['年', '月', '日', '时', '分', '秒']
- for (var i = 0; i < this.wheels.length; i++) {
- this.wheels[i].label = text[i]
- }
- } else if (this.wheels.length == 3) {
- var text = ['年', '月', '日']
- for (var i = 0; i < this.wheels.length; i++) {
- this.wheels[i].label = text[i]
- }
- } else {
- var text = ['时', '分']
- for (var i = 0; i < this.wheels.length; i++) {
- this.wheels[i].label = text[i]
- }
+ var text = ['年', '月', '日', '时', '分', '秒']
+ for (var i = 0; i < this.wheels.length; i++) {
+ this.wheels[i].label = text[i]
}
}
if (this.opt.labelType == 'split' && this.opt.date && this.opt.time) {
@@ -1049,6 +1294,14 @@ export class PickerBase extends LitElement {
this.wheels[2].label = ''
}
}
+ // 判断是否显示日期/时间
+ if (!this.opt.date) {
+ this.wheels.splice(0, 3)
+ }
+ if (!this.opt.time) {
+ this.wheels.splice(3, 5)
+ // this.wheels[2].label = ' '
+ }
}
// 判断闰年
@@ -1084,11 +1337,11 @@ export class PickerBase extends LitElement {
if (result.length == 5) {
this.lastValue =
result[0].display +
- '-' +
+ '年' +
result[1].display +
- '-' +
+ '月' +
result[2].display +
- ' ' +
+ '日' +
result[3].display +
':' +
result[4].display
@@ -1102,10 +1355,18 @@ export class PickerBase extends LitElement {
let title = this.shadowRoot!.querySelector(
'.p-select-title'
) as HTMLElement
- title.innerText = this.lastValue
+ if(this.opt.date){
+ title.innerText = result[0].display +'年' + result[1].display + '月'
+ }else {
+ title.innerText = this.lastValue
+ }
+
}
}
+ /**
+ * TimePicker初始化函数
+ */
public initTimePicker(el: string, opt: any) {
this.initDateInfo()
const _this = this
@@ -1159,9 +1420,66 @@ export class PickerBase extends LitElement {
false
)
}
- console.log(this.wheels)
+ }
+ /**
+ * TimePicker初始化函数
+ */
+ public initDatePicker(el: string, opt: any) {
+ this.initDateInfo()
+ const _this = this
+ this.clickTarget = _this.shadowRoot!.querySelectorAll(
+ el
+ ) as NodeListOf'
+ html += '
'
html += ''
html += '
'
+ html += ''
+ html += '
'
+
if (_this.option.headTitle != '') {
html +=
'' + _this.option.headTitle + '
'
}
+ html += ''
html += '
'
+ html += '
'
+
html += ''
- html +=
- ''
- for (let i = 0; i < wheels.length; i++) {
- let label = wheels[i].label
- html += '
'
html += ''
- html += '
'
+ html += ''
- html +=
- '
'
- if (label) {
+ // html +=
+ // ''
+ if(wheels.length == 5){
+ html += ''
- html += '
'
- if (_this.option.scrollType == '3d') {
- html += '- '
- html += generateItems(
- wheels[i],
- -_this.itemSize2d,
- _this.itemSize2d,
- false
- )
- html += '
- '
- html += generateItems(
- wheels[i],
- -_this.itemSize3d,
- _this.itemSize3d,
- true
- )
- html += '
'
+ for (let i = 0; i < 2; i++) {
+ let label = wheels[i].label
+ html += '
'
}
html += ''
+ html += '
'
+ if (label) {
+ html +=
+ ''
html +=
- '
'
+ if (_this.option.scrollType == '3d') {
+ html += '' +
- label +
- '
'
+ '>'
+ html += '- '
+ html += generateItems(
+ wheels[i],
+ -_this.itemSize2d,
+ _this.itemSize2d,
+ false
+ )
+ html += '
- '
+ html += generateItems(
+ wheels[i],
+ -_this.itemSize3d,
+ _this.itemSize3d,
+ true
+ )
+ html += '
' +
+ label +
+ '
'
+ }
+ html += ''
+ for (let i = 2; i < 5; i++) {
+ let label = wheels[i].label
+ html += '
'
+ }else{
+ for (let i = 0; i < wheels.length; i++) {
+ let label = wheels[i].label
+ html += ''
+ html += '
'
+ }
+ html += ''
+ html +=
+ '
'
+ if (label) {
+ html +=
+ ''
+ html += '
'
+ if (_this.option.scrollType == '3d') {
+ html += '- '
+ html += generateItems(
+ wheels[i],
+ -_this.itemSize2d,
+ _this.itemSize2d,
+ false
+ )
+ html += '
- '
+ html += generateItems(
+ wheels[i],
+ -_this.itemSize3d,
+ _this.itemSize3d,
+ true
+ )
+ html += '
' +
+ label +
+ '
'
+ }
+ html += ''
+ html += '
'
+ }
}
html += ''
+ html +=
+ '
'
+ if (label) {
+ html +=
+ ''
+ html += '
'
+ if (_this.option.scrollType == '3d') {
+ html += '- '
+ html += generateItems(
+ wheels[i],
+ -_this.itemSize2d,
+ _this.itemSize2d,
+ false
+ )
+ html += '
- '
+ html += generateItems(
+ wheels[i],
+ -_this.itemSize3d,
+ _this.itemSize3d,
+ true
+ )
+ html += '
' +
+ label +
+ '
'
+ }
+ html += '
+
+ `
+ }
+
public getDatePicker(): HTMLTemplateResult {
return html`
TimePicker
+
+ DatePicker
-
+
+
+ `
+ }
+ protected firstUpdated(
+ _changedProperties: PropertyValueMap' + i + '