fixed #1989, login block hover on ipad

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -50,6 +50,7 @@ import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
 import VLeftContent from 'vuejs/components/Content/LeftContent'
 import VHeaderMenu from 'vuejs/components/Content/HeaderMenu'
+import VLanguageSwitcher from 'vuejs/components/Content/LanguageSwitcher'
 import GlobCoolLightBox from 'vuejs/components/Content/GlobCoolLightBox'
 
 import { mapState } from 'vuex'
@@ -62,7 +63,7 @@ import 'theme/assets/styles/print.scss'
 
 import MA from 'vuejs/api/ma-axios'
 
-export let _v_sitebranding_block, _v_user_block, _v_header_menu,
+export let _v_sitebranding_block, _v_user_block, _v_header_menu, _v_language_switcher,
   _v_pagetitle_block, _v_search_block,
   _v_main_content, _v_left_content,
   _v_glob_coollightbox
@@ -119,6 +120,7 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
         initVSiteBrandingBlock()
         initVPagetitleBlock()
         initVHeaderMenu()
+        initVLanguageSwitcher()
         initHamburgerMenu()
         initVSearchBlock()
         initVMainContent()
@@ -206,6 +208,21 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
       })
     }
 
+    function initVLanguageSwitcher () {
+      console.log('initVLanguageSwitcher')
+      const id = 'block-languageswitcher'
+      const $html_obj = document.querySelector('#' + id)
+      console.log('initVLanguageSwitcher $html_obj', $html_obj)
+      const html = $html_obj.outerHTML
+      console.log('initVLanguageSwitcher html', html)
+      _v_language_switcher = new Vue({
+        store,
+        i18n,
+        router,
+        render: h => h(VLanguageSwitcher, { props: { id: id, dom_html: html } })
+      }).$mount('#' + id)
+    }
+
     function updateLanguageLinksBlock (path) {
       // update block language selection
       console.log('router beforeEach path ', path)

web/themes/custom/materiotheme/templates/block/block--languageswitcher.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes }}  v-touch.prevent.stop="onTapLanguageSwitcher">{{ label }}</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/custom/materiotheme/templates/block/block--userlogin.html.twig

@@ -35,7 +35,7 @@
 <div{{ attributes.addClass(classes) }}>
   {{ title_prefix }}
   {% if label %}
-    <h2{{ title_attributes }}>{{ label }}</h2>
+    <h2{{ title_attributes }}  v-touch.prevent.stop="onTapLoginBlock">{{ label }}</h2>
   {% endif %}
   {{ title_suffix }}
   <section>

web/themes/custom/materiotheme/vuejs/components/Block/LoginBlock.vue

@@ -26,19 +26,19 @@ export default {
       userLogin: 'User/userLogin',
       openCloseHamMenu: 'Common/openCloseHamMenu'
     }),
+    onTapLoginBlock (e) {
+      console.log('onTapLoginBlock', e)
+      let tapped = e.target.parentNode.parentNode.querySelectorAll('.tapped')
+      tapped.forEach((item, i) => {
+        item.classList.remove('tapped')
+      })
+      e.target.parentNode.classList.add('tapped')
+    },
     login () {
       this.userLogin({
         mail: this.mail,
         pass: this.password
       })
-      // moved to user.js store
-      // .then(() => {
-      //   console.log('LoginBlock user logged-in')
-      //   this.openCloseHamMenu(false)
-      //   this.$router.push({
-      //     name: 'base'
-      //   })
-      // })
     }
   },
   beforeMount() {

web/themes/custom/materiotheme/vuejs/components/Content/LanguageSwitcher.vue

@@ -0,0 +1,59 @@
+<script>
+
+import Vue from 'vue'
+
+import router from 'vuejs/route'
+
+export default {
+  name: "LanguageSwitcher",
+  router,
+  props:['id','dom_html'],
+  data() {
+    return {
+      html: null,
+      template: null
+    }
+  },
+  beforeMount() {
+    console.log("beforeMount languageSwitcher", this.dom_html)
+    if (!this.template) {
+      console.log('no languageswitcher template')
+      if (this.dom_html) { // if html prop is available
+        this.html = this.dom_html
+        this.compileTemplate()
+      }
+    }
+  },
+  methods: {
+    compileTemplate(){
+      console.log("languageSwitcher compileTemplate html", this.html)
+      this.template = Vue.compile(this.html)
+      // https://github.com/vuejs/vue/issues/9911
+      this.$options.staticRenderFns = [];
+      this._staticTrees = [];
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)));
+      console.log("languageSwitcher compileTemplate template", this.template)
+    },
+    onTapLanguageSwitcher (e) {
+      console.log('onTapLanguageSwitcher', e)
+      let tapped = e.target.parentNode.parentNode.querySelectorAll('.tapped')
+      tapped.forEach((item, i) => {
+        item.classList.remove('tapped')
+      })
+      e.target.parentNode.classList.add('tapped')
+    }
+  },
+  render(h) {
+    console.log('languageswitcher render')
+    if (!this.template) {
+      return h('span', $t('default.Loading…'))
+    } else {
+      return this.template.render.call(this)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>