(function (arr) { //remove();//兼容 arr.forEach(function (item) { if (item.hasOwnProperty('remove')) { return; } Object.defineProperty(item, 'remove', { configurable: true, enumerable: true, writable: true, value: function remove() { this.parentNode.removeChild(this); } }); }); })([Element.prototype, CharacterData.prototype, DocumentType.prototype]); if (!("classList" in document.documentElement)) { Object.defineProperty(HTMLElement.prototype, 'classList', { get: function () { var self = this; function update(fn) { return function (value) { var classes = self.className.split(/\s+/g), index = classes.indexOf(value); fn(classes, index, value); self.className = classes.join(" "); } } return { add: update(function (classes, index, value) { if (!~index) classes.push(value); }), remove: update(function (classes, index) { if (~index) classes.splice(index, 1); }), toggle: update(function (classes, index, value) { if (~index) classes.splice(index, 1); else classes.push(value); }), contains: function (value) { return !!~self.className.split(/\s+/g).indexOf(value); }, item: function (i) { return self.className.split(/\s+/g)[i] || null; } }; } }); } function fireKeyEvent(el, evtType, keyCode) { var doc = el.ownerDocument, win = doc.defaultView || doc.parentWindow, evtObj; if (doc.createEvent) { if (win.KeyEvent) { evtObj = doc.createEvent('KeyEvents'); evtObj.initKeyEvent(evtType, true, true, win, false, false, false, false, keyCode, 0); } else { evtObj = doc.createEvent('UIEvents'); Object.defineProperty(evtObj, 'keyCode', { get: function () { return this.keyCodeVal; } }); Object.defineProperty(evtObj, 'which', { get: function () { return this.keyCodeVal; } }); evtObj.initUIEvent(evtType, true, true, win, 1); evtObj.keyCodeVal = keyCode; if (evtObj.keyCode !== keyCode) { console.log("keyCode " + evtObj.keyCode + " 和 (" + evtObj.which + ") 不匹配"); } } el.dispatchEvent(evtObj); } else if (doc.createEventObject) { evtObj = doc.createEventObject(); evtObj.keyCode = keyCode; el.fireEvent('on' + evtType, evtObj); } } //classList兼容 (function (window) { var tvSysBtnBind = function (init) { var _this = this, _self = self; var id = init.id ? init.id : null, keyRemoveDefault = init.keyRemoveDefault ? true : false, currentIndex = init.currentIndex ? parseInt(init.currentIndex): 0, btnLeft = init.btnLeft ? init.btnLeft : 37, btnUp = init.btnUp ? init.btnUp : 38, btnRight = init.btnRight ? init.btnRight : 39, btnDown = init.btnDown ? init.btnDown : 40, btnEnter = init.btnEnter ? init.btnEnter : 13, history = init.history ? init.history : true, currentClass = init.currentClass ? init.currentClass : "current", doc = id?document.getElementById(id):document.body, effect = init.effect ? init.effect : "slide1", element = new Array(), rules = Object.prototype.toString.call(init.rules) == '[object Object]' ? init.rules : null, direction = "y"; _this.className = init.className ? init.className : "hotbutton"; this.event = {}; var _tempElem; this.currentIndex = parseInt(currentIndex); this.defaultIndex = parseInt(currentIndex); this.historyFocus={}; if(!window.focusobj)window.focusobj=document.createElement("span"); (typeof init.onLoad) == "function" ? init.onLoad: init.onLoad = function () {}; this.onLoad = function () { _this.reLoad(); this.sourceClassName = _this.className; this.sourceLength = element.length; //element[currentIndex].classList.add(currentClass); _this.prev = element[currentIndex]; _this.prevIndex = currentIndex; _this.current = element[currentIndex]; _this.currentIndex = currentIndex; _this.target = doc; init.onLoad.call(_this); focusobj.innerHTML='
'; focusobj.classList.add("focusobj"); focusobj.classList.add("current"); this.target.appendChild(focusobj); } this.reSetClass = function (item, index) { //新组别 用于弹窗 不同组热键 API if(history) //记录开关 _this.historyFocus[_this.className]=_this.currentIndex;//记录上一组焦点 index = index ? index : 0; _this.prev.classList.remove(currentClass); _this.className = item; _this.prevIndex= _this.currentIndex=_this.historyFocus[item]?_this.historyFocus[item]:index; _this.reLoad(); } self.readFn=function(){ if((typeof init.onEnterPress) == "function"){ init.onEnterPress }else{ init.onEnterPress = function () {} } if((typeof init.onPress) == "function"){ init.onPress }else{ init.onPress = function () {} } } this.reLoad = function () { self.readFn(); if (doc != null) { element = doc.getElementsByClassName(_this.className); this.hotbtn = element; } if (element.length <= 0) return false; if (_this.currentIndex || _this.currentIndex == 0) { _this.currentIndex = parseInt(_this.currentIndex); } else { _this.currentIndex = parseInt(init.currentIndex); } if (isload >= 2 && _this.sourceClass == _this.className && _this.sourceLength != element.length && !isSet) { //页面加载到接口加载不进行计算 重置class也不计算 手动设置焦点不算 // 如果元素数量发生过变化 将进行换算当前元素 重新算元素索引 //修复同组的元素变化的问题 if (_this.prev.classList.contains(_this.className)&&_this.sourceLength > element.length) { //当元素减少 _this.currentIndex = _this.currentIndex - (_this.sourceLength - element.length); _this.prevIndex = _this.prevIndex - (_this.sourceLength - element.length); _this.sourceLength = element.length; } else if (_this.prev.classList.contains(_this.className)&&_this.sourceLength < element.length) { //当元素增加 _this.currentIndex = _this.currentIndex + (element.length - _this.sourceLength); _this.prevIndex = _this.prevIndex + (element.length - _this.sourceLength); _this.sourceLength = element.length; } } isSet = false; _this.prev = element[_this.currentIndex]; _this.prevIndex = _this.currentIndex; _this.current = element[_this.currentIndex]; _this.currentIndex = _this.currentIndex; _self.classDo(_this.currentIndex); for (var i = 0; i < this.hotbtn.length; i++) { this.hotbtn[i].setAttribute("data-id", i); } } function keydefault(e) { try{ if (keyRemoveDefault) window.event ? window.event.returnValue = false : e.preventDefault(); }catch(e){ //不支持浏览器按键的时候会报错 } } var isSet = false; this.setCurrentIndex = function (index) { isSet = true; index = parseInt(index); _this.currentIndex = index; _this.current = element[index]; } this.viewScrollY = function (y) { if(y<0)y=0; _this.current.parentNode.style.top=-y+"px"; _this.current.parentNode.style.left=0+"px"; //view.scrollTop = view.scrollTop + y+(y*0.1); } this.viewScrollX = function (x) { if(x<0)x=0; _this.current.parentNode.style.left=-x+"px"; _this.current.parentNode.style.top=0+"px"; //view.scrollLeft = view.scrollLeft + x+(x*0.1); } this.onPress = function (e) { init.onPress.call(_this); } this.onEnterPress = function () { init.onEnterPress.call(_this); } self.getScrollTop = function () { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return scrollTop; } this.scroll = function () { var view=_this.current.parentNode.parentNode; var direction = view.getAttribute("data-scroll-direction"); if(!direction) return; view.style.position="relative"; _this.current.parentNode.style.position="absolute"; if(direction=="x"){ _this.current.parentNode.style.width= (_this.hotbtn.length*_this.current.clientWidth*2)+"px"; if ( _this.current.getBoundingClientRect().left-view.getBoundingClientRect().left-_this.current.getBoundingClientRect().width<0) { _this.viewScrollX(_this.current.getBoundingClientRect().left-view.getBoundingClientRect().left ); } if(_this.current.getBoundingClientRect().left-view.getBoundingClientRect().left+_this.current.getBoundingClientRect().width>view.getBoundingClientRect().width){ _this.viewScrollX(_this.current.getBoundingClientRect().left-(view.getBoundingClientRect().left)-_this.current.getBoundingClientRect().width); } } if(direction=="y"){ if ( _this.current.getBoundingClientRect().top-view.getBoundingClientRect().top-_this.current.getBoundingClientRect().height<0) { _this.viewScrollY(_this.current.getBoundingClientRect().top-view.getBoundingClientRect().top ); } if(_this.current.getBoundingClientRect().top-view.getBoundingClientRect().top+_this.current.getBoundingClientRect().height>view.getBoundingClientRect().height){ _this.viewScrollY(_this.current.getBoundingClientRect().top-view.getBoundingClientRect().top-_this.current.getBoundingClientRect().height); } } } var isload = 0; self.classDo = function (index) { isload = isload + 1; if (isload == 2) { _this.sourceLength = element.length; } if(element[index]) element[index].classList.add(currentClass); else return; //如果元素不存在 不进行渲染 待重载 for (var i = 0; i < element.length; i++) { if (i!=index&&element[i].classList.contains(currentClass)) { element[i].classList.remove(currentClass); } } _this.scroll();//渲染的之前先复位 var effect= element[index].getAttribute("data-effect"); if(effect){ focusobj.setAttribute("style"," position: fixed; z-index: 19;width:"+(element[index].getBoundingClientRect().width)+"px ;height:"+(element[index].getBoundingClientRect().height)+"px; left:"+element[index].getBoundingClientRect().left+"px;top:"+element[index].getBoundingClientRect().top+"px;"); focusobj.setAttribute("class","focusobj current "+effect); } else { focusobj.setAttribute("class","hide "); focusobj.setAttribute("style",""); } } self.EventUtil = { add: function (obj, callback) { if (typeof (obj.onkeypress) == "null") { obj.onkeypress = function (e) { callback && callback(e) } } else { obj.onkeydown = function (e) { callback && callback(e) } } } } EventUtil.add(document, function (e) { _self.onPressdo(e); }); self.overIndex=function(){ //防止超出 if (_this.currentIndex >= element.length - 1) { _this.currentIndex = element.length - 1; } if (_this.currentIndex < 0) { _this.currentIndex = 0; } } self.isNumber = function(val){ var regPos = /^\d+(\.\d+)?$/; //非负浮点数 var regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数 if(regPos.test(val) || regNeg.test(val)){ return true; }else{ return false; } } self.ruleFn=function(index,direction){ if(rules && typeof rules[_this.className] == "object" &&typeof rules[_this.className]["line"] !="undefined" ) { var line = rules[_this.className]["line"]; }else{ var line=_this.hotbtn.length; } line=parseInt(line); if (rules && typeof rules[_this.className] == "object" && typeof rules[_this.className][_this.currentIndex]!="undefined"&& typeof rules[_this.className][_this.currentIndex][index]!="undefined") { var objRules = rules[_this.className][_this.currentIndex]; if(self.isNumber(objRules[index])){ _this.currentIndex = parseInt(_this.currentIndex) + parseInt(objRules[index]); }else if(Array.isArray(objRules[index])){ //_this.currentIndex = _this.currentIndex + parseInt(objRules[index][1]); _this.reSetClass(objRules[index][0], objRules[index][1]); }else if(typeof rules[_this.className]["line"] !="undefined"){ _this.currentIndex = _this.currentIndex + line; } } else { var jump = element[_this.currentIndex].getAttribute("data-"+direction); jump=parseInt(jump); var obj = rules[_this.className]; if(direction=="up"){ if(_this.currentIndex>line-1) //上边沿 _this.currentIndex= jump?_this.currentIndex-jump:_this.currentIndex-line; else if(obj&&typeof obj["up"]!="undefined" ) _this.reSetClass(obj[direction][0], obj["up"][1]); }else if(direction=="left"){ if((_this.currentIndex)%line!=0) //左边 _this.currentIndex= jump?_this.currentIndex-jump:_this.currentIndex-1; else if(obj&&typeof obj["left"]!="undefined" ) _this.reSetClass(obj["left"][0], obj["left"][1]); }else if(direction=="right"){ if((_this.currentIndex+1)%line!=0) //右边 _this.currentIndex= jump?_this.currentIndex+jump:_this.currentIndex+1; else if(obj&&typeof obj["right"]!="undefined" ) _this.reSetClass(obj["right"][0], obj["right"][1]); }else if(direction=="down"){ if(_this.hotbtn.length-line>_this.currentIndex) //下边沿 _this.currentIndex= jump?_this.currentIndex+jump:_this.currentIndex+line; else if(obj&&typeof obj["down"]!="undefined" ) _this.reSetClass(obj["down"][0], obj["down"][1]); } } } self.rule = function () { self.overIndex(); if (_this.event.keyCode == btnLeft) { self.ruleFn(0,"left"); } else if (_this.event.keyCode == btnRight) { self.ruleFn(2,"right"); } else if (_this.event.keyCode == btnUp) { self.ruleFn(1,"up"); } else if (_this.event.keyCode == btnDown) { self.ruleFn(3,"down"); } self.overIndex(); } self.onPressdo = function (e) { _this.event = e; _this.currentIndex = _this.currentIndex >= element.length - 1 ? element.length - 1 : _this.currentIndex; _this.prev = element[_this.currentIndex]; _this.prevIndex = _this.currentIndex; self.rule(); _this.current = element[_this.currentIndex]; _this.currentIndex = _this.currentIndex; _this.className = _this.className; if(init.rules[_this.className]&&(typeof init.rules[_this.className]["onPress"]) == "function") init.rules[_this.className]["onPress"].call(_this); else _this.onPress.call(_this); if (e.keyCode == btnEnter){ if(init.rules[_this.className]&&(typeof init.rules[_this.className]["onEnterPress"]) == "function") init.rules[_this.className]["onEnterPress"].call(_this); else _this.onEnterPress.call(_this); } _self.classDo(_this.currentIndex); keydefault(e); } this.onLoad();//插件加载时 } window.tvSysBtnBind = tvSysBtnBind; })(window)