Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 增加搜索合作页头部广告 #1171

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: 增加搜索合作页头部广告 #1171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
599412a
feat: 增加搜索合作页头部广告
jennyliang220 May 31, 2018
369125c
feat: 减少头部广告插入对用户影响
jennyliang220 Jun 1, 2018
0854675
Merge branch 'master' of https://github.com/mipengine/mip-extensions …
jennyliang220 Jun 13, 2018
967df2b
feat: 增加头部广告样式
jennyliang220 Jun 13, 2018
3cc6fa5
Merge branch 'master' of https://github.com/mipengine/mip-extensions …
jennyliang220 Jun 20, 2018
a8872e0
feat: 增加css
jennyliang220 Jun 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 55 additions & 38 deletions src/mip-custom/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -81,7 +68,7 @@ define(function (require) {
fixedParent.classList.add('mip-custom-transit-end');
}, 0);
}

// 结果页打开, 移动到 fixed layer
if (fixedElement._fixedLayer) {
fixedElement.setFixedElement([fixedParent], true);
Expand All @@ -102,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);
Expand All @@ -115,7 +101,6 @@ define(function (require) {
node.innerHTML += innerhtml;
}
});

container.appendChild(node);
}

Expand Down Expand Up @@ -146,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(' ');

Expand All @@ -171,11 +155,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;
Expand All @@ -192,26 +176,31 @@ 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.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') {
// 头部广告作为第一个元素插入在body顶部
// data.ratio: 数据中用于表示banner宽高比的
var height = viewport.getWidth() / parseInt(data.ratio);
insertTopAd({"element": res.element, "height": height});
}
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);
}
}
}
});

return customTag;
}

Expand Down Expand Up @@ -291,7 +280,6 @@ define(function (require) {
});
}


/**
* [getConfigScriptElement 获取页面配置的content内容]
* 不在此做解析
Expand All @@ -301,7 +289,7 @@ define(function (require) {
*/
function getConfigScriptElement(elem) {
if (!elem) {
return;
return;
}
return elem.querySelector('script[type="application/json"]');
}
Expand Down Expand Up @@ -329,14 +317,43 @@ 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);
}

// 插入头部广告位。
// 当用户未滚动时，滑动插入到页面顶部，将页面其他内容顶下来。
// 当用户已经滚动页面时，为不打扰用户，静默插入页面顶部，并保持页面区域内容稳定。
function insertTopAd(opt) {
// 广告插入头部位置, 由于高度未知，布局需要手动写
util.css(opt.element, {
height: opt.height + 'px',
display: 'block',
overflow: 'hidden'
});
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,
Expand Down
14 changes: 6 additions & 8 deletions src/mip-custom/mip-custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@
*/

define(function () {

// rquire tools
// require tools
var util = require('util');
var viewer = require('viewer');

Expand All @@ -29,7 +28,6 @@ define(function () {

/**
* build钩子，触发渲染
*
*/
customElement.prototype.build = function () {
var me = this;
Expand Down Expand Up @@ -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);
}
};
Expand Down Expand Up @@ -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];
Expand Down
29 changes: 6 additions & 23 deletions src/mip-custom/mip-custom.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,11 @@ 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;
}*/
-webkit-transform-origin: left;
&.text2 {
transform: scaleX(0.8);
/* -webkit-animation: loading-text-ani2 .6s infinite alternate;
animation: loading-text-ani2 .6s infinite alternate;
*/ }
-webkit-transform: scaleX(0.8);
}
&.text3 {
width: 70px;
margin-top: 12px;
Expand All @@ -74,30 +70,17 @@ 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-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);
}
}
Expand Down