From 599412ab69388d7e377bd57eaa54a7e4f8765d88 Mon Sep 17 00:00:00 2001 From: jennyliang220 Date: Thu, 31 May 2018 21:24:30 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=E5=90=88=E4=BD=9C=E9=A1=B5=E5=A4=B4=E9=83=A8=E5=B9=BF?= =?UTF-8?q?=E5=91=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-custom/dom.js | 45 +++++++++++++++++++++++----------- src/mip-custom/mip-custom.js | 14 +++++------ src/mip-custom/mip-custom.less | 24 +----------------- 3 files changed, 38 insertions(+), 45 deletions(-) diff --git a/src/mip-custom/dom.js b/src/mip-custom/dom.js index 3a84d8a64..afc681f38 100644 --- a/src/mip-custom/dom.js +++ b/src/mip-custom/dom.js @@ -81,7 +81,7 @@ define(function (require) { fixedParent.classList.add('mip-custom-transit-end'); }, 0); } - + // 结果页打开, 移动到 fixed layer if (fixedElement._fixedLayer) { fixedElement.setFixedElement([fixedParent], true); @@ -197,17 +197,34 @@ define(function (require) { } // 模板渲染 templates.render(customNode, result, true).then(function (res) { + // 将渲染后的html片段插入外层组件模板 res.element.innerHTML = res.html; - - if (res.element.hasAttribute('mip-fixed') - && res.element.parentNode.getAttribute('type') === 'bottom') { - fixedElement.setPlaceholder(); - var zIndex = getCss(res.element.parentNode, 'z-index'); - - if (zIndex >= maxzIndex) { - maxzIndex = zIndex; - // alert(getCss(res.element, 'height') - 10) - fixedElement.setPlaceholder(getCss(res.element, 'height') - excr); + if (res.element.getAttribute('mip-position') === 'top') { + var height = result.height; + // 头部广告作为第一个元素插入在body顶部，以动画效果出现 + util.css(res.element, { + 'margin-top': '-' + height + 'px' + }); + document.body.prepend(res.element); + + // body 动画下移 + var currentPaddingTop = getComputedStyle(document.body).paddingTop.replace('px', ''); + util.css(document.body, { + 'padding-top': currentPaddingTop + height + 'px', + 'transition': 'padding-top .3s' + }); + } + else { + // 渲染底部悬浮按钮 + if (res.element.hasAttribute('mip-fixed') + && res.element.parentNode.getAttribute('type') === 'bottom') { + fixedElement.setPlaceholder(); + var zIndex = getCss(res.element.parentNode, 'z-index'); + + if (zIndex >= maxzIndex) { + maxzIndex = zIndex; + fixedElement.setPlaceholder(getCss(res.element, 'height') - excr); + } } } }); @@ -301,7 +318,7 @@ define(function (require) { */ function getConfigScriptElement(elem) { if (!elem) { - return; + return; } return elem.querySelector('script[type="application/json"]'); } @@ -329,10 +346,10 @@ define(function (require) { var me = this; this.placeholder.classList.add('fadeout'); // 占位符增加淡出效果 - this.placeholder.addEventListener("transitionend", function() { + this.placeholder.addEventListener('transitionend', function () { me.placeholder.remove(); }, false); - this.placeholder.addEventListener("webkitTransitionend", function() { + this.placeholder.addEventListener('webkitTransitionend', function () { me.placeholder.remove(); }, false); } diff --git a/src/mip-custom/mip-custom.js b/src/mip-custom/mip-custom.js index 326e50cff..789ce2f8e 100644 --- a/src/mip-custom/mip-custom.js +++ b/src/mip-custom/mip-custom.js @@ -4,8 +4,7 @@ */ define(function () { - - // rquire tools + // require tools var util = require('util'); var viewer = require('viewer'); @@ -29,7 +28,6 @@ define(function () { /** * build钩子，触发渲染 - * */ customElement.prototype.build = function () { var me = this; @@ -77,11 +75,12 @@ define(function () { var templateData = me.getMatchData(me.element, queue && queue.tempData); if (templateData && templateData.template.length > 0) { me.render(templateData, me.element); - } else { + } + else { me.pushQueue(me.element); } - - } else { + } + else { me.fetchData(me.commonUrl, me.render.bind(me), me.element); } }; @@ -185,11 +184,10 @@ define(function () { commonData = data.common; } - // 模板数据缓存 + // 渲染B区广告，模板数据缓存 if (data.template) { template = data.template; } - for (var i = 0; i < template.length; i++) { var tplData = template[i]; diff --git a/src/mip-custom/mip-custom.less b/src/mip-custom/mip-custom.less index e1a7daf74..1706a4969 100644 --- a/src/mip-custom/mip-custom.less +++ b/src/mip-custom/mip-custom.less @@ -56,15 +56,9 @@ mip-custom { margin-bottom: 8px; background: #f3f3f3; transform-origin: left; -/* &.text1 { - -webkit-animation: loading-text-ani1 .6s infinite alternate; - animation: loading-text-ani1 .6s infinite alternate; - }*/ &.text2 { transform: scaleX(0.8); -/* -webkit-animation: loading-text-ani2 .6s infinite alternate; - animation: loading-text-ani2 .6s infinite alternate; -*/ } + } &.text3 { width: 70px; margin-top: 12px; @@ -74,22 +68,6 @@ mip-custom { } } } -/*@-webkit-keyframes loading-text-ani1 { - from { - transform: scaleX(1); - } - to { - transform: scaleX(0.9); - } -} -@-webkit-keyframes loading-text-ani2 { - from { - transform: scaleX(0.4); - } - to { - transform: scaleX(0.7); - } -}*/ .mip-custom { &-transit { From 369125cbfc143c2589916767eaa75d4fa95f44c4 Mon Sep 17 00:00:00 2001 From: jennyliang220 Date: Fri, 1 Jun 2018 16:03:44 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=87=8F=E5=B0=91=E5=A4=B4?= =?UTF-8?q?=E9=83=A8=E5=B9=BF=E5=91=8A=E6=8F=92=E5=85=A5=E5=AF=B9=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E5=BD=B1=E5=93=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-custom/dom.js | 63 +++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 33 deletions(-) diff --git a/src/mip-custom/dom.js b/src/mip-custom/dom.js index afc681f38..90389af87 100644 --- a/src/mip-custom/dom.js +++ b/src/mip-custom/dom.js @@ -4,22 +4,9 @@ */ define(function (require) { - /** - * [util 引入工具类] - * @type {Object} - */ var util = require('util'); - - /** - * [templates 模板库] - * @type {Object} - */ + var viewport = require('viewport'); var templates = require('templates'); - - /** - * [fixedElement 引入 fixed 元素类] - * @type {Object} - */ var fixedElement = require('fixed-element'); var log = require('mip-custom/log'); @@ -171,11 +158,11 @@ define(function (require) { * @param {DOM} element mip-custom 节点 * @param {string} str 返回的 tpl 字符串 * @param {integer} len 模块中第几个组件 - * @param {Object} result 渲染mustache模板的数据 + * @param {Object} data 渲染mustache模板的数据 * @param {DOM} container 装载定制化组件节点的容器 * @return {string} customTag 定制化组件标签 */ - function renderHtml(element, str, len, result, container) { + function renderHtml(element, str, len, data, container) { var html = str.replace(regexs.script, '').replace(regexs.style, ''); var customTag = (new RegExp(regexs.tag, 'g')).exec(html); customTag = customTag && customTag[1] ? customTag[1] : null; @@ -192,27 +179,14 @@ define(function (require) { container.appendChild(itemNode); if (customNode.hasAttribute('mip-fixed')) { - moveToFixedLayer(element, customNode, container); } - // 模板渲染 - templates.render(customNode, result, true).then(function (res) { + templates.render(customNode, data, true).then(function (res) { // 将渲染后的html片段插入外层组件模板 res.element.innerHTML = res.html; if (res.element.getAttribute('mip-position') === 'top') { - var height = result.height; - // 头部广告作为第一个元素插入在body顶部，以动画效果出现 - util.css(res.element, { - 'margin-top': '-' + height + 'px' - }); - document.body.prepend(res.element); - - // body 动画下移 - var currentPaddingTop = getComputedStyle(document.body).paddingTop.replace('px', ''); - util.css(document.body, { - 'padding-top': currentPaddingTop + height + 'px', - 'transition': 'padding-top .3s' - }); + // 头部广告作为第一个元素插入在body顶部 + insertTopAd({element: res.element, height: parseInt(data.height)}); } else { // 渲染底部悬浮按钮 @@ -308,7 +282,6 @@ define(function (require) { }); } - /** * [getConfigScriptElement 获取页面配置的content内容] * 不在此做解析 @@ -354,6 +327,30 @@ define(function (require) { }, false); } + // 插入头部广告位。 + // 当用户未滚动时，滑动插入到页面顶部，将页面其他内容顶下来。 + // 当用户已经滚动页面时，为不打扰用户，静默插入页面顶部，并保持页面区域内容稳定。 + function insertTopAd(opt) { + // 广告插入头部位置 + document.body.prepend(opt.element); + // 页面当前滚动距离 + var scrollDistance = viewport.getScrollTop(); + if (scrollDistance > 0) { + // 用户已经滚动页面时，为不打扰用户，静默插入页面顶部，并保持页面区域内容稳定。 + viewport.setScrollTop(scrollDistance + opt.height); + } + else { + // 用户未滚动时，滑动插入到页面顶部，将页面其他内容顶下来。 + var currentPaddingTop = getComputedStyle(document.body).paddingTop.replace('px', ''); + util.css(document.body, { + 'padding-top': currentPaddingTop + opt.height + 'px', + 'transition': 'padding-top .3s' + }); + util.css(opt.element, { + 'margin-top': '-' + opt.height + 'px' + }); + } + } return { render: render, From 967df2b9c2e7339cb3a25359d1eb42b1c3b2d59d Mon Sep 17 00:00:00 2001 From: jennyliang220 Date: Wed, 13 Jun 2018 17:02:51 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=A4=B4?= =?UTF-8?q?=E9=83=A8=E5=B9=BF=E5=91=8A=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-custom/dom.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/mip-custom/dom.js b/src/mip-custom/dom.js index 90389af87..c4764d1f9 100644 --- a/src/mip-custom/dom.js +++ b/src/mip-custom/dom.js @@ -89,7 +89,6 @@ define(function (require) { * @param {DOM} container style/script 节点的容器 */ function renderStyleOrScript(str, reg, tag, attr, container) { - var node = container.querySelector(tag + '[' + attr + ']') || document.createElement(tag); node.setAttribute(attr, ''); var substrs = str.match(reg); @@ -102,7 +101,6 @@ define(function (require) { node.innerHTML += innerhtml; } }); - container.appendChild(node); } @@ -133,7 +131,6 @@ define(function (require) { * @return {DOM} node 定制化组件节点 */ function createCustomNode(html, customTag) { - var node = document.createElement(customTag); var tagandAttrs = dataProcessor.subStr(html, regexs.tagandAttr).split(' '); @@ -186,7 +183,9 @@ define(function (require) { res.element.innerHTML = res.html; if (res.element.getAttribute('mip-position') === 'top') { // 头部广告作为第一个元素插入在body顶部 - insertTopAd({element: res.element, height: parseInt(data.height)}); + // data.ratio: 数据中用于表示banner宽高比的 + var height = viewport.getWidth() / parseInt(data.ratio); + insertTopAd({"element": res.element, "height": height}); } else { // 渲染底部悬浮按钮 @@ -202,7 +201,6 @@ define(function (require) { } } }); - return customTag; } @@ -331,7 +329,12 @@ define(function (require) { // 当用户未滚动时，滑动插入到页面顶部，将页面其他内容顶下来。 // 当用户已经滚动页面时，为不打扰用户，静默插入页面顶部，并保持页面区域内容稳定。 function insertTopAd(opt) { - // 广告插入头部位置 + // 广告插入头部位置, 由于高度未知，布局需要手动写 + util.css(opt.element, { + height: opt.height + 'px', + display: 'block', + overflow: 'hidden' + }); document.body.prepend(opt.element); // 页面当前滚动距离 var scrollDistance = viewport.getScrollTop(); From a8872e0be7b084e2388b980555ded11629d598f6 Mon Sep 17 00:00:00 2001 From: jennyliang220 Date: Wed, 20 Jun 2018 13:34:33 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mip-custom/mip-custom.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/mip-custom/mip-custom.less b/src/mip-custom/mip-custom.less index 1706a4969..c42825324 100644 --- a/src/mip-custom/mip-custom.less +++ b/src/mip-custom/mip-custom.less @@ -56,8 +56,10 @@ mip-custom { margin-bottom: 8px; background: #f3f3f3; transform-origin: left; + -webkit-transform-origin: left; &.text2 { transform: scaleX(0.8); + -webkit-transform: scaleX(0.8); } &.text3 { width: 70px; @@ -72,10 +74,13 @@ mip-custom { .mip-custom { &-transit { &-from-bottom { + -webkit-transform: translate3d(0, 100%, 0); + -webkit-transition: -webkit-transform .3s; transform: translate3d(0, 100%, 0); transition: transform .3s; } &-end { + -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } }