feat: Final build for v0.6.0

build/script.dev.js

@@ -6,6 +6,7 @@ var
   webpackConfig = require('./webpack.dev.config'),
   platform = require('./platform'),
   app = express(),
+  port = process.env.PORT || 8080,
   compiler = webpack(webpackConfig),
   devMiddleware = require('webpack-dev-middleware')(compiler, {
     publicPath: '',
@@ -40,11 +41,11 @@ app.use('/statics', express.static('./dev/statics'))
 // try to serve Cordova statics for Play App
 app.use(express.static(platform.cordovaAssets))
 
-module.exports = app.listen(8080, function (err) {
+module.exports = app.listen(port, function (err) {
   if (err) {
     console.log(err)
     return
   }
   console.log('Developing with "' + platform.theme + '" theme')
-  console.log('Listening at http://localhost:8080\n')
+  console.log('Listening at http://localhost:' + port + '\n')
 })

dev/views/dialog.vue

@@ -5,7 +5,6 @@
   <button class="primary" @click="radio()">Radio</button>
   <button class="primary" @click="checkbox()">Checkbox</button>
   <button class="primary" @click="checkbox(true)">Toggle</button>
-  <button class="primary" @click="range()">Range</button>
   <button class="primary" @click="progress()">Progress</button>
   <button class="primary" @click="progress2()">Progress 2</button>
 
@@ -251,46 +250,6 @@ export default {
       ]
 
       Dialog.create(options).show()
-    },
-    range () {
-      Dialog.create({
-        title: 'Ranges',
-        ranges: [
-          {
-            label: 'Volume',
-            min: 1,
-            max: 5,
-            iconMin: 'volume_down',
-            iconMax: 'volume_up'
-          },
-          {
-            label: 'Brightness',
-            min: 1,
-            max: 5,
-            value: 2
-          },
-          {
-            label: 'Speed',
-            min: 1,
-            max: 10,
-            value: 6
-          },
-          {
-            label: 'Noise Level',
-            min: 4,
-            max: 15
-          }
-        ],
-        buttons: [
-          'Cancel',
-          {
-            label: 'Change',
-            handler (data) {
-              console.log('OK!', data)
-            }
-          }
-        ]
-      }).show()
     }
   }
 }

src/components/action-sheet/action-sheet.js

@@ -59,7 +59,8 @@ function create (data) {
   .css(getCSS())
   .set({
     transitionIn: {translateY: [0, '101%']},
-    transitionOut: {translateY: ['101%', 0]}
+    transitionOut: {translateY: ['101%', 0]},
+    onBackButton: data.dismissButton.handler
   })
 
   modal.$el.classList.remove('items-center')

src/components/dialog/dialog.html

@@ -39,20 +39,6 @@
       </div>
     </label>
   </div>
-  <div v-if="ranges" class="modal-controls modal-scroll list">
-    <template v-for="range in ranges">
-      <div v-if="range.label" class="list-header">{{{* range.label}}}: {{range.value}}</div>
-      <div class="item">
-        <i v-if="range.iconMin" class="item-right-margin">{{* range.iconMin}}</i>
-        <div v-else class="item-right-margin">{{* range.min}}</div>
-
-        <quasar-range :model.sync="range.value" :min.once="range.min" :max.once="range.max"></quasar-range>
-
-        <i v-if="range.iconMax" class="item-left-margin">{{* range.iconMax}}</i>
-        <div v-else class="item-left-margin">{{* range.max}}</div>
-      </div>
-    </template>
-  </div>
   <div v-if="progress" class="modal-slim-body">
     <quasar-progress
       :model="progress.model"

src/components/dialog/dialog.js

@@ -80,23 +80,6 @@ function parseCheckboxes (checkboxes) {
   })
 }
 
-function parseRanges (ranges) {
-  if (!Array.isArray(ranges)) {
-    throw new Error('Dialog ranges parameter must be an array.')
-  }
-
-  if (ranges.some(
-    range => typeof range.min === 'undefined' || typeof range.max === 'undefined'
-  )) {
-    throw new Error('One of Dialog\'s range parameter is missing either min or max')
-  }
-
-  return ranges.map(range => {
-    range.value = range.value || range.min
-    return range
-  })
-}
-
 function parseProgress (progress) {
   if (progress !== Object(progress)) {
     throw new Error('Progress property is not an Object.')
@@ -131,9 +114,6 @@ function create (options) {
   else if (data.toggles) {
     data.toggles = parseCheckboxes(data.toggles)
   }
-  else if (data.ranges) {
-    data.ranges = parseRanges(data.ranges)
-  }
   else if (data.progress) {
     data.progress = parseProgress(data.progress)
   }
@@ -159,14 +139,6 @@ function create (options) {
             checkbox => checkbox.checked
           ).map(checkbox => checkbox.value)
         }
-        if (this.ranges) {
-          return this.ranges.map(range => {
-            return {
-              label: range.label,
-              value: range.value
-            }
-          })
-        }
         if (this.progress && !this.progress.indeterminate) {
           return this.progress.model
         }

src/components/modal/modal.js

@@ -1,4 +1,5 @@
 import Utils from '../../utils'
+import Platform from '../../platform'
 import { Vue } from '../../install'
 import { current as theme } from '../../theme'
 
@@ -111,6 +112,7 @@ class Modal {
 
     this.__popstate = () => {
       if (
+        !Platform.within.iframe &&
         window.history.state &&
         window.history.state.modalId &&
         window.history.state.modalId >= this.__modalId
@@ -129,8 +131,11 @@ class Modal {
             if (this.selfDestroy) {
               this.destroy()
             }
+            if (this.__closedByBackButton && this.onBackButton) {
+              this.onBackButton()
+            }
             this.__onCloseHandlers.forEach(
-              handler => { console.log('onCloseHandler'); handler() }
+              handler => { handler() }
             )
             if (typeof this.__onClose === 'function') {
               this.__onClose()
@@ -153,12 +158,17 @@ class Modal {
       if (this.__customElement) {
         this.$backdrop.removeEventListener('click', this.close)
       }
-      window.removeEventListener('popstate', this.__popstate)
+      if (!Platform.within.iframe) {
+        window.removeEventListener('popstate', this.__popstate)
+      }
       Velocity(this.$content, effect, options)
     }
     this.__modalId = ++openedModalNumber
-    window.history.pushState({modalId: this.__modalId}, '')
-    window.addEventListener('popstate', this.__popstate)
+    this.__closedByBackButton = true
+    if (!Platform.within.iframe) {
+      window.history.pushState({modalId: this.__modalId}, '')
+      window.addEventListener('popstate', this.__popstate)
+    }
 
     // finally show it
     Velocity(this.$content, effect, options)
@@ -168,21 +178,27 @@ class Modal {
 
   close (onClose) {
     this.__onClose = onClose
-    window.history.go(-1)
+    this.__closedByBackButton = false
+    if (Platform.within.iframe) {
+      this.__popstate()
+    }
+    else {
+      window.history.go(-1)
+    }
     return this
   }
 
   onShow (handler) {
-    this.__trigger('onShow', handler)
+    this.__registerTrigger('onShow', handler)
     return this
   }
 
   onClose (handler) {
-    this.__trigger('onClose', handler)
+    this.__registerTrigger('onClose', handler)
     return this
   }
 
-  __trigger (event, handler) {
+  __registerTrigger (event, handler) {
     if (typeof handler !== 'function') {
       throw new Error('Modal ' + event + ' handler must be a function.')
     }

src/themes/core/colors.styl

@@ -306,14 +306,14 @@ $blue-grey-14 = #455a64
 
 
 $colors ?= {
-  primary: $primary
-  secondary: $secondary
-  tertiary: $tertiary
-  positive: $positive
-  negative: $negative
-  warning: $warning
-  info: $info
-  light: $light
+  primary: $primary,
+  secondary: $secondary,
+  tertiary: $tertiary,
+  positive: $positive,
+  negative: $negative,
+  warning: $warning,
+  info: $info,
+  light: $light,
   dark: $dark,
   white: $white,
 

src/vue-components/slider/slider.vue

@@ -46,6 +46,8 @@
 </template>
 
 <script>
+import Platform from '../../platform'
+
 export default {
   props: {
     arrows: {
@@ -123,19 +125,26 @@ export default {
     },
     toggleFullscreen () {
       if (this.inFullscreen) {
-        window.history.go(-1)
+        if (Platform.within.iframe) {
+          this.inFullscreen = false
+        }
+        else {
+          window.history.go(-1)
+        }
         return
       }
 
       this.inFullscreen = true
-      window.history.pushState({}, '')
-      window.addEventListener('popstate', this.popState)
+      if (!Platform.within.iframe) {
+        window.history.pushState({}, '')
+        window.addEventListener('popstate', this.__popState)
+      }
     },
-    popState () {
+    __popState () {
       if (this.inFullscreen) {
         this.inFullscreen = false
       }
-      window.removeEventListener('popstate', this.popState)
+      window.removeEventListener('popstate', this.__popState)
     }
   },
   ready () {