zircle
Version:
A frontend library to develop zoomable user interfaces
181 lines (175 loc) • 5.09 kB
JavaScript
import store from '../store'
import Vue from 'vue'
function retrieveViewName (pos) {
let viewName = ''
if (store.state.history.length >= pos) {
viewName = store.state.history[store.state.history.length - pos].name
}
return viewName
}
function transformViewName (view) {
view = view.toLowerCase()
let count = 0
for (let i = 1; i <= store.state.history.length; i++) {
if (store.state.history[store.state.history.length - i].name.split('--')[0] === view) {
count += 1
}
}
if (store.state.isRouterEnabled) {
return view
} else {
return view + '--' + count
}
}
function parseView (data) {
let name
let route
let paramPath = ''
let path
if (typeof data === 'string') {
name = transformViewName(data)
route = { name }
path = '/' + name
} else {
Object.keys(data.params).forEach(function (key) {
paramPath += '/:' + key
})
name = transformViewName(data.name)
route = { name, params: data.params }
path = '/' + name + '' + paramPath
}
return {
name,
route,
path
}
}
const navigation = {
addToHistory (view, position, params) {
return store.state.history.push({
name: view.name,
position,
params,
component: store.actions.resolveComponent(store.actions.getComponentList(), view.name)
})
},
resolveComponent (list, view) {
view = view.split('--')[0]
const key = Object.keys(list).find((k) => k.toLowerCase() === view)
if (key) {
return list[key]
} else {
return Vue.component('missing', {
render (h) {
return h('z-view', view + ' not found')
}
})
}
},
setComponentList (list) {
store.state.componentList = Object.assign({}, store.state.componentList, list)
},
getComponentList () {
return store.state.componentList
},
getCurrentViewName () {
return retrieveViewName(1)
},
getPreviousViewName () {
return retrieveViewName(2)
},
getPastViewName () {
return retrieveViewName(3)
},
getHistoryLength () {
return store.state.history.length
},
getHistory () {
return store.state.history.slice(0)
},
setNavigationMode (value) {
if (value === 'forward' || value === 'backward' || value === 'iddle' || value === 'replace') {
store.state.navigationMode = value
}
},
getNavigationMode () {
return store.state.navigationMode
},
getBackwardNavigationState () {
return store.state.backwardNavigation
},
allowBackwardNavigation (value) {
if (value !== store.state.backwardNavigation) {
store.state.backwardNavigation = value
}
},
toView (options) {
if (typeof options === 'string') {
store.actions.setView(options)
return
}
if (!options.to) store.actions.setLog('Programmatic navigation: "to" is required ', 'error')
if (!options.fromSpot) store.actions.setLog('Programmatic navigation: "fromSpot" is required ', 'error')
if (options.fromSpot && typeof options.fromSpot !== 'object') store.actions.setLog('Programmatic navigation: "fromSpot" should be an object ', 'error')
if (options.params && typeof options.params !== 'object') store.actions.setLog('Programmatic navigation: "params" should be an object ', 'error')
if (options.to && options.fromSpot) {
store.actions.setView(
{
name: options.to,
params: options.params || {}
},
options.fromSpot.position
? {
position: {
X: options.fromSpot.position.Xabs,
Y: options.fromSpot.position.Yabs,
scale: options.fromSpot.position.scale,
Xi: options.fromSpot.position.Xi,
Yi: options.fromSpot.position.Yi,
scalei: options.fromSpot.position.scalei
}
}
: {}
)
}
},
setView (data, options) {
if (store.state.history.length >= 6) {
store.actions.setLog('Max zoom level reached')
return
}
const view = parseView(data)
const position = (
!options || !options.position || options.position.scale === 0
? {
X: 0,
Y: 0,
scale: 1,
Xi: 0,
Yi: 0,
scalei: 1
}
: options.position
)
if (store.state.isRouterEnabled === false) {
store.actions.addToHistory(view, position, view.route.params)
store.actions.setNavigationMode('forward')
if (view.route) store.state.params = view.route.params
} else {
store.actions.evaluateRoute(view, position)
}
},
goBack () {
if (store.state.history.length > 1) {
store.actions.setNavigationMode('backward')
store.state.history.pop()
if (store.state.isRouterEnabled === true) {
store.state.params = ''
} else {
store.state.params = store.state.history[store.state.history.length - 1].params
}
store.actions.setLog('goBack() => ' + store.state.history[store.state.history.length - 1].name)
}
}
}
export default navigation