Close volume popups if click outside.

ChangeLog

@@ -5,6 +5,7 @@
    scrolled.
 3. Add down arrow next to player name in 'Player' settings dialogs, if more
    than 1 player.
+4. Close volume popups if click outside.
 
 5.7.2
 -----

MaterialSkin/HTML/material/html/js/groupvolume-dialog.js

@@ -25,7 +25,7 @@ function grpVolSort(a, b) {
 
 Vue.component('lms-groupvolume', {
     template: `
-<v-sheet v-model="show" v-if="show" elevation="5" class="vol-sheet group-vol noselect">
+<v-sheet v-model="show" v-if="show" elevation="5" class="vol-sheet group-vol noselect" v-clickoutside="close">
  <v-container grid-list-md text-xs-center id="gv-container">
   <v-layout row wrap>
    <template v-for="(player, index) in players">
@@ -41,7 +41,7 @@ Vue.component('lms-groupvolume', {
  <div class="padding"></div>
  <v-card-actions>
   <v-spacer></v-spacer>
-  <v-btn flat @click.native="show = false">{{i18n('Close')}}</v-btn>
+  <v-btn flat @click.native="close">{{i18n('Close')}}</v-btn>
  </v-card-actions>
 </v-sheet>
     `,
@@ -341,6 +341,7 @@ Vue.component('lms-groupvolume', {
     watch: {
         'show': function(val) {
             this.$store.commit('dialogOpen', {name:'groupvolume', shown:val});
+            this.$store.commit('menuVisible', {name:'groupvolume', shown:val});
             this.resetCloseTimer();
             this.cancelUpdateTimer();
             bus.$emit('subscribeAll', val);

MaterialSkin/HTML/material/html/js/store.js

@@ -7,6 +7,7 @@
 'use strict';
 
 const VALID_SKIP_SECONDS = new Set(SKIP_SECONDS_VALS);
+const FAKE_MENU = new Set(['volume', 'groupvolume'])
 var lmsNumVisibleMenus = 0;
 
 function copyPlayer(p){
@@ -671,6 +672,9 @@ const store = new Vuex.Store({
             if (val.shown) {
                 state.visibleMenus.add(val.name);
                 lmsNumVisibleMenus = state.visibleMenus.size;
+                if (FAKE_MENU.has(val.name)) {
+                    return;
+                }
                 bus.$emit('menuOpen');
                 addBrowserHistoryItem();
                 if (queryParams.botPad>18) {

MaterialSkin/HTML/material/html/js/volume.js

@@ -8,9 +8,8 @@
 
 Vue.component('lms-volume', {
     template: `
-<v-sheet v-model="show" v-if="show" elevation="5" class="vol-sheet noselect">
+<v-sheet v-model="show" v-if="show" elevation="5" class="vol-sheet noselect" v-clickoutside="close">
  <v-container grid-list-md text-xs-center>
-  <volume-control
   <v-layout row wrap>
    <v-flex xs12>
     <volume-control :value="playerVolume" :muted="muted" :playing="true" :dvc="dvc" :layout="0" @inc="volumeUp" @dec="volumeDown" @changed="setVolume" @moving="movingSlider" @toggleMute="toggleMute()"></volume-control>
@@ -21,7 +20,7 @@ Vue.component('lms-volume', {
  <v-card-actions>
   <v-btn flat v-if="dvc==VOL_STD" @click.native="toggleMute()">{{muted ? i18n('Unmute') : i18n('Mute')}}</v-btn>
   <v-spacer></v-spacer>
-  <v-btn flat @click.native="show = false">{{i18n('Close')}}</v-btn>
+  <v-btn flat @click.native="close">{{i18n('Close')}}</v-btn>
  </v-card-actions>
 </v-sheet>
     `,
@@ -143,7 +142,7 @@ Vue.component('lms-volume', {
         resetCloseTimer() {
             this.cancelCloseTimer();
             this.closeTimer = setTimeout(function () {
-                this.show = false;
+                this.close();
             }.bind(this), LMS_VOLUME_CLOSE_TIMEOUT);
         },
         cancelUpdateTimer() {
@@ -156,6 +155,7 @@ Vue.component('lms-volume', {
     watch: {
         'show': function(val) {
             this.$store.commit('dialogOpen', {name:'volume', shown:val});
+            this.$store.commit('menuVisible', {name:'volume', shown:val});
             this.resetCloseTimer();
             this.cancelUpdateTimer();
         }

MaterialSkin/HTML/material/html/lib/clickoutside.js

@@ -0,0 +1,13 @@
+Vue.directive('clickoutside', {
+    bind: function (element, binding, vnode) {
+        element.clickOutsideEvent = function (event) {
+            if (!(element === event.target || element.contains(event.target))) {
+                vnode.context[binding.expression](event);
+            }
+        };
+        document.body.addEventListener('click', element.clickOutsideEvent)
+    },
+    unbind: function (element) {
+        document.body.removeEventListener('click', element.clickOutsideEvent)
+    }
+}); 

MaterialSkin/HTML/material/html/lib/minify.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-for js in intersection-observer.js longpress.js libcometd.js vue-touch-events.js ; do
+for js in clickoutside.js intersection-observer.js longpress.js libcometd.js vue-touch-events.js ; do
     dest=`echo $js | sed s^\.js^\.min\.js^g`
     echo "Minifying $js"
     java -jar ../../../../../tools/closure-compiler/closure-compiler*.jar --js_output_file=$dest $js 

MaterialSkin/HTML/material/index.html

@@ -222,6 +222,7 @@
   <script src="html/lib/mobile-drag-drop.min.js?r=2.3.0-rc.2"></script>
   [% PERL %]
   my $version=Plugins::MaterialSkin::Plugin->pluginVersion();
+  print("  <script src=\"html/lib/clickoutside.min.js?r=$version\"></script>\n");
   print("  <script src=\"html/lib/longpress.min.js?r=$version\"></script>\n");
   print("  <script src=\"html/js/mobile-scroll.js?r=$version\"></script>\n");
   print("  <script src=\"html/js/actions.js?r=$version\"></script>\n");