add float mode

Author: SevenOutman

README.md

@@ -49,6 +49,7 @@ Props are mostly the same as [APlayer's options](https://aplayer.js.org/#/home?i
 | music| Object | *required* | Music info for current playing music, see [Music info](https://github.com/SevenOutman/vue-aplayer#music-info) |
 | list | Array | `[]` | Music list to play and display. If list is not empty, music list panel will be shown, even if the only song in the list is identical to music prop. |
 | mini | Boolean | `false` | Mini mode |
+| float | Boolean | `false` | Float mode, in which you can drag the player around and leave it anywhere on your page |
 | autoplay | Boolean | `false` | Whether to autoplay. If more than one mutex player are set autoplay, only the first one will play. |
 | showlrc | Boolean | `false` | Whether to show lyrics or not |
 | mutex | Boolean | `false` | Pause other players when this player is playing |

src/components/aplayer-controller-progress.vue

@@ -26,17 +26,9 @@
 </template>
 
 <script>
-  function getElementViewLeft (element) {
-    let actualLeft = element.offsetLeft
-    let current = element.offsetParent
-    let elementScrollLeft
-    while (current !== null) {
-      actualLeft += current.offsetLeft
-      current = current.offsetParent
-    }
-    elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft
-    return actualLeft - elementScrollLeft
-  }
+
+
+  import {getElementViewLeft} from '../utils'
 
   export default {
     props: ['loadProgress', 'playProgress', 'theme'],

src/components/aplayer-controller-volume.vue

@@ -26,21 +26,10 @@
 
 <script>
   import IconButton from './aplayer-iconbutton.vue'
+  import {getElementViewTop} from '../utils'
 
   const barHeight = 40
 
-  function getElementViewTop (element) {
-    let actualTop = element.offsetTop
-    let current = element.offsetParent
-    let elementScrollTop
-    while (current !== null) {
-      actualTop += current.offsetTop
-      current = current.offsetParent
-    }
-    elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop
-    return actualTop - elementScrollTop
-  }
-
   export default {
     components: {
       IconButton,

src/components/aplayer-thumbnail.vue

@@ -2,7 +2,8 @@
   <div
     class="aplayer-pic"
     :style="currentPicStyleObj"
-    @click="$emit('toggleplay')"
+    @mousedown="onDragBegin"
+    @click="onClick"
   >
     <div class="aplayer-button" :class="playing ? 'aplayer-pause' : 'aplayer-play'">
       <icon-button
@@ -14,6 +15,7 @@
 </template>
 <script>
   import IconButton from './aplayer-iconbutton.vue'
+  import {getElementViewLeft, getElementViewTop} from '../utils'
 
   export default {
     components: {
@@ -25,6 +27,17 @@
         type: Boolean,
         default: false,
       },
+      enableDrag: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        hasMovedSinceMouseDown: false,
+        dragStartX: 0,
+        dragStartY: 0
+      }
     },
     computed: {
       currentPicStyleObj () {
@@ -34,12 +47,45 @@
         }
       },
     },
+    methods: {
+      onDragBegin (e) {
+        if (this.enableDrag) {
+          this.hasMovedSinceMouseDown = false
+          this.$emit('dragbegin')
+          this.dragStartX = e.clientX
+          this.dragStartY = e.clientY
+          document.addEventListener('mousemove', this.onDocumentMouseMove)
+          document.addEventListener('mouseup', this.onDocumentMouseUp)
+        }
+      },
+      onDocumentMouseMove (e) {
+        this.hasMovedSinceMouseDown = true
+        this.$emit('dragging', {offsetLeft: e.clientX - this.dragStartX, offsetTop: e.clientY - this.dragStartY})
+      },
+      onDocumentMouseUp (e) {
+        document.removeEventListener('mouseup', this.onDocumentMouseUp)
+        document.removeEventListener('mousemove', this.onDocumentMouseMove)
+
+        this.$emit('dragend')
+      },
+      onClick() {
+        if (!this.hasMovedSinceMouseDown) {
+          this.$emit('toggleplay')
+        }
+      }
+    }
   }
 </script>
 
 <style lang="scss">
   @import "../scss/variables";
 
+  .aplayer-float {
+    .aplayer-pic:active {
+      cursor: move;
+    }
+  }
+
   .aplayer-pic {
     position: relative;
     float: left;

src/demo/App.vue

@@ -64,9 +64,10 @@
         :list='list3'
         list-max-height="80px"
       />
-      <h3>Mini Mode</h3>
+      <h3>Mini mode and float mode (try drag it around)</h3>
       <aplayer
         mini
+        float
         mutex
         theme="#e6d0b2"
         mode="circulation"

src/utils.js

@@ -63,4 +63,26 @@ export function warn (message) {
 
 export function deprecatedProp(name, sinceVersion, alternative) {
   return warn(`'${name}' is deprecated since v${sinceVersion}, and will be removed in future releases, use '${alternative}' instead`)
-}
+}
+export function getElementViewLeft (element) {
+  let actualLeft = element.offsetLeft
+  let current = element.offsetParent
+  let elementScrollLeft
+  while (current !== null) {
+    actualLeft += current.offsetLeft
+    current = current.offsetParent
+  }
+  elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft
+  return actualLeft - elementScrollLeft
+}
+export function getElementViewTop (element) {
+  let actualTop = element.offsetTop
+  let current = element.offsetParent
+  let elementScrollTop
+  while (current !== null) {
+    actualTop += current.offsetTop
+    current = current.offsetParent
+  }
+  elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop
+  return actualTop - elementScrollTop
+}