diff --git a/src/mip-showmore/mip-showmore.js b/src/mip-showmore/mip-showmore.js index 873b5db91..870559223 100755 --- a/src/mip-showmore/mip-showmore.js +++ b/src/mip-showmore/mip-showmore.js @@ -4,601 +4,608 @@ * @time 2017-7 */ -define(function (require) { - var customElement = require('customElement').create(); - var util = require('util'); - var viewport = require('viewport'); - var timeoutArray = []; - var increaseId = 0; - - var ShowmoreInstance = {}; - - // 匹配节点是否在按钮中 - function matchOriginTarget (id, node) { - while (node.parentNode) { - var attr = node.getAttribute('on'); - // 兼容click - if (attr && new RegExp('^(tap|click):'+id).test(attr)) { - return node; - } - node = node.parentNode; - } +define(function(require) { + var customElement = require('customElement').create(); + var util = require('util'); + var viewport = require('viewport'); + var timeoutArray = []; + var increaseId = 0; + + var ShowmoreInstance = {}; + + // 匹配节点是否在按钮中 + function matchOriginTarget(id, node) { + while (node.parentNode) { + var attr = node.getAttribute('on'); + // 兼容click + if (attr && new RegExp('^(tap|click):' + id).test(attr)) { return node; + } + node = node.parentNode; } + return node; + } + + /** + * define a showmore class based on + * + * @class Showmore + * @param {Object} ele dom element + */ + var Showmore = function(ele) { + this.ele = ele; + // 获取点击按钮，v1.0.0 方法 + this.clickBtn = ele.querySelector('[showmorebtn]'); + this.clickBtnSpan = this.clickBtn && this.clickBtn.querySelector( + '.mip-showmore-btnshow'); + // 获取内容显示框，v1.0.0 方法 + this.showBox = this.ele.querySelector('[showmorebox]'); + // 获取动画时间, 默认为0.24，兼容0的写法 + this.animateTime = this.ele.getAttribute('animatetime'); + if (this.animateTime === null || isNaN(this.animateTime)) { + // if transition time is not set, set into 0.24s + this.animateTime = 0.24; + } + // 折叠高度类型 + this.heightType = ['HEIGHTSCREEN', 'HEIGHT', 'LENGTH']; + // 对应的收起按钮，因收起按钮可能不在 showmore组件中，故使用 document.querySelector 全局选择 + this.btn = document.querySelector('div[on="tap:' + this.ele.id + + '.toggle"]') || document.querySelector('div[on="click:' + this.ele + .id + '.toggle"]'); + this.eleid = ele.id; + + // 是否含有mip-showmore子元素 + this.containSMChild = false; + + // 是否初使化 + this.initialized = false; + + // 获取内容显示框，v1.1.0 方法 + if (!this.showBox) { + this.showBox = this.ele; + } + }; - /** - * define a showmore class based on - * - * @class Showmore - * @param {Object} ele dom element - */ - var Showmore = function (ele) { - this.ele = ele; - // 获取点击按钮，v1.0.0 方法 - this.clickBtn = ele.querySelector('[showmorebtn]'); - this.clickBtnSpan = this.clickBtn && this.clickBtn.querySelector('.mip-showmore-btnshow'); - // 获取内容显示框，v1.0.0 方法 - this.showBox = this.ele.querySelector('[showmorebox]'); - // 获取动画时间, 默认为0.24，兼容0的写法 - this.animateTime = this.ele.getAttribute('animatetime'); - if (this.animateTime === null || isNaN(this.animateTime)) { - // if transition time is not set, set into 0.24s - this.animateTime = 0.24; - } - // 折叠高度类型 - this.heightType = ['HEIGHTSCREEN', 'HEIGHT', 'LENGTH']; - // 对应的收起按钮，因收起按钮可能不在 showmore组件中，故使用 document.querySelector 全局选择 - this.btn = document.querySelector('div[on="tap:' + this.ele.id + '.toggle"]') || document.querySelector('div[on="click:' + this.ele.id + '.toggle"]'); - this.eleid = ele.id; - - // 是否含有mip-showmore子元素 - this.containSMChild = false; - - // 是否初使化 - this.initialized = false; - - // 获取内容显示框，v1.1.0 方法 - if (!this.showBox) { - this.showBox = this.ele; - } - }; - - Showmore.prototype.init = function (deps) { - // 如果动画不是数字 - if (isNaN(this.animateTime)) { - return; - } + Showmore.prototype.init = function(deps) { + // 如果动画不是数字 + if (isNaN(this.animateTime)) { + return; + } - // console.log(this.ele.id) - // 获取高度阈值 - this.maxHeight = this.ele.getAttribute('maxheight'); - // 获取字数阈值 - this.maxLen = this.ele.getAttribute('maxlen'); - // 获取是否需要bottom渐变 - this.bottomShadow = this.ele.getAttribute('bottomshadow') === '1'; - // 弹性高度，判断高度阈值时会增加此弹性 - this.bufferHeight = this.ele.getAttribute('bufferheight'); - this.bufferHeight = +this.bufferHeight ? +this.bufferHeight : 0; - // 渐变className - this.bottomShadowClassName = 'linear-gradient'; - // 处理阈值高度(高度优先于字体长度,不允许两个同时存在) - if (this.maxHeight && isNaN(this.maxHeight)) { - var maxHeightArr = this.maxHeight.split(':'); - var key; - var value; - if (maxHeightArr.length > 1) { - key = maxHeightArr[0].trim(); - value = maxHeightArr[1].trim(); - - switch (key) { - case 'screen': - this.showType = this.heightType[0]; - this.maxHeight = viewport.getHeight() * value; - this._initHeight(); - break; - case 'heightpx': - this.showType = this.heightType[1]; - this._initHeight(); - break; - default: - break; - } - } - } - else if (this.maxHeight && !isNaN(this.maxHeight)) { - this.showType = this.heightType[1]; + // console.log(this.ele.id) + // 获取高度阈值 + this.maxHeight = this.ele.getAttribute('maxheight'); + // 获取字数阈值 + this.maxLen = this.ele.getAttribute('maxlen'); + // 获取是否需要bottom渐变 + this.bottomShadow = this.ele.getAttribute('bottomshadow') === '1'; + // 弹性高度，判断高度阈值时会增加此弹性 + this.bufferHeight = this.ele.getAttribute('bufferheight'); + this.bufferHeight = +this.bufferHeight ? +this.bufferHeight : 0; + // 渐变className + this.bottomShadowClassName = 'linear-gradient'; + // 处理阈值高度(高度优先于字体长度,不允许两个同时存在) + if (this.maxHeight && isNaN(this.maxHeight)) { + var maxHeightArr = this.maxHeight.split(':'); + var key; + var value; + if (maxHeightArr.length > 1) { + key = maxHeightArr[0].trim(); + value = maxHeightArr[1].trim(); + + switch (key) { + case 'screen': + this.showType = this.heightType[0]; + this.maxHeight = viewport.getHeight() * value; this._initHeight(); - } - else if (this.maxLen && !isNaN(this.maxLen)) { - this.showType = this.heightType[2]; - this._initTextLength(); - } - else { - this.maxHeight = 0; + break; + case 'heightpx': + this.showType = this.heightType[1]; this._initHeight(); + break; + default: + break; } + } + } else if (this.maxHeight && !isNaN(this.maxHeight)) { + this.showType = this.heightType[1]; + this._initHeight(); + } else if (this.maxLen && !isNaN(this.maxLen)) { + this.showType = this.heightType[2]; + + this._initTextLength(); + } else { + this.maxHeight = 0; + this._initHeight(); + } - - - // 避免初始加载闪现 - util.css(this.ele, { - visibility: 'visible' - }); - this.runInitShowMore(); - this.initialized = true; - // 保存点击按钮当前display状态，兼容v1.0.0和v1.1.0 - var display = this.clickBtnSpan && getComputedStyle(this.clickBtnSpan).display; - var displayNew = this.btn && getComputedStyle(this.btn).display - this.btn && this.btn.style && (this.btn.style.cursor = 'pointer'); - this.btnDisplay = displayNew || display; - }; + // 避免初始加载闪现 + util.css(this.ele, { + visibility: 'visible' + }); + this.runInitShowMore(); + + this.initialized = true; + + // 保存点击按钮当前display状态，兼容v1.0.0和v1.1.0 + var display = this.clickBtnSpan && getComputedStyle(this.clickBtnSpan) + .display; + var displayNew = this.btn && getComputedStyle(this.btn).display + this.btn && this.btn.style && (this.btn.style.cursor = 'pointer'); + this.btnDisplay = displayNew || display; + }; + + // 改变按钮的样式值 - showmore改为隐藏状态, 按钮为“收起” + Showmore.prototype.changeBtnStyle = function(type) { + // v1.0.0显示更多按钮 + var showMoreBtn = this.ele.querySelector('.mip-showmore-btnshow'); + var showMoreBtnHide = this.ele.querySelector('.mip-showmore-btnhide'); + + // v1.1.0选中 showmore的div + var showMoreBtn2 = this.btn || showMoreBtn; + if (type === 'fold') { + util.css(showMoreBtn2, 'display', 'inline-block'); + showMoreBtnHide && util.css(showMoreBtnHide, 'display', 'none'); + // 处理bottom渐变 + this.bottomShadow && this.showBox.classList.add(this.bottomShadowClassName); + } else if ((type === 'unfold')) { + util.css(showMoreBtn2, 'display', 'none'); + // showMoreBtnHide && util.css(showMoreBtnHide, 'display', 'inline-block'); + + // 处理bottom渐变 + this.bottomShadow && this.showBox.classList.remove(this.bottomShadowClassName); + } + }; + + Showmore.prototype._initHeight = function() { + // 获取页面元素高度 + var height; + if (this.showBox.style.height && this.showBox.style.height.match('px')) { + height = getHeightUnfold(this.showBox); + } else { + height = util.rect.getElementOffset(this.showBox).height; + } + // 如果高度大于阈值 + if (height > (+this.maxHeight) + this.bufferHeight) { + util.css(this.showBox, { + 'height': this.maxHeight + 'px', + 'overflow': 'hidden' + }); + // 改变按钮的样式值 - 改为隐藏状态 + this.changeBtnStyle('fold'); + } else { + util.css(this.showBox, height, 'auto'); + this.changeBtnStyle('unfold'); + } + }; - // 改变按钮的样式值 - showmore改为隐藏状态, 按钮为“收起” - Showmore.prototype.changeBtnStyle = function (type) { - // v1.0.0显示更多按钮 - var showMoreBtn = this.ele.querySelector('.mip-showmore-btnshow'); - var showMoreBtnHide = this.ele.querySelector('.mip-showmore-btnhide'); - - // v1.1.0选中 showmore的div - var showMoreBtn2 = this.btn || showMoreBtn; - if (type === 'fold') { - util.css(showMoreBtn2, 'display', 'inline-block'); - showMoreBtnHide && util.css(showMoreBtnHide, 'display', 'none'); - // 处理bottom渐变 - this.bottomShadow && this.showBox.classList.add(this.bottomShadowClassName); - } else if ((type === 'unfold')) { - util.css(showMoreBtn2, 'display', 'none'); - // showMoreBtnHide && util.css(showMoreBtnHide, 'display', 'inline-block'); - - // 处理bottom渐变 - this.bottomShadow && this.showBox.classList.remove(this.bottomShadowClassName); - } - }; + // 字数控制 + Showmore.prototype._initTextLength = function() { + // 防止重复初始化 + if (this.oriDiv) { + return + } + // 存储原始html文字 & NODE + var originalHtml = this.showBox.innerHTML; + + // 获取剪切后的字符串 + var cutOffText = this._cutHtmlStr(this.maxLen); + + // 如果长度大于阈值，复制修改前内容到.mip-showmore-originText, + // 剪切后的内容保存在.mip-showmore-abstract，未来修改内容， + // 只需要针对这两个DOM做展示/隐藏处理 + if (originalHtml.length !== cutOffText.length) { + // 改变按钮的样式值 - 改为隐藏状态 + this.changeBtnStyle('fold'); + + // 清除被_cutHtmlStr处理之后的原始内容 + this.showBox.innerHTML = ''; + // 保存剪切前 dom，插入文档 + this.oriDiv = document.createElement('div'); + this.oriDiv.setAttribute('class', + 'mip-showmore-originText mip-showmore-nodisplay'); + this.oriDiv.innerHTML = originalHtml; + this.showBox.appendChild(this.oriDiv); + + // 创建剪切后 dom, 插入文档 + this.cutDiv = document.createElement('div'); + this.cutDiv.setAttribute('class', 'mip-showmore-abstract'); + this.cutDiv.innerHTML = '

' + cutOffText + '...' + '

'; + this.showBox.appendChild(this.cutDiv); + } + }; - Showmore.prototype._initHeight = function () { - // 获取页面元素高度 - var height; - if (this.showBox.style.height && this.showBox.style.height.match('px')) { - height = getHeightUnfold(this.showBox); + // 绑定显示更多按钮 + // XXX: v1.0.0 逻辑，兼容

+ Showmore.prototype._bindClick = function() { + if (!this.clickBtn) { + return; + } + var showmore = this; + this.clickBtn.addEventListener('click', function() { + showmore.toggle.apply(showmore); + }, false); + + }; + // 点击时按钮添加class + Showmore.prototype.addClassWhenUnfold = function() { + var btnShowmore = this.btn; + btnShowmore ? btnShowmore.classList.add('mip-showmore-btn-hide') : ''; + }; + // 高度阈值控制 + Showmore.prototype.toggle = function(event) { + var me = this; + var classList = this.ele.classList; + var clickBtn = event && event.target ? matchOriginTarget(this.ele.id.trim(), + event.target) : null; + var opt = {}; + opt.aniTime = this.animateTime; + if (this.showType === this.heightType[2]) { + // 高度限制 + opt.oriHeight = util.rect.getElementOffset(this.showBox).height + + 'px'; + var originDom = this.oriDiv; + var cutDom = this.cutDiv; + + if (classList.contains('mip-showmore-boxshow')) { + // 隐藏超出字数的内容 + originDom.classList.add('mip-showmore-nodisplay'); + cutDom.classList.remove('mip-showmore-nodisplay'); + opt.tarHeight = util.rect.getElementOffset(this.showBox).height + + 'px'; + originDom.classList.remove('mip-showmore-nodisplay'); + cutDom.classList.add('mip-showmore-nodisplay'); + this.bottomShadow && this.showBox.classList.add(this.bottomShadowClassName); + opt.type = 'fold'; + opt.cbFun = function(showmore) { + showmore._toggleClickBtn(clickBtn, 'showOpen'); + classList.remove('mip-showmore-boxshow'); + originDom.classList.add('mip-showmore-nodisplay'); + cutDom.classList.remove('mip-showmore-nodisplay'); + }.bind(undefined, this); + } else { + // 显示超出字数的内容 + this.bottomShadow && this.showBox.classList.remove(this.bottomShadowClassName); + opt.type = 'unfold'; + originDom.classList.remove('mip-showmore-nodisplay'); + cutDom.classList.add('mip-showmore-nodisplay'); + opt.tarHeight = getHeightUnfold(this.showBox) + 'px'; + this.showBox.style.height = this.maxHeight + 'px'; + opt.cbFun = function(showmore) { + showmore._toggleClickBtn(clickBtn, 'showClose'); + classList.add('mip-showmore-boxshow'); + me.addClassWhenUnfold(); + }.bind(undefined, this); + } + } else if (this.showType === this.heightType[1] || this.showType === + this.heightType[0]) { + if (classList.contains('mip-showmore-boxshow')) { + this.bottomShadow && this.showBox.classList.add(this.bottomShadowClassName); + // 隐藏超出高度的内容 + classList.remove('mip-showmore-boxshow'); + opt.type = 'fold'; + opt.tarHeight = this.maxHeight + 'px'; + opt.cbFun = function(showmore, clickBtn) { + showmore._toggleClickBtn(clickBtn, 'showOpen'); + }.bind(undefined, this, clickBtn); + } else { + // 显示超出高度的内容 + this.bottomShadow && this.showBox.classList.remove(this.bottomShadowClassName); + classList.add('mip-showmore-boxshow'); + opt.type = 'unfold'; + opt.cbFun = function(showmore, clickBtn) { + showmore._toggleClickBtn(clickBtn, 'showClose'); + showmore.ele.style.height = 'auto'; + me.addClassWhenUnfold(); + }.bind(undefined, this, clickBtn); + } + } + heightAni({ + ele: this.showBox, + type: opt.type, + transitionTime: opt.aniTime, + tarHeight: opt.tarHeight, + oriHeight: opt.oriHeight, + cbFun: opt.cbFun + }); + }; + + Showmore.prototype._toggleClickBtn = function(clickBtn, status) { + if (!status) { + return; + } + var closeclass; + if (clickBtn && clickBtn.dataset && clickBtn.dataset.closeclass) { + closeclass = clickBtn.dataset.closeclass; + } + if (status === 'showOpen') { + // v1.1.0 显示“展开”按钮 + if (clickBtn) { + if (closeclass) { + clickBtn.classList.remove(closeclass); } else { - height = util.rect.getElementOffset(this.showBox).height; + clickBtn.innerText = clickBtn.dataset.opentext; } - // 如果高度大于阈值 - if (height > (+this.maxHeight) + this.bufferHeight) { - util.css(this.showBox, { - 'height': this.maxHeight + 'px', - 'overflow': 'hidden' - }); - // 改变按钮的样式值 - 改为隐藏状态 - this.changeBtnStyle('fold'); + } + // v1.0.0 显示“展开”按钮 + this._changeBtnText({ + display: this.btnDisplay + }, { + display: 'none' + }); + } else { + // v1.1.0显示“收起”按钮 + if (clickBtn) { + if (closeclass) { + clickBtn.classList.add(closeclass); } else { - util.css(this.showBox, height, 'auto'); - this.changeBtnStyle('unfold'); - } - }; - - // 字数控制 - Showmore.prototype._initTextLength = function () { - // 防止重复初始化 - if(this.oriDiv) { - return - } - // 存储原始html文字 & NODE - var originalHtml = this.showBox.innerHTML; - - // 获取剪切后的字符串 - var cutOffText = this._cutHtmlStr(this.maxLen); - - // 如果长度大于阈值，复制修改前内容到.mip-showmore-originText, - // 剪切后的内容保存在.mip-showmore-abstract，未来修改内容， - // 只需要针对这两个DOM做展示/隐藏处理 - if (originalHtml.length !== cutOffText.length) { - // 改变按钮的样式值 - 改为隐藏状态 - this.changeBtnStyle('fold'); - - // 清除被_cutHtmlStr处理之后的原始内容 - this.showBox.innerHTML = ''; - // 保存剪切前 dom，插入文档 - this.oriDiv = document.createElement('div'); - this.oriDiv.setAttribute('class', 'mip-showmore-originText mip-showmore-nodisplay'); - this.oriDiv.innerHTML = originalHtml; - this.showBox.appendChild(this.oriDiv); - - // 创建剪切后 dom, 插入文档 - this.cutDiv = document.createElement('div'); - this.cutDiv.setAttribute('class', 'mip-showmore-abstract'); - this.cutDiv.innerHTML = '

' + cutOffText + '...' + '

'; - this.showBox.appendChild(this.cutDiv); - } - }; - - // 绑定显示更多按钮 - // XXX: v1.0.0 逻辑，兼容

- Showmore.prototype._bindClick = function () { - if (!this.clickBtn) { - return; - } - var showmore = this; - this.clickBtn.addEventListener('click', function () { - showmore.toggle.apply(showmore); - }, false); - - }; - // 点击时按钮添加class - Showmore.prototype.addClassWhenUnfold = function () { - var btnShowmore = this.btn; - btnShowmore ? btnShowmore.classList.add('mip-showmore-btn-hide') : ''; - }; - // 高度阈值控制 - Showmore.prototype.toggle = function (event) { - var me = this; - var classList = this.ele.classList; - var clickBtn = event && event.target - ? matchOriginTarget(this.ele.id.trim(), event.target) - : null; - var opt = {}; - opt.aniTime = this.animateTime; - if (this.showType === this.heightType[2]) { - // 高度限制 - opt.oriHeight = util.rect.getElementOffset(this.showBox).height + 'px'; - var originDom = this.oriDiv; - var cutDom = this.cutDiv; - - if (classList.contains('mip-showmore-boxshow')) { - // 隐藏超出字数的内容 - originDom.classList.add('mip-showmore-nodisplay'); - cutDom.classList.remove('mip-showmore-nodisplay'); - opt.tarHeight = util.rect.getElementOffset(this.showBox).height + 'px'; - originDom.classList.remove('mip-showmore-nodisplay'); - cutDom.classList.add('mip-showmore-nodisplay'); - this.bottomShadow && this.showBox.classList.add(this.bottomShadowClassName); - opt.type = 'fold'; - opt.cbFun = function (showmore) { - showmore._toggleClickBtn(clickBtn, 'showOpen'); - classList.remove('mip-showmore-boxshow'); - originDom.classList.add('mip-showmore-nodisplay'); - cutDom.classList.remove('mip-showmore-nodisplay'); - }.bind(undefined, this); - } - else { - // 显示超出字数的内容 - this.bottomShadow && this.showBox.classList.remove(this.bottomShadowClassName); - opt.type = 'unfold'; - originDom.classList.remove('mip-showmore-nodisplay'); - cutDom.classList.add('mip-showmore-nodisplay'); - opt.tarHeight = getHeightUnfold(this.showBox) + 'px'; - this.showBox.style.height = this.maxHeight + 'px'; - opt.cbFun = function (showmore) { - showmore._toggleClickBtn(clickBtn, 'showClose'); - classList.add('mip-showmore-boxshow'); - me.addClassWhenUnfold(); - }.bind(undefined, this); - } - } - else if (this.showType === this.heightType[1] || this.showType === this.heightType[0]) { - if (classList.contains('mip-showmore-boxshow')) { - this.bottomShadow && this.showBox.classList.add(this.bottomShadowClassName); - // 隐藏超出高度的内容 - classList.remove('mip-showmore-boxshow'); - opt.type = 'fold'; - opt.tarHeight = this.maxHeight + 'px'; - opt.cbFun = function (showmore, clickBtn) { - showmore._toggleClickBtn(clickBtn, 'showOpen'); - }.bind(undefined, this, clickBtn); - } - else { - // 显示超出高度的内容 - this.bottomShadow && this.showBox.classList.remove(this.bottomShadowClassName); - classList.add('mip-showmore-boxshow'); - opt.type = 'unfold'; - opt.cbFun = function (showmore, clickBtn) { - showmore._toggleClickBtn(clickBtn, 'showClose'); - showmore.ele.style.height = 'auto'; - me.addClassWhenUnfold(); - }.bind(undefined, this, clickBtn); - } - } - heightAni({ - ele: this.showBox, - type: opt.type, - transitionTime: opt.aniTime, - tarHeight: opt.tarHeight, - oriHeight: opt.oriHeight, - cbFun: opt.cbFun - }); - }; - - Showmore.prototype._toggleClickBtn = function (clickBtn, status) { - if (!status) { - return; - } - var closeclass; - if (clickBtn && clickBtn.dataset && clickBtn.dataset.closeclass) { - closeclass = clickBtn.dataset.closeclass; - } - if (status === 'showOpen') { - // v1.1.0 显示“展开”按钮 - if (clickBtn) { - if (closeclass) { - clickBtn.classList.remove(closeclass); - } - else { - clickBtn.innerText = clickBtn.dataset.opentext; - } - } - // v1.0.0 显示“展开”按钮 - this._changeBtnText({ - display: this.btnDisplay - }, { - display: 'none' - }); + var opentext = clickBtn.innerText; + clickBtn.innerText = clickBtn.dataset.closetext || '收起'; + clickBtn.dataset.opentext = opentext; } - else { - // v1.1.0显示“收起”按钮 - if (clickBtn) { - if (closeclass) { - clickBtn.classList.add(closeclass); - } - else { - var opentext = clickBtn.innerText; - clickBtn.innerText = clickBtn.dataset.closetext || '收起'; - clickBtn.dataset.opentext = opentext; - } - } - // v1.0.0 显示“收起”按钮 - this._changeBtnText({ - display: 'none' - }, { - display: this.btnDisplay - }); - } - }; - - // 剪切字符串 - Showmore.prototype._cutHtmlStr = function (maxLen) { - var allChildList = this.showBox.childNodes; - var cutHtml = ''; - var tmpNum = 0; - var newNodeList = []; - for (var i = 0; i < allChildList.length; i++) { - var tmpHtml = allChildList[i].textContent.replace(/(^\s*)|(\s*$)/g, ''); - if ((cutHtml.length + tmpHtml.length) <= maxLen) { // 如果长度没有达到最大字数 - cutHtml = cutHtml + tmpHtml; - tmpNum = cutHtml.length; - newNodeList.push(allChildList[i]); - } - else { // 已经大于 - var diffNum = maxLen - tmpNum > 0 ? maxLen - tmpNum : tmpNum - maxLen; - var cutText = tmpHtml ? tmpHtml.slice(0, diffNum) : ''; - allChildList[i].textContent = cutText; - newNodeList.push(allChildList[i]); - break; - } - } - var endHtml = ''; - for (var j = 0; j < newNodeList.length; j++) { - var nodeType = newNodeList[j].nodeType; - if (nodeType === 1) { - endHtml = endHtml + newNodeList[j].outerHTML; - } - else if (nodeType === 3) { - endHtml = endHtml + newNodeList[j].textContent; - } - - } - return endHtml; - }; - - // v1.0.0 按钮文案显示切换 - Showmore.prototype._changeBtnText = function (showBtnObj, hideBtnObj) { - var btnShow = this.ele.querySelector('.mip-showmore-btnshow'); - var btnHide = this.ele.querySelector('.mip-showmore-btnhide'); - this._changeBtnShow(btnShow, showBtnObj); - this._changeBtnShow(btnHide, hideBtnObj); - }; - - // v1.0.0 文案切换显示 - Showmore.prototype._changeBtnShow = function (obj, cssObj) { - util.css(obj, cssObj); - }; - - Showmore.prototype.getId = function(showmore){ - if( !showmore.dataset.showmoreId ){ - showmore.dataset.showmoreId = '__showmoreincreaseId__'+(++increaseId); - } - return showmore.dataset.showmoreId; + } + // v1.0.0 显示“收起”按钮 + this._changeBtnText({ + display: 'none' + }, { + display: this.btnDisplay + }); } + }; + + // 剪切字符串 + Showmore.prototype._cutHtmlStr = function(maxLen) { + var allChildList = this.showBox.childNodes; + var cutHtml = ''; + var tmpNum = 0; + var newNodeList = []; + for (var i = 0; i < allChildList.length; i++) { + var tmpHtml = allChildList[i].textContent.replace(/(^\s*)|(\s*$)/g, + ''); + if ((cutHtml.length + tmpHtml.length) <= maxLen) { // 如果长度没有达到最大字数 + cutHtml = cutHtml + tmpHtml; + tmpNum = cutHtml.length; + newNodeList.push(allChildList[i]); + } else { // 已经大于 + var diffNum = maxLen - tmpNum > 0 ? maxLen - tmpNum : tmpNum - + maxLen; + var cutText = tmpHtml ? tmpHtml.slice(0, diffNum) : ''; + allChildList[i].textContent = cutText; + newNodeList.push(allChildList[i]); + break; + } + } + var endHtml = ''; + for (var j = 0; j < newNodeList.length; j++) { + var nodeType = newNodeList[j].nodeType; + if (nodeType === 1) { + endHtml = endHtml + newNodeList[j].outerHTML; + } else if (nodeType === 3) { + endHtml = endHtml + newNodeList[j].textContent; + } - // 分析组件嵌套关系 - Showmore.prototype.analysisDep = function(){ - var childMipShowmore = this.ele.querySelectorAll('mip-showmore'); - var self = this; - if( !childMipShowmore.length ){ - return - } - var parentId = this.getId(this.ele) - - ShowmoreInstance[parentId] = ShowmoreInstance[parentId] || {deps:[]}; - ShowmoreInstance[parentId].instance = this; - - var currendParentNode = childMipShowmore[0]; - Array.prototype.slice.call(childMipShowmore).forEach(function(child){ - if( currendParentNode !== child && currendParentNode.contains(child) ){ - return; - } - - var id = self.getId(child); - var childIns = ShowmoreInstance[id] || {}; - childIns.deps = (childIns.deps || []).concat([parentId]) - ShowmoreInstance[id] = childIns - - currendParentNode = child; - }); - this.containSMChild = true; - }; + } + return endHtml; + }; + + // v1.0.0 按钮文案显示切换 + Showmore.prototype._changeBtnText = function(showBtnObj, hideBtnObj) { + var btnShow = this.ele.querySelector('.mip-showmore-btnshow'); + var btnHide = this.ele.querySelector('.mip-showmore-btnhide'); + this._changeBtnShow(btnShow, showBtnObj); + this._changeBtnShow(btnHide, hideBtnObj); + }; + + // v1.0.0 文案切换显示 + Showmore.prototype._changeBtnShow = function(obj, cssObj) { + util.css(obj, cssObj); + }; + + Showmore.prototype.getId = function(showmore) { + if (!showmore.dataset.showmoreId) { + showmore.dataset.showmoreId = '__showmoreincreaseId__' + (++ + increaseId); + } + return showmore.dataset.showmoreId; + } + + // 分析组件嵌套关系 + Showmore.prototype.analysisDep = function() { + var childMipShowmore = this.ele.querySelectorAll('mip-showmore'); + var self = this; + if (!childMipShowmore.length) { + return + } + var parentId = this.getId(this.ele) - // 运行嵌套的showmore组件实例 - Showmore.prototype.runInitShowMore = function(){ - var depIds = ShowmoreInstance[this.getId(this.ele)]; - depIds && depIds.deps.forEach(function(depid){ - var instan = ShowmoreInstance[depid]; - instan && instan.instance && !instan.instance.initialized &&instan.instance.init() - }) + ShowmoreInstance[parentId] = ShowmoreInstance[parentId] || { + deps: [] }; - - /** - * Make height transiton for element that has unknown height. - * height transiton from 0px/40px to whatever height element will be. - * - * author&maintainer liangjiaying - * - * @param {Object} opt options - * @example - * { - * "ele": document.getElementById('id1'), // target DOM - * "type": "fold", // "fold" or "unfold" - * "transitionTime": "0.3", // seconds, animation time - * "tarHeight": "140px", // DOM height when animation ends - * "oriHeight": "20px", // DOM height when animation begins - * "cbFun": function() {}.bind() //callback, exec after animation - * } - */ - function heightAni(opt) { - var element = opt.ele; - var type = opt.type; - var transitionTime; - var timeoutArr = timeoutArray || []; - - if (!type || !element) { - return; - } - - if (opt.transitionTime === undefined || isNaN(opt.transitionTime)) { - // if transition time is not set, set into 0.24s - transitionTime = 0.24; - } - else { - // '0.2s' -> 0.2, 20 -> 1, -0.5 -> 0.5 - transitionTime = Math.min(parseFloat(opt.transitionTime), 1); - } - - // use ?: to make sure oriHeight won't be rewrite when opt.oriHeight is set to 0 - var oriHeight = (opt.oriHeight !== undefined ? opt.oriHeight : getComputedStyle(element).height); - var tarHeight; - var cbFun = opt.cbFun || function () {}; - - if (type === 'unfold') { - - // make sure tarHeight won't be rewrite when opt.tarHeight is set to 0 - if (opt.tarHeight !== undefined) { - tarHeight = opt.tarHeight; - } - else { - // before set height to auto, remove animation. - // or bad animation happens in iphone 4s - element.style.transition = 'height 0s'; - element.style.height = 'auto'; - tarHeight = getComputedStyle(element).height; - } - - // set height to auto after transition, - // in case of height change of inside element later. - var timeout1 = setTimeout(function () { - // before set height to auto, remove animation. - // or bad animation happens in iphone 4s - element.style.transition = 'height 0s'; - element.style.height = 'auto'; - }, transitionTime * 1000); - timeoutArr[0] = timeout1; - } - else if (type === 'fold') { - tarHeight = opt.tarHeight || 0; - } - - element.style.height = oriHeight; - element.style.transition = 'height ' + transitionTime + 's'; - - // now start the animation - - var timeout2 = requestAnimationFrame ? (requestAnimationFrame)(function () { - // XXX: in setTimeout, or there won't be any animation - element.style.height = tarHeight; - }) : setTimeout(function(){ - element.style.height = tarHeight; - },10); - // after transition, exec callback functions - var timeout3 = setTimeout(function () { - cbFun(); - }, transitionTime * 1000); - - // save timeout, for later clearTimeout - timeoutArr[element.id] = timeoutArr[element.id] || []; - timeoutArr[element.id][1] = timeout2; - timeoutArr[element.id][2] = timeout3; + ShowmoreInstance[parentId].instance = this; + + var currendParentNode = childMipShowmore[0]; + Array.prototype.slice.call(childMipShowmore).forEach(function(child) { + if (currendParentNode !== child && currendParentNode.contains( + child)) { + return; + } + + var id = self.getId(child); + var childIns = ShowmoreInstance[id] || {}; + childIns.deps = (childIns.deps || []).concat([parentId]) + ShowmoreInstance[id] = childIns + + currendParentNode = child; + }); + this.containSMChild = true; + }; + + // 运行嵌套的showmore组件实例 + Showmore.prototype.runInitShowMore = function() { + var depIds = ShowmoreInstance[this.getId(this.ele)]; + depIds && depIds.deps.forEach(function(depid) { + var instan = ShowmoreInstance[depid]; + instan && instan.instance && !instan.instance.initialized && + instan.instance.init() + }) + }; + + /** + * Make height transiton for element that has unknown height. + * height transiton from 0px/40px to whatever height element will be. + * + * author&maintainer liangjiaying + * + * @param {Object} opt options + * @example + * { + * "ele": document.getElementById('id1'), // target DOM + * "type": "fold", // "fold" or "unfold" + * "transitionTime": "0.3", // seconds, animation time + * "tarHeight": "140px", // DOM height when animation ends + * "oriHeight": "20px", // DOM height when animation begins + * "cbFun": function() {}.bind() //callback, exec after animation + * } + */ + function heightAni(opt) { + var element = opt.ele; + var type = opt.type; + var transitionTime; + var timeoutArr = timeoutArray || []; + + if (!type || !element) { + return; } - /** - * get real height of DOM without height restrictions - * - * @param {Object} dom some dom - * @return {number} height - */ - function getHeightUnfold (dom) { - var fakeNode = document.createElement('div'); - var style = getComputedStyle(dom); - fakeNode.innerHTML = dom.innerHTML; - - fakeNode.style.padding = style.padding; - fakeNode.style.margin = style.margin; - fakeNode.style.border = style.border; - - fakeNode.style.position = 'absolute'; - // 先插入再改样式，以防元素属性在createdCallback中被添加覆盖 - dom.parentNode.insertBefore(fakeNode, dom); - fakeNode.style.height = 'auto'; - fakeNode.style.visibility = 'hidden'; - - var height = util.rect.getElementOffset(fakeNode).height; - dom.parentNode.removeChild(fakeNode); - - return height; + if (opt.transitionTime === undefined || isNaN(opt.transitionTime)) { + // if transition time is not set, set into 0.24s + transitionTime = 0.24; + } else { + // '0.2s' -> 0.2, 20 -> 1, -0.5 -> 0.5 + transitionTime = Math.min(parseFloat(opt.transitionTime), 1); } + // use ?: to make sure oriHeight won't be rewrite when opt.oriHeight is set to 0 + var oriHeight = (opt.oriHeight !== undefined ? opt.oriHeight : + getComputedStyle(element).height); + var tarHeight; + var cbFun = opt.cbFun || function() {}; + + if (type === 'unfold') { + + // make sure tarHeight won't be rewrite when opt.tarHeight is set to 0 + if (opt.tarHeight !== undefined) { + tarHeight = opt.tarHeight; + } else { + // before set height to auto, remove animation. + // or bad animation happens in iphone 4s + element.style.transition = 'height 0s'; + element.style.height = 'auto'; + tarHeight = getComputedStyle(element).height; + } + + // set height to auto after transition, + // in case of height change of inside element later. + var timeout1 = setTimeout(function() { + // before set height to auto, remove animation. + // or bad animation happens in iphone 4s + element.style.transition = 'height 0s'; + element.style.height = 'auto'; + }, transitionTime * 1000); + timeoutArr[0] = timeout1; + } else if (type === 'fold') { + tarHeight = opt.tarHeight || 0; + } - /** - * 构造元素，只会运行一次 - */ - customElement.prototype.build = function () { - var me = this; - var ele = this.element; - var showmoreObj = new Showmore(ele); - showmoreObj.analysisDep(); + element.style.height = oriHeight; + element.style.transition = 'height ' + transitionTime + 's'; + + // now start the animation + + var timeout2 = requestAnimationFrame ? (requestAnimationFrame)(function() { + // XXX: in setTimeout, or there won't be any animation + element.style.height = tarHeight; + }) : setTimeout(function() { + element.style.height = tarHeight; + }, 10); + // after transition, exec callback functions + var timeout3 = setTimeout(function() { + cbFun(); + }, transitionTime * 1000); + + // save timeout, for later clearTimeout + timeoutArr[element.id] = timeoutArr[element.id] || []; + timeoutArr[element.id][1] = timeout2; + timeoutArr[element.id][2] = timeout3; + } + + /** + * get real height of DOM without height restrictions + * + * @param {Object} dom some dom + * @return {number} height + */ + function getHeightUnfold(dom) { + var fakeNode = document.createElement('div'); + var style = getComputedStyle(dom); + fakeNode.innerHTML = dom.innerHTML; + + fakeNode.style.padding = style.padding; + fakeNode.style.margin = style.margin; + fakeNode.style.border = style.border; + + fakeNode.style.position = 'absolute'; + // 先插入再改样式，以防元素属性在createdCallback中被添加覆盖 + dom.parentNode.insertBefore(fakeNode, dom); + fakeNode.style.height = 'auto'; + fakeNode.style.visibility = 'hidden'; + + var height = util.rect.getElementOffset(fakeNode).height; + dom.parentNode.removeChild(fakeNode); + + return height; + } + + + /** + * 构造元素，只会运行一次 + */ + customElement.prototype.build = function() { + var me = this; + var ele = this.element; + var showmoreObj = new Showmore(ele); + showmoreObj.analysisDep(); + + if (!showmoreObj.containSMChild) { + showmoreObj.init(); + } - if( !showmoreObj.containSMChild ){ - showmoreObj.init(); - } + showmoreObj._bindClick(); - showmoreObj._bindClick(); + this.addEventAction('toggle', function(event) { + showmoreObj.toggle(event); + }); - this.addEventAction('toggle', function (event) { - showmoreObj.toggle(event); - }); + //添加重置事件，当该组件没有正常加载则发起请求重新加载 + this.addEventAction('refresh', function(event) { + showmoreObj.init(); + }); - window.addEventListener('orientationchange', function() { - showmoreObj.init(); - }, false); - }; + window.addEventListener('orientationchange', function() { + showmoreObj.init(); + }, false); + }; - // when remove node, clear timeout - customElement.prototype.detachedCallback = function () { - var tArr = timeoutArray && timeoutArray[this.element.id] || []; - for (var i = 0; i < tArr.length; i++) { - window.clearTimeout(tArr[i]); - } - }; + // when remove node, clear timeout + customElement.prototype.detachedCallback = function() { + var tArr = timeoutArray && timeoutArray[this.element.id] || []; + for (var i = 0; i < tArr.length; i++) { + window.clearTimeout(tArr[i]); + } + }; - return customElement; -}); \ No newline at end of file + return customElement; +}); diff --git a/src/mip-showmore/mip-showmore.less b/src/mip-showmore/mip-showmore.less index 9772adfb4..ecd40bfe8 100755 --- a/src/mip-showmore/mip-showmore.less +++ b/src/mip-showmore/mip-showmore.less @@ -37,7 +37,7 @@ mip-showmore { } .mip-showmore-btn { - display: none; + display: block; padding: 15px; border: 1px solid #ddd; background: #fafafa; diff --git a/src/mip-vd-tabs/mip-vd-tabs.js b/src/mip-vd-tabs/mip-vd-tabs.js index e3e55056d..55eed5f10 100644 --- a/src/mip-vd-tabs/mip-vd-tabs.js +++ b/src/mip-vd-tabs/mip-vd-tabs.js @@ -5,383 +5,394 @@ * @copyright 2016 Baidu.com, Inc. All Rights Reserved */ -define(function (require) { - var $ = require('zepto'); - - var customElement = require('customElement').create(); - var Tab = require('./tab'); - var EPISODE_RANGE = 25; - var EPISODE_PAGE_SIZE = 50; - var ICON_SRC = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAMAAAA/D5+aAAAAUVBMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmbIinYlAAAAGnRSTlMABKqP+IFs7+fStaZaSjsuGBAK3tzGw3gkIaqv3YsAAABmSURBVBjTddE5FoMwEMBQGcy+Q1bd/6Cp8xir/aWARKn3FFjdAK2O5020gVp9HjexStCowx4JtOr1iQTmrP0WCSxZuzUSWDvNSySw9ZrnSOD7UNtIYB/UUOB4lQTOsSSQpqp84U9+ascIWXpxA/QAAAAASUVORK5CYII='; - var ALLOW_SCROLL = 'allow-scroll'; - var TOGGLE_MORE = 'toggle-more'; - var CURRENT = 'current'; - var TYPE = 'type'; - var WRAPPER_CLS = 'mip-vd-tabs'; - var CONTENT_CLS = 'mip-vd-tabs-content'; - var SELECTED_CLS = 'mip-vd-tabs-nav-selected'; - var ITEM_CLS = 'mip-vd-tabs-nav-li'; - var NAV_CLS = 'mip-vd-tabs-nav'; - var VIEW_CLS = 'mip-vd-tabs-nav-view'; - var TOGGLE_CLS = 'mip-vd-tabs-nav-toggle'; - var BOTTOM_CLS = 'mip-vd-tabs-nav-bottom'; - var TPL_REG = /\{\{\w}}/g; - /** - * 渲染 - */ - customElement.prototype.build = function () { - var el = this.element; - var type = el.getAttribute(TYPE); - switch (type) { - case 'episode': - var $result = generateWrapper.call(this); - if (el.hasAttribute(TOGGLE_MORE)) { - $result = generateToggle.call(this, $result); - } - generateEpisode.call( - this, - $result, - el.getAttribute('total'), - el.getAttribute(CURRENT), - el.getAttribute('text-tpl'), - el.getAttribute('link-tpl'), - el.getAttribute('head-title') - ); - break; - case 'bottom': - default: - generateCommonTab.call(this, $result); +define(function(require) { + var $ = require('zepto'); + var viewport = require('viewport'); + var viewer = require('viewer'); + var customElement = require('customElement').create(); + var Tab = require('./tab'); + var EPISODE_RANGE = 25; + var EPISODE_PAGE_SIZE = 50; + var ICON_SRC = + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAQCAMAAAA/D5+aAAAAUVBMVEUAAABmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmbIinYlAAAAGnRSTlMABKqP+IFs7+fStaZaSjsuGBAK3tzGw3gkIaqv3YsAAABmSURBVBjTddE5FoMwEMBQGcy+Q1bd/6Cp8xir/aWARKn3FFjdAK2O5020gVp9HjexStCowx4JtOr1iQTmrP0WCSxZuzUSWDvNSySw9ZrnSOD7UNtIYB/UUOB4lQTOsSSQpqp84U9+ascIWXpxA/QAAAAASUVORK5CYII='; + var ALLOW_SCROLL = 'allow-scroll'; + var TOGGLE_MORE = 'toggle-more'; + var CURRENT = 'current'; + var TYPE = 'type'; + var WRAPPER_CLS = 'mip-vd-tabs'; + var CONTENT_CLS = 'mip-vd-tabs-content'; + var SELECTED_CLS = 'mip-vd-tabs-nav-selected'; + var ITEM_CLS = 'mip-vd-tabs-nav-li'; + var NAV_CLS = 'mip-vd-tabs-nav'; + var VIEW_CLS = 'mip-vd-tabs-nav-view'; + var TOGGLE_CLS = 'mip-vd-tabs-nav-toggle'; + var BOTTOM_CLS = 'mip-vd-tabs-nav-bottom'; + var TPL_REG = /\{\{\w}}/g; + /** + * 渲染 + */ + customElement.prototype.build = function() { + var el = this.element; + var type = el.getAttribute(TYPE); + switch (type) { + case 'episode': + var $result = generateWrapper.call(this); + if (el.hasAttribute(TOGGLE_MORE)) { + $result = generateToggle.call(this, $result); } + generateEpisode.call( + this, + $result, + el.getAttribute('total'), + el.getAttribute(CURRENT), + el.getAttribute('text-tpl'), + el.getAttribute('link-tpl'), + el.getAttribute('head-title') + ); + break; + case 'bottom': + default: + generateCommonTab.call(this, $result); + } + } + + function generateCommonTab() { + var el = this.element; + var $el = $(el); + var type = el.getAttribute(TYPE); + var allowScroll = !!el.hasAttribute(ALLOW_SCROLL); + var toggleMore = !!el.hasAttribute(TOGGLE_MORE); + var current = parseInt(el.getAttribute(CURRENT), 0) || 0; + var $header = null; + $el.addClass(WRAPPER_CLS); + + if (type === 'bottom') { + $header = $(el.children.item(el.children.length - 1)); + } else { + $header = $(el.children.item(0)); + } + $header.detach(); + $header.children().each(function(index, element) { + var $element = $(element); + if (current === index) { + $element.addClass(SELECTED_CLS); + } + $element.addClass(ITEM_CLS); + }); + if (allowScroll) { + $header + .addClass(VIEW_CLS) + .append( + $('
') + .append($header.children()) + ); + if (toggleMore) { + $header.append('
'); + } + } else { + $header + .addClass('mip-vd-tabs-row-tile') + .append( + $('
') + .append($header.children()) + ); } - function generateCommonTab() { - var el = this.element; - var $el = $(el); - var type = el.getAttribute(TYPE); - var allowScroll = !!el.hasAttribute(ALLOW_SCROLL); - var toggleMore = !!el.hasAttribute(TOGGLE_MORE); - var current = parseInt(el.getAttribute(CURRENT), 0) || 0; - var $header = null; - $el.addClass(WRAPPER_CLS); - - if (type === 'bottom') { - $header = $(el.children.item(el.children.length - 1)); - } else { - $header = $(el.children.item(0)); - } + $el.children() + .addClass(CONTENT_CLS) + .css('display', 'none') + .eq(current) + .css('display', 'block'); - $header.detach(); - $header.children().each(function (index, element) { - var $element = $(element); - if (current === index) { - $element.addClass(SELECTED_CLS); - } - $element.addClass(ITEM_CLS); - }); - if (allowScroll) { - $header - .addClass(VIEW_CLS) - .append( - $('
') - .append($header.children()) - ); - if (toggleMore) { - $header.append('
'); - } - } else { - $header - .addClass('mip-vd-tabs-row-tile') - .append( - $('
') - .append($header.children()) - ); - } + if (type === 'bottom') { + $el.append($header); + } else { + $el.prepend($header); + } - $el.children() - .addClass(CONTENT_CLS) - .css('display', 'none') - .eq(current) - .css('display', 'block'); + new Tab($el, { + allowScroll: allowScroll, + current: parseInt($el.attr(CURRENT), 10) || 1, + toggleMore: toggleMore, + toggleLabel: $el.attr('toggle-label') || '请选择', + currentClass: SELECTED_CLS, + navWrapperClass: NAV_CLS, + viewClass: VIEW_CLS, + contClass: CONTENT_CLS, + navClass: ITEM_CLS, + logClass: 'mip-vd-tabs-log', + toggleClass: TOGGLE_CLS, + layerClass: 'mip-vd-tabs-nav-layer', + layerUlClass: 'mip-vd-tabs-nav-layer-ul', + element: this.element + }); + } + + /** + * 生成剧集选择下拉列表 + * @returns {jQuery|HTMLElement} + */ + + function generateEpisodeDown(linkTpl) { + var $el = $(this.element); + var pageSize = parseInt($el.attr('page-size'), 10) || EPISODE_PAGE_SIZE; + var currentNum = parseInt($el.attr(CURRENT), 10) || 1; + var totalNum = parseInt($el.attr('total'), 10) || 1; + var tabCount = Math.ceil(totalNum / pageSize); + var tabCurNum = Math.floor((currentNum - 1) / pageSize); + var tabList = []; + + + for (var i = 0; i < tabCount; i++) { + var from = pageSize * i + 1; + var to = Math.min(totalNum, pageSize * (i + 1)); + tabList.push({ + from: from, + to: to, + text: '' + from + (from < to ? ' - ' + to : '') + }); + } - if (type === 'bottom') { - $el.append($header); - } else { - $el.prepend($header); + + var wrapper = $('
'); + wrapper.append( + tabList.map(function(v, index) { + var epFragment = '
'; + for (var j = v.from; j <= v.to; j++) { + var selectedClass = j === currentNum ? + 'mip-vd-tabs-episode-item-selected' : ''; + var link = (linkTpl ? ' href="' + linkTpl.replace(TPL_REG, j) + + '"' : ''); + epFragment = epFragment + + '' + j + ''; } + epFragment += '
'; + return epFragment; + }).join('') + ); + + if (tabCount > 1) { + var tabFragment = ''; + var scrollNum = 4; + if (tabCount > scrollNum) { + tabFragment = '
'; + } + tabFragment += '
    '; + tabFragment += tabList.map(function(v, index) { + var selectedClass = index === tabCurNum ? SELECTED_CLS : ''; + return '
  • ' + + v.text + '
    • '; + }).join(''); + tabFragment += '
'; + if (tabCount > scrollNum) { + tabFragment += '
'; + } + wrapper.append(tabFragment); + + new Tab(wrapper, { + allowScroll: tabCount > scrollNum, + current: Math.floor((currentNum - 1) / pageSize) || 1, + currentClass: SELECTED_CLS, + navWrapperClass: NAV_CLS, + viewClass: VIEW_CLS, + contClass: CONTENT_CLS, + navClass: ITEM_CLS, + logClass: 'mip-vd-tabs-log', + toggleClass: TOGGLE_CLS + }) + } + return wrapper; + } + + function generateWrapper() { + var $el = $(this.element); + var $result = null; + $el.addClass(WRAPPER_CLS); + var totalNum = parseInt($el.attr('total'), 10) || 1; + if (totalNum > 4) { + $result = $('
' + '
    ' + '
    ' + ); + } else { + $result = $('
    ' + '
      ' + '
      ' + ); + } + return $result; + } + + function generateToggle($result) { + var $el = $(this.element); + var totalNum = parseInt($el.attr('total'), 10) || 1; + if (totalNum <= 4) { + return $result; + } - new Tab($el, { - allowScroll: allowScroll, - current: parseInt($el.attr(CURRENT), 10) || 1, - toggleMore: toggleMore, - toggleLabel: $el.attr('toggle-label') || '请选择', - currentClass: SELECTED_CLS, - navWrapperClass: NAV_CLS, - viewClass: VIEW_CLS, - contClass: CONTENT_CLS, - navClass: ITEM_CLS, - logClass: 'mip-vd-tabs-log', - toggleClass: TOGGLE_CLS, - layerClass: 'mip-vd-tabs-nav-layer', - layerUlClass: 'mip-vd-tabs-nav-layer-ul' - }); + $result.append('
      ' + '' + '
      '); + return $result; + } + + function generateEpisode($result, total, current, textTpl, linkTpl, + headTitle) { + var $el = $(this.element); + + var totalNum = parseInt(total, 10); + var currentNum = parseInt(current, 10) || 1; + var tpl = textTpl || '第{x}集'; + var html = ''; + for (var i = Math.max(1, currentNum - EPISODE_RANGE), + r = Math.min(totalNum, currentNum + EPISODE_RANGE); i <= r; i++) { + html = html + '' + tpl.replace(TPL_REG, '' + i) + + ''; } - /** - * 生成剧集选择下拉列表 - * @returns {jQuery|HTMLElement} - */ - - function generateEpisodeDown(linkTpl) { - var $el = $(this.element); - var pageSize = parseInt($el.attr('page-size'), 10) || EPISODE_PAGE_SIZE; - var currentNum = parseInt($el.attr(CURRENT), 10) || 1; - var totalNum = parseInt($el.attr('total'), 10) || 1; - var tabCount = Math.ceil(totalNum / pageSize); - var tabCurNum = Math.floor((currentNum - 1) / pageSize); - var tabList = []; - - - for (var i = 0; i < tabCount; i++) { - var from = pageSize * i + 1; - var to = Math.min(totalNum, pageSize * (i + 1)); - tabList.push({ - from: from, - to : to, - text: '' + from + (from < to ? ' - ' + to : '') - }); + $result.find('.' + NAV_CLS).append(html); + $el.empty().append($result); + + + var tab = new Tab($el, { + allowScroll: !!$el.get(0).hasAttribute(ALLOW_SCROLL), + toggleMore: false, + current: currentNum || 1, + currentClass: SELECTED_CLS, + navWrapperClass: NAV_CLS, + viewClass: VIEW_CLS, + navClass: ITEM_CLS, + logClass: 'mip-vd-tabs-log', + toggleClass: TOGGLE_CLS, + toggleLabel: $el.attr('toggle-label') || '请选择' + }); + + // override toggle-more + (function register(ptr) { + var _this = tab; + var $navLayer = $('

      ' + _this.toggleLabel + + '

      '); + var $navLayerUl = $(''); + var $mask = $('
      '); + + _this.toggleState = 0; // 展开状态 0-收起,1-展开 + + // 事件代理 + $navLayerUl.on('click', '.mip-vd-tabs-episode-item ', function() { + toggleUp(); + }); + + $mask.on('click', function() { + toggleUp(); + }).on('touchmove', function(e) { + e.preventDefault(); + }); + + _this.toggle.on('click', function() { + if (_this.toggleState == 0) { + // 点击时为收起 + toggleDown(); + } else { + // 点击时为展开 + toggleUp(); } + }); + + // 收起 + function toggleUp() { + $navLayerUl.empty(); + $navLayer.hide(); + $mask.hide(); + $el + .find('.mip-vd-tabs-nav-toggle,.mip-vd-tabs-scroll-touch') + .css({ + 'position': '', + 'top': '' + }); + $el + .find('.mip-vd-tabs-nav-layer') + .css({ + 'position': '', + 'border-top': '', + 'top': '' + }); + _this.toggle.css({ + '-webkit-transform': 'scaleY(1)', + 'transform': 'scaleY(1)' + }); + _this.toggleState = 0; + } + + // 展开 + function toggleDown() { + $navLayerUl.html(generateEpisodeDown.call(ptr, linkTpl)); + $navLayer.append($navLayerUl); + $el.append($mask.show()); + _this.view.after($navLayer.show()); + $el + .find('.mip-vd-tabs-scroll-touch,.mip-vd-tabs-nav-toggle') + .css({ + 'position': 'fixed', + 'top': '1px' + }); + $el + .find('.mip-vd-tabs-nav-layer') + .css({ + 'position': 'fixed', + 'border-top': '1px solid #ccc', + 'top': '0' + }); + _this.toggle.css({ + '-webkit-transform': 'scaleY(1)', + 'transform': 'scaleY(-1)' + }); + _this.toggleState = 1; + } + })(this); - var wrapper = $('
      '); - wrapper.append( - tabList.map(function (v, index) { - var epFragment = '
      '; - for (var j = v.from; j <= v.to; j++) { - var selectedClass = j === currentNum ? 'mip-vd-tabs-episode-item-selected' : ''; - var link = (linkTpl ? ' href="' + linkTpl.replace(TPL_REG, j) + '"' : '' ); - epFragment = epFragment - + '' - + j - + ''; - } - epFragment += '
      '; - return epFragment; - }).join('') - ); + $el.delegate('.' + ITEM_CLS + ', .mip-vd-tabs-episode-item', 'click', + function(ev) { - if (tabCount > 1) { - var tabFragment = ''; - var scrollNum = 4; - if (tabCount > scrollNum) { - tabFragment = '
      '; - } - tabFragment += '
        '; - tabFragment += tabList.map(function (v, index) { - var selectedClass = index === tabCurNum ? SELECTED_CLS : ''; - return '
      • ' + v.text + '
        • '; - }).join(''); - tabFragment += '
      '; - if (tabCount > scrollNum) { - tabFragment += '
      '; - } - wrapper.append(tabFragment); - - new Tab(wrapper, { - allowScroll: tabCount > scrollNum, - current: Math.floor((currentNum - 1) / pageSize) || 1, - currentClass: SELECTED_CLS, - navWrapperClass: NAV_CLS, - viewClass: VIEW_CLS, - contClass: CONTENT_CLS, - navClass: ITEM_CLS, - logClass: 'mip-vd-tabs-log', - toggleClass: TOGGLE_CLS - }) - } - return wrapper; - } + ev.preventDefault(); - function generateWrapper() { - var $el = $(this.element); - var $result = null; - $el.addClass(WRAPPER_CLS); - var totalNum = parseInt($el.attr('total'), 10) || 1; - if (totalNum > 4) { - $result = $('
      ' - + '
        ' - + '
        ' - ); - } else { - $result = $('
        ' - + '
          ' - + '
          ' - ); - } - return $result; - } + var href = $(this).attr("href"); - function generateToggle($result) { - var $el = $(this.element); - var totalNum = parseInt($el.attr('total'), 10) || 1; - if (totalNum <= 4) { - return $result; + if (!href) { + return; } - $result.append('
          ' - + '' - + '
          '); - return $result; - } - function generateEpisode($result, total, current, textTpl, linkTpl, headTitle) { - var $el = $(this.element); - - var totalNum = parseInt(total, 10); - var currentNum = parseInt(current, 10) || 1; - var tpl = textTpl || '第{x}集'; - var html = ''; - for (var i = Math.max(1, currentNum - EPISODE_RANGE), - r = Math.min(totalNum, currentNum + EPISODE_RANGE); - i <= r; - i++) { - html = html - + '' - + tpl.replace(TPL_REG, '' + i) - + ''; - } + // 顶部标题 + var head = $(this).text(); - $result.find('.' + NAV_CLS).append(html); - $el.empty().append($result); - - - var tab = new Tab($el, { - allowScroll: !!$el.get(0).hasAttribute(ALLOW_SCROLL), - toggleMore: false, - current: currentNum || 1, - currentClass: SELECTED_CLS, - navWrapperClass: NAV_CLS, - viewClass: VIEW_CLS, - navClass: ITEM_CLS, - logClass: 'mip-vd-tabs-log', - toggleClass: TOGGLE_CLS, - toggleLabel: $el.attr('toggle-label') || '请选择' - }); + if (!head) { + head = $(this).find('.' + ITEM_CLS).text(); + } - // override toggle-more - (function register(ptr) { - var _this = tab; - var $navLayer = $('

          ' + _this.toggleLabel + '

          '); - var $navLayerUl = $(''); - var $mask = $('
          '); - - _this.toggleState = 0; // 展开状态 0-收起,1-展开 - - // 事件代理 - $navLayerUl.on('click', '.mip-vd-tabs-episode-item ', function(){ - toggleUp(); - }); - - $mask.on('click', function () { - toggleUp(); - }).on('touchmove', function (e) { - e.preventDefault(); - }); - - _this.toggle.on('click', function() { - if (_this.toggleState == 0) { - // 点击时为收起 - toggleDown(); - } else { - // 点击时为展开 - toggleUp(); - } - }); - - // 收起 - function toggleUp() { - $navLayerUl.empty(); - $navLayer.hide(); - $mask.hide(); - $el - .find('.mip-vd-tabs-nav-toggle,.mip-vd-tabs-scroll-touch') - .css({'position': '', 'top': ''}); - $el - .find('.mip-vd-tabs-nav-layer') - .css({'position': '', 'border-top': '', 'top': ''}); - _this.toggle.css({ - '-webkit-transform': 'scaleY(1)', - 'transform': 'scaleY(1)' - }); - _this.toggleState = 0; - } - - // 展开 - function toggleDown() { - $navLayerUl.html(generateEpisodeDown.call(ptr, linkTpl)); - $navLayer.append($navLayerUl); - $el.append($mask.show()); - _this.view.after($navLayer.show()); - $el - .find('.mip-vd-tabs-scroll-touch,.mip-vd-tabs-nav-toggle') - .css({'position': 'fixed', 'top': '1px'}); - $el - .find('.mip-vd-tabs-nav-layer') - .css({'position': 'fixed', 'border-top': '1px solid #ccc', 'top': '0'}); - _this.toggle.css({ - '-webkit-transform': 'scaleY(1)', - 'transform': 'scaleY(-1)' - }); - _this.toggleState = 1; - } - })(this); - - - $el.delegate('.' + ITEM_CLS + ', .mip-vd-tabs-episode-item', 'click' , function(ev) { - - ev.preventDefault(); - - var href = $(this).attr("href"); - - if (!href) { - return; - } - - - // 顶部标题 - var head = $(this).text(); - - if (!head) { - head = $(this).find('.' + ITEM_CLS).text(); - } - - var message = { - "event": "loadiframe", - "data": { - "url": href, - "title": headTitle || head, - "click": $el.data('click') - } - }; - - if (window.parent !== window) { - window.parent.postMessage(message, '*'); - } - else { - location.href = href; - } + var message = { + "event": "loadiframe", + "data": { + "url": href, + "title": headTitle || head, + "click": $el.data('click') + } + }; + + if (window.parent !== window) { + window.parent.postMessage(message, '*'); + } else { + location.href = href; + } - }); - } + }); + } - return customElement; + return customElement; }); diff --git a/src/mip-vd-tabs/tab.js b/src/mip-vd-tabs/tab.js index 4e4e9b2da..0b8aa0a0f 100644 --- a/src/mip-vd-tabs/tab.js +++ b/src/mip-vd-tabs/tab.js @@ -1,257 +1,291 @@ -define(function () { - var fn = function() {}; - var inter; - var _init = function(opt) { - var _this = this, - $panel = $(_this.panel); - - this.toggle = $panel.find('.' + _this.toggleClass); // 更多切换按钮 - this.view = $panel.find('.' + _this.viewClass); // nav可视区dom - this.wrapper = $panel.find('.' + _this.navWrapperClass); // nav实际区域dom - this.navs = this.wrapper.find('.' + _this.navClass); // nav项 - this.conts = $panel.find('.' + _this.contClass); // tabs内容 - - this.sum = this.navs.length; - this.tabScroll = undefined; - - _setEvents.call(this); - this.allowScroll && this.view.length && _setScroll.call(this); - this.toggleMore && this.allowScroll && this.view.length && _setToggerMore.call(this); - }, - _setWrap = function ($wrapper) { - var _this = this; - $wrapper.children().eq(0).wrap('
          '); - // UC浏览器对overflow-x兼容性太差,只能用元素占位的方式来解决 - if ($wrapper.children().eq(1).hasClass(_this.toggleClass)) { - $wrapper.find('.' + _this.navWrapperClass).append( - '
          ' - ); - } - return $wrapper; - }, - _setScroll = function() { - var _this = this; - - _this.tabScroll = _setWrap.call(_this, _this.view); - - // 前置检测选中的tab是否在可视区 - if (_this.current > 0 && _this.current < _this.sum) { - var currentTab = Math.min(_this.current + 1, _this.sum - 1); - slideTo(currentTab, 1, _this.navs.eq(_this.current), _this.navs.length, false); - } - - // 若tab横滑回调方法存在,执行回调 - if (typeof _this.onTabScrollEnd === 'function') { - _this.tabScroll.on('scrollEnd', function () { - if (this.customFlag && this.customFlag.autoScroll) { - // 若为自动触发滑动，不执行回调 - return; - } - ; - _this.onTabScrollEnd.call(_this, this); - }); - } - - }, - _setToggerMore = function() { - var _this = this; - var $navLayer = $('

          ' + _this.toggleLabel + '

          '); - var $navLayerUl = $(''); - - _this.toggleState = 0; // 展开状态 0-收起,1-展开 - - // 事件代理 - $navLayerUl.on('click', '.'+_this.navClass, function(){ - var $dom_this = $(this); - //$(this).addClass(_this.currentClass); - _this.navs.eq($dom_this.attr('data-tid')).trigger('click'); - toggleUp(); - }); - - _this.toggle.on('click', function() { - if (_this.toggleState == 0) { - // 点击时为收起 - toggleDown(); - } else { - // 点击时为展开 - toggleUp(); - }; - }); - - // 收起 - function toggleUp() { - $navLayerUl.empty(); - $navLayer.hide(); - _this.toggle.css({ - '-webkit-transform': 'scaleY(1)', - 'transform': 'scaleY(1)' - }); - _this.toggleState = 0; - } - - // 展开 - function toggleDown() { - $navLayerUl.html(_this.navs.clone()); - $navLayer.append($navLayerUl); - _this.view.after($navLayer.show()); - _this.toggle.css({ - '-webkit-transform': 'scaleY(1)', - 'transform': 'scaleY(-1)' - }); - _this.toggleState = 1; - } - - }, - _setEvents = function() { - var _this = this; - - $.each(_this.navs, function(i, v){ - var $v = $(v); - if($v.hasClass(_this.currentClass)){ - _this.current = i; // 获取当前nav序号 - } - - $v.addClass(_this.logClass); - $v.attr('data-tid', i); - - $v.on('click', function(){ - var tid = parseInt($(this).attr('data-tid')); - if(tid === _this.current){ - return; - } - - _this.last = _this.current; - _this.current = tid; - - _this.hideTab(_this.last); - _this.showTab(_this.current); - - if(_this.onResetChange == fn){ - _this.hideContent(_this.last); - _this.showContent(_this.current); - - /* 添加异步处理事件，返回点击tab序号及内容框 */ - _this.onChange.call(_this, _this.current, _this.conts[_this.current]); - }else{ - _this.onResetChange.call(_this, _this.current); - } - - // 滑动对象存在,执行滑动并传递autoScroll标记用于scrollEnd事件判断 - if (_this.tabScroll) { - slideTo(_this.current + 1, 1, $v, _this.navs.length, true); - }; - }); - }); - - // 第一次加载 - $.each(_this.conts, function(i, v){ - if(i == _this.current){ - _this.showTab(i); - _this.showContent(i); - }else{ - _this.hideTab(i); - _this.hideContent(i); - } - }); +define(function() { + var fn = function() {}; + var inter; + var viewport = require('viewport'); + var viewer = require('viewer'); + var _init = function(opt) { + var _this = this, + $panel = $(_this.panel); + + this.toggle = $panel.find('.' + _this.toggleClass); // 更多切换按钮 + this.view = $panel.find('.' + _this.viewClass); // nav可视区dom + this.wrapper = $panel.find('.' + _this.navWrapperClass); // nav实际区域dom + this.navs = this.wrapper.find('.' + _this.navClass); // nav项 + this.conts = $panel.find('.' + _this.contClass); // tabs内容 + this.sum = this.navs.length; + this.tabScroll = undefined; + + _setEvents.call(this); + this.allowScroll && this.view.length && _setScroll.call(this); + this.toggleMore && this.allowScroll && this.view.length && + _setToggerMore.call(this); + }, + _setWrap = function($wrapper) { + var _this = this; + $wrapper.children().eq(0).wrap( + '
          '); + // UC浏览器对overflow-x兼容性太差,只能用元素占位的方式来解决 + if ($wrapper.children().eq(1).hasClass(_this.toggleClass)) { + $wrapper.find('.' + _this.navWrapperClass).append( + '
          ' + ); + } + return $wrapper; + }, + _setScroll = function() { + var _this = this; + + _this.tabScroll = _setWrap.call(_this, _this.view); + + // 前置检测选中的tab是否在可视区 + if (_this.current > 0 && _this.current < _this.sum) { + var currentTab = Math.min(_this.current + 1, _this.sum - 1); + slideTo(currentTab, 1, _this.navs.eq(_this.current), _this.navs.length, + false); + } + + // 若tab横滑回调方法存在,执行回调 + if (typeof _this.onTabScrollEnd === 'function') { + _this.tabScroll.on('scrollEnd', function() { + if (this.customFlag && this.customFlag.autoScroll) { + // 若为自动触发滑动，不执行回调 + return; + }; + _this.onTabScrollEnd.call(_this, this); + }); + } + + }, + _setToggerMore = function() { + var _this = this; + var $navLayer = $('

          ' + _this + .toggleLabel + '

          '); + var $navLayerUl = $(''); + + _this.toggleState = 0; // 展开状态 0-收起,1-展开 + + // 事件代理 + $navLayerUl.on('click', '.' + _this.navClass, function() { + var $dom_this = $(this); + //$(this).addClass(_this.currentClass); + _this.navs.eq($dom_this.attr('data-tid')).trigger('click'); + toggleUp(); + }); + + _this.toggle.on('click', function() { + if (_this.toggleState == 0) { + // 点击时为收起 + toggleDown(); + } else { + // 点击时为展开 + toggleUp(); }; - - var Tabs = function(panel, options) { - options = options || {}; - this.panel = panel; - this.current = options.current || 0; // 当前选中的tab - this.currentClass = options.currentClass || 'c-tabs-nav-selected'; - this.navWrapperClass = options.navWrapperClass || 'c-tabs-nav'; - this.navClass = options.navClass || 'c-tabs-nav-li'; - this.contClass = options.contClass || 'c-tabs-content'; - this.viewClass = options.viewClass || 'c-tabs-nav-view'; - this.toggleClass = options.toggleClass || 'c-tabs-nav-toggle'; - this.layerClass = options.layerClass || 'c-tabs-nav-layer'; - this.layerUlClass = options.layerUlClass || 'c-tabs-nav-layer-ul'; - this.allowScroll = options.allowScroll || false; // 是否允许滚动 - this.toggleMore = options.toggleMore || false; // 是否允许切换显示更多 - this.toggleLabel = options.toggleLabel || '请选择'; // 切换label - this.logClass = options.logClass || 'WA_LOG_TAB'; // 统计class - this.scrollSize = options.scrollSize || '-40'; // tabs滚动的size - - this.navs = []; - this.seps = []; - this.conts = []; - this.sum = 0; // tab切换次数 - this.last = null; // 上次tab切换序号 - - // 函数 - this.onChange = options.onChange || fn; - this.onResetChange = options.onResetChange || fn; - this.onTabScrollEnd = options.onTabScrollEnd; - - // init - panel && _init.call(this, options); - }; - - $.extend(Tabs.prototype, { - showContent : function(i){ - var cont=this.conts[i]; - if(cont){ - $(this.conts[i]).show(); - } - }, - hideContent : function(i){ - var cont=this.conts[i]; - if(cont){ - $(cont).hide(); - } - }, - showTab : function(i){ - var _this = this, - navs = _this.navs, - seps = _this.seps; - - $(navs[i]).addClass(_this.currentClass); - }, - hideTab : function(i){ - var _this = this, - navs = _this.navs, - seps = _this.seps; - - $(navs[i]).removeClass(_this.currentClass); + }); + + // 收起 + function toggleUp() { + $navLayerUl.empty(); + $navLayer.hide(); + _this.toggle.css({ + '-webkit-transform': 'scaleY(1)', + 'transform': 'scaleY(1)' + }); + _this.toggleState = 0; + } + + // 展开 + function toggleDown() { + $navLayerUl.html(_this.navs.clone()); + $navLayer.append($navLayerUl); + _this.view.after($navLayer.show()); + _this.toggle.css({ + '-webkit-transform': 'scaleY(1)', + 'transform': 'scaleY(-1)' + }); + _this.toggleState = 1; + } + + }, + _setEvents = function() { + var _this = this; + + $.each(_this.navs, function(i, v) { + var $v = $(v); + if ($v.hasClass(_this.currentClass)) { + _this.current = i; // 获取当前nav序号 } - }); - function slideTo(index, leftNum, $thisDom, totalNum, animate) { - var left = 0; - if (index < leftNum) { - - } else if (index >= totalNum - leftNum) { - left = $thisDom.parent().offset().width; + $v.addClass(_this.logClass); + $v.attr('data-tid', i); + + $v.on('click', function() { + var tid = parseInt($(this).attr('data-tid')); + if (tid === _this.current) { + return; + } + + _this.last = _this.current; + _this.current = tid; + + _this.hideTab(_this.last); + _this.showTab(_this.current); + if (_this.onResetChange == fn) { + _this.hideContent(_this.last); + _this.showContent(_this.current); + + /* 添加异步处理事件，返回点击tab序号及内容框 */ + _this.onChange.call(_this, _this.current, _this.conts[ + _this.current]); + } else { + _this.onResetChange.call(_this, _this.current); + } + + // 滑动对象存在,执行滑动并传递autoScroll标记用于scrollEnd事件判断 + if (_this.tabScroll) { + slideTo(_this.current + 1, 1, $v, _this.navs.length, + true); + }; + }); + }); + + // 第一次加载 + $.each(_this.conts, function(i, v) { + if (i == _this.current) { + _this.showTab(i); + _this.showContent(i); } else { - left = $thisDom.offset().left - $thisDom.parent().offset().left - $thisDom.width(); - } - if (!inter) { - if (animate) { - animateSlide($thisDom.parent().parent().scrollLeft(), left, $thisDom.parent().parent()); - } else { - $thisDom.parent().parent().scrollLeft(left); - } + _this.hideTab(i); + _this.hideContent(i); } + }); + }; + + var Tabs = function(panel, options) { + options = options || {}; + this.panel = panel; + + this.current = options.current || 0; // 当前选中的tab + this.currentClass = options.currentClass || 'c-tabs-nav-selected'; + this.navWrapperClass = options.navWrapperClass || 'c-tabs-nav'; + this.navClass = options.navClass || 'c-tabs-nav-li'; + this.contClass = options.contClass || 'c-tabs-content'; + this.viewClass = options.viewClass || 'c-tabs-nav-view'; + this.toggleClass = options.toggleClass || 'c-tabs-nav-toggle'; + this.layerClass = options.layerClass || 'c-tabs-nav-layer'; + this.layerUlClass = options.layerUlClass || 'c-tabs-nav-layer-ul'; + this.allowScroll = options.allowScroll || false; // 是否允许滚动 + this.toggleMore = options.toggleMore || false; // 是否允许切换显示更多 + this.toggleLabel = options.toggleLabel || '请选择'; // 切换label + this.logClass = options.logClass || 'WA_LOG_TAB'; // 统计class + this.scrollSize = options.scrollSize || '-40'; // tabs滚动的size + + this.navs = []; + this.seps = []; + this.conts = []; + this.sum = 0; // tab切换次数 + this.last = null; // 上次tab切换序号 + + // 函数 + this.onChange = options.onChange || fn; + this.onResetChange = options.onResetChange || fn; + this.onTabScrollEnd = options.onTabScrollEnd; + + // init + panel && _init.call(this, options); + + //添加hasShowMore参数，没有hasShowMore就不走下面的流程 + this.hasShowMore = false; + if(!!options.element.querySelectorAll('mip-showmore')) { + this.hasShowMore = true; + for(var iConts=0;iConts0) { + this.conts[iConts].hasShowMore = true + } + } } - function animateSlide (start, end, $dom) { - var x = (end - start)/8; - inter = setInterval(function () { - var scl = $dom.scrollLeft(); - - if ((x > 0 && scl >= end) || x == 0) { - x = 0; - clearInterval(inter); - } else if (x < 0 && scl <= end) { - x = 0; - clearInterval(inter); - } - - $dom.scrollLeft(scl + x); - }, 30); - setTimeout(function(){clearInterval(inter); $dom.scrollLeft(end); inter = null;}, 270); + }; + + $.extend(Tabs.prototype, { + showContent: function(i) { + var cont = this.conts[i]; + if (cont) { + $(this.conts[i]).show(); + + //判断当前tabitem下面是否含有showmore组件，如果有，让下面的showmore走refresh事件。 + if(!!cont.hasShowMore) { + for(var showNum = 0;showNum= totalNum - leftNum) { + left = $thisDom.parent().offset().width; + } else { + left = $thisDom.offset().left - $thisDom.parent().offset().left - + $thisDom.width(); + } + if (!inter) { + if (animate) { + animateSlide($thisDom.parent().parent().scrollLeft(), left, + $thisDom.parent().parent()); + } else { + $thisDom.parent().parent().scrollLeft(left); + } + } + } + + function animateSlide(start, end, $dom) { + var x = (end - start) / 8; + inter = setInterval(function() { + var scl = $dom.scrollLeft(); + + if ((x > 0 && scl >= end) || x == 0) { + x = 0; + clearInterval(inter); + } else if (x < 0 && scl <= end) { + x = 0; + clearInterval(inter); + } + + $dom.scrollLeft(scl + x); + }, 30); + setTimeout(function() { + clearInterval(inter); + $dom.scrollLeft(end); + inter = null; + }, 270); + } + + return Tabs; });