From ee908b4603e8bb4f876186dd6d3286d3ea7e9030 Mon Sep 17 00:00:00 2001 From: bach Date: Sat, 6 Mar 2021 22:02:48 +0100 Subject: [PATCH] fixed language switcher update on vue route change --- .../materio_decoupled.routing.yml | 7 ++ .../MaterioDecoupledLanguageLinks.php | 73 +++++++++++++++++++ .../custom/materiotheme/assets/dist/main.js | 2 +- .../materiotheme/assets/scripts/main.js | 45 ++++++++---- 4 files changed, 110 insertions(+), 17 deletions(-) create mode 100644 web/modules/custom/materio_decoupled/materio_decoupled.routing.yml create mode 100644 web/modules/custom/materio_decoupled/src/Controller/MaterioDecoupledLanguageLinks.php diff --git a/web/modules/custom/materio_decoupled/materio_decoupled.routing.yml b/web/modules/custom/materio_decoupled/materio_decoupled.routing.yml new file mode 100644 index 0000000..93052fa --- /dev/null +++ b/web/modules/custom/materio_decoupled/materio_decoupled.routing.yml @@ -0,0 +1,7 @@ +materio_decoupled.path_translation_links: + path: 'materio_decoupled/path_translation_links' + defaults: + _controller: '\Drupal\materio_decoupled\Controller\MaterioDecoupledLanguageLinks::getPathTranslationLinks' + _title: 'Path translation links' + requirements: + _permission: 'access content' diff --git a/web/modules/custom/materio_decoupled/src/Controller/MaterioDecoupledLanguageLinks.php b/web/modules/custom/materio_decoupled/src/Controller/MaterioDecoupledLanguageLinks.php new file mode 100644 index 0000000..b683886 --- /dev/null +++ b/web/modules/custom/materio_decoupled/src/Controller/MaterioDecoupledLanguageLinks.php @@ -0,0 +1,73 @@ +get('language_manager') + ); + } + + /** + * Constructs a new MaterioDecoupledLanguageLinks object. + * + * @param \Drupal\Core\Language\LanguageManagerInterface $language_manager + * The language manager. + */ + public function __construct(LanguageManagerInterface $language_manager) { + $this->languageManager = $language_manager; + } + + /** + * getPathTranslationLinks + * + * @return string + * Return translations links given a path. + */ + public function getPathTranslationLinks(Request $request) { + $post_data = json_decode( $request->getContent(),TRUE); + $path = $post_data['path']; + + // build the links + $url_object = \Drupal::service('path.validator')->getUrlIfValid($path); + $route_name = $url_object->getRouteName(); + $route_parameters = $url_object->getrouteParameters(); + $languages = $this->languageManager->getNativeLanguages(); + + foreach ($languages as $key => $language) { + $url = Url::fromRoute($route_name, $route_parameters, ["language"=>$language]); + $links[$key] = [ + "title" => $language->get('label'), + "url" => $url->toString() + ]; + } + + $data = array( + "links" => $links + ); + + return new JsonResponse($data); + } + +} diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 977f2f2..0f525c1 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -15715,7 +15715,7 @@ eval("module.exports = JSON.parse(\"{\\\"default\\\":{\\\"Closing in !seconds se \***************************************************************/ /*! unknown exports (runtime-defined) */ /*! runtime requirements: __webpack_require__ */ -eval("\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vueInfiniteLoading = _interopRequireDefault(__webpack_require__(/*! vue-infinite-loading */ \"./node_modules/vue-infinite-loading/dist/vue-infinite-loading.js\"));\n\nvar _vueCoolLightbox = _interopRequireDefault(__webpack_require__(/*! vue-cool-lightbox */ \"./node_modules/vue-cool-lightbox/dist/vue-cool-lightbox.esm.js\"));\n\nvar _vueJsModal = _interopRequireDefault(__webpack_require__(/*! vue-js-modal */ \"./node_modules/vue-js-modal/dist/index.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _i18n = __webpack_require__(/*! vuejs/i18n */ \"./web/themes/custom/materiotheme/vuejs/i18n/index.js\");\n\nvar _vueMeta = _interopRequireDefault(__webpack_require__(/*! vue-meta */ \"./node_modules/vue-meta/dist/vue-meta.esm.js\"));\n\nvar _UserBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/UserBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue\"));\n\nvar _MainContent = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/MainContent */ \"./web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue\"));\n\nvar _SearchBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/SearchBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue\"));\n\nvar _LeftContent = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/LeftContent */ \"./web/themes/custom/materiotheme/vuejs/components/Content/LeftContent.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\n__webpack_require__(/*! vue-cool-lightbox/dist/vue-cool-lightbox.min.css */ \"./node_modules/vue-cool-lightbox/dist/vue-cool-lightbox.min.css\");\n\n__webpack_require__(/*! theme/assets/styles/main.scss */ \"./web/themes/custom/materiotheme/assets/styles/main.scss\");\n\n__webpack_require__(/*! theme/assets/styles/print.scss */ \"./web/themes/custom/materiotheme/assets/styles/print.scss\");\n\nvar _vueSimpleAccordion = _interopRequireDefault(__webpack_require__(/*! vue-simple-accordion */ \"./node_modules/vue-simple-accordion/dist/vue-simple-accordion.common.js\"));\n\n__webpack_require__(/*! vue-simple-accordion/dist/vue-simple-accordion.css */ \"./node_modules/vue-simple-accordion/dist/vue-simple-accordion.css\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n_vue.default.use(_vueInfiniteLoading.default, {\n props: {\n spinner: 'spiral' // slots.noMore: ''\n\n } // system: {\n // throttleLimit: 50,\n // /* other settings need to configure */\n // }\n\n}); // import vueVimeoPlayer from 'vue-vimeo-player'\n// Vue.use(vueVimeoPlayer)\n// import VueYouTubeEmbed from 'vue-youtube-embed'\n// Vue.use(VueYouTubeEmbed)\n\n\n_vue.default.use(_vueCoolLightbox.default);\n\n_vue.default.use(_vueJsModal.default);\n\n_vue.default.use(_vueMeta.default);\n\n_vue.default.use(_vueSimpleAccordion.default, {// ... Options go here\n});\n\n(function (Drupal, drupalSettings, drupalDecoupled) {\n var MaterioTheme = function MaterioTheme() {\n var _v_sitebranding_block, _v_user_block, _v_header_menu, _v_pagetitle_block, _v_search_block, _v_main_content, _v_left_content;\n\n var _is_front = drupalSettings.path.isFront;\n console.log('drupalSettings', drupalSettings); // let _I18n\n // ___ _ _\n // |_ _|_ _ (_) |_\n // | || ' \\| | _|\n // |___|_||_|_|\\__|\n\n function init() {\n console.log('MaterioTheme init()');\n initVues();\n }\n\n function checkNoVuePages() {\n // return drupalDecoupled.sys_path != '/cart'\n // && drupalDecoupled.sys_path.indexOf('checkout') != 1;\n if (drupalDecoupled.route_name.indexOf('commerce') == -1 && drupalDecoupled.route_name.indexOf('flagging_collection') == -1 && drupalDecoupled.route_name.indexOf('user') == -1) {\n return false;\n } else {\n return true;\n }\n }\n\n function initVues() {\n // only launch views if we are not in commerce pages\n if (!checkNoVuePages()) {\n initVi18n();\n initVStore();\n initVRouter();\n initVSiteBrandingBlock();\n initVPagetitleBlock();\n initVHeaderMenu();\n initVMainContent();\n initVSearchBlock();\n initVLeftContent();\n }\n\n initVUserBlock();\n }\n\n function initVi18n() {\n // i18n.locale = drupalDecoupled.lang_code\n // console.log('i18n.messages', i18n.messages)\n (0, _i18n.loadLanguageAsync)(drupalDecoupled.lang_code).then(function () {\n console.log('main.js language loaded');\n });\n }\n\n function initVStore() {\n _store.default.dispatch('Showrooms/getItems');\n }\n\n function initVRouter() {\n // we need this to update the title and body classes while using history nav\n _route.default.beforeEach(function (to, from, next) {\n var _document$querySelect, _document$querySelect2;\n\n // console.log('router beforeEach to ', to);\n // commit new title to store\n var title = null;\n\n switch (to.name) {\n case 'home':\n title = null;\n break;\n\n case 'article':\n title = false;\n break;\n\n default:\n title = to.name;\n }\n\n if (title !== false) {\n _store.default.commit('Common/setPagetitle', title);\n } // remove all path related body classes\n\n\n var body_classes = document.querySelector('body').classList;\n var classes_to_rm = [];\n\n for (var i = 0; i < body_classes.length; i++) {\n if (body_classes[i].startsWith('path-')) {\n classes_to_rm.push(body_classes[i]);\n }\n }\n\n (_document$querySelect = document.querySelector('body').classList).remove.apply(_document$querySelect, classes_to_rm); // add new path classes to body\n\n\n var classes = [];\n\n if (to.path == '/') {\n classes.push('path-home');\n } else {\n var path_parts = to.path.replace(/^\\//, '') // remove language relative prefix from path classes (fr, en, etc)\n .replace(/^\\D{2,3}\\//, '').split('/');\n\n for (var i = 0; i < path_parts.length; i++) {\n if (i == 0) {\n var c = 'path-' + path_parts[i];\n } else if (path_parts[i] !== '') {\n var c = classes[i - 1] + '-' + path_parts[i];\n }\n\n classes.push(c);\n }\n }\n\n (_document$querySelect2 = document.querySelector('body').classList).add.apply(_document$querySelect2, classes); // update block language selection\n\n\n var links = document.querySelectorAll('#block-languageswitcher a.language-link');\n var path = to.path.replace(/^\\/\\D{2,3}\\//, '') // remove language relative prefix from path classes (fr, en, etc)\n .replace(/^\\/\\D{2,3}$/, '');\n\n if (path !== '') {\n path = '/' + path;\n }\n\n links.forEach(function (link, i) {\n console.log(\"language link\", path, link);\n link.setAttribute('href', \"/\".concat(link.getAttribute('hreflang')).concat(path));\n }); // trigger router\n\n next();\n });\n }\n\n function initVSiteBrandingBlock() {\n _v_sitebranding_block = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n router: _route.default,\n el: '#block-sitebranding',\n methods: {\n onclick: function onclick(event) {\n // console.log(\"Clicked on logo event\", event);\n var href = event.target.getAttribute('href'); // console.log(\"Clicked on logo href\", href);\n\n this.$router.push(href); // replaced by router.beforeEach\n // this.$store.commit('Common/setPagetitle', null)\n }\n }\n });\n }\n\n function initVPagetitleBlock() {\n var $blk = document.querySelector('#block-pagetitle');\n var $h2 = $blk.querySelector('h2'); // get the loaded pagetitle\n\n var title = $h2.innerText; // if not front recorde the loaded pagetitle in store\n\n if (!_is_front) {\n _store.default.commit('Common/setPagetitle', title);\n } // replace in template the pagetitle by vue binding\n\n\n $h2.innerText = '{{ pagetitle }}'; // create the vue\n\n _v_pagetitle_block = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n router: _route.default,\n el: $blk,\n computed: _objectSpread({}, (0, _vuex.mapState)({\n pagetitle: function pagetitle(state) {\n return state.Common.pagetitle;\n }\n }))\n });\n }\n\n function initVUserBlock() {\n var mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';\n var props = {\n title: '',\n loginblock: ''\n };\n var $block;\n\n switch (mount_point) {\n case 'block-userlogin':\n $block = document.getElementById(mount_point);\n console.log('initVUserBlock login form html', $block);\n props.loginblock = $block.outerHTML.trim();\n break;\n\n case 'block-userblock':\n default:\n break;\n }\n\n _v_user_block = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n // computed: {\n // ...mapState({\n // isloggedin: state => state.User.isloggedin\n // })\n // },\n created: function created() {\n // if already loggedin, call store.user to get the user infos\n if (drupalSettings.user.uid !== 0) {\n this.$store.commit('User/setUid', drupalSettings.user.uid);\n this.$store.dispatch('User/getUser');\n }\n },\n render: function render(h) {\n return h(_UserBlock.default, {\n props: props\n });\n }\n }).$mount('#' + mount_point); // console.log('initVUserBlock', _v_user_block);\n }\n\n function initVHeaderMenu() {\n // console.log('initVHeaderMenu');\n // adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)\n // not working : String contains an invalid character\n // document.querySelectorAll(`#block-header a`).forEach(link => {\n // console.log(link);\n // link.setAttribute('@click.prevent', 'onclick')\n // });\n _v_header_menu = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n router: _route.default,\n el: '#block-header',\n methods: {\n onclick: function onclick(event) {\n // console.log(\"Clicked on header menu link\", event);\n var href = event.target.getAttribute('href'); // let title = event.target.innerText;\n // console.log(\"Clicked on header menu link : href\", href);\n\n this.$router.push(href); // replaced by router.beforeEach\n // this.$store.commit('Common/setPagetitle', title)\n }\n }\n });\n }\n\n function initVMainContent() {\n var id = 'main-content';\n var $main_content = document.querySelector('#' + id); // console.log('main-content', $main_content);\n\n var main_html = $main_content.innerHTML;\n _v_main_content = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n metaInfo: {\n // if no subcomponents specify a metaInfo.title, this title will be used\n title: \"materiO'\",\n // all titles will be injected into this template\n titleTemplate: \"%s | materiO'\"\n },\n render: function render(h) {\n return h(_MainContent.default, {\n props: {\n id: id,\n html: main_html,\n isfront: drupalSettings.path.isFront\n }\n });\n }\n }).$mount('#' + id);\n }\n\n function initVSearchBlock() {\n // console.log('initVSearchBlock');\n var id = 'block-materiosapisearchblock';\n var $search_block = document.getElementById(id);\n var formhtml = null;\n\n if ($search_block) {\n // get the search form html to pass it as template to the vue\n // we gain display speed vs async downloaded data\n formhtml = $search_block.innerHTML;\n } else {\n // else create the empty block to fill it later with async data\n $search_block = document.createElement('div');\n $search_block.setAttribute('id', id); // TODO: get region by REST\n\n var $region = document.getElementById('header-bottom');\n $region.appendChild($search_block);\n } // in any case create the vue\n\n\n _v_search_block = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n render: function render(h) {\n return h(_SearchBlock.default, {\n props: {\n blockid: id,\n formhtml: formhtml\n }\n });\n }\n }).$mount('#' + id);\n }\n\n function initVLeftContent() {\n var id = 'content-left';\n var $leftContent = document.getElementById(id); // in any case create the vue\n\n _v_left_content = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n render: function render(h) {\n return h(_LeftContent.default, {\n props: {\n id: id\n }\n });\n }\n }).$mount('#' + id);\n }\n\n init();\n }; // end MaterioTheme()\n\n\n var materiotheme = new MaterioTheme();\n})(Drupal, drupalSettings, drupalDecoupled);\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/assets/scripts/main.js?"); +eval("\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vueInfiniteLoading = _interopRequireDefault(__webpack_require__(/*! vue-infinite-loading */ \"./node_modules/vue-infinite-loading/dist/vue-infinite-loading.js\"));\n\nvar _vueCoolLightbox = _interopRequireDefault(__webpack_require__(/*! vue-cool-lightbox */ \"./node_modules/vue-cool-lightbox/dist/vue-cool-lightbox.esm.js\"));\n\nvar _vueJsModal = _interopRequireDefault(__webpack_require__(/*! vue-js-modal */ \"./node_modules/vue-js-modal/dist/index.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _i18n = __webpack_require__(/*! vuejs/i18n */ \"./web/themes/custom/materiotheme/vuejs/i18n/index.js\");\n\nvar _vueMeta = _interopRequireDefault(__webpack_require__(/*! vue-meta */ \"./node_modules/vue-meta/dist/vue-meta.esm.js\"));\n\nvar _UserBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/UserBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/UserBlock.vue\"));\n\nvar _MainContent = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/MainContent */ \"./web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue\"));\n\nvar _SearchBlock = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Block/SearchBlock */ \"./web/themes/custom/materiotheme/vuejs/components/Block/SearchBlock.vue\"));\n\nvar _LeftContent = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/LeftContent */ \"./web/themes/custom/materiotheme/vuejs/components/Content/LeftContent.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\n__webpack_require__(/*! vue-cool-lightbox/dist/vue-cool-lightbox.min.css */ \"./node_modules/vue-cool-lightbox/dist/vue-cool-lightbox.min.css\");\n\n__webpack_require__(/*! theme/assets/styles/main.scss */ \"./web/themes/custom/materiotheme/assets/styles/main.scss\");\n\n__webpack_require__(/*! theme/assets/styles/print.scss */ \"./web/themes/custom/materiotheme/assets/styles/print.scss\");\n\nvar _vueSimpleAccordion = _interopRequireDefault(__webpack_require__(/*! vue-simple-accordion */ \"./node_modules/vue-simple-accordion/dist/vue-simple-accordion.common.js\"));\n\n__webpack_require__(/*! vue-simple-accordion/dist/vue-simple-accordion.css */ \"./node_modules/vue-simple-accordion/dist/vue-simple-accordion.css\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n_vue.default.use(_vueInfiniteLoading.default, {\n props: {\n spinner: 'spiral' // slots.noMore: ''\n\n } // system: {\n // throttleLimit: 50,\n // /* other settings need to configure */\n // }\n\n}); // import vueVimeoPlayer from 'vue-vimeo-player'\n// Vue.use(vueVimeoPlayer)\n// import VueYouTubeEmbed from 'vue-youtube-embed'\n// Vue.use(VueYouTubeEmbed)\n\n\n_vue.default.use(_vueCoolLightbox.default);\n\n_vue.default.use(_vueJsModal.default);\n\n_vue.default.use(_vueMeta.default);\n\n_vue.default.use(_vueSimpleAccordion.default, {// ... Options go here\n});\n\n(function (Drupal, drupalSettings, drupalDecoupled) {\n var MaterioTheme = function MaterioTheme() {\n var _v_sitebranding_block, _v_user_block, _v_header_menu, _v_pagetitle_block, _v_search_block, _v_main_content, _v_left_content;\n\n var _is_front = drupalSettings.path.isFront;\n console.log('drupalSettings', drupalSettings); // let _I18n\n // ___ _ _\n // |_ _|_ _ (_) |_\n // | || ' \\| | _|\n // |___|_||_|_|\\__|\n\n function init() {\n console.log('MaterioTheme init()');\n initVues();\n }\n\n function checkNoVuePages() {\n // return drupalDecoupled.sys_path != '/cart'\n // && drupalDecoupled.sys_path.indexOf('checkout') != 1;\n if (drupalDecoupled.route_name.indexOf('commerce') == -1 && drupalDecoupled.route_name.indexOf('flagging_collection') == -1 && drupalDecoupled.route_name.indexOf('user') == -1) {\n return false;\n } else {\n return true;\n }\n }\n\n function initVues() {\n // only launch views if we are not in commerce pages\n if (!checkNoVuePages()) {\n initVi18n();\n initVStore();\n initVRouter();\n initVSiteBrandingBlock();\n initVPagetitleBlock();\n initVHeaderMenu();\n initVMainContent();\n initVSearchBlock();\n initVLeftContent();\n }\n\n initVUserBlock();\n }\n\n function initVi18n() {\n // i18n.locale = drupalDecoupled.lang_code\n // console.log('i18n.messages', i18n.messages)\n (0, _i18n.loadLanguageAsync)(drupalDecoupled.lang_code).then(function () {\n console.log('main.js language loaded');\n });\n }\n\n function initVStore() {\n _store.default.dispatch('Showrooms/getItems');\n }\n\n function initVRouter() {\n // we need this to update the title and body classes while using history nav\n _route.default.beforeEach(function (to, from, next) {\n var _document$querySelect, _document$querySelect2;\n\n // console.log('router beforeEach to ', to);\n // commit new title to store\n var title = null;\n\n switch (to.name) {\n case 'home':\n title = null;\n break;\n\n case 'article':\n title = false;\n break;\n\n default:\n title = to.name;\n }\n\n if (title !== false) {\n _store.default.commit('Common/setPagetitle', title);\n } // remove all path related body classes\n\n\n var body_classes = document.querySelector('body').classList;\n var classes_to_rm = [];\n\n for (var i = 0; i < body_classes.length; i++) {\n if (body_classes[i].startsWith('path-')) {\n classes_to_rm.push(body_classes[i]);\n }\n }\n\n (_document$querySelect = document.querySelector('body').classList).remove.apply(_document$querySelect, classes_to_rm); // add new path classes to body\n\n\n var classes = [];\n\n if (to.path == '/') {\n classes.push('path-home');\n } else {\n var path_parts = to.path.replace(/^\\//, '') // remove language relative prefix from path classes (fr, en, etc)\n .replace(/^\\D{2,3}\\//, '').split('/');\n\n for (var i = 0; i < path_parts.length; i++) {\n if (i == 0) {\n var c = 'path-' + path_parts[i];\n } else if (path_parts[i] !== '') {\n var c = classes[i - 1] + '-' + path_parts[i];\n }\n\n classes.push(c);\n }\n }\n\n (_document$querySelect2 = document.querySelector('body').classList).add.apply(_document$querySelect2, classes);\n\n updateLanguageLinksBlock(to.path); // trigger router\n\n next();\n });\n }\n\n function updateLanguageLinksBlock(path) {\n // update block language selection\n console.log(\"updateLanguageLinksBlock, path:\", path);\n var links = document.querySelectorAll('#block-languageswitcher a.language-link');\n var params = {\n path: path // XDEBUG_SESSION_START: true\n\n };\n\n _maAxios.MA.post(\"materio_decoupled/path_translation_links?\", params).then(function (_ref) {\n var data = _ref.data;\n console.log('Path translations links', data);\n links.forEach(function (link, i) {\n console.log(\"language link\", path, link);\n var hreflang = link.getAttribute('hreflang');\n link.setAttribute('href', data.links[hreflang].url);\n link.innerHTML = data.links[hreflang].title;\n });\n }).catch(function (error) {\n console.warn('Path translations links', error);\n });\n }\n\n function initVSiteBrandingBlock() {\n _v_sitebranding_block = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n router: _route.default,\n el: '#block-sitebranding',\n methods: {\n onclick: function onclick(event) {\n // console.log(\"Clicked on logo event\", event);\n var href = event.target.getAttribute('href'); // console.log(\"Clicked on logo href\", href);\n\n this.$router.push(href); // replaced by router.beforeEach\n // this.$store.commit('Common/setPagetitle', null)\n }\n }\n });\n }\n\n function initVPagetitleBlock() {\n var $blk = document.querySelector('#block-pagetitle');\n var $h2 = $blk.querySelector('h2'); // get the loaded pagetitle\n\n var title = $h2.innerText; // if not front recorde the loaded pagetitle in store\n\n if (!_is_front) {\n _store.default.commit('Common/setPagetitle', title);\n } // replace in template the pagetitle by vue binding\n\n\n $h2.innerText = '{{ pagetitle }}'; // create the vue\n\n _v_pagetitle_block = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n router: _route.default,\n el: $blk,\n computed: _objectSpread({}, (0, _vuex.mapState)({\n pagetitle: function pagetitle(state) {\n return state.Common.pagetitle;\n }\n }))\n });\n }\n\n function initVUserBlock() {\n var mount_point = drupalSettings.user.uid !== 0 ? 'block-userblock' : 'block-userlogin';\n var props = {\n title: '',\n loginblock: ''\n };\n var $block;\n\n switch (mount_point) {\n case 'block-userlogin':\n $block = document.getElementById(mount_point);\n console.log('initVUserBlock login form html', $block);\n props.loginblock = $block.outerHTML.trim();\n break;\n\n case 'block-userblock':\n default:\n break;\n }\n\n _v_user_block = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n // computed: {\n // ...mapState({\n // isloggedin: state => state.User.isloggedin\n // })\n // },\n created: function created() {\n // if already loggedin, call store.user to get the user infos\n if (drupalSettings.user.uid !== 0) {\n this.$store.commit('User/setUid', drupalSettings.user.uid);\n this.$store.dispatch('User/getUser');\n }\n },\n render: function render(h) {\n return h(_UserBlock.default, {\n props: props\n });\n }\n }).$mount('#' + mount_point); // console.log('initVUserBlock', _v_user_block);\n }\n\n function initVHeaderMenu() {\n // console.log('initVHeaderMenu');\n // adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)\n // not working : String contains an invalid character\n // document.querySelectorAll(`#block-header a`).forEach(link => {\n // console.log(link);\n // link.setAttribute('@click.prevent', 'onclick')\n // });\n _v_header_menu = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n router: _route.default,\n el: '#block-header',\n methods: {\n onclick: function onclick(event) {\n // console.log(\"Clicked on header menu link\", event);\n var href = event.target.getAttribute('href'); // let title = event.target.innerText;\n // console.log(\"Clicked on header menu link : href\", href);\n\n this.$router.push(href); // replaced by router.beforeEach\n // this.$store.commit('Common/setPagetitle', title)\n }\n }\n });\n }\n\n function initVMainContent() {\n var id = 'main-content';\n var $main_content = document.querySelector('#' + id); // console.log('main-content', $main_content);\n\n var main_html = $main_content.innerHTML;\n _v_main_content = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n metaInfo: {\n // if no subcomponents specify a metaInfo.title, this title will be used\n title: \"materiO'\",\n // all titles will be injected into this template\n titleTemplate: \"%s | materiO'\"\n },\n render: function render(h) {\n return h(_MainContent.default, {\n props: {\n id: id,\n html: main_html,\n isfront: drupalSettings.path.isFront\n }\n });\n }\n }).$mount('#' + id);\n }\n\n function initVSearchBlock() {\n // console.log('initVSearchBlock');\n var id = 'block-materiosapisearchblock';\n var $search_block = document.getElementById(id);\n var formhtml = null;\n\n if ($search_block) {\n // get the search form html to pass it as template to the vue\n // we gain display speed vs async downloaded data\n formhtml = $search_block.innerHTML;\n } else {\n // else create the empty block to fill it later with async data\n $search_block = document.createElement('div');\n $search_block.setAttribute('id', id); // TODO: get region by REST\n\n var $region = document.getElementById('header-bottom');\n $region.appendChild($search_block);\n } // in any case create the vue\n\n\n _v_search_block = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n render: function render(h) {\n return h(_SearchBlock.default, {\n props: {\n blockid: id,\n formhtml: formhtml\n }\n });\n }\n }).$mount('#' + id);\n }\n\n function initVLeftContent() {\n var id = 'content-left';\n var $leftContent = document.getElementById(id); // in any case create the vue\n\n _v_left_content = new _vue.default({\n store: _store.default,\n i18n: _i18n.i18n,\n render: function render(h) {\n return h(_LeftContent.default, {\n props: {\n id: id\n }\n });\n }\n }).$mount('#' + id);\n }\n\n init();\n }; // end MaterioTheme()\n\n\n var materiotheme = new MaterioTheme();\n})(Drupal, drupalSettings, drupalDecoupled);\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/assets/scripts/main.js?"); })(); /******/ })() diff --git a/web/themes/custom/materiotheme/assets/scripts/main.js b/web/themes/custom/materiotheme/assets/scripts/main.js index 82716f2..6786552 100644 --- a/web/themes/custom/materiotheme/assets/scripts/main.js +++ b/web/themes/custom/materiotheme/assets/scripts/main.js @@ -53,6 +53,8 @@ Vue.use(VueSimpleAccordion, { // ... Options go here }); +import { MA } from 'vuejs/api/ma-axios' + (function (Drupal, drupalSettings, drupalDecoupled) { const MaterioTheme = function () { let _v_sitebranding_block, _v_user_block, _v_header_menu, @@ -163,27 +165,38 @@ Vue.use(VueSimpleAccordion, { } document.querySelector('body').classList.add(...classes) - // update block language selection - let links = document.querySelectorAll('#block-languageswitcher a.language-link') - let path = to.path.replace(/^\/\D{2,3}\//, '') - // remove language relative prefix from path classes (fr, en, etc) - .replace(/^\/\D{2,3}$/, '') - - if(path !== ''){ - path = '/'+path - } - - links.forEach((link, i) => { - console.log("language link",path , link) - link.setAttribute('href', `/${link.getAttribute('hreflang')}${path}`) - }); - - + updateLanguageLinksBlock(to.path); // trigger router next() }) } + function updateLanguageLinksBlock(path){ + // update block language selection + console.log("updateLanguageLinksBlock, path:", path); + let links = document.querySelectorAll('#block-languageswitcher a.language-link') + + let params = { + path: path + // XDEBUG_SESSION_START: true + } + + MA.post(`materio_decoupled/path_translation_links?`, params) + .then(({ data }) => { + console.log('Path translations links', data) + links.forEach((link, i) => { + console.log("language link",path , link) + let hreflang = link.getAttribute('hreflang') + + link.setAttribute('href', data.links[hreflang].url) + link.innerHTML = data.links[hreflang].title + }); + }) + .catch(error => { + console.warn('Path translations links', error) + }) + } + function initVSiteBrandingBlock () { _v_sitebranding_block = new Vue({ store,