Skip to content

Commit

Permalink
5.28 核心例行上线 (#621)
Browse files Browse the repository at this point in the history 
* fix: mip-img 支持 webp (#605)

* 支持 webp，支持 source 子元素

* bugfix: 修复事件 event 数据丢失问题

* fix: 自动轮播支持 popup (#618)

* 自动轮播支持 popup

* 修复 mip-fixed 因为在搜索落地页环境额外定义了 position: fixed 被隐藏的问题
  • Loading branch information
@chenqiushi
chenqiushi authored May 28, 2019
1 parent 7650ff3 commit 4812b28
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 31 deletions.
23 changes: 17 additions & 6 deletions packages/mip/src/components/mip-carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,12 +159,6 @@ function getChildNodes (element) {

arrNode.map(function (ele, i) {
if (ele.tagName.toLowerCase() !== 'mip-i-space') {
// 如果是 autoplay，则不允许有 popup 功能
if (element.hasAttribute('autoplay')) {
if (ele.hasAttribute('popup')) {
ele.removeAttribute('popup')
}
}
childList.push(ele)
element.removeChild(ele)
}
Expand All @@ -173,6 +167,8 @@ function getChildNodes (element) {
// 拷贝第一个和最后一个节点拼接dom
let firstCard = childList[0].cloneNode(true)
let endCard = childList[childList.length - 1].cloneNode(true)
firstCard.classList.add('mip-carousel-extra-img')
endCard.classList.add('mip-carousel-extra-img')
childList.unshift(endCard)
childList.push(firstCard)
}
Expand Down Expand Up @@ -420,6 +416,21 @@ class MIPCarousel extends CustomElement {
}
}, false)

// 打开 popup 时暂停轮播
ele.addEventListener('open-popup', e => {
e.stopPropagation()
clearInterval(moveInterval)
})

// 关闭 popup 时继续轮播
ele.addEventListener('close-popup', e => {
e.stopPropagation()
/* istanbul ignore if */
if (isAutoPlay) {
autoPlay()
}
})

// 自动轮播
if (isAutoPlay) {
autoPlay()
Expand Down
29 changes: 23 additions & 6 deletions packages/mip/src/components/mip-img.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import CustomElement from '../custom-element'
import viewport from '../viewport'
import viewer from '../viewer'

const {css, rect, event, naboo, platform} = util
const {css, rect, event, naboo, platform, dom} = util

// 取值根据 https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement
let imgAttributes = [
Expand Down Expand Up @@ -93,13 +93,13 @@ function getImgOffset (img) {
* @return {Object} 保存 src 数组和 index
*/
function getImgsSrcIndex (ele) {
// 取已渲染的 popup 图片
// 取已渲染的 popup 图片，不包括 carousel 中头尾的两个图片
const mipImgs = [...document.querySelectorAll('mip-img[popup].mip-img-loaded')]
.filter(mipImg => !mipImg.classList.contains('mip-carousel-extra-img'))
let index = mipImgs.indexOf(ele)
// just check
/* istanbul ignore if */
if (index === -1) {
index = 0
return {imgsSrcArray: [], index}
}
const imgsSrcArray = mipImgs.map(mipImg => {
let img = mipImg.querySelector('img')
Expand Down Expand Up @@ -136,7 +136,7 @@ function getCurrentImg (carouselWrapper, mipCarousel) {
function createPopup (element) {
const {imgsSrcArray, index} = getImgsSrcIndex(element)
/* istanbul ignore if */
if (imgsSrcArray.length === 0) {
if (imgsSrcArray.length === 0 || index === -1) {
return
}
let popup = document.createElement('div')
Expand Down Expand Up @@ -183,7 +183,6 @@ function createPopup (element) {
popup.appendChild(popUpBg)
popup.appendChild(carouselWrapper)
document.body.appendChild(popup)

return popup
}
/**
Expand All @@ -194,6 +193,8 @@ function createPopup (element) {
* @return {void} 无
*/
function bindPopup (element, img) {
// 是否在 mip-carousel 中
let carouselOutside = element.customElement.carouselOutside
// 图片点击时展现图片
img.addEventListener('click', function (event) {
event.stopPropagation()
Expand All @@ -214,11 +215,21 @@ function bindPopup (element, img) {
if (!popup) {
return
}

if (carouselOutside) {
customEmit(carouselOutside, 'open-popup')
}

let popupBg = popup.querySelector('.mip-img-popUp-bg')
let mipCarousel = popup.querySelector('mip-carousel')
let popupImg = new Image()
popupImg.setAttribute('src', current)
popup.appendChild(popupImg)

// 背景 fade in
naboo.animate(popupBg, {
opacity: 1
}).start()

let imgOffset = getImgOffset(img)

Expand Down Expand Up @@ -257,6 +268,10 @@ function bindPopup (element, img) {
popup.removeEventListener('click', imagePop, false)
popup.remove()
})

if (carouselOutside) {
customEmit(carouselOutside, 'close-popup')
}
}

let onResize = function () {
Expand Down Expand Up @@ -361,6 +376,8 @@ class MipImg extends CustomElement {

/** @overwrite */
build () {
// 在 build 中判断，在 layoutCallback 可能不对（与执行顺序有关）
this.carouselOutside = dom.closest(this.element, 'mip-carousel')
this.createPlaceholder()
}

Expand Down
6 changes: 4 additions & 2 deletions packages/mip/src/fixed-element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,8 +266,10 @@ class FixedElement {
*/
// elements[j].parentElement.removeChild(elements[j])
let ele = elements[j]
ele.style.cssText = 'display: none!important'
console.warn(ele, '发现 position: fixed 样式, 请使用 mip-fixed 组件代替')
if (ele.tagName !== 'MIP-FIXED') {
ele.style.cssText = 'display: none!important'
console.warn(ele, '发现 position: fixed 样式, 请使用 mip-fixed 组件代替')
}
}
}
} catch (e) {
Expand Down
2 changes: 1 addition & 1 deletion packages/mip/src/styles/mip-img.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
}
&-popUp-bg {
height: 100%;
opacity: 1;
opacity: 0;
background: #000;
}
}
Expand Down
37 changes: 29 additions & 8 deletions packages/mip/test/specs/components/mip-carousel.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
/* eslint-disable no-unused-expressions */
/* globals describe, before, it, expect, after */

import {waitForChild} from 'src/util/dom/dom'

let sleep = t => new Promise(resolve => setTimeout(resolve, t))

describe('mip-carousel', function () {
Expand Down Expand Up @@ -60,10 +62,10 @@ describe('mip-carousel', function () {
<div class="mip-carousle-subtitle">这里是title2</div>
</a>
<mip-img popup
src="https://www.mipengine.org/static/img/sample_02.jpg">
src="https://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg">
</mip-img>
<mip-img
src="https://www.mipengine.org/static/img/sample_03.jpg">
<mip-img popup
src="https://boscdn.baidu.com/assets/mipengine/wide.jpg">
</mip-img>
</mip-carousel>
`
Expand All @@ -80,7 +82,7 @@ describe('mip-carousel', function () {
expect(wrapBox).to.be.exist
expect(wrapBox.parentNode.classList.contains('mip-carousel-container')).to.be.true
expect(slideBoxs.length).to.equal(5)
expect(slideBoxs[0].querySelector('img').getAttribute('src')).to.equal('https://www.mipengine.org/static/img/sample_03.jpg')
expect(slideBoxs[0].querySelector('img').getAttribute('src')).to.equal('https://boscdn.baidu.com/assets/mipengine/wide.jpg')
expect(slideBoxs[4].querySelector('img').getAttribute('src')).to.equal('https://www.mipengine.org/static/img/sample_01.jpg')
})

Expand All @@ -90,10 +92,6 @@ describe('mip-carousel', function () {
expect(wrapBox.style.transform).to.equal('translate3d(-200px, 0px, 0px)')
})

it('should not popup when autoplay', function () {
expect(slideBoxs[2].getAttribute('popup')).to.be.null
})

it('should move to next img when touch', async function () {
// after move to -300
await sleep(400)
Expand All @@ -119,6 +117,29 @@ describe('mip-carousel', function () {
expect(wrapBox.style.transform).to.be.oneOf(['translate3d(-100px, 0px, 0px)', 'translate3d(-400px, 0px, 0px)'])
})

it('should popup and close popup', async () => {
let mipImg = slideBoxs[2].querySelector('mip-img')
expect(mipImg.hasAttribute('popup')).to.be.true
let img = mipImg.querySelector('img')
let evt = document.createEvent('MouseEvents')
// 图片可能未加载
await sleep(500)
evt.initEvent('click', true, true)
img.dispatchEvent(evt)
await waitForChild(document.body, body => body.querySelector('.mip-img-popUp-wrapper'))
let mipPopWrap = document.querySelector('.mip-img-popUp-wrapper')
expect(mipPopWrap.getAttribute('data-name')).to.equal('mip-img-popUp-name')
await waitForChild(mipPopWrap, mipPopWrap => mipPopWrap.querySelector('mip-carousel'))
let carousel = mipPopWrap.querySelector('mip-carousel')
expect(carousel).to.be.exist
carousel.viewportCallback(true)
await waitForChild(carousel, carousel => carousel.querySelector('.mip-carousel-wrapper'))
mipPopWrap.dispatchEvent(evt)
// 等待 popup 完全关闭
await sleep(500)
expect(carousel.style.display).to.equal('none')
}).timeout(4000)

after(function () {
document.body.removeChild(div)
})
Expand Down
19 changes: 11 additions & 8 deletions packages/mip/test/specs/components/mip-img.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ describe('mip-img', function () {
})

it('should be loading with placeholder', async () => {
let mipImg = dom.create('<mip-img popup src="http://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg"></mip-img>')
let mipImg = dom.create('<mip-img popup src="https://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg"></mip-img>')
mipImgWrapper.appendChild(mipImg)
document.body.appendChild(mipImgWrapper)
mipImg.viewportCallback(true)
Expand Down Expand Up @@ -99,14 +99,14 @@ describe('mip-img', function () {

it('should load img with normal src', function () {
mipImgWrapper.innerHTML = `
<mip-img src="http://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg"></mip-img>
<mip-img src="https://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg"></mip-img>
`
let mipImg = mipImgWrapper.querySelector('mip-img')
mipImg.viewportCallback(true)
let img = mipImg.querySelector('img')
let loading = new Promise(resolve => event.listen(img, 'load', resolve))
expect(img.classList.contains('mip-replaced-content')).to.equal(true)
expect(img.getAttribute('src')).to.equal('http://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg')
expect(img.getAttribute('src')).to.equal('https://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg')
return loading
})

Expand Down Expand Up @@ -162,11 +162,14 @@ describe('mip-img', function () {

it('should popup and close the popup', async () => {
let mipImg = document.createElement('mip-img')
let carou = document.createElement('mip-carousel')
mipImg.setAttribute('width', '100px')
mipImg.setAttribute('height', '100px')
mipImg.setAttribute('src', 'http://boscdn.bpc.baidu.com/assets/mipengine/wide.jpg')
mipImg.setAttribute('src', 'https://boscdn.baidu.com/assets/mipengine/wide.jpg')
mipImg.setAttribute('popup', 'true')
mipImgWrapper.appendChild(mipImg)
// carousel for triggering open-popup and close-popup event
carou.appendChild(mipImg)
mipImgWrapper.appendChild(carou)

mipImg.viewportCallback(true)

Expand All @@ -185,14 +188,14 @@ describe('mip-img', function () {
expect(mipPopWrap.querySelector('.mip-img-popUp-bg')).to.be.exist
let carousel = mipPopWrap.querySelector('mip-carousel')
expect(carousel).to.be.exist
expect(carousel.getAttribute('index')).to.equal('1')

// 等待 carousel 生成
await waitForChild(carousel, carousel => carousel.querySelector('.mip-carousel-wrapper'))
mipPopWrap.dispatchEvent(evt)
// 等待 popup 完全关闭
await timer.sleep(500)
expect(mipPopWrap.style.display).to.equal('none')
mipImgWrapper.removeChild(carou)
}).timeout(4000)
it('should not popup if the image is not loaded', async () => {
mipImgWrapper.innerHTML = `<mip-img popup src="https://www.wrong.org?test=1"></mip-img>`
Expand Down Expand Up @@ -316,7 +319,7 @@ describe('mip-img', function () {
it('should work with source tag', async () => {
let mipImg = document.createElement('mip-img')
let source = document.createElement('source')
source.setAttribute('srcset', 'http://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg')
source.setAttribute('srcset', 'https://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg')
mipImg.setAttribute('width', '100px')
mipImg.setAttribute('height', '100px')
mipImg.setAttribute('src', 'https://boscdn.baidu.com/v1/assets/mip/mip2-component-lifecycle.png')
Expand All @@ -329,6 +332,6 @@ describe('mip-img', function () {
let loading = new Promise(resolve => event.listen(img, 'load', resolve))
expect(mipImg.querySelector('picture')).to.be.exist
await loading
expect(img.currentSrc).to.equal('http://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg')
expect(img.currentSrc).to.equal('https://boscdn.baidu.com/v1/assets/mipengine/logo.jpeg')
})
})

0 comments on commit 4812b28

Please sign in to comment.