vue-tv/dist/vue-spatial-navigation.min.js

Spatial navigation library based on Vue js

var VueSpatialNavigation=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],i=!0,s=!1,o=void 0;try{for(var d,r=e[Symbol.iterator]();!(i=(d=r.next()).done)&&(n.push(d.value),!t||n.length!==t);i=!0);}catch(e){s=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(s)throw o}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return o(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var d=new(n(t).default),r=!1,u=[],c={37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"},a=function(e){if(r){var t=u.findIndex((function(t){return t.id===e.id}));t>-1?u[t]=e:u.push(e)}else r=!0,u.push(e),window.addEventListener("keydown",(function(e){u.forEach((function(t){if(!t.preCondition||t.preCondition())return t[c[e.keyCode]]&&t[c[e.keyCode]]()}))}))},l=function(e){var t=u.findIndex((function(t){return t.id===e}));t>-1&&u.splice(t,1)},f={name:"focusableGrid",props:{child:{type:Object,required:!0},items:{type:Array,required:!0},isFocused:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},shouldScroll:{type:Boolean,default:!1},maxColumn:{type:Number,default:6},id:{default:Math.random().toString()}},data:function(){return{focusedIndex:0,scrollAmount:0,activeRow:0,activeColumn:0}},computed:{style:function(){return{transform:"translateY(".concat(this.scrollAmount,"px)")}}},methods:{getScrollAmount:function(e,t){if(e){var n=e.clientHeight;return t?-n:n}return 0},isPrevColumnPresent:function(){return this.focusedIndex>0&&this.activeColumn>0},isNextColumnPresent:function(){return this.focusedIndex<this.items.length-1&&this.activeColumn<this.maxColumn-1},isPrevRowPresent:function(){return this.focusedIndex>0&&this.activeRow>0},isNextRowPresent:function(){return this.focusedIndex<this.items.length-1&&this.activeRow<this.items.length/this.maxColumn-1},updateColumn:function(e){var t=e?-1:1;this.focusedIndex+=t,this.activeColumn+=t},updateRow:function(e){var t=e?-this.maxColumn:this.maxColumn,n=e?-1:1;this.focusedIndex+=t,this.activeRow+=n,this.isFocusIndexOutOfBound()&&(this.focusedIndex=this.items.length-1,this.activeColumn=(this.items.length-1)%this.maxColumn)},isFocusIndexOutOfBound:function(){return this.focusedIndex>this.items.length-1},updateScrollValue:function(e){this.scrollAmount+=this.getScrollAmount(this.$refs.childItem[this.focusedIndex],e)},handleFocusLost:function(){this.focusedIndex>this.items.length-1&&(this.focusedIndex=this.items.length-1)},resetFocus:function(e){!e.force&&this.isFocused||(this.focusedIndex=0,this.activeColumn=0,this.activeRow=0,this.scrollAmount=0)}},updated:function(){this.handleFocusLost()},mounted:function(){var e=this;a({LEFT:function(){e.isPrevColumnPresent()&&e.updateColumn("reverse")},RIGHT:function(){e.isNextColumnPresent()&&e.updateColumn()},UP:function(){e.isPrevRowPresent()&&(e.updateRow("reverse"),e.shouldScroll&&e.updateScrollValue())},DOWN:function(){e.isNextRowPresent()&&(e.updateRow(),e.shouldScroll&&e.updateScrollValue("negative"))},preCondition:function(){return e.isFocused&&!e.disabled},id:"grid-".concat(this.id)}),d.on("RESET_FOCUS",this.resetFocus)},destroyed:function(){l("grid-".concat(this.id)),d.off("RESET_FOCUS",this.resetFocus)}};function h(e,t,n,i,s,o,d,r,u,c){"boolean"!=typeof d&&(u=r,r=d,d=!1);const a="function"==typeof n?n.options:n;let l;if(e&&e.render&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns,a._compiled=!0,s&&(a.functional=!0)),i&&(a._scopeId=i),o?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,u(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},a._ssrRegister=l):t&&(l=d?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),l)if(a.functional){const e=a.render;a.render=function(t,n){return l.call(n),e(t,n)}}else{const e=a.beforeCreate;a.beforeCreate=e?[].concat(e,l):[l]}return n}const m="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function x(e){return(e,t)=>function(e,t){const n=m?t.media||"default":e,i=I[n]||(I[n]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===p&&(p=document.head||document.getElementsByTagName("head")[0]),p.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,t=document.createTextNode(n),s=i.element.childNodes;s[e]&&i.element.removeChild(s[e]),s.length?i.element.insertBefore(t,s[e]):i.element.appendChild(t)}}}(e,t)}let p;const I={};var v=h({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"grid",staticClass:"grid",class:{focus:e.isFocused},style:e.style},e._l(e.items,(function(t,i){return n("div",{key:i,ref:"childItem",refInFor:!0,staticClass:"child"},[n(e.child,e._b({tag:"component",attrs:{id:"child"+(t.id||i),isFocused:e.isFocused&&i===e.focusedIndex}},"component",t,!1))],1)})),0)},staticRenderFns:[]},(function(e){e&&e("data-v-f3e4edfc_0",{source:".grid[data-v-f3e4edfc]{display:flex;flex-wrap:wrap}.child[data-v-f3e4edfc]{display:flex}.vertical[data-v-f3e4edfc]{flex-direction:column}",map:void 0,media:void 0})}),f,"data-v-f3e4edfc",!1,void 0,!1,x,void 0,void 0),y=h({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"list",staticClass:"list",class:{focus:e.isFocused,vertical:"VERTICAL"===e.orientation},style:e.style},e._l(e.items,(function(t,i){return n("div",{key:i,ref:"childItem",refInFor:!0,staticClass:"child"},[n(e.child,e._b({tag:"component",class:{disabled:e.disabledIndex.includes(i)},attrs:{id:"child"+(t.id||i),isFocused:e.isFocused&&i===e.focusedIndex,disabled:t.disabled||e.disabledIndex.includes(i)}},"component",t,!1))],1)})),0)},staticRenderFns:[]},(function(e){e&&e("data-v-72ac378b_0",{source:".list[data-v-72ac378b]{display:flex}.child[data-v-72ac378b]{display:flex}.vertical[data-v-72ac378b]{flex-direction:column}.disabled[data-v-72ac378b]{background:grey}",map:void 0,media:void 0})}),{name:"focusableList",props:{child:{type:Object,required:!0},items:{type:Array,required:!0},isFocused:{type:Boolean,default:!1},defaultIndex:{type:Number,default:-1},disabled:{type:Boolean,default:!1},disabledIndex:{type:Array,default:function(){return[-1]}},orientation:{type:String,default:"HORIZONTAL"},shouldScroll:{type:Boolean,default:!1},id:{default:Math.random().toString()}},data:function(){return{focusedIndex:-1,scrollAmount:0}},computed:{style:function(){return{transform:"translate".concat("VERTICAL"===this.orientation?"Y":"X","(").concat(this.scrollAmount,"px)")}}},methods:{isEnabledIndex:function(e){return!this.disabledIndex.includes(e)},setInitialvalue:function(){this.defaultIndex>-1&&this.defaultIndex<this.items.length&&this.isEnabledIndex(this.defaultIndex)?this.focusedIndex=this.defaultIndex:this.focusedIndex=this.getValidNextIndex(),this.focusedIndex>=-1&&this.updateScrollValue()},getKeysByOrientation:function(e){return{REVERSE:"VERTICAL"===e?"UP":"LEFT",FORWARD:"VERTICAL"===e?"DOWN":"RIGHT"}},getScrollAmountByOrientation:function(e,t){return e?-e["VERTICAL"===t?"clientHeight":"clientWidth"]:0},handleFocusLost:function(){(this.focusedIndex>this.items.length-1||this.disabledIndex.includes(this.focusedIndex))&&(this.getValidPrevIndex()!==this.focusedIndex?(this.$emit("onFocusLost",{prevIndex:this.focusedIndex,newIndex:this.getValidPrevIndex()}),this.focusedIndex=this.getValidPrevIndex()):this.getValidNextIndex()!==this.focusedIndex?(this.$emit("onFocusLost",{prevIndex:this.focusedIndex,newIndex:this.getValidNextIndex()}),this.focusedIndex=this.getValidNextIndex()):(this.focusedIndex=-1,this.$emit("onFocusLost",{err:"No items to set focus, either disable it or provide new item to setFocus"})))},isPrevItemPresent:function(){return this.focusedIndex>0},isNextItemPresent:function(){return this.focusedIndex<this.items.length-1},getValidNextIndex:function(){for(var e=this.focusedIndex+1,t=this.focusedIndex;e<this.items.length;){if(this.isEnabledIndex(e)){t=e,this.$emit("onFocusChange",{prevIndex:this.focusedIndex,newIndex:t,item:this.items[t]});break}e++}return t},getValidPrevIndex:function(){for(var e=this.focusedIndex-1,t=this.focusedIndex;e>=0;){if(this.isEnabledIndex(e)&&e<this.items.length){t=e,this.$emit("onFocusChange",{prevIndex:this.focusedIndex,newIndex:t,item:this.items[t]});break}e--}return t},updateFocus:function(e){this.focusedIndex=e?this.getValidPrevIndex():this.getValidNextIndex()},updateScrollValue:function(){this.shouldScroll&&this.$refs.childItem&&(this.scrollAmount=this.getScrollAmountByOrientation(this.$refs.childItem[0],this.orientation)*this.focusedIndex)},resetFocus:function(e){!e.force&&this.isFocused||(this.focusedIndex=0,this.scrollAmount=0)},setExternalFocus:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.index,n=e.id;n===this.id&&(this.isEnabledIndex(t)&&t>=0&&t<this.items.length-1?(this.focusedIndex=t,this.updateScrollValue()):console.error("focus to the given index ".concat(t," is not possible")))}},updated:function(){this.handleFocusLost()},mounted:function(){var e,t=this;this.setInitialvalue();var n=this.getKeysByOrientation(this.orientation);a((i(e={id:"list-".concat(this.id)},n.REVERSE,(function(){t.isPrevItemPresent()&&(t.updateFocus("reverse"),t.updateScrollValue())})),i(e,n.FORWARD,(function(){t.isNextItemPresent()&&(t.updateFocus(),t.updateScrollValue())})),i(e,"preCondition",(function(){return t.isFocused&&!t.disabled})),e)),d.on("RESET_FOCUS",this.resetFocus),d.on("SET_FOCUS",this.setExternalFocus)},destroyed:function(){l("list-".concat(this.id)),d.off("RESET_FOCUS",this.resetFocus),d.off("SET_FOCUS",this.setExternalFocus)}},"data-v-72ac378b",!1,void 0,!1,x,void 0,void 0),g=Object.freeze({__proto__:null,FocusableList:y,Grid:v}),b=function(e){b.installed||(b.installed=!0,Object.entries(g).forEach((function(t){var n=s(t,2),i=n[0],o=n[1];console.error("componentName",i),e.component(i,o)})))},C={install:b},F=null;return"undefined"!=typeof window?F=window.Vue:"undefined"!=typeof global&&(F=global.Vue),F&&F.use(C),e.FocusableList=y,e.Grid=v,e.default=C,e}({},mitt);