Permalink
Browse files

feat: Crossbrowser CSS for Ajax Bar

  • Loading branch information...
1 parent 12cdbfb commit cbf2bad2833697c8e7a8af22c3711eea6110b532 @rstoenescu rstoenescu committed Dec 11, 2016
Showing with 116 additions and 13 deletions.
  1. +95 −0 dev/components/components/ajax-bar.vue
  2. +21 −13 src/vue-components/ajax-bar/AjaxBar.vue
@@ -0,0 +1,95 @@
+<template>
+ <div>
+ <q-ajax-bar ref="bar" :position="position" :reverse="reverse" :size="computedSize" :color="color"></q-ajax-bar>
+ <div class="layout-padding" style="max-width: 600px;">
+ <p class="caption">Ajax Bar component captures Ajax calls automatically. This page here triggers events manually for demonstrating purposes only.</p>
+
+ <div class="card" style="margin-top: 25px">
+ <div class="card-title bg-primary text-center">
+ <button class="orange push" @click="trigger()">Trigger Event</button>
+ </div>
+
+ <p class="caption text-center">Try out some combinations for Ajax Bar.</p>
+ <div class="card-content group column">
+ <div class="auto column items-center">
+ <div class="flex">
+ <div class="column group">
+ <label>
+ <q-radio v-model="position" val="top"></q-radio>
+ Top
+ </label>
+ <label>
+ <q-radio v-model="position" val="bottom"></q-radio>
+ Bottom
+ </label>
+ </div>
+
+ <div class="column group">
+ <label>
+ <q-radio v-model="position" val="right"></q-radio>
+ Right
+ </label>
+ <label>
+ <q-radio v-model="position" val="left"></q-radio>
+ Left
+ </label>
+ </div>
+ </div>
+ </div>
+
+ <div class="row justify-center" style="margin-top: 15px;">
+ <label style="white-space: nowrap;">
+ <q-checkbox v-model="reverse"></q-checkbox>
+ Reverse Direction
+ </label>
+ </div>
+
+ <div>
+ <span>Size (<em>{{size}}px</em>)</span>
+ <q-range v-model="size" :min="2" :max="20" label-always style="margin-top: 25px;"></q-range>
+ </div>
+
+ <div class="auto column items-center">
+ <div class="flex">
+ <div class="floating-label">
+ <input required v-model="color">
+ <label>Color</label>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data () {
+ return {
+ position: 'bottom',
+ reverse: false,
+ size: 8,
+ color: '#e21b0c',
+
+ timeouts: []
+ }
+ },
+ computed: {
+ computedSize () {
+ return this.size + 'px'
+ }
+ },
+ methods: {
+ trigger () {
+ this.$refs.bar.start()
+
+ setTimeout(() => {
+ if (this.$refs.bar) {
+ this.$refs.bar.stop()
+ }
+ }, Math.random() * 5000 + 2000)
+ }
+ }
+}
+</script>
@@ -7,20 +7,29 @@
<script>
const
xhr = XMLHttpRequest,
- send = xhr.prototype.send
+ send = xhr.prototype.send,
+ prefix = ['-webkit-', '-moz-', '-ms-', '-o-']
+
+function prefixed (value) {
+ let o = {transform: value}
+ prefix.forEach(p => {
+ o[p + 'transform'] = value
+ })
+ return o
+}
function translate ({p, pos, active, horiz, reverse}) {
let x = 1, y = 1
if (horiz) {
if (reverse) { x = -1 }
if (pos === 'bottom') { y = -1 }
- return `translate3d(${x * (p - 100)}%, ${active ? 0 : y * -200}%, 0)`
+ return prefixed(`translate3d(${x * (p - 100)}%, ${active ? 0 : y * -200}%, 0)`)
}
if (reverse) { y = -1 }
if (pos === 'right') { x = -1 }
- return `translate3d(${active ? 0 : x * -200}%, ${y * (p - 100)}%, 0)`
+ return prefixed(`translate3d(${active ? 0 : x * -200}%, ${y * (p - 100)}%, 0)`)
}
function inc (p, amount) {
@@ -100,16 +109,15 @@ export default {
},
computed: {
containerStyle () {
- return {
- [this.sizeProp]: this.size,
- transform: translate({
- p: this.progress,
- pos: this.position,
- active: this.active,
- horiz: this.horizontal,
- reverse: this.reverse
- })
- }
+ let o = translate({
+ p: this.progress,
+ pos: this.position,
+ active: this.active,
+ horiz: this.horizontal,
+ reverse: this.reverse
+ })
+ o[this.sizeProp] = this.size
+ return o
},
innerStyle () {
return {background: this.color}

0 comments on commit cbf2bad

Please sign in to comment.