Merge pull request #221 in YR/star-web-components from star-swiper-lockscreen-setting to master

* commit 'da13b6a89ef2befe4de152e4b1eb6a24a835bb70':
  swiper remove log
  BUG : #151739 lockscreen passcode & setting

src/components/digicipher/digicipher.ts

@@ -51,41 +51,22 @@ export class StarLockNumber extends StarBaseElement {
   @property({type: String}) passwd = ''
   @property({type: String}) savewd = ''
 
-  // protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-  //     super.update(changedProperties)
-  //     if (this.savemode) {
-  //       this.changeText = '请输入数字锁屏密码'
-  //       /* this.slideUp.style.setProperty('top', 'var(--auto-370px)') */
-  //       this.spanContainer.style.setProperty(
-  //         'margin',
-  //         'var(--auto-80px) 0 var(--auto-100px) 0'
-  //       )
-  //       this.text.style.setProperty('font-size', 'var(--auto-32px)')
-  //       this.bottomText.style.setProperty('margin-top', 'var(--auto-100px)')
-  //     } else {
-  //       this.changeText = '输入密码'
-  //     }
-  //     for (let i = 0; i < 6; i++) {
-  //       this.savemode
-  //         ? this.changeBgColor('#000000', i, 0.1)
-  //         : this.changeBgColor('#F4F4F4', i, 0.4)
-  //     }
-  //     this.spanContainer.style.visibility = `visible`
-  //     this.parent.style.visibility = `visible`
-  // }
+  constructor() {
+    super()
+  }
   protected firstUpdated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
+    window.addEventListener('lockswiperup', () => {
+      this.requestUpdate()
+    })
     if (this.savemode) {
-      this.changeText = this.$l('please-enter-the-digital-lockscreen-password')
       this.spanContainer.style.setProperty(
         'margin',
         'var(--auto-80px) 0 var(--auto-100px) 0'
       )
       this.text.style.setProperty('font-size', 'var(--auto-32px)')
       this.bottomText.style.setProperty('margin-top', 'var(--auto-100px)')
-    } else {
-      this.changeText = this.$l('enter-password')
     }
     for (let i = 0; i < 6; i++) {
       this.savemode
@@ -101,6 +82,11 @@ export class StarLockNumber extends StarBaseElement {
   }
 
   render() {
+    this.savemode
+      ? (this.changeText = this.$l(
+          'please-enter-the-digital-lockscreen-password'
+        ))
+      : (this.changeText = this.$l('enter-password'))
     return html`
       <div id="slideUp">
         <div id="textcenter">

src/components/pattern-view/pattern-view.ts

@@ -50,9 +50,12 @@ export class StarPatternView extends StarBaseElement {
   @property({type: Array}) passwdArr = []
   @property({type: String}) mode = ''
   @property({type: String}) changeText = ''
-  @property({type: String}) cancel = '取消'
+  @property({type: String}) cancel = ''
   @property({type: String}) lessfourinfo = ''
   render() {
+    this.changeText = this.savemode
+      ? this.$l('please-draw-a-pattern')
+      : this.$l('draw-a-pattern')
     if (!this.savemode) {
       return html`
         <div id="content">
@@ -91,6 +94,9 @@ export class StarPatternView extends StarBaseElement {
   protected firstUpdated(
     _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
+    window.addEventListener('lockswiperup', () => {
+      this.requestUpdate()
+    })
     //settings中，图形密码上下的文字以及图形密码的位置都有所变化
     if (this.savemode) {
       this.textTop.style.setProperty('margin-bottom', 'var(--auto-100px)')
@@ -106,9 +112,7 @@ export class StarPatternView extends StarBaseElement {
     this.Y = (this.canvasHeight - 2 * this.OffsetY - this.R * 2 * 3) / 2
     this.createCirclePoint(this.X, this.Y)
     this.Draw()
-    this.changeText = this.savemode
-      ? this.$l('please-draw-a-pattern')
-      : this.$l('draw-a-pattern')
+
     this.addEventListener('passcode-create-success', this)
     this.addEventListener('pattern-passcode-verify-success', this)
     this.addEventListener('pattern-passcode-verify-error', this)
@@ -346,6 +350,7 @@ export class StarPatternView extends StarBaseElement {
       )
     } else {
       this.changeText = this.$l('please-redraw-the-pattern')
+      this.lessfourinfo = this.$l('pattern-do-not-match-please-reset')
       this.confirm = false
       this.passwd = []
     }

src/components/swiper/swiper-styles.ts

@@ -156,7 +156,7 @@ export const sharedStyles: CSSResult = css`
     display: flex;
     justify-content: space-between;
     flex-direction: column;
-    bottom: -200px;
+    bottom: -18%;
     width: var(--auto-520px);
     height: var(--auto-310px);
     left: 50%;
@@ -184,7 +184,7 @@ export const sharedStyles: CSSResult = css`
   }
   @keyframes slider {
     0% {
-      bottom: -200px;
+      bottom: -18%;
     }
     100% {
       bottom: var(--auto-9px);
@@ -195,7 +195,7 @@ export const sharedStyles: CSSResult = css`
       bottom: var(--auto-9px);
     }
     100% {
-      bottom: -200px;
+      bottom: -18%;
     }
   }
 `

src/components/swiper/swiper.ts

@@ -101,7 +101,7 @@ export class StarLockNumber extends StarBaseElement {
     })
     this.changeTimeFormatter()
     this.menu.removeAttribute('style')
-    this.menu.style.setProperty('bottom', '-200px')
+    this.menu.style.setProperty('bottom', '-18%')
     //全面阻止移动端事件的默认行为
     document.addEventListener('touchstart', function (ev: TouchEvent) {
       ev.preventDefault()
@@ -190,7 +190,7 @@ export class StarLockNumber extends StarBaseElement {
   }
   ulWidth(enlarge: Boolean) {
     if (enlarge) {
-      console.log('预览')
+      /* 预览 */
       this.cur_ul_width =
         (this.figure_arr.length + 1) *
         (this.cur_li_width + this.cur_li_margin_right) *
@@ -198,16 +198,12 @@ export class StarLockNumber extends StarBaseElement {
       this.cur_ul.style.setProperty('width', this.cur_ul_width + 'px')
       this.cur_ul.style.setProperty('left', 487 - 124 * this.index + 'vw')
     } else {
-      console.log('非预览')
+      /* 非预览 */
       this.cur_ul_width =
         (this.figure_arr.length + 1) *
         (this.cur_li_width + this.cur_li_margin_right)
       this.cur_ul.style.setProperty('width', this.cur_ul_width + 'px')
       this.cur_ul.style.setProperty('left', 28.4 - 53.6 * this.index + 'vw')
-      console.log('this.cur_li_width', this.cur_li_width)
-      console.log('this.cur_li_margin_right', this.cur_li_margin_right)
-      console.log('this.figure_arr.length + 1', this.figure_arr.length + 1)
-      console.log('this.cur_ul_width', this.cur_ul_width)
     }
   }
   touchStart(e: TouchEvent) {
@@ -253,7 +249,6 @@ export class StarLockNumber extends StarBaseElement {
         'transition',
         'left .3s cubic-bezier(.05,.62,.42,.9)'
       )
-      console.log('index', this.index)
       //清零移动距离
       this.distanceX = 0
     } else {
@@ -283,7 +278,6 @@ export class StarLockNumber extends StarBaseElement {
         'transition',
         'left .3s cubic-bezier(.05,.62,.42,.9)'
       )
-      console.log('index', this.index)
       //清零移动距离
       this.distanceX = 0
     }
@@ -292,7 +286,7 @@ export class StarLockNumber extends StarBaseElement {
     if ((e.target as Element).id === 'cancel') {
       //点击取消
       this.menu.removeAttribute('style')
-      this.menu.style.setProperty('bottom', '-200px')
+      this.menu.style.setProperty('bottom', '-18%')
       this.dispatchEvent(
         new CustomEvent('star-swiper-cancel', {
           detail: {
@@ -305,7 +299,7 @@ export class StarLockNumber extends StarBaseElement {
     } else if ((e.target as Element).id === 'preview') {
       //点击预览
       this.menu.removeAttribute('style')
-      this.menu.style.setProperty('bottom', '-200px')
+      this.menu.style.setProperty('bottom', '-18%')
       this.dispatchEvent(
         new CustomEvent('star-swiper-preview', {
           detail: {
@@ -342,11 +336,11 @@ export class StarLockNumber extends StarBaseElement {
   touchStartMenu(e: TouchEvent) {
     this.type = data.type[this.index]
     if ((e.target as Element).id === 'onlyStyle') {
-      console.log('onlyStyle')
+      // console.log('onlyStyle')
       this.menu.removeAttribute('style')
-      this.menu.style.setProperty('animation', 'sliderBack .5s')
-      this.menu.style.setProperty('animation-fill-mode', 'forwards')
-      this.menu.style.setProperty('bottom', '-200px')
+      // this.menu.style.setProperty('animation', 'sliderBack .5s')
+      // this.menu.style.setProperty('animation-fill-mode', 'forwards')
+      this.menu.style.setProperty('bottom', '-18%')
       this.dispatchEvent(
         new CustomEvent('star-swiper-onlyStyle', {
           detail: {
@@ -360,11 +354,11 @@ export class StarLockNumber extends StarBaseElement {
       //预览时点击应用会保存预览变大的状态
       this.enlarge ? this.preview() : ''
     } else if ((e.target as Element).id === 'styleAndWallpaper') {
-      console.log('styleAndWallpaper')
+      // console.log('styleAndWallpaper')
       this.menu.removeAttribute('style')
-      this.menu.style.setProperty('bottom', '-200px')
-      this.menu.style.setProperty('animation', 'sliderBack .5s')
-      this.menu.style.setProperty('animation-fill-mode', 'forwards')
+      // this.menu.style.setProperty('animation', 'sliderBack .5s')
+      // this.menu.style.setProperty('animation-fill-mode', 'forwards')
+      this.menu.style.setProperty('bottom', '-18%')
       this.dispatchEvent(
         new CustomEvent('star-swiper-styleAndWallpaper', {
           detail: {
@@ -378,11 +372,11 @@ export class StarLockNumber extends StarBaseElement {
       //预览时点击应用会保存预览变大的状态
       this.enlarge ? this.preview() : ''
     } else if ((e.target as Element).id === 'menuCancel') {
-      console.log('menuCancel')
+      // console.log('menuCancel')
       this.menu.removeAttribute('style')
       this.menu.style.setProperty('animation', 'sliderBack .5s')
       this.menu.style.setProperty('animation-fill-mode', 'forwards')
-      this.menu.style.setProperty('bottom', '-200px')
+      this.menu.style.setProperty('bottom', '-18%')
     }
   }