nebukadneza
/
Vee-Shopping
1
0
Fork 0
Code Releases Activity

Add navigation prototype

Browse Source
master
Dario Ernst 9 years ago
parent aa1afa63b9
commit 6459e0eafc
6 changed files with 107 additions and 244 deletions
Show Stats Download Patch File Download Diff File

60
client/.eslintrc.js
Unescape View File

@ -1,31 +1,33 @@
module.exports = { module.exports = {
root: true, root: true,
parserOptions: { parserOptions: {
sourceType: 'module' sourceType: 'module'
}, },
env: { env: {
browser: true browser: true
}, },
globals: { globals: {
'cordova': true, 'cordova': true,
'DEV': true, 'DEV': true,
'PROD': true, 'PROD': true,
'__THEME': true '__THEME': true
}, },
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard', extends: 'standard',
// required to lint *.vue files // required to lint *.vue files
plugins: [ plugins: [
'html' 'html'
], ],
// add your custom rules here // add your custom rules here
'rules': { 'rules': {
// allow paren-less arrow functions // allow paren-less arrow functions
'arrow-parens': 0, 'arrow-parens': 0,
'one-var': 0, 'one-var': 0,
'import/first': 0, 'no-tabs': 0,
// allow debugger during development 'indent': 0,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, 'import/first': 0,
'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }] // allow debugger during development
} 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }]
}
} }

58
client/src/components/Error404.vue
Unescape View File

@ -1,58 +0,0 @@
<template>
<div class="error-page window-height window-width bg-light column items-center">
<div class="error-code bg-primary flex items-center justify-center">
404
</div>
<div>
<div class="error-card card bg-white column items-center justify-center">
<i class="text-grey-5">error_outline</i>
<p class="caption text-center">Oops. Nothing here...</p>
<p class="text-center group">
<button v-if="canGoBack" class="grey push small" @click="goBack">
<i class="on-left">keyboard_arrow_left</i>
Go back
</button>
<router-link to="/">
<button class="grey push small">
Go home
<i class="on-right">home</i>
</button>
</router-link>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
canGoBack: window.history.length > 1
}
},
methods: {
goBack () {
window.history.go(-1)
}
}
}
</script>
<style lang="stylus">
.error-page
.error-code
height 50vh
width 100%
padding-top 15vh
font-size 30vmax
color rgba(255, 255, 255, .2)
overflow hidden
.error-card
margin-top -25px
width 90vw
max-width 600px
padding 50px
i
font-size 5rem
</style>

173
client/src/components/Index.vue
Unescape View File

@ -1,155 +1,46 @@
<template> <template>
<q-layout> <q-layout>
<div slot="header" class="toolbar">
<q-toolbar-title :padding="0">
Quasar Framework v{{$q.version}}
</q-toolbar-title>
</div>
<!-- <!-- Toolbar -->
Replace following "div" with <div slot="header" class="toolbar">
"<router-view class="layout-view">" component
if using subRoutes
-->
<div class="layout-view">
<div class="logo-container non-selectable no-pointer-events">
<div class="logo" :style="position">
<img src="~assets/quasar-logo.png">
<p class="caption text-center">
<span v-if="orienting || rotating">Tilt your device.</span>
<template v-else>
<span class="desktop-only">Move your mouse.</span>
<span class="touch-only">Touch screen and move.</span>
</template>
</p>
</div>
</div>
</div>
</q-layout>
</template>
<script> <button class="hide-on-drawer-visible" @click="$refs.leftDrawer.open()">
const moveForce = 30 <i>menu</i>
const rotateForce = 40 </button>
const RAD_TO_DEG = 180 / Math.PI
import { Utils, Platform } from 'quasar' <q-toolbar-title :padding="0">
Vee-Shopping
</q-toolbar-title>
</div>
function getRotationFromAccel (accelX, accelY, accelZ) {
/* Reference: http://stackoverflow.com/questions/3755059/3d-accelerometer-calculate-the-orientation#answer-30195572 */
const sign = accelZ > 0 ? 1 : -1
const miu = 0.001
return { <!-- Left-side Drawer -->
roll: Math.atan2(accelY, sign * Math.sqrt(Math.pow(accelZ, 2) + miu * Math.pow(accelX, 2))) * RAD_TO_DEG, <q-drawer ref="leftDrawer">
pitch: -Math.atan2(accelX, Math.sqrt(Math.pow(accelY, 2) + Math.pow(accelZ, 2))) * RAD_TO_DEG <div class="toolbar">
} <q-toolbar-title>
} Menu
</q-toolbar-title>
</div>
export default { <div class="list no-border platform-delimiter">
data () { <q-drawer-link to="/">
return { Start
orienting: window.DeviceOrientationEvent && !Platform.is.desktop, </q-drawer-link>
rotating: window.DeviceMotionEvent && !Platform.is.desktop, <q-drawer-link to="/foo">
moveX: 0, Foo
moveY: 0, </q-drawer-link>
rotateY: 0, </div>
rotateX: 0
}
},
computed: {
position () {
const transform = `rotateX(${this.rotateX}deg) rotateY(${this.rotateY}deg)`
return {
top: this.moveY + 'px',
left: this.moveX + 'px',
'-webkit-transform': transform,
'-ms-transform': transform,
transform
}
}
},
methods: {
move (evt) {
const {width, height} = Utils.dom.viewport()
const {top, left} = Utils.event.position(evt)
const halfH = height / 2
const halfW = width / 2
this.moveX = (left - halfW) / halfW * -moveForce </q-drawer>
this.moveY = (top - halfH) / halfH * -moveForce
this.rotateY = (left / width * rotateForce * 2) - rotateForce
this.rotateX = -((top / height * rotateForce * 2) - rotateForce)
},
rotate (evt) {
if (evt.rotationRate &&
evt.rotationRate.beta !== null &&
evt.rotationRate.gamma !== null) {
this.rotateX = evt.rotationRate.beta * 0.7
this.rotateY = evt.rotationRate.gamma * -0.7
}
else {
/* evt.acceleration may be null in some cases, so we'll fall back
to evt.accelerationIncludingGravity */
const accelX = evt.acceleration.x || evt.accelerationIncludingGravity.x
const accelY = evt.acceleration.y || evt.accelerationIncludingGravity.y
const accelZ = evt.acceleration.z || evt.accelerationIncludingGravity.z - 9.81
const rotation = getRotationFromAccel(accelX, accelY, accelZ) <!-- Main View inside -->
this.rotateX = rotation.roll * 0.7 <router-view class="layout-view"></router-view>
this.rotateY = rotation.pitch * -0.7
}
},
orient (evt) {
if (evt.beta === null || evt.gamma === null) {
window.removeEventListener('deviceorientation', this.orient, false)
this.orienting = false
window.addEventListener('devicemotion', this.rotate, false) </q-layout>
} </template>
else {
this.rotateX = evt.beta * 0.7 <script>
this.rotateY = evt.gamma * -0.7
}
}
},
mounted () {
this.$nextTick(() => {
if (this.orienting) {
window.addEventListener('deviceorientation', this.orient, false)
}
else if (this.rotating) {
window.addEventListener('devicemove', this.rotate, false)
}
else {
document.addEventListener('mousemove', this.move)
}
})
},
beforeDestroy () {
if (this.orienting) {
window.removeEventListener('deviceorientation', this.orient, false)
}
else if (this.rotating) {
window.removeEventListener('devicemove', this.rotate, false)
}
else {
document.removeEventListener('mousemove', this.move)
}
}
}
</script> </script>
<style lang="stylus"> <style lang="stylus">
.logo-container
width 192px
height 268px
perspective 800px
position absolute
top 50%
left 50%
transform translateX(-50%) translateY(-50%)
.logo
position absolute
transform-style preserve-3d
</style> </style>

11
client/src/components/index/foo.vue
Unescape View File

@ -0,0 +1,11 @@
<template>
<div>
Foo {{ $route.params.id }}
</div>
</template>
<script>
</script>
<style lang="stylus">
</style>

11
client/src/components/index/main.vue
Unescape View File

@ -0,0 +1,11 @@
<template>
<div>
main {{ $route.params.id }}
</div>
</template>
<script>
</script>
<style lang="stylus">
</style>

38
client/src/router.js
Unescape View File

@ -4,24 +4,30 @@ import VueRouter from 'vue-router'
Vue.use(VueRouter) Vue.use(VueRouter)
function load (component) { function load (component) {
return () => System.import(`components/${component}.vue`) return () => System.import(`components/${component}.vue`)
} }
export default new VueRouter({ export default new VueRouter({
/* /*
* NOTE! VueRouter "history" mode DOESN'T works for Cordova builds, * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
* it is only to be used only for websites. * it is only to be used only for websites.
* *
* If you decide to go with "history" mode, please also open /config/index.js * If you decide to go with "history" mode, please also open /config/index.js
* and set "build.publicPath" to something other than an empty string. * and set "build.publicPath" to something other than an empty string.
* Example: '/' instead of current '' * Example: '/' instead of current ''
* *
* If switching back to default "hash" mode, don't forget to set the * If switching back to default "hash" mode, don't forget to set the
* build publicPath back to '' so Cordova builds work again. * build publicPath back to '' so Cordova builds work again.
*/ */
routes: [ routes: [
{ path: '/', component: load('Index') }, // Default {
{ path: '*', component: load('Error404') } // Not found path: '/',
] component: load('Index'),
children: [
{ path: '', component: load('index/main') },
{ path: 'foo', component: load('index/foo') }
]
}
]
}) })

Write Preview
Loading…
Cancel
Save