From f5e18e9c2027ca38224fa52fc2c9d611348bbd07 Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Thu, 25 Jul 2019 21:23:23 +0200 Subject: [PATCH] blabla article display and nav --- ...st.resource.entity.entity_view_display.yml | 17 ++ .../sync/rest.resource.entity.node_type.yml | 18 ++ .../custom/materiotheme/assets/dist/main.css | 125 +++++++++++-- .../custom/materiotheme/assets/dist/main.js | 14 +- .../materiotheme/assets/scripts/main.js | 15 +- .../assets/styles/base/_reset.scss | 25 +++ .../materiotheme/assets/styles/main.scss | 159 +++++++++++++---- .../vuejs/components/Content/Card.vue | 4 +- .../vuejs/components/Pages/Article.vue | 168 +++++++++++++----- .../vuejs/store/modules/blabla.js | 15 +- .../vuejs/store/modules/common.js | 2 +- .../vuejs/store/modules/search.js | 4 +- 12 files changed, 454 insertions(+), 112 deletions(-) create mode 100644 config/sync/rest.resource.entity.entity_view_display.yml create mode 100644 config/sync/rest.resource.entity.node_type.yml diff --git a/config/sync/rest.resource.entity.entity_view_display.yml b/config/sync/rest.resource.entity.entity_view_display.yml new file mode 100644 index 0000000..9418131 --- /dev/null +++ b/config/sync/rest.resource.entity.entity_view_display.yml @@ -0,0 +1,17 @@ +uuid: 3838a066-6532-40df-8bc0-28848bedab7d +langcode: en +status: false +dependencies: + module: + - serialization + - user +id: entity.entity_view_display +plugin_id: 'entity:entity_view_display' +granularity: resource +configuration: + methods: + - GET + formats: + - json + authentication: + - cookie diff --git a/config/sync/rest.resource.entity.node_type.yml b/config/sync/rest.resource.entity.node_type.yml new file mode 100644 index 0000000..8073b91 --- /dev/null +++ b/config/sync/rest.resource.entity.node_type.yml @@ -0,0 +1,18 @@ +uuid: 6c0bad4c-4cb1-4203-ab2f-f0e35207286f +langcode: en +status: false +dependencies: + module: + - node + - serialization + - user +id: entity.node_type +plugin_id: 'entity:node_type' +granularity: resource +configuration: + methods: + - GET + formats: + - json + authentication: + - cookie diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index 14353f7..4f9873e 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -24,6 +24,27 @@ a, a:focus, a:active { a:focus { -moz-outline-style: none; } +ul { + margin: 0; + padding: 0; } + ul li { + margin: 0; + padding: 0; + list-style: none; } + +h1, h2, h3, h4, h5, h6 { + margin: 0; } + +p a { + position: relative; } + p a:after { + content: ''; + position: absolute; + top: 1em; + left: 0; + width: 100%; + border-bottom: 1px dotted #000; } + .col-1, .small-col-1, .med-col-1, .large-col-1, .col-2, .small-col-2, .med-col-2, .large-col-2, .col-3, .small-col-3, .med-col-3, .large-col-3, .col-4, .small-col-4, .med-col-4, .large-col-4, .col-5, .small-col-5, .med-col-5, .large-col-5, .col-6, .small-col-6, .med-col-6, .large-col-6, .col-7, .small-col-7, .med-col-7, .large-col-7, .col-8, .small-col-8, .med-col-8, .large-col-8, .col-9, .small-col-9, .med-col-9, .large-col-9, .col-10, .small-col-10, .med-col-10, .large-col-10, .col-11, .small-col-11, .med-col-11, .large-col-11, .col-12, .small-col-12, .med-col-12, .large-col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 { width: 100%; float: left; @@ -1404,23 +1425,6 @@ article.node--type-frontpage .node__content > section.home-blabla { font-size: 0.756em; line-height: 0.9; } -#showrooms { - width: calc(100% + 15px); } - #showrooms article.showroom { - width: 435px; - display: inline-block; - vertical-align: top; - margin: 0 15px 15px 0; } - #showrooms article.showroom h1 { - margin: 0; - font-weight: 4; } - #showrooms article.showroom p { - margin: 0; } - #showrooms article.showroom figure { - margin: 0; } - #showrooms article.showroom figure img { - max-width: 100%; } - .infinite-loading-container .infinite-status-prompt i[class^="loading-"] { width: 15px; height: 15px; } @@ -1463,7 +1467,7 @@ article.card { article.card header h1 { font-size: 1.3em; font-weight: 700; - line-height: 0.8; + line-height: 0.85; margin-bottom: 0.2em; } article.card header h4 { font-size: 0.882em; @@ -1491,3 +1495,88 @@ article.card { left: 0; z-index: 20; } +#main-content > article.article section.taxonomy ul { + margin: 1em 0 0; } + +#main-content > article.article section.taxonomy li { + display: inline-block; + padding: 0 0.5em 0 0; } + +#main-content > article.article section.visuels { + width: calc(100% + 15px); } + #main-content > article.article section.visuels figure { + display: inline-block; + vertical-align: top; + width: 210px; + margin: 0 15px 0 0; } + #main-content > article.article section.visuels figure img { + width: 100%; } + +#main-content > article.article aside.linked-materials ul { + width: calc(100% + 15px); } + #main-content > article.article aside.linked-materials ul li { + display: inline-block; + vertical-align: top; + width: 210px; + margin: 0 15px 0 0; } + +#main-content > article.article aside.linked-materials h3.field__label { + font-size: 1em; + font-weight: 500; + margin: 2em 0 1em 0; } + +#main-content > article.article aside.linked-materials h1.title { + font-size: 1em; + font-weight: 400; } + +#main-content > article.article aside.linked-materials h3.ref { + font-size: 0.756em; + font-weight: 600; } + +#main-content > article.article aside.linked-materials h2.description { + font-size: 0.756em; + font-weight: 400; } + +#main-content > article.article nav.prevnext.bottom { + margin: 2em 0; } + +#main-content > article.article nav.prevnext ul { + padding: 0; + margin: 0; + display: grid; + grid-template-columns: 1fr 1fr; } + +#main-content > article.article nav.prevnext li { + padding: 0; + margin: 0; + list-style: none; } + #main-content > article.article nav.prevnext li a { + font-size: 0.756em; + font-weight: 700; } + #main-content > article.article nav.prevnext li:nth-child(1) { + grid-column: 1; } + #main-content > article.article nav.prevnext li:nth-child(1) a:before { + content: '< '; } + #main-content > article.article nav.prevnext li:nth-child(2) { + grid-column: 2; + text-align: right; } + #main-content > article.article nav.prevnext li:nth-child(2) a:after { + content: ' >'; } + +#showrooms { + width: calc(100% + 15px); } + #showrooms article.showroom { + width: 435px; + display: inline-block; + vertical-align: top; + margin: 0 15px 15px 0; } + #showrooms article.showroom h1 { + margin: 0; + font-weight: 4; } + #showrooms article.showroom p { + margin: 0; } + #showrooms article.showroom figure { + margin: 0; } + #showrooms article.showroom figure img { + max-width: 100%; } + diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index c0af5c7..4f149fa 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -477,7 +477,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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\nvar _default = {\n name: \"Article\",\n router: _route.default,\n props: ['item'],\n data: function data() {\n return {\n index: -1,\n prevnext: {},\n uuid: null,\n content: null\n };\n },\n created: function created() {\n this.getArticle();\n },\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n getItemIndex: 'Blabla/getItemIndex',\n getPrevNextItems: 'Blabla/getPrevNextItems'\n }), {\n getIndex: function getIndex() {\n var _this = this;\n\n console.log(\"Article getIndex\");\n this.getItemIndex(this.uuid).then(function (index) {\n _this.index = index; // console.log('article index', index, this);\n\n _this.getPrevNextItems(index).then(function (pn) {\n _this.prevnext = pn;\n });\n });\n },\n getArticle: function getArticle() {\n console.log(this.$route); // get the article uuid\n\n if (this.$route.query.uuid) {\n // we come from internal link with vuejs\n // directly record uuid\n this.uuid = this.$route.query.uuid;\n } else if (drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article') {\n // we landed in an internal page\n // get the uuid from drupalDeclouped, provided by materio_decoupled.module\n this.uuid = drupalDecoupled.entity_uuid;\n }\n\n if (this.uuid) {\n this.getIndex();\n this.loadArticle();\n } else {\n // if for any reason we dont have the uuid\n // redirect to home\n this.$route.replace('home');\n }\n },\n loadArticle: function loadArticle() {\n var _this2 = this;\n\n console.log('loadArticle', this.uuid);\n var params = {\n include: 'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'\n };\n\n var q = _querystring.default.stringify(params);\n\n _jsonAxios.JSONAPI.get(\"node/article/\".concat(this.uuid, \"?\").concat(q)).then(function (_ref) {\n var data = _ref.data;\n console.log('loadArticle data', data);\n\n _this2.parseData(data);\n }).catch(function (error) {\n console.warn('Issue with loadArticle', error);\n Promise.reject(error);\n });\n },\n parseData: function parseData(data) {\n var _this3 = this;\n\n var attrs = data.data.attributes;\n var relations = data.data.relationships;\n console.log('relations', relations);\n var inc = data.included;\n console.log('included', inc);\n this.content = {\n title: attrs.title,\n body: attrs.body.value // parse all relationships\n\n };\n\n var _loop = function _loop(key) {\n // skip loop if the property is from prototype\n if (!relations.hasOwnProperty(key)) return \"continue\";\n var obj = relations[key];\n console.log('typeof obj.data', _typeof(obj.data)); // skip obj if data is not array\n\n if (!Array.isArray(obj.data)) return \"continue\";\n _this3.content[key] = []; // parse relationship values using included\n\n var field = {};\n obj.data.forEach(function (e) {\n // get the included values\n var included = inc.find(function (i) {\n return i.id == e.id;\n });\n\n if (typeof included != 'undefined') {\n // fill the values\n switch (key) {\n case 'field_visuel':\n field = e.meta;\n field.id = e.id;\n field.src = included.links.card_medium.href;\n break;\n\n case 'field_linked_materials':\n case 'field_thesaurus':\n case 'field_tags':\n field = included.attributes;\n field.id = included.id;\n break;\n // case 'field_showroom':\n // field = included.attributes\n // break\n\n default:\n }\n\n _this3.content[key].push(field);\n }\n });\n };\n\n for (var key in relations) {\n var _ret = _loop(key);\n\n if (_ret === \"continue\") continue;\n }\n\n console.log('article.content', this.content);\n },\n onNext: function onNext() {\n console.log('clicked on next', this.prevnext.next);\n var alias = this.prevnext.next.view_node.replace(/^.?\\/blabla\\//g, '');\n this.$router.push({\n name: \"article\",\n params: {\n alias: alias\n },\n query: {\n uuid: this.prevnext.next.uuid\n }\n });\n },\n onPrev: function onPrev() {\n console.log('clicked on prev', this.prevnext.next);\n var alias = this.prevnext.prev.view_node.replace(/^.?\\/blabla\\//g, '');\n this.$router.push({\n name: \"article\",\n params: {\n alias: alias\n },\n query: {\n uuid: this.prevnext.prev.uuid\n }\n });\n }\n }),\n watch: {\n '$route': function $route(to, from) {\n console.log('route change');\n this.getArticle();\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nvar _Card = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Card */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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\nvar _default = {\n name: \"Article\",\n router: _route.default,\n store: _store.default,\n props: ['item'],\n data: function data() {\n return {\n index: -1,\n prevnext: {},\n uuid: null,\n content: null,\n loading: true\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n items: function items(state) {\n return state.Blabla.items;\n }\n })),\n created: function created() {\n this.getArticle();\n },\n methods: _objectSpread({}, (0, _vuex.mapActions)({\n getItems: 'Blabla/getItems',\n getItemIndex: 'Blabla/getItemIndex',\n getPrevNextItems: 'Blabla/getPrevNextItems'\n }), {\n getArticle: function getArticle() {\n var _this = this;\n\n console.log(this.$route); // get the article uuid\n\n if (this.$route.query.uuid) {\n // we come from internal link with vuejs\n // directly record uuid\n this.uuid = this.$route.query.uuid;\n } else if (drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article') {\n // we landed in an internal page\n // get the uuid from drupalDeclouped, provided by materio_decoupled.module\n this.uuid = drupalDecoupled.entity_uuid;\n }\n\n if (this.uuid) {\n this.loadArticle(); // get the prev next items\n\n if (!this.items.length) {\n // if items list not yet loaded preload them\n this.getItems().then(function () {\n // then get the index\n _this.getIndex();\n });\n } else {\n // or directly get the index\n this.getIndex();\n }\n } else {\n // if for any reason we dont have the uuid\n // redirect to home\n this.$route.replace('home');\n }\n },\n getIndex: function getIndex() {\n var _this2 = this;\n\n console.log(\"Article getIndex\");\n this.getItemIndex(this.uuid).then(function (index) {\n _this2.index = index; // console.log('article index', index, this);\n\n _this2.getPrevNextItems(index).then(function (pn) {\n _this2.prevnext = pn;\n });\n });\n },\n loadArticle: function loadArticle() {\n var _this3 = this;\n\n console.log('loadArticle', this.uuid);\n this.loading = true;\n var params = {\n include: 'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'\n };\n\n var q = _querystring.default.stringify(params);\n\n _jsonAxios.JSONAPI.get(\"node/article/\".concat(this.uuid, \"?\").concat(q)).then(function (_ref) {\n var data = _ref.data;\n console.log('loadArticle data', data);\n\n _this3.parseData(data);\n }).catch(function (error) {\n console.warn('Issue with loadArticle', error);\n Promise.reject(error);\n });\n },\n parseData: function parseData(data) {\n var _this4 = this;\n\n var attrs = data.data.attributes;\n var relations = data.data.relationships;\n console.log('relations', relations);\n var inc = data.included;\n console.log('included', inc);\n this.content = {\n title: attrs.title,\n body: attrs.body.value // parse all relationships\n\n };\n\n var _loop = function _loop(key) {\n // skip loop if the property is from prototype\n if (!relations.hasOwnProperty(key)) return \"continue\";\n var relation_obj = relations[key];\n console.log('typeof relation_obj.data', _typeof(relation_obj.data)); // skip relation_obj if data is not array\n\n if (!Array.isArray(relation_obj.data)) return \"continue\"; // create empty field array\n\n _this4.content[key] = []; // parse relationship values using included\n\n var field = {}; // loop through all relation items\n\n relation_obj.data.forEach(function (e) {\n // get the included values for each item using id\n var included = inc.find(function (i) {\n return i.id == e.id;\n }); // if we not found an included item skip the item\n\n if (typeof included != 'undefined') {\n // fill the item values\n switch (key) {\n case 'field_visuel':\n field = e.meta;\n field.id = e.id;\n field.src = included.links.card_medium.href;\n break;\n\n case 'field_linked_materials':\n field = included.attributes;\n field.id = included.id; // get the linked material included images\n\n field.images = [];\n included.relationships.images.data.forEach(function (img) {\n // console.log('href', img.meta.imageDerivatives.links.card_medium.href);\n field.images.push({\n title: img.meta.title,\n url: img.meta.imageDerivatives.links.card_medium.href\n });\n });\n break;\n\n case 'field_thesaurus':\n case 'field_tags':\n field = included.attributes;\n field.id = included.id;\n break;\n // case 'field_showroom':\n // field = included.attributes\n // break\n\n default:\n }\n\n _this4.content[key].push(field);\n }\n });\n };\n\n for (var key in relations) {\n var _ret = _loop(key);\n\n if (_ret === \"continue\") continue;\n } // update main page title\n\n\n this.$store.commit('Common/setPagetitle', this.content.title);\n this.loading = false;\n console.log('article.content', this.content);\n },\n onNext: function onNext() {\n // console.log('clicked on next', this.prevnext.next);\n var alias = this.prevnext.next.view_node.replace(/^.?\\/blabla\\//g, '');\n this.$router.push({\n name: \"article\",\n params: {\n alias: alias\n },\n query: {\n uuid: this.prevnext.next.uuid\n }\n });\n },\n onPrev: function onPrev() {\n // console.log('clicked on prev', this.prevnext.next);\n var alias = this.prevnext.prev.view_node.replace(/^.?\\/blabla\\//g, '');\n this.$router.push({\n name: \"article\",\n params: {\n alias: alias\n },\n query: {\n uuid: this.prevnext.prev.uuid\n }\n });\n }\n }),\n components: {\n Card: _Card.default\n },\n watch: {\n '$route': function $route(to, from) {\n console.log('route change');\n this.getArticle();\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options"); /***/ }), @@ -698,7 +698,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"article\", { staticClass: \"card\" }, [\n _c(\"header\", [\n _c(\"h1\", [_vm._v(_vm._s(_vm.item.title))]),\n _vm._v(\" \"),\n _c(\"h4\", [_vm._v(_vm._s(_vm.item.description))]),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"ref\" }, [_vm._v(_vm._s(_vm.item.reference))])\n ]),\n _vm._v(\" \"),\n _c(\n \"section\",\n {\n directives: [{ name: \"switcher\", rawName: \"v-switcher\" }],\n staticClass: \"images\"\n },\n _vm._l(_vm.item.images, function(img, index) {\n return _c(\"figure\", { key: img.url }, [\n _c(\"img\", {\n directives: [\n {\n name: \"lazy\",\n rawName: \"v-lazy\",\n value: index,\n expression: \"index\"\n }\n ],\n staticClass: \"lazy\",\n attrs: { \"data-src\": img.url, title: img.title }\n }),\n _vm._v(\" \"),\n _c(\"img\", { staticClass: \"blank\", attrs: { src: _vm.blanksrc } })\n ])\n }),\n 0\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"article\", { staticClass: \"card\" }, [\n _c(\"header\", [\n _c(\"h1\", [_vm._v(_vm._s(_vm.item.title))]),\n _vm._v(\" \"),\n _c(\"h4\", [_vm._v(_vm._s(_vm.item.field_short_description))]),\n _vm._v(\" \"),\n _c(\"span\", { staticClass: \"ref\" }, [\n _vm._v(_vm._s(_vm.item.field_reference))\n ])\n ]),\n _vm._v(\" \"),\n _c(\n \"section\",\n {\n directives: [{ name: \"switcher\", rawName: \"v-switcher\" }],\n staticClass: \"images\"\n },\n _vm._l(_vm.item.images, function(img, index) {\n return _c(\"figure\", { key: img.url }, [\n _c(\"img\", {\n directives: [\n {\n name: \"lazy\",\n rawName: \"v-lazy\",\n value: index,\n expression: \"index\"\n }\n ],\n staticClass: \"lazy\",\n attrs: { \"data-src\": img.url, title: img.title }\n }),\n _vm._v(\" \"),\n _c(\"img\", { staticClass: \"blank\", attrs: { src: _vm.blanksrc } })\n ])\n }),\n 0\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options"); /***/ }), @@ -734,7 +734,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return !_vm.content\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\"article\", { staticClass: \"article\" }, [\n _c(\"header\", [\n _c(\"h1\", [_vm._v(_vm._s(_vm.content.title))]),\n _vm._v(\" \"),\n _vm.index != -1\n ? _c(\"nav\", [\n _c(\n \"a\",\n {\n attrs: { href: \"#\" },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrev($event)\n }\n }\n },\n [_vm._v(\"prev : \" + _vm._s(_vm.prevnext.prev.title))]\n ),\n _vm._v(\" \"),\n _c(\n \"a\",\n {\n attrs: { href: \"#\" },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onNext($event)\n }\n }\n },\n [_vm._v(\"next : \" + _vm._s(_vm.prevnext.next.title))]\n )\n ])\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"taxonomy\" }, [\n _c(\"div\", { staticClass: \"thesaurus\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.content.field_thesaurus, function(term) {\n return _c(\"li\", { key: term.id }, [_vm._v(_vm._s(term.name))])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tags\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.content.field_tags, function(term) {\n return _c(\"li\", { key: term.id }, [_vm._v(_vm._s(term.name))])\n }),\n 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\"div\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.content.body) }\n }),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"linked-materials\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.content.field_linked_materials, function(node) {\n return _c(\"li\", { key: node.id }, [\n _c(\"section\", { attrs: { uuid: node.id } }, [\n _c(\"h1\", [_vm._v(_vm._s(node.title))]),\n _vm._v(\" \"),\n _c(\"h3\", [_vm._v(_vm._s(node.field_reference))]),\n _vm._v(\" \"),\n _c(\"h2\", [_vm._v(_vm._s(node.field_short_description))])\n ])\n ])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\n \"div\",\n { staticClass: \"visuels\" },\n _vm._l(_vm.content.field_visuel, function(visuel) {\n return _c(\"figure\", { key: visuel.id }, [\n _c(\"img\", {\n attrs: { src: visuel.src, alt: visuel.alt, title: visuel.title }\n }),\n _vm._v(\" \"),\n _c(\"caption\")\n ])\n }),\n 0\n )\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return !_vm.content || _vm.loading\n ? _c(\"div\", { staticClass: \"loading\" }, [\n _c(\"span\", [_vm._v(\"Loading ...\")])\n ])\n : _c(\"article\", { staticClass: \"article\" }, [\n _c(\"nav\", { staticClass: \"prevnext top\" }, [\n _c(\"ul\", [\n _c(\"li\", [\n _vm.prevnext.prev\n ? _c(\"a\", {\n attrs: { href: \"#\" },\n domProps: { innerHTML: _vm._s(_vm.prevnext.prev.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrev($event)\n }\n }\n })\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\"li\", [\n _vm.prevnext.next\n ? _c(\"a\", {\n attrs: { href: \"#\" },\n domProps: { innerHTML: _vm._s(_vm.prevnext.next.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onNext($event)\n }\n }\n })\n : _vm._e()\n ])\n ])\n ]),\n _vm._v(\" \"),\n _c(\"section\", { staticClass: \"taxonomy\" }, [\n _c(\"div\", { staticClass: \"thesaurus\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.content.field_thesaurus, function(term) {\n return _c(\"li\", { key: term.id }, [_vm._v(_vm._s(term.name))])\n }),\n 0\n )\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"tags\" }, [\n _c(\n \"ul\",\n _vm._l(_vm.content.field_tags, function(term) {\n return _c(\"li\", { key: term.id }, [_vm._v(_vm._s(term.name))])\n }),\n 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\"section\", {\n staticClass: \"body\",\n domProps: { innerHTML: _vm._s(_vm.content.body) }\n }),\n _vm._v(\" \"),\n _c(\n \"section\",\n { staticClass: \"visuels\" },\n _vm._l(_vm.content.field_visuel, function(visuel) {\n return _c(\"figure\", { key: visuel.id }, [\n _c(\"img\", {\n attrs: { src: visuel.src, alt: visuel.alt, title: visuel.title }\n }),\n _vm._v(\" \"),\n _c(\"caption\")\n ])\n }),\n 0\n ),\n _vm._v(\" \"),\n _c(\"aside\", { staticClass: \"linked-materials\" }, [\n _c(\"h3\", { staticClass: \"field__label\" }, [\n _vm._v(\"Linked Materials\")\n ]),\n _vm._v(\" \"),\n _c(\"div\", { staticClass: \"card-list\" }, [\n _c(\n \"ul\",\n {},\n _vm._l(_vm.content.field_linked_materials, function(node) {\n return _c(\n \"li\",\n { key: node.id },\n [_c(\"Card\", { attrs: { item: node } })],\n 1\n )\n }),\n 0\n )\n ])\n ]),\n _vm._v(\" \"),\n _c(\"nav\", { staticClass: \"prevnext bottom\" }, [\n _c(\"ul\", [\n _c(\"li\", [\n _vm.prevnext.prev\n ? _c(\"a\", {\n attrs: { href: \"#\" },\n domProps: { innerHTML: _vm._s(_vm.prevnext.prev.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onPrev($event)\n }\n }\n })\n : _vm._e()\n ]),\n _vm._v(\" \"),\n _c(\"li\", [\n _vm.prevnext.next\n ? _c(\"a\", {\n attrs: { href: \"#\" },\n domProps: { innerHTML: _vm._s(_vm.prevnext.next.title) },\n on: {\n click: function($event) {\n $event.preventDefault()\n return _vm.onNext($event)\n }\n }\n })\n : _vm._e()\n ])\n ])\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options"); /***/ }), @@ -852,7 +852,7 @@ eval("var g; // This works in non-strict mode\n\ng = function () {\n return thi /***/ (function(module, exports, __webpack_require__) { "use strict"; -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 _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 _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 _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\n__webpack_require__(/*! theme/assets/styles/main.scss */ \"./web/themes/custom/materiotheme/assets/styles/main.scss\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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});\n\n(function (Drupal, drupalSettings) {\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;\n\n var _is_front = drupalSettings.path.isFront;\n console.log('drupalSettings', drupalSettings); // ___ _ _\n // |_ _|_ _ (_) |_\n // | || ' \\| | _|\n // |___|_||_|_|\\__|\n\n function init() {\n console.log(\"MaterioTheme init()\");\n initVues();\n }\n\n function initVues() {\n initVRouter();\n initVSiteBrandingBlock();\n initVPagetitleBlock();\n initVUserBlock();\n initVHeaderMenu();\n initVMainContent();\n initVSearchBlock();\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 _store.default.commit('Common/setPagetitle', to.name != 'home' ? to.name : null); // 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(/^\\//, '').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); // trigger router\n\n\n next();\n });\n }\n\n function initVSiteBrandingBlock() {\n _v_sitebranding_block = new _vue.default({\n store: _store.default,\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 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\n switch (mount_point) {\n case 'block-userlogin':\n var $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 // 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 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 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 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 init();\n }; // end MaterioTheme()\n\n\n var materiotheme = new MaterioTheme();\n})(Drupal, drupalSettings);\n\n//# sourceURL=webpack:///./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 _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 _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 _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.esm.js\");\n\n__webpack_require__(/*! theme/assets/styles/main.scss */ \"./web/themes/custom/materiotheme/assets/styles/main.scss\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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});\n\n(function (Drupal, drupalSettings) {\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;\n\n var _is_front = drupalSettings.path.isFront;\n console.log('drupalSettings', drupalSettings); // ___ _ _\n // |_ _|_ _ (_) |_\n // | || ' \\| | _|\n // |___|_||_|_|\\__|\n\n function init() {\n console.log(\"MaterioTheme init()\");\n initVues();\n }\n\n function initVues() {\n initVRouter();\n initVSiteBrandingBlock();\n initVPagetitleBlock();\n initVUserBlock();\n initVHeaderMenu();\n initVMainContent();\n initVSearchBlock();\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(/^\\//, '').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); // trigger router\n\n\n next();\n });\n }\n\n function initVSiteBrandingBlock() {\n _v_sitebranding_block = new _vue.default({\n store: _store.default,\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 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\n switch (mount_point) {\n case 'block-userlogin':\n var $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 // 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 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 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 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 init();\n }; // end MaterioTheme()\n\n\n var materiotheme = new MaterioTheme();\n})(Drupal, drupalSettings);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/assets/scripts/main.js?"); /***/ }), @@ -1427,7 +1427,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n items: [],\n page: 0,\n // infinteState will come from vue-infinite-loading plugin\n // implemented in vuejs/components/Content/Base.vue\n infiniteLoadingState: null\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setItems: function setItems(state, items) {\n state.items = state.items.concat(items);\n },\n incrementPage: function incrementPage(state) {\n state.page += 1;\n },\n setInfiniteState: function setInfiniteState(state, infiniteLoadingstate) {\n state.infiniteLoadingState = infiniteLoadingstate;\n }\n },\n // actions\n actions: {\n getItems: function getItems(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n\n _restAxios.REST.get(\"/blabla_rest?_format=json&page=\".concat(state.page), {}).then(function (_ref2) {\n var data = _ref2.data;\n console.log('blabla REST: data', data);\n\n if (data.length) {\n commit('setItems', data); // console.log('items.length', this.items.length);\n\n if (state.infiniteLoadingState) state.infiniteLoadingState.loaded();\n } else {\n if (state.infiniteLoadingState) state.infiniteLoadingState.complete();\n }\n }).catch(function (error) {\n console.warn('Issue with blabla', error);\n Promise.reject(error);\n });\n },\n nextPage: function nextPage(_ref3, $infiniteLoadingstate) {\n var dispatch = _ref3.dispatch,\n commit = _ref3.commit,\n state = _ref3.state;\n console.log(\"blabla nextPage\", $infiniteLoadingstate);\n commit('incrementPage');\n commit('setInfiniteState', $infiniteLoadingstate);\n dispatch('getItems');\n },\n getItemIndex: function getItemIndex(_ref4, uuid) {\n var dispatch = _ref4.dispatch,\n commit = _ref4.commit,\n state = _ref4.state;\n return state.items.findIndex(function (e) {\n return e.uuid == uuid;\n });\n },\n getPrevNextItems: function getPrevNextItems(_ref5, index) {\n var dispatch = _ref5.dispatch,\n commit = _ref5.commit,\n state = _ref5.state;\n return {\n prev: state.items[index - 1],\n next: state.items[index + 1]\n };\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/blabla.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n contenttype: null,\n items: [],\n page: 0,\n // infinteState will come from vue-infinite-loading plugin\n // implemented in vuejs/components/Content/Base.vue\n infiniteLoadingState: null\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setItems: function setItems(state, items) {\n state.items = state.items.concat(items);\n },\n incrementPage: function incrementPage(state) {\n state.page += 1;\n },\n setInfiniteState: function setInfiniteState(state, infiniteLoadingstate) {\n state.infiniteLoadingState = infiniteLoadingstate;\n }\n },\n // actions\n actions: {\n getItems: function getItems(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n // if(!state.contenttype){\n // REST.get('/entity/node_type/article?_format=json', {})\n // .then(({ data }) => {\n // console.log('blabla REST contenttype : data', data);\n // })\n // .catch(( error ) => {\n // console.warn('Issue with blabla contenttype', error)\n // Promise.reject(error)\n // })\n // }\n return _restAxios.REST.get(\"/blabla_rest?_format=json&page=\".concat(state.page), {}).then(function (_ref2) {\n var data = _ref2.data;\n console.log('blabla REST: data', data);\n\n if (data.length) {\n commit('setItems', data); // console.log('items.length', this.items.length);\n\n if (state.infiniteLoadingState) state.infiniteLoadingState.loaded();\n } else {\n if (state.infiniteLoadingState) state.infiniteLoadingState.complete();\n }\n }).catch(function (error) {\n console.warn('Issue with blabla getitems', error);\n Promise.reject(error);\n });\n },\n nextPage: function nextPage(_ref3, $infiniteLoadingstate) {\n var dispatch = _ref3.dispatch,\n commit = _ref3.commit,\n state = _ref3.state;\n console.log(\"blabla nextPage\", $infiniteLoadingstate);\n commit('incrementPage');\n commit('setInfiniteState', $infiniteLoadingstate);\n dispatch('getItems');\n },\n getItemIndex: function getItemIndex(_ref4, uuid) {\n var dispatch = _ref4.dispatch,\n commit = _ref4.commit,\n state = _ref4.state;\n return state.items.findIndex(function (e) {\n return e.uuid == uuid;\n });\n },\n getPrevNextItems: function getPrevNextItems(_ref5, index) {\n var dispatch = _ref5.dispatch,\n commit = _ref5.commit,\n state = _ref5.state;\n return {\n prev: state.items[index - 1],\n next: state.items[index + 1]\n };\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/blabla.js?"); /***/ }), @@ -1439,7 +1439,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n pagetitle: null\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setPagetitle: function setPagetitle(state, title) {\n // console.log('Common, setPagetitle', title);\n state.pagetitle = title;\n }\n },\n // actions\n actions: {}\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/common.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n pagetitle: null\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setPagetitle: function setPagetitle(state, title) {\n console.log('Common, setPagetitle', title);\n state.pagetitle = title;\n }\n },\n // actions\n actions: {}\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/common.js?"); /***/ }), @@ -1451,7 +1451,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n keys: \"\",\n term: \"\",\n uuids: [],\n items: [],\n offset: 0,\n limit: 15,\n infos: null,\n count: 0,\n // infinteState will come from vue-infinite-loading plugin\n // implemented in vuejs/components/Content/Base.vue\n infiniteLoadingState: null\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setUuids: function setUuids(state, uuids) {\n state.uuids = state.uuids.concat(uuids);\n },\n resetUuids: function resetUuids(state) {\n state.uuids = [];\n },\n setItems: function setItems(state, items) {\n state.items = state.items.concat(items);\n },\n resetItems: function resetItems(state) {\n state.items = [];\n },\n setKeys: function setKeys(state, keys) {\n state.keys = keys;\n },\n setTerm: function setTerm(state, term) {\n state.term = term;\n },\n setInfos: function setInfos(state, infos) {\n state.infos = infos;\n },\n setCount: function setCount(state, count) {\n state.count = count;\n },\n resetOffset: function resetOffset(state) {\n state.offset = 0;\n },\n incrementOffset: function incrementOffset(state) {\n state.offset += state.limit;\n },\n setInfiniteState: function setInfiniteState(state, infiniteLoadingstate) {\n state.infiniteLoadingState = infiniteLoadingstate;\n }\n },\n // actions\n actions: {\n newSearch: function newSearch(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n console.log('Search newSearch');\n commit('resetUuids');\n commit('resetItems');\n commit('resetOffset');\n this.commit('Common/setPagetitle', state.keys);\n dispatch('getResults');\n },\n nextPage: function nextPage(_ref2, $infiniteLoadingstate) {\n var dispatch = _ref2.dispatch,\n commit = _ref2.commit,\n state = _ref2.state;\n console.log(\"Search nextPage\", $infiniteLoadingstate);\n commit('incrementOffset');\n commit('setInfiniteState', $infiniteLoadingstate);\n dispatch('getResults');\n },\n getResults: function getResults(_ref3) {\n var dispatch = _ref3.dispatch,\n commit = _ref3.commit,\n state = _ref3.state;\n var params = {\n keys: state.keys,\n term: state.term,\n offset: state.offset,\n limit: state.limit // console.log('Search getResults params', params);\n\n };\n\n var q = _querystring.default.stringify(params);\n\n return _maAxios.MA.get(\"/materio_sapi/getresults?\" + q).then(function (_ref4) {\n var data = _ref4.data;\n console.log('search MA getresults data', data); // commit('setItems', data.items)\n\n commit('setInfos', data.infos);\n commit('setCount', data.count);\n commit('setUuids', data.uuids);\n dispatch('getItems', data.uuids);\n }).catch(function (error) {\n console.warn('Issue with getResults', error);\n Promise.reject(error);\n });\n },\n getItems: function getItems(_ref5, uuids) {\n var dispatch = _ref5.dispatch,\n commit = _ref5.commit,\n state = _ref5.state;\n var params = {\n // include: 'images', // no needs to include thanks to consumers_image_styles module\n 'filter[uuids-groupe][group][conjunction]': 'OR'\n };\n\n for (var i = 0; i < uuids.length; i++) {\n var uuid = uuids[i];\n params[\"filter[\".concat(uuid, \"][condition][path]\")] = 'id';\n params[\"filter[\".concat(uuid, \"][condition][value]\")] = uuid;\n params[\"filter[\".concat(uuid, \"][condition][operator]\")] = '=';\n params[\"filter[\".concat(uuid, \"][condition][memberOf]\")] = 'uuids-groupe';\n } // console.log('search JSONAPI params', params);\n\n\n var q = _querystring.default.stringify(params);\n\n return _jsonAxios.JSONAPI.get('node/materiau?' + q).then(function (_ref6) {\n var data = _ref6.data;\n console.log('search getItems data', data);\n dispatch('parseItems', {\n data: data.data,\n uuids: uuids\n }); // commit('setItems', data.items)\n }).catch(function (error) {\n console.warn('Issue with getItems', error);\n Promise.reject(error);\n });\n },\n parseItems: function parseItems(_ref7, _ref8) {\n var dispatch = _ref7.dispatch,\n commit = _ref7.commit,\n state = _ref7.state;\n var data = _ref8.data,\n uuids = _ref8.uuids;\n // data comes from jsonapi query\n // uuids comes from solr search query (we loop from uuids to conserve the search results order)\n console.log('search parseItems data, uuids', data, uuids);\n var items = []; // for (var i = 0; i < data.length; i++) {\n\n var _loop = function _loop() {\n var uuid = uuids[i]; // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array\n\n var item_index = data.findIndex(function (p) {\n return p.id == uuid;\n });\n var item_src = data[item_index];\n var attrs = item_src.attributes;\n var relations = item_src.relationships; // get field values\n\n var item = {\n uuid: uuid,\n title: attrs.title,\n description: attrs.field_short_description,\n body: attrs.body,\n reference: attrs.field_reference // get images included values\n\n };\n var img_src = relations.images.data;\n item.images = [];\n\n for (j = 0; j < img_src.length; j++) {\n item.images.push({\n title: img_src[j].meta.title,\n // meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module\n url: img_src[j].meta.imageDerivatives.links.card_medium.href\n });\n }\n\n items.push(item);\n };\n\n for (var i = 0; i < uuids.length; i++) {\n var j;\n\n _loop();\n }\n\n console.log('items', items);\n commit('setItems', items);\n\n if (state.infiniteLoadingState) {\n if (state.offset + state.limit > state.count) {\n console.log('Search infinite completed'); // tell to vue-infinite-loading plugin that there si no new page\n\n state.infiniteLoadingState.complete();\n } else {\n console.log('Search infinite loaded'); // tell to vue-infinite-loading plugin that newpage is loaded\n\n state.infiniteLoadingState.loaded();\n }\n }\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/search.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _maAxios = __webpack_require__(/*! vuejs/api/ma-axios */ \"./web/themes/custom/materiotheme/vuejs/api/ma-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n namespaced: true,\n // initial state\n state: {\n keys: \"\",\n term: \"\",\n uuids: [],\n items: [],\n offset: 0,\n limit: 15,\n infos: null,\n count: 0,\n // infinteState will come from vue-infinite-loading plugin\n // implemented in vuejs/components/Content/Base.vue\n infiniteLoadingState: null\n },\n // getters\n getters: {},\n // mutations\n mutations: {\n setUuids: function setUuids(state, uuids) {\n state.uuids = state.uuids.concat(uuids);\n },\n resetUuids: function resetUuids(state) {\n state.uuids = [];\n },\n setItems: function setItems(state, items) {\n state.items = state.items.concat(items);\n },\n resetItems: function resetItems(state) {\n state.items = [];\n },\n setKeys: function setKeys(state, keys) {\n state.keys = keys;\n },\n setTerm: function setTerm(state, term) {\n state.term = term;\n },\n setInfos: function setInfos(state, infos) {\n state.infos = infos;\n },\n setCount: function setCount(state, count) {\n state.count = count;\n },\n resetOffset: function resetOffset(state) {\n state.offset = 0;\n },\n incrementOffset: function incrementOffset(state) {\n state.offset += state.limit;\n },\n setInfiniteState: function setInfiniteState(state, infiniteLoadingstate) {\n state.infiniteLoadingState = infiniteLoadingstate;\n }\n },\n // actions\n actions: {\n newSearch: function newSearch(_ref) {\n var dispatch = _ref.dispatch,\n commit = _ref.commit,\n state = _ref.state;\n console.log('Search newSearch');\n commit('resetUuids');\n commit('resetItems');\n commit('resetOffset');\n this.commit('Common/setPagetitle', state.keys);\n dispatch('getResults');\n },\n nextPage: function nextPage(_ref2, $infiniteLoadingstate) {\n var dispatch = _ref2.dispatch,\n commit = _ref2.commit,\n state = _ref2.state;\n console.log(\"Search nextPage\", $infiniteLoadingstate);\n commit('incrementOffset');\n commit('setInfiniteState', $infiniteLoadingstate);\n dispatch('getResults');\n },\n getResults: function getResults(_ref3) {\n var dispatch = _ref3.dispatch,\n commit = _ref3.commit,\n state = _ref3.state;\n var params = {\n keys: state.keys,\n term: state.term,\n offset: state.offset,\n limit: state.limit // console.log('Search getResults params', params);\n\n };\n\n var q = _querystring.default.stringify(params);\n\n return _maAxios.MA.get(\"/materio_sapi/getresults?\" + q).then(function (_ref4) {\n var data = _ref4.data;\n console.log('search MA getresults data', data); // commit('setItems', data.items)\n\n commit('setInfos', data.infos);\n commit('setCount', data.count);\n commit('setUuids', data.uuids);\n dispatch('getItems', data.uuids);\n }).catch(function (error) {\n console.warn('Issue with getResults', error);\n Promise.reject(error);\n });\n },\n getItems: function getItems(_ref5, uuids) {\n var dispatch = _ref5.dispatch,\n commit = _ref5.commit,\n state = _ref5.state;\n var params = {\n // include: 'images', // no needs to include thanks to consumers_image_styles module\n 'filter[uuids-groupe][group][conjunction]': 'OR'\n };\n\n for (var i = 0; i < uuids.length; i++) {\n var uuid = uuids[i];\n params[\"filter[\".concat(uuid, \"][condition][path]\")] = 'id';\n params[\"filter[\".concat(uuid, \"][condition][value]\")] = uuid;\n params[\"filter[\".concat(uuid, \"][condition][operator]\")] = '=';\n params[\"filter[\".concat(uuid, \"][condition][memberOf]\")] = 'uuids-groupe';\n } // console.log('search JSONAPI params', params);\n\n\n var q = _querystring.default.stringify(params);\n\n return _jsonAxios.JSONAPI.get('node/materiau?' + q).then(function (_ref6) {\n var data = _ref6.data;\n console.log('search getItems data', data);\n dispatch('parseItems', {\n data: data.data,\n uuids: uuids\n }); // commit('setItems', data.items)\n }).catch(function (error) {\n console.warn('Issue with getItems', error);\n Promise.reject(error);\n });\n },\n parseItems: function parseItems(_ref7, _ref8) {\n var dispatch = _ref7.dispatch,\n commit = _ref7.commit,\n state = _ref7.state;\n var data = _ref8.data,\n uuids = _ref8.uuids;\n // data comes from jsonapi query\n // uuids comes from solr search query (we loop from uuids to conserve the search results order)\n console.log('search parseItems data, uuids', data, uuids);\n var items = []; // for (var i = 0; i < data.length; i++) {\n\n var _loop = function _loop() {\n var uuid = uuids[i]; // https://stackoverflow.com/questions/11258077/how-to-find-index-of-an-object-by-key-and-value-in-an-javascript-array\n\n var item_index = data.findIndex(function (p) {\n return p.id == uuid;\n });\n var item_src = data[item_index];\n var attrs = item_src.attributes;\n var relations = item_src.relationships; // get field values\n\n var item = {\n uuid: uuid,\n title: attrs.title,\n field_short_description: attrs.field_short_description,\n body: attrs.body,\n field_reference: attrs.field_reference // get images included values\n\n };\n var img_src = relations.images.data;\n item.images = [];\n\n for (j = 0; j < img_src.length; j++) {\n item.images.push({\n title: img_src[j].meta.title,\n // meta.imageDerivatives.style.href link is provided by drupal consumers_image_styles module\n url: img_src[j].meta.imageDerivatives.links.card_medium.href\n });\n }\n\n items.push(item);\n };\n\n for (var i = 0; i < uuids.length; i++) {\n var j;\n\n _loop();\n }\n\n console.log('items', items);\n commit('setItems', items);\n\n if (state.infiniteLoadingState) {\n if (state.offset + state.limit > state.count) {\n console.log('Search infinite completed'); // tell to vue-infinite-loading plugin that there si no new page\n\n state.infiniteLoadingState.complete();\n } else {\n console.log('Search infinite loaded'); // tell to vue-infinite-loading plugin that newpage is loaded\n\n state.infiniteLoadingState.loaded();\n }\n }\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/store/modules/search.js?"); /***/ }), diff --git a/web/themes/custom/materiotheme/assets/scripts/main.js b/web/themes/custom/materiotheme/assets/scripts/main.js index 706a9de..7915a78 100644 --- a/web/themes/custom/materiotheme/assets/scripts/main.js +++ b/web/themes/custom/materiotheme/assets/scripts/main.js @@ -59,7 +59,20 @@ import 'theme/assets/styles/main.scss' router.beforeEach((to, from, next) => { // console.log('router beforeEach to ', to); // commit new title to store - store.commit('Common/setPagetitle', to.name != 'home' ? to.name : null) + let title = null; + switch (to.name) { + case 'home': + title = null + break; + case 'article': + title = false + break; + default: + title = to.name + } + if (title !== false) { + store.commit('Common/setPagetitle', title) + } // remove all path related body classes let body_classes = document.querySelector('body').classList; diff --git a/web/themes/custom/materiotheme/assets/styles/base/_reset.scss b/web/themes/custom/materiotheme/assets/styles/base/_reset.scss index 8e7f2de..1052a7a 100644 --- a/web/themes/custom/materiotheme/assets/styles/base/_reset.scss +++ b/web/themes/custom/materiotheme/assets/styles/base/_reset.scss @@ -8,3 +8,28 @@ a{ } a, a:focus, a:active { outline: none; } a:focus{ -moz-outline-style: none; } + +ul{ + margin:0; + padding:0; + li{ + margin:0; + padding:0; + list-style: none; + } +} + +h1,h2,h3,h4,h5,h6{ + margin:0; +} + +p a{ + position: relative; + &:after{ + content:''; + position: absolute; + top:1em; left:0; + width:100%; + border-bottom: 1px dotted #000; + } +} diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 5fa4c65..a1e300e 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -209,8 +209,6 @@ header[role="banner"]{ text-transform: capitalize; font-weight: 300; - - body:not(.path-home) & { padding:0.5em 1em; } @@ -229,7 +227,6 @@ header[role="banner"]{ } } - #block-materiosapisearchblock{ float:right; display:inline-block; @@ -499,34 +496,6 @@ article.node--type-frontpage{ } - - // ___ _ - // / __| |_ _____ __ ___ _ ___ ___ _ __ ___ - // \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-< - // |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/ -#showrooms{ - width: calc(100% + #{$column_goutiere}); - article.showroom{ - width: $column_width * 2 + $column_goutiere; - display: inline-block; - vertical-align: top; - margin: 0 $column_goutiere $column_goutiere 0; - - h1{ - margin:0; - font-weight: 4; - } - p{ margin:0; } - figure{ - margin:0; - img{ - max-width: 100%; - } - } - } - -} - // ___ _ // / __|__ _ _ _ __| |___ // | (__/ _` | '_/ _` (_-< @@ -572,6 +541,10 @@ article.card{ // } // focused // box-shadow: 0 0 7px rgba(0,0,0,0.9); + // &.article{ + // width: $column_width * 2 + $column_goutiere; + // + // } header{ position: absolute; bottom:0; @@ -585,7 +558,7 @@ article.card{ h1{ font-size: 1.3em; font-weight: 700; - line-height: 0.8; + line-height: 0.85; margin-bottom: 0.2em; } h4{ @@ -622,3 +595,125 @@ article.card{ } } } + + + + // ___ _ _ _ + // | _ ) |__ _| |__| |__ _ + // | _ \ / _` | '_ \ / _` | + // |___/_\__,_|_.__/_\__,_| +#blabla{ + +} + +#main-content > article.article{ + section.taxonomy{ + ul{ + margin:1em 0 0; + } + li{ + display:inline-block; + padding:0 0.5em 0 0; + } + } + section.visuels{ + width:calc(100% + #{$column_goutiere}); + figure{ + display: inline-block; + vertical-align: top; + width:$column_width; + margin:0 $column_goutiere 0 0; + img{ + width:100%; + } + } + } + aside.linked-materials{ + ul{ + width:calc(100% + #{$column_goutiere}); + li{ + display: inline-block; + vertical-align: top; + width:$column_width; + margin:0 $column_goutiere 0 0; + } + } + h3.field__label{ + font-size: 1em; + font-weight: 500; + margin: 2em 0 1em 0; + } + h1.title{ + font-size: 1em; + font-weight: 400; + } + h3.ref{ + font-size: 0.756em; + font-weight: 600; + } + h2.description{ + font-size: 0.756em; + font-weight: 400; + } + } + nav.prevnext{ + &.bottom{ + margin:2em 0; + } + ul{ + padding:0; + margin:0; + display: grid; + grid-template-columns: 1fr 1fr; + } + li{ + padding:0; + margin:0; + list-style: none; + a{ + font-size: 0.756em; + font-weight: 700; + } + &:nth-child(1){ + grid-column: 1; + a:before{ + content:'< '; + } + } + &:nth-child(2){ + grid-column: 2; + text-align: right; + a:after{ + content:' >'; + } + } + } + } +} + + // ___ _ + // / __| |_ _____ __ ___ _ ___ ___ _ __ ___ + // \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-< + // |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/ +#showrooms{ + width: calc(100% + #{$column_goutiere}); + article.showroom{ + width: $column_width * 2 + $column_goutiere; + display: inline-block; + vertical-align: top; + margin: 0 $column_goutiere $column_goutiere 0; + + h1{ + margin:0; + font-weight: 4; + } + p{ margin:0; } + figure{ + margin:0; + img{ + max-width: 100%; + } + } + } + +} diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue b/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue index 6e30f57..9610491 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue @@ -2,8 +2,8 @@

{{ item.title }}

-

{{ item.description }}

- {{ item.reference }} +

{{ item.field_short_description }}

+ {{ item.field_reference }}
-
+
Loading ...
+
+
@@ -49,46 +51,77 @@ />
- +
+ +